Kennen Sie diese acht HTML5 -Tags?

Webentwickler verwenden während der Website -Konstruktion zahlreiche HTML -Tags. Während viele mit gemeinsamen HTML5-Tags wie <code><p></p> , <h1></h1> und <div> vertraut sind, bieten einige weniger bekannte Tags erhebliche Vorteile. In diesem Artikel werden acht solcher Tags untersucht, ihre W3C -Spezifikationen untersucht und praktische Beispiele bereitgestellt. <p> <strong> HTML5 -Tag -Verwendung </strong> </p> verstehen <p> W3C -Spezifikationen bieten konzeptionelle Übersichten, aber die praktische Anwendung kann eine Herausforderung sein. Gute Praxis ist nicht immer streng definiert. Dieser Artikel bietet empfohlene Nutzungsbeispiele. </p> <p> <strong> Key Takeaways </strong> </p> <ul> <li> Verwenden Sie <code><mark></mark>, um den für die Benutzeraktivität relevanten Text hervorzuheben und die Sichtbarkeit zu verbessern.

für weniger wichtige Text einsetzen, wobei die visuelle Wirkung minimiert wird. <small></small>

Verwenden Sie

für kurze Inline -Zitate und <q></q> für längere Auszüge, wobei die semantische Genauigkeit beibehalten wird. <blockquote></blockquote>

implementieren

organisieren <ins></ins> Optionen mit <del></del>, um Auswahlmöglichkeiten zu kategorisieren und die Benutzererfahrung zu verbessern. <s></s>

<select></select> 1. Kontextbeschwerde mit <optgroup></optgroup>

Das Tag bedeutet "Relevanz" oder "Prüfung". Relevanz ist kontextabhängig; Elemente sind relevant, wenn sie während einer bestimmten Aktivität nützlich sind. Beispielsweise könnten Suchergebnisse mit <mark></mark> gekennzeichnet werden, um die Relevanz für die Suchabfrage anzuzeigen.

Praktisches Beispiel: <mark></mark> Auf einer Seite "billigste Ferienpakete" können die Preise der günstigsten Pakete mit <mark></mark>:

hervorgehoben werden

Best Practices: <mark></mark>

sollte nicht nur zum Styling verwendet werden; Verwenden Sie dafür CSS. Verwenden Sie es nicht, um die Bedeutung zu bezeichnen (verwenden Sie <pre class='brush:php;toolbar:false;'>&lt;div class=&quot;deal-list&quot;&gt; &lt;div&gt; &lt;h2 id=&quot;Vanuatu-Cruise&quot;&gt;Vanuatu Cruise&lt;/h2&gt; &lt;p&gt;&lt;mark&gt;9&lt;/mark&gt; - 5 Nights&lt;/p&gt; &lt;p&gt;A relaxing cruise...&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;h2 id=&quot;Fiji-Resort-Getaway&quot;&gt;Fiji Resort Getaway&lt;/h2&gt; &lt;p&gt;&lt;mark&gt;9&lt;/mark&gt; - 6 Nights&lt;/p&gt; &lt;p&gt;Includes all you can eat buffet...&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;h2 id=&quot;Pacific-Island-Hiking&quot;&gt;Pacific Island Hiking&lt;/h2&gt; &lt;p&gt;99 - 5 Nights&lt;/p&gt; &lt;p&gt;Hike your way...&lt;/p&gt; &lt;/div&gt; &lt;/div&gt;</pre> oder

dafür). Verwenden Sie , um die Relevanz der aktuellen Benutzeraktion hervorzuheben. <mark></mark> <strong></strong> 2. Niedrigere Bedeutung mit <em></em> <mark></mark>

reduziert die Textgröße, ein visuelles Nebenprodukt seiner semantischen Bedeutung: die geringere Bedeutung. Verwenden Sie es für weniger kritische Informationen, die häufig in Fußzeilen oder Seitenleisten zu finden sind. <small></small>

Praktisches Beispiel:

In einer Fußzeile: <small></small>

oder in einer Produktliste:

<small>Designed and developed by Simon Codrington. © 2016 My Company - All rights reserved</small>

Best Practices:

kann die Bedeutung des bereits mit <pre class='brush:php;toolbar:false;'>&lt;h3 id=&quot;Woolen-Llama-Print-Jumper&quot;&gt;Woolen Llama Print Jumper&lt;/h3&gt; &lt;em&gt;.99&lt;/em&gt;&lt;small&gt; - Excludes tax&lt;/small&gt;</pre> oder

hervorgehobenen Textes nicht senken. Verwenden Sie es nicht nur für die Größenregelung. <small></small> 3. Zitate mit <strong></strong> und <em></em>

Verwenden Sie <q></q> für kurze Inline -Zitate und <blockquote></blockquote> für längere Blockzitate. Diese sind für Zitate und nicht für das Styling (verwenden Sie <span></span> dafür).

Praktisches Beispiel:

<q>He hasn't eaten anything as good in his whole life!</q>

<div class="deal-list">
  <div>
    <h2 id="Vanuatu-Cruise">Vanuatu Cruise</h2>
    <p><mark>9</mark> - 5 Nights</p>
    <p>A relaxing cruise...</p>
  </div>
  <div>
    <h2 id="Fiji-Resort-Getaway">Fiji Resort Getaway</h2>
    <p><mark>9</mark> - 6 Nights</p>
    <p>Includes all you can eat buffet...</p>
  </div>
  <div>
    <h2 id="Pacific-Island-Hiking">Pacific Island Hiking</h2>
    <p>99 - 5 Nights</p>
    <p>Hike your way...</p>
  </div>
</div>

Best Practices: Beide Unterstützung cite Attribute (URL der Quelle) und <cite></cite> Tags (Quellentitel).

4. Einfügung, Löschen und Korrektur mit <ins></ins>, <del></del> und <s></s>

<ins></ins> Markierungen hinzugefügt Text, <del></del> Text entfernt und <s></s> Text nicht mehr korrekt. Alle Unterstützung cite und datetime Attribute für den Kontext.

Praktisches Beispiel:

<small>Designed and developed by Simon Codrington. © 2016 My Company - All rights reserved</small>

Best Practices: Verwenden Sie <s></s> für Korrekturen, bei denen das Original ersetzt wird. Verwenden Sie diese nicht nur zum Styling.

5. Organisierende Optionen mit <optgroup></optgroup>

<optgroup></optgroup> kategorisiert Optionen in <select></select> Elemente und verbessert die Navigation. Es hat label und disabled Attribute.

Praktisches Beispiel:

<h3 id="Woolen-Llama-Print-Jumper">Woolen Llama Print Jumper</h3>
<em>.99</em><small> - Excludes tax</small>

Best Practices: <optgroup></optgroup> selbst kann nicht direkt ausgewählt oder gestylt werden.

6. Vordefinierte Optionen mit <datalist></datalist>

<datalist></datalist> definiert gültige Auswahlmöglichkeiten für <input> Tags und liefert eine Dropdown -Vorschlag -Liste.

Praktisches Beispiel:

<blockquote>
  <p>Infuse your life with action. Don't wait for it to happen. Make it happen.</p>
  <cite>Bradley Whitford - Author</cite>
</blockquote>

Best Practices: Browserunterstützung variiert; Die Validierung hängt vom Typ <input> ab.

Abschließend bieten diese häufig übersehenen HTML5-Tags wertvolle semantische Verbesserungen und verbesserte Benutzererfahrungen. Das Verständnis der ordnungsgemäßen Nutzung führt zu sauberer, zugänglicheren und effektiveren Webentwicklung.