5 typowych błędów HTML, których powinieneś unikać

1. Semantyczny nagłówek i stopka
Divy nie mają struktury semantycznej. Zamiast używać elementów div do tworzenia struktur nagłówków lub stopek, użyj elementów „header” i „footer”.

Nie rób tego

<div id="header">
...
</div>
<div id="footer">
...
</div>

Zrób to

<header>
...
</header>
<footer>
...
</footer>

2. Użyj elementu figury
Jeśli chcesz dodać podpis do swojego obrazu, użyj elementu „figure” połączonego z elementem „figcaption”.

Nie rób tego

<img src="image url" alt="image description" />
<p> Lorem Ipsum Description </p>

Zrób to

<figure>
<img src="image url" alt="image description" />
<figcaption>
         <p> Lorem Ipsum Description </p>
</figcaption>
</figure>

3. Nie używaj pogrubionych ani pochylonych tagów
Znaczniki „b” i „i” są znacznikami prezentacyjnymi i nie mają znaczenia semantycznego, zamiast tego albo zmieniają font-weight/font-style w CSS, albo używają elementu „strong” lub „em”.

Nie rób tego

<b>Bold</b>
<i>Italics</i>

Zrób to

<strong>Bold</strong>
<em>Italics</em>

4. Korzystanie z linków opisowych
Tekst linku powinien być wyraźny i wskazywać, dokąd przekierowuje użytkownika, zarówno użytkownicy, jak i wyszukiwarki mogą łatwiej zrozumieć Twoje treści i ich związek z innymi stronami.

Nie rób tego

<a href="url">
Check our pricing...
</a>

Zrób to

Check our <a href="url"> pricing </a>

5. Korzystanie ze stylów wbudowanych
Pisanie stylów inline narusza zasadę oddzielenia struktury (HTML) od prezentacji (CSS). Zamiast tego napisz style w arkuszu stylów.

Nie rób tego

<h1 style="font-size: 24">
 Header
</h1>

Zrób to

h1 {
font-size: 24
}