Semantische Webseiten XHTML semantische Auszeichnung

Ein weiterer wichtiger Aspekt bei der Trennung von Struktur und Präsentation ist die Verwendung semantischer Markierungen zur Strukturierung des Dokumentinhalts. Das Vorhandensein eines XHTML-Elements impliziert, dass der Inhalt des markierten Teils eine strukturelle Bedeutung hat und es keinen Grund gibt, andere Tags zu verwenden. Mit anderen Worten: Lassen Sie nicht zu, dass ein HTML-Element durch CSS wie ein anderes HTML-Element aussieht, z. B. durch die Verwendung eines <div>-Tags anstelle eines <p>-Tags für eine Überschrift.

Lassen Sie uns zunächst über den Unterschied zwischen Semantik und Standardstile sprechen. Standardstile sind die Ausdrücke einiger allgemeiner Tags, die vom Browser festgelegt werden. Ich denke, ihr Hauptzweck besteht darin, jedem den Zweck und die Funktion von Tags (Markup) und Attributen (Attribut) intuitiv verständlich zu machen. Offensichtlich sieht die Hx-Reihe wie ein Titel aus, da sie fett und in größerer Schriftgröße ist. <strong>,<em> werden zur Unterscheidung von anderen Wörtern verwendet und dienen der Hervorhebung. Bei Listen und Tabellen ist ihre Funktion offensichtlich.

Zweitens ist der wichtigste Vorteil semantischer Webseiten, dass sie suchmaschinenfreundlich sind. Mit einer guten Struktur und Semantik wird der Inhalt Ihrer Webseite natürlich leicht von Suchmaschinen erfasst und Sie können viel Aufwand bei der Werbung für Ihre Website sparen.

Die spezifische Semantik und Verwendung werden in der XHTML1.0-TAG-Referenz erläutert. Hier ergänzen wir einige Tags und Attribute, die leicht vergessen oder verwechselt werden können.

<Hx>

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> werden als Titel verwendet und ihre Bedeutung nimmt ab. <h1> ist die höchste Ebene.
Zum Beispiel:

Inhalt in die Zwischenablage kopieren

Code:

<h1>文檔標題</h1>
 <h2>次級標題</h2>

Anstatt
<div class="title">Dokumenttitel</div> oder <span class="title">Dokumenttitel</span>. Suchmaschinen betrachten Letzteres offensichtlich nicht als Titel.

<p>

Absatz-Tags. Da Sie wissen, dass <p> ein Absatz ist, werden Sie <br/> nicht mehr zum Zeilenumbruch verwenden und <br/><br/> nicht mehr zur Unterscheidung zwischen Absätzen benötigen. Der Text in <p></p> wird automatisch umbrochen und der Umbrucheffekt ist besser als bei <br>. Auch der Abstand zwischen den Absätzen lässt sich mit CSS steuern, sodass Absätze leicht und deutlich voneinander abgegrenzt werden können. Es wäre perfekt, wenn wir den Abstand zwischen Zeilen einfach über die Zeilenhöhe festlegen und dann Effekte wie den Abstand des ersten Buchstabens definieren könnten.
Zum Beispiel:

Inhalt in die Zwischenablage kopieren

Code:

<p>藍色理想www.blueidea.com 誕生于1999年的10月。從成立之初，藍色理想就以建設網站設計與開發人員之家為宗旨，以介紹網絡開發技術與網站創作設計交流為主要內容。其網站內容制作精良，每天都會有會員精心制作的教程發布，無私地對網友進行幫助，而且還舉辦過不少設計比賽并開發了很多目前仍被許多網站應用的相關程序。而所發布的作品與點評受到了多家媒體關注及行家的好評，同時也從中確立了自己的社會地位，于是一批又一批的網絡同仁加盟了藍色理想，成為國內最大的設計類站點之一。
 </p>
 <p>多年來，藍色理想的內容不斷充實，先后被國內一些知名網站、傳統媒體重點推介過，并陸續被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站點收藏，并在Google、百度、Yahoo三大搜索引擎中以簡體漢字關鍵詞"網站設計與開發”搜索排名均為第一，現在藍色理想已發展成為國內影響最大的網站設計、開發的專業網站之一。</p>

<ul>, <ol>, <li>

<ul> ungeordnete Listen sind sehr gebräuchlich und werden häufig verwendet, und <ol> geordnete Listen werden ebenfalls sehr häufig verwendet. Im Zuge der Webstandardisierung wird <ul> auch häufiger für Navigationsleisten verwendet. Die Navigationsleiste ist ursprünglich eine Liste, daher ist dies völlig richtig. Wenn Ihr Browser kein CSS unterstützt, funktioniert der Navigationslink zwar immer noch gut, die Ästhetik ist jedoch etwas schlechter.
Zum Beispiel:

Inhalt in die Zwischenablage kopieren

Code:

<ul>
 <li>項目一</li>
 <li>項目二</li>
 <li>項目三</li>
 </ul>

Inhalt in die Zwischenablage kopieren

Code:

<ol>
 <li>第一章</li>
 <li>第二章</li>
 <li>第三章</li>
 </ol>

<dl>, <dt>, <dd>

dl steht für „Definition List“. Beispielsweise kann eine solche Liste zur Erklärung und Definition von Wörtern in einem Wörterbuch verwendet werden.
Zum Beispiel:

Inhalt in die Zwischenablage kopieren

Code:

<dl>
 <dt>Dog</dt>
 <dd>A carnivorous mammal of the family Canidae.</dd>
 </dl>

Inhalt in die Zwischenablage kopieren

Code:

<dl>
 <dt>上海灘</dt>
 <dd>這部拍攝于1980年的《上海灘》堪稱是香港電視史上最成功、最經典的劇集。
當年在香港播出以后，產生了巨大的轟動效應。</dd>
 <dt>周潤發</dt>
 <dd>和所有偉大的影星一樣，周潤發印證了一個時代，一個香港電影的黃金時代。
風衣墨鏡、冷血雙槍、陽光微笑，都封存膠片之中，當我們回首尋望的時候，發哥已被刻為一個時代的坐標。</dd>
 </dl>

<cite>, zitieren, <q>, <blockquote>

Das Zitieren anderer wird häufig in Foren und Blogs verwendet. Verwenden Sie <q>, um kurze einzeilige Zitate zu markieren. Webbrowser erkennen den Inhalt zwischen <q> automatisch. Leider versteht der Internet Explorer dies nicht und manchmal kann <q> zu Zugänglichkeitsproblemen führen. Aus diesem Grund empfehlen manche, die Verwendung von <q> möglichst zu vermeiden und Anführungszeichen manuell einzufügen. Indem Sie den einzeiligen Zitatinhalt in ein <span> mit der entsprechenden Klasse einschließen, können Sie das Zitat mit CSS formatieren, was jedoch keine semantische Bedeutung hat. Sie können „The Q tag“ von Mark Pilgrim (http://diveintomark.org/archives/2002/05/04/the_q_tag) lesen, um seine Gedanken zum Umgang mit <q>-bezogenen Problemen zu erfahren.
Für lange Zitate mit einem oder mehreren Absätzen sollten Sie <blockquote> verwenden. Mittels CSS lässt sich der Stil der Referenz definieren. Beachten Sie, dass ein Absatz nicht direkt in ein <blockquote> eingefügt werden kann; der zitierte Inhalt muss auch in einem Element enthalten sein, normalerweise <p>. Das Attribut cite kann mit <q> oder <blockquote> verwendet werden, um die Quellenadresse des zitierten Inhalts anzugeben. Beachten Sie: Wenn Sie zum Markieren des Zitatinhalts <span> anstelle von <q> verwenden, können Sie das „Cite“-Attribut nicht verwenden.

Zum Beispiel:

Inhalt in die Zwischenablage kopieren

Code:

<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.

Inhalt in die Zwischenablage kopieren

Code:

<p> <cite>孔子</cite>曰：<q>學而不思則罔，思而不學則殆</q>.</p>

Inhalt in die Zwischenablage kopieren

Code:

<p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/
 struct/text.html#h-9.2.1">The presentation of phrase elements
 depends on the user agent.</q>.</p>

Inhalt in die Zwischenablage kopieren

Code:

<blockquote cite="http://www.w3cn.org/">
 <p>“我們大部分人都有深刻體驗，每當主流瀏覽器版本的升級，我們剛建立的網站就可能變得過時，
我們就需要升級或者重新建造一遍網站。例如1996-1999年典型的"瀏覽器大戰"，
為了兼容Netscape 和IE，網站不得不為這兩種瀏覽器寫不同的代碼。同樣的，
每當新的網絡技術和交互設備的出現，我們也需要制作一個新版本來支持這種新技術或新設備，
例如支持手機上網的WAP 技術。類似的問題舉不勝舉：網站代碼臃腫、繁雜浪費了我們大量的帶寬；
針對某種瀏覽器的DHTML 特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無法瀏覽網站等等。
這是一種惡性循環，是一種巨大的浪費。”</p>
 </blockquote>

<em>, <strong>

<em> wird zur Hervorhebung verwendet und <strong> zur starken Hervorhebung. Die meisten Browser stellen hervorgehobene Inhalte kursiv und stark hervorgehobene Inhalte fett dar. Dies ist allerdings nicht notwendig. Wenn Sie bestimmen möchten, wie hervorgehobene Inhalte dargestellt werden, können Sie deren Darstellung am besten über CSS festlegen. Verwenden Sie keine Hervorhebungen, wenn Sie nur einen visuellen Effekt erzielen möchten. Und wenn Sie etwas hervorheben möchten, aber dennoch der Meinung sind, dass Fettdruck oder Kursivschrift keine gute visuelle Wirkung haben, insbesondere Kursivschrift für Chinesisch, dann können Sie einige andere, auffälligere Stile definieren, um den Effekt der Hervorhebung zu erzielen.
Zum Beispiel:

Inhalt in die Zwischenablage kopieren

Code:

<p><em>強調</em> 的文本通常用斜體顯示，
然而， <strong>特別強調</strong> 的文本通常以粗體顯示。</p>

<table>, <td>, <th>, <caption>, Zusammenfassung

Tabellen in XHTML sollten nicht für das Layout verwendet werden. Wenn der Zweck jedoch darin besteht, Listendaten zu beschriften, sollte eine Tabelle verwendet werden. <th> ist der Tabellentitel, das Attribut summar ist die Zusammenfassung, das Tag <caption> ist die Kopfzeilenbeschreibung, das Tag <thead> ist die Tabellenkopfzeile, das Tag <tbody> ist der Inhalt des Tabellentexts und das Tag <tfoot> ist die Tabellenfußzeile.
Sie können den Gültigkeitsbereich auch verwenden, um das Header-Attribut zu ersetzen und so die Zellen zu markieren, die Header-Informationen enthalten. Die Werte lauten wie folgt:
Zeile gibt die aktuelle Zelle an und stellt relevante Kopfzeileninformationen für die Zeile bereit, die die aktuelle Zelle enthält.
col gibt die aktuelle Zelle an und stellt entsprechende Kopfzeileninformationen für die durch die aktuelle Zelle angegebene Spalte bereit.
Die Zeilengruppe gibt die aktuelle Zelle an und stellt relevante Kopfzeileninformationen für die verbleibenden Zeilengruppen bereit, die die aktuelle Zelle enthalten.
colgroup gibt die aktuelle Zelle an und stellt entsprechende Kopfzeileninformationen für die verbleibenden, durch die aktuelle Zelle angegebenen Spaltengruppen bereit.
abbr wird verwendet, um den Abkürzungsnamen in der Kopfzelle zu definieren. Wenn dieses Attribut nicht definiert ist, wird der Zelleninhalt standardmäßig abgekürzt.
Zum Beispiel:

Inhalt in die Zwischenablage kopieren

Code:

<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
 <caption>Table 1: Power Mac G5 tech specs </caption>
 <tr>
 <th scope="col" abbr="Configurations" class="nobg">Configurations</th>
 <th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
 <th scope="col" abbr="Dual 2">Dual 2GHz</th>
 <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
 </tr>
 <tr>
 <th scope="row" abbr="Model" class="spec">Model</th>
 <td>M9454LL/A</td>
 <td>M9455LL/A</td>
 <td>M9457LL/A</td>
 </tr>
 <tr>
 <th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th>
 <td class="alt">Dual 1.8GHz PowerPC G5</td>
 <td class="alt">Dual 2GHz PowerPC G5</td>
 <td class="alt">Dual 2.5GHz PowerPC G5</td>
 </tr>
 <tr>
 <th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th>
 <td>900MHz per processor</td>
 <td>1GHz per processor</td>
 <td>1.25GHz per processor</td>
 </tr>
 <tr>
 <th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>
 <td class="alt">512K per processor</td>
 <td class="alt">512K per processor</td>
 <td class="alt">512K per processor</td>
 </tr>
 </table>

Effektansicht: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm

<dfn>

Inhalt in die Zwischenablage kopieren

Code:

<p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p>

<Einfg>, <Entf>

Da Sie nun del kennen, verwenden Sie <s> nicht mehr zum Durchstreichen. Die Verwendung von del ist offensichtlich semantischer. Und „del“ enthält außerdem „cite“ und „datetime“, um den Grund und die Uhrzeit der Löschung anzugeben. „ins“ bedeutet „Einfügen“ und hat auch solche Attribute.
Zum Beispiel:

Inhalt in die Zwischenablage kopieren

Code:

<p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p>

<Code>

Die Darstellung ist Computercode. Der Standardstil ist Tippen. Häufig in technischen Foren und Blogs anzutreffen.
Zum Beispiel:

Inhalt in die Zwischenablage kopieren

Code:

<code>p{margin:2px 0;}</code>

<Abkürzung>, <Akronym>

Das Tag <abbr> wird verwendet, um die Abkürzung auf der Webseite darzustellen, und das Tag <acronym> wird verwendet, um die Abkürzung des Namens darzustellen. (Hinweis: Hier diskutieren wir Abkürzungen und Abkürzungen getrennt. Der Umfang von Abkürzungen ist größer als der von Abkürzungen. Die Abkürzungen mit den Anfangsbuchstaben verwenden das Tag <acronym>.) Windows-Browser unter IE6.0 unterstützen das Tag <abbr> derzeit nicht. Im Internet Explorer können Sie CSS auf <acronym>-Tags, aber nicht auf <abbr>-Tags anwenden.
Der Internet Explorer zeigt einen Hinweis für das Titelattribut des <acronym>-Tags an, ignoriert jedoch das <abbr>-Tag.
Die Lösung ist: http://www.w3cn.org/article/translate/2005/115.html
Zum Beispiel:

Inhalt in die Zwischenablage kopieren

Code:

<abbr title="Cascading Style Sheets">CSS</abbr>

Inhalt in die Zwischenablage kopieren

Code:

<acronym title="Cascading Style Sheets">CSS</acronym >

Alt-Attribut und Titel-Attribut

Das Titelattribut wird verwendet, um zusätzliche beschreibende Informationen für ein Element bereitzustellen. Das Titelattribut kann in allen Tags außer base, basefont, head, html, meta, param, script und title verwendet werden. Aber das ist nicht nötig.
Das Alt-Attribut gibt alternativen Text für Benutzeragenten (UAs) an, die keine Bilder, Formulare oder Applets anzeigen können. Die Sprache des Ersetzungstextes wird durch das Attribut „lang“ angegeben.

Inhalt in die Zwischenablage kopieren

Code:

<img src="/img/common/logo.gif" width="90" height="27" alt="bluediea.com">

Inhalt in die Zwischenablage kopieren

Code:

<a href="http://www.jluvip.com/blog/article.asp?id=260" title="js獲取單選按鈕的數據">js獲取單選按鈕的數據</a>

Quellen:
Standardstil:
http://www.w3cn.org/article/tips/2005/116.html
http://www.w3.org/TR/CSS21/sample.html
Semantik:
http://www.456bereastreet.com/lab/developing_with_web_standards/en
http://www.456bereastreet.com/lab/developing_with_web_standards
http://www.w3cn.org/article/translate/2005/114.html
http://www.w3cn.org/article/translate/2005/114.html
http://www.junchenwu.com/2005/11/html_tags.html
http://brainstormsandraves.com/articles/semantics/structure/
http://www.w3.org/TR/html401/struct/text.htm
http://www.simplebits.com/bits/simplequiz/

Ressourcen-Links:
Schlechte Tags:
http://www.htmldog.com/guides/htmlintermediate/badtags/
Das Q-Tag
http://diveintomark.org/archives/2002/05/04/the_q_tag
HTML, XHTML, Semantik und die Zukunft des Webs
http://www.westciv.com/style_master/house/good_oil/xhtml/index.html

<<: CSS-Leistungsoptimierung - detaillierte Erklärung der Will-Change-Verwendung

>>: Docker löscht private Bibliotheksbilder vollständig