13 kwietnia 2014

Semantyczny HTML

Posted by Emnalyeriar on niedziela, kwietnia 13, 2014 in | No comments
Kiedy pierwszy raz zacząłem szukać w internecie informacji na temat programowania, a w pierwszych
krokach szczególnie chodziło o html to zawsze zastanawiałem się czy informacje, które znalazłem są aktualne. Bieżąca wersja HTML to 5.0 i jest dostępna od 2008 roku natomiast materiały znalezione w internecie mogą być nawet starsze. Drugą sprawą jest fakt, że nie wszystko co znajdziemy na temat programowania jest zgodne z aktualnymi standardami.
Idea semantycznego HTML polega na oddzieleniu warstwy znaczeniowej od warstwy prezentacji. Polega to na wyszczególnianiu czym Twój tekst jest, jakie ma znaczenie, natomiast nie jak ma wyglądać. Tym samym zamiast używać tag <b> używamy <strong>, zamiast <i> używamy <em> (emphasis), a następnie poprzez CSS nadajemy tym tagom odpowiedni charakter. Nasuwa się pytanie, po co zamieniać tagi, a następnie ustawiać ich wygląd w CSS skoro wynik jest dokładnie taki sam? Otóż dla nas strona pewnie i będzie wyglądać dokładnie tak samo, natomiast dla web crawler'ów, które będą parsować nasz kod robi to dużą różnice.
Przykład jak nie powinien wyglądać nasz kod:

<table>
   <tr>
      <td>
         <font size="10" color="red">Tutaj nasz tytuł</font>
         <p>Tutaj tekst naszego artykułu <b>jakieś wyszczególnione słowo</b></p>
      </td>
   <tr>
</table>

Aktualnie nie używa się już tabeli aby ustawić strukturę naszej strony. Nie używa się już również font i ustawiania jego atrybutów w tej samej linijce oraz odchodzi się od stosowania wyżej wspomnianych tagów <b> i <i>
W takim razie jak powinien wyglądać kod?
Zamiast tabelek często używamy tag <div>, któremu nadajemy odpowiednią klasę lub id lecz tak naprawdę powinno się stosować tagi takie jak <article>, <header> albo <footer>, a następnie poprzez CSS ustalamy jak przeglądarka ma wyświetlać dany element.
To tylko bardzo krótki i powierzchowny przykład ale mam nadzieje nakreślający te tematykę i dający do zrozumienia na czym semantyczny HTML polega. W celu zagłębienia tego tematu polecam szczególnie stronę HTML5doctor oraz The Syntax, Vocabulary and APIs of HTML5 W3C Editor’s Draft 9 August 2010. Na koniec jeszcze mały flowchart:







0 komentarze:

Prześlij komentarz