Semantisches HTML: Best Practices für 2019
Veröffentlicht: 2019-08-31Semantisches HTML ist heute wichtiger denn je, zumal Google die Page-Rank-Algorithmen ständig ändert. Die Spitzenplätze in jeder Abfrage werden immer wettbewerbsfähiger. Sie brauchen eine Geheimwaffe, und semantisches HTML ist eine gute Wahl, die Sie in Ihrem Arsenal haben sollten. Sie können einige semantischen Codes auf Ihrer Website verwenden, aber desto mehr können Sie für den wichtigen Inhalt einzufügen, die besseren Suchmaschinen können Ihre Website crawlen und wissen , was Sie potenzielle Besucher zu bieten.
Was ist semantisches HTML?
Kurz gesagt, semantisches HTML ist HTML, das Menschen lesen und verstehen können. Jeder Mensch, nicht nur Programmierer und Entwickler, und wenn Menschen es leichter lesen können, können es auch Roboter. Wenn Robots die Struktur Ihrer Website leichter lesen können, können sie eine fundiertere Entscheidung darüber treffen, wie gut Ihre Website verschiedenen Suchanfragen standhält.
Im Grunde sagen Sie den Suchmaschinen-Crawlern „Dies ist ein Blog-Beitrag“ oder „Dies ist ein Navigationsmenü“ oder
Aber wie geht das? Nun, es verwendet eine Reihe spezieller HTML5-Tags, die sehr spezifisch sind. Sehen wir uns einige Beispiele an, und Sie können es selbst sehen.
Textformatierung
Textformatierung ist das am weitesten verbreitete semantische HTML, und Sie sehen es jeden Tag. Früher wurden einzelne Buchstaben verwendet, um Formatierungen anzuzeigen, die entweder für fett , kursiv , unterstrichen usw. standen.
<p>This is <b>bold text</b></p> <p>While <i>this is italics</i>, and this is <u>underlined</u>.</p>
Bei semantischem HTML verwenden Sie starken bis fetten Text und zeigen seine starke Bedeutung oder em , um den Text kursiv (oder hervorzuheben) zu setzen. Interessanterweise wird U immer noch verwendet, um Text zu unterstreichen; das MDN schlägt jedoch vor, es über CSS mit text-decoration zu gestalten: underline; es zu unterscheiden.
<p>This is <strong>bold text</strong>, while <em>this is italics</em>.</p> <p>This would be <u style=text-decoration: #222000 wavy underline;">underlined</u>.</p>
Wir freuen uns auch über del zu zeigen durchgestrichen gelöschter Text.
<p>We are also fond of <em>del</em> to show <del>strikethrough</del> deleted text.</p>
Und wir dachten, wir würden unseren Blick auf die semantische HTML-Textformatierung mit einem Highlight abschließen. Buchstäblich. Wenn Sie Text umranden verwenden, markieren Sie alles, was Sie einschließen.
<p>Make sure that you remember <strong>this term for your test</strong>. <p>But you should remember <mark>this information about how to use it in context</mark>.</p> <p>If you do that, you will be fine.</p>
Das MDN sagt, dass dies nicht auf die gleiche Weise verwendet werden darf wie Strong . Sie verwenden stark, um auf etwas Wichtiges im Text hinzuweisen, und Sie verwenden mark , um etwas hervorzuheben, das für das Verständnis des Textes relevant ist.
Abschnitte, Überschriften und Menüs
Vielleicht ist der beste Weg, um zu beginnen, Kopf- und Fußzeilen zu verwenden. Weißt du, jedermanns Lieblingsteil von Websites zum Erstellen und Behandeln. Bei herkömmlichem HTML haben Sie möglicherweise einen Header, der wie folgt codiert ist:
<div>
<h1>Page Title Goes here</h1>
<p>Tagline!</p>
<div>
<ul>
<li><a href="example.com">Home Page Link</a></li>
<li><a href="example.com">Blog Page Link</a></li>
<li><a href="example.com">Podcast Page Link</a></li>
</ul>
</div>
</div>
Wenn Sie sich diesen Code ansehen, können Sie sehen, was alles ist. Dies ist jedoch nur dann der Fall, wenn Sie wissen, was Sie sehen. Sie haben ein paar verschachtelte Divs (Container), die den Titel, den Slogan und das (unglaublich einfache) Menü trennen. An diesem Setup ist nichts auszusetzen , aber es ist sicherlich auch nichts wirklich richtig . Wenn Sie noch einen Schritt weiter gehen, können Sie CSS-ID und Klassen-Markup verwenden, um die Lesbarkeit zu verbessern.
<div class="header" id="hero-section">
<h1 class="page-title">Page Title Goes here</h1>
<p>Tagline!</p>
<div class="header-menu">
<ul>
<li><a href="example.com">Home Page Link</a></li>
<li><a href="example.com">Blog Page Link</a></li>
<li><a href="example.com">Podcast Page Link</a></li>
</ul>
</div>
</div>
Mit semantischem HTML sehen die Dinge viel sauberer und einfacher zu lesen aus, Sie müssen sich nicht auf divs verlassen, und die Klassen und IDs, die Sie auswählen, können ausschließlich für das Styling bestimmt sein.
<header>
<h1>Page Title Goes Here</h1>
<p>Tagline!</p>
<nav>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
</nav>
</header>
Ist das nicht viel einfacher zu lesen und zu erzählen, was los ist? Sie haben ein Header- Tag, das Sie darüber informiert, dass dies der Header der Seite ist, und ein Nav- Tag, das ein Navigationsmenü anzeigt. (Es ist sogar intelligent genug, um kein zusätzliches Styling zu benötigen, um die Einträge horizontal aufzulisten.)
Technisch gesehen könnten Sie auch den folgenden Code verwenden, wenn Sie sicherstellen möchten, dass Ihre Stile richtig angewendet werden, und Sie eine Möglichkeit haben, auf einen bestimmten Abschnitt der Website zu verlinken. In diesem Fall funktioniert das Abschnitts- Tag ähnlich wie das div- Tag in den vorherigen Beispielen. Außer natürlich, dass es lesbar ist und für das menschliche Auge Sinn macht.
<section id="hero-section">
<header>
<h1>Page Title Goes Here</h1>
<p>Tagline!</p>
<nav>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
</nav>
</header>
</section>
Beachten Sie außerdem die Verwendung von id="hero-section" , die ein optionaler Schritt für den optionalen Schritt ist, aber Sie können den Abschnitt als eigenständigen CSS-Selektor formatieren.
Imbissbuden
- Verwenden Sie den Abschnitt an Stellen, an denen Sie versucht sein könnten, ein äußeres Div zu verwenden.
- Verwenden Sie can use header, um anzugeben, welcher Teil der Seite Ihre Kopfzeile ist. Sie können dies auch in einem Artikel oder Beitrag verwenden, um den Header dieses Beitrags anzugeben, der von der Website selbst getrennt ist.
- Verwenden Sie Nav, wenn Sie ein Hauptnavigationsmenü für die Site festlegen. Nav ist keine Möglichkeit für Suchmaschinen, Links zu finden, sondern die Hauptmethode, mit der Benutzer auf Ihrer Website navigieren können. Jede Sammlung von Links (wie Breadcrumbs usw.) kann auch in nav . eingebunden werden
Fusszeile
Zur Fußzeile muss nicht viel gesagt werden, aber wir müssen sie erwähnen. In vielerlei Hinsicht ist es ein direktes Analogon zum Header. Eine traditionelle, einfache Fußzeile könnte so aussehen:
<div class="site-footer>
<p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
<a href="example.com/contact">Contact Us!</a>
<img src="/logo.png">
</div>
Während eine semantische Fußzeile wie folgt aussehen kann:
<footer>
<p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
<a href="example.com/contact">Contact Us!</a>
<img src="/logo.png">
</footer>
Zugegeben, hier gibt es keinen großen Unterschied in der grundlegenden Einrichtung, aber die Robots, die Ihre Site sehen, werden die Klärung zu schätzen wissen. Denken Sie auch daran, dass Sie die Fußzeile entweder für Seiten-, Beitrags- oder Site-Fußzeilen verwenden können.
Hauptartikel, Artikel und Nebensätze
Ein weiterer Hauptbestandteil von semantischem HTML ist das Artikel- Tag. Daneben auch die Nebensache . Mit beiden können Sie den eigentlichen Inhalt Ihrer Site strukturieren, damit die Suchmaschinen wissen, was der Haupttext ist, was ihnen wiederum ermöglicht, sich auf das zu lösende Problem und das Thema zu konzentrieren, auf das Sie sich konzentrieren.
Normalerweise ist ein Blog-Beitrag oder eine Seite ein einfaches HTML-Dokument, aber Kopfzeile, Fußzeile, Inhalt, Seitenleisten, Einfügungen usw. können alle in einen Topf geworfen werden.
<body>
<div class="post-header>
<h1>Article title</h1>
</div>
<div class="post-content>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div class="article-aside">
<p>Text block</p>
</div>
</div>
<div class="post-footer">
<img src="/subscribe.png">
</div>
</body>
Nun, das ist kein schöner Code, aber funktioniert. Es ist jedoch nicht schön und erfordert eine ziemlich anständige Menge an CSS, um beim Rendern auch nur annähernd lesbar zu sein. Durch die Verwendung von main , article und aside können Sie die Seite leicht strukturieren, um sie besser lesbar zu machen.
<main>
<article>
<header>
<h1>Article title</h1>
</header>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<aside>
<p>Text block</p>
</aside>
<footer>
<img src="/subscribe.png">
</footer>
</article>
</main>
Beachten Sie jedoch, dass Sie den Hauptinhalt der Seite nur einmal angeben können. Das bedeutet, dass Sie nur eine Hauptseite pro Seite verwenden können. Sie können mehrere Artikel unter einem einzigen Hauptartikel verschachteln, um ein Inhaltsverzeichnis oder ein Verzeichnis mit eigenständigen Inhalten anzuzeigen (Sie können auf diese Weise sogar mehrere H1- Tags verwenden, um den Suchmaschinen anzuzeigen, dass diese Beiträge eigenständig sind.
Imbissbuden
- Verwenden Sie ein einzelnes Haupt- Tag pro Seite
- Mehrere Artikel- Tags können pro Seite verwendet werden, um separate, eigenständige Inhalte zu identifizieren (einschließlich mehrerer H1 s pro Seite)
- Aside kann als Seitenleiste oder als Einfügung in einen Beitrag oder eine Seite verwendet werden
Andere, weniger genutzte Elemente
Zugegeben, die oben besprochenen Elemente und Tags sind die am häufigsten verwendeten Teile von semantischem HTML. Schließlich enthält fast jede Website im Internet eine Kombination davon, während die verbleibenden unterstützten semantischen Tags spezifischer und eingeschränkter sind. Sie sind jedoch nicht weniger nützlich, wenn sie ihren Zweck erfüllen, und sie helfen immens bei der Interaktion und der Suchindexierung.
Details und Zusammenfassung
Die Details und Zusammenfassungselemente erstellen eine sich erweiternde Inhaltsebene, die für Benutzer ausgeblendet werden kann, es sei denn, sie aktivieren sie ausdrücklich (wie ein Akkordeon-Modul in Divi oder anderen Seitenerstellern).
<details>
<summary>Headline that will be shown and clicked on</summary>
<p>Content that will be hidden</p>
<a href="example.com">Link that will be hidden</a>
</details>
Alle untergeordneten Elemente der Zusammenfassung werden ausgeblendet und erweiterbar, und Sie können zusätzlichen Text hinzufügen, indem Sie das Detailelement schließen.
Abbildung und Bildunterschrift
Diese sind ziemlich selbsterklärend. Abbildung ist eine Art visuelle Hilfe in Ihrem Beitrag. Foto, Grafik, ein eingebettetes YouTube-Video, vielleicht. Die figcaption ist also die Beschriftung, die Sie hinzufügen, um die Verwendung der obigen Abbildung zu erklären. Obwohl sie technischer Natur für die Verwendung der Semantik sind, können Sie dies für jeden Inhalt verwenden, der speziell als Hilfe im Hauptbeitrag oder auf der Seite indiziert werden soll.
<figure>
<img src="/chart.jpg">
<figcaption>Explanation of this chart in short text</figcaption>
</figure>
Diese Tags sind eine hervorragende Möglichkeit, um beispielsweise ein Featured Snippet bei Google zu erhalten, da Sie gezielt auf die Lösung oder Erklärung eines Problems hinweisen. Wir empfehlen, diese zu verwenden, da dadurch nicht nur der Code reduziert wird, den Sie zum Hinzufügen einer Beschriftung und zum Stylen verwenden, sondern auch die Abbildung und die Beschriftung als einzelnes Element der Seite und nicht als separate Elemente erhalten bleiben.
Zeit
Zeit ist eines der seltener verwendeten Tags, aber wenn Sie ein Ereignis oder einen besonderen Anlass haben, bei dem Sie die Suchmaschine speziell benötigen, um zu wissen, dass es eine Uhrzeit oder ein Datum gibt, verwenden Sie dies, anstatt den Text einfach fett oder hervorzuheben.
<article> <h1>Title</h1> <p>The event will begin on <time datetime="2019-12-25">December 25th</time> and last for <time datetime="PT12H30M0S">12 and a half hours</time>.</p> </article>
Durch die Verwendung von datetime mit dem time- Element erhält Ihre Entwicklung einen viel besseren Anschluss an die Zeit, was Ihnen dann die Integration mit Kalendern und verschiedenen anderen APIs ermöglicht. Sie können Erinnerungen von Ihrer Website aus senden und die Leute kommen häufiger zurück.
Abschluss
Es ist zwar nicht falsch, nicht-semantisches HTML zu verwenden, aber wenn Sie sich bei der Arbeit daran gewöhnen, werden Sie feststellen, dass sich Ihr Suchmaschinen-Ranking verbessert. Das ist wichtig, aber was noch wichtiger sein könnte, ist, dass Sie sich Zeit bei der Strukturierung und Gestaltung Ihrer Website sparen und eine Menge Kopfschmerzen und technische Schulden für die Leute vermeiden, die im Projekt nach Ihnen kommen .
Welche Best Practices für semantisches HTML befolgen Sie?
Beitragsbild des Artikels von whiteMocca / shutterstock.com