Nowe znaczniki w HTML5

Nowe znaczniki HTML5, tworzenie nowoczesnych stron internetowych

Dzisiaj bierzemy na warsztat nowe znaczniki w języku HTML5 i zmiany, które ze sobą niosą. Chodzi przede wszystkim o ułatwienie pracy nad kodem i jego lepszą semantykę.

Ten artykuł jest częścią serii kurs HTML dla zielonych.
Przeczytaj też: jakie są podstawowe znaczniki w HTML.

Mamy XXI wiek, komputery rozwijają się w niesamowitym tempie i to, co dzisiaj kupiliśmy jako nowe i najwydajniejsze, już jutro może być uznane za niemodne i dużo słabsze niż było wczoraj.

W przypadku tworzenia stron internetowych i powiązanych z nimi technologii, w dużej większości są one dostępne bezpłatnie i jedyne co musisz zrobić, by z nich korzystać, to nauczyć się je obsługiwać.

Często każda kolejna wersja potrafi przynieść ogromne zmiany w stosunku do poprzednika, czy to w wydajności, czy też w wyglądzie i zachowaniu.

Przejdźmy więc do najnowszego standardu HTML5 i zobaczmy dlaczego warto mu się przyjrzeć.

 

HTML 5 to przede wszystkim krótszy DOCTYPE (element mówiący przeglądarce z jakiego typu stroną ma do czynienia), który sprowadza się do jednej linijki. Dzięki temu nareszcie staje się łatwy do zapamiętania:

<!DOCTYPE html>

Charset (zestaw znaków) UTF-8:

<meta charset="UTF-8">

A przykładowy kod zgodny z HTML 5 wygląda następująco:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <title>Tytuł strony</title>
   </head>
   <body>
      Zawartość strony
   </body>
</html>

 

Nowe znaczniki w HTML5

Wielką nowością są znaczniki, dzięki którym nie musisz non stop stosować divów i nadawać im id lub klas. Stosowanie tych znaczników zwiększa czytelność i semantykę (znaczenie) kodu.

Zobacz o czym mówię.

 

<header>

Nagłówek dla naszej strony lub sekcji. Zazwyczaj zawiera w sobie znaczniki h1-h6, formularz wyszukiwania, nawigację czy logo. Nie ma ograniczeń co do ilości takich nagłówków.

Przykład użycia:

<header>
   <h1>Tytuł całej strony</h1>
   <img src="images/logo.png" alt="Miejsce na logo" />
   <nav>Główne menu</nav>
</header>

 

<section>

Tworzy sekcję dokumentu, czyli grupę z treścią, która różni się od innych treści zawartych na stronie. Taka sekcja powinna zawierać nagłówek.

Dobrym przykładem jest książka. Mamy tam rozdziały, które w HTMLu wyglądałyby właśnie jak sekcje.

Warto wiedzieć, że section nie używa się po to, żeby stworzyć coś na wzór diva, który po ostylowaniu będzie tylko pojemnikiem na inne elementy.

W takich sytuacjach użyj po prostu znacznika <div>. W section musi istnieć zawartość, która w jakiś sposób wyróżnia się na tle strony – porusza inny temat, przedstawia coś innego (przykład z książką).

Pewnie już domyślasz się jak mógłby wyglądać taki kod z sekcją:

<body>
   <h1>Artykuł o psach</h1>

   <!-- Wprowadzenie, ogólne omówienie tematu... -->

   <h2>Rasy psów popularne 20 lat temu</h2>

   <article>
      Tekst o rasach psów
   </article>

   <section>
      <h2>Psy żyjące w Europie</h2>
      <article>
         Tekst
      </article>
   </section>

   <section>
      <h3>Opinie tutejszych mieszkańców</h3>

      <article>
         Opinia Pana Marka
      </article>

      <article>
         Opinia Pani Marii
      </article>
   </section>

   <section>
      <h2>Psy a ich pokrewieństwo z nowo odkrytym gatunkiem</h2>

      <article>
         Tekst
      </article>
   </section>
</body>

 

<article>

W tagu <article> umieszczamy treść, która ma jakieś znaczenie i mogłaby zostać umieszczona na stronie bez względu na jej pozostałą treść.

Oznacza to, że <article> jest dobrym miejscem na komentarz, treść posta na forum czy blogu lub treść newsa. Często zawiera nagłówek, który może znajdować się w elemencie <header>.

<article>
   <header>
      <h1>Tworzenie stron w języku HTML 5</h1>
   </header>

   <p>Artykuł poświęcony tworzeniu stron w języku HTML 5</p>

   <section>
      <h2>Komentarze czytelników</h2>

      <article>
         <header>
            <h3>Napisany przez: Jan Kowalski</h3>
         </header>

         <p>Ja już nie mam problemów z HTML5, bo przeszedłem elitarny kurs na YouTube</p>
      </article>

      <article>
         <header>
            <h3>Napisany przez: Maciej Nowak</h3>
         </header>

         <p>
            A ja postanowiłem się jeszcze pouczyć HTML 4 i dopiero przejść na HTML 5. Lubię
            odświeżać stare technologie!
         </p>
      </article>
   </section>
</article>

 

<nav>

W tym znaczniku powinna znajdować się główna nawigacja naszej strony, czyli odnośniki pozwalające poruszać się po witrynie. Nie chodzi tutaj jednak o wszystkie linki na stronie, a o te główne, najważniejsze jeśli chodzi o nawigację.

Przykładowe użycie: menu na stronie, spis treści, formularz wyszukiwania, paginacja strony,  tak zwane breadcrumbs (linki pokazujące gdzie aktualnie jesteś na stronie).

<body>
   <header>
      <h1>...</h1>
   </header>

   <nav>
      <h1>Menu na stronie</h1>

      <ul>
         <li><a href="index.html">Strona główna</a></li>
         <li><a href="galeria.html">Galeria naszych prac</a></li>
         <li><a href="kontakt.html">Skontaktuj się z nami</a></li>
      </ul>
   </nav>

   <footer>
      <p>Copyright (c) 2016</p>
   </footer>
</body>

 

<aside>

W aside umieszczamy treść, która nie jest bezpośrednio związana z główną treścią strony, a jest dodatkiem – takie lekkie odbiegnięcie od tematu. Jeżeli tego dodatku by nie było, cała treść nadal miałaby swój sens i zachowała wartość.

Przykład: sidebar na stronie. Mimo, że cała strona dotyczy jakiegoś tematu i każdy artykuł który się na niej znajduje traktuje o czymś innym, to sidebar zazwyczaj pozostaje taki sam na wszystkich podstronach.

Czyli w jakiś sposób „odchodzi w bok”, jak mówi sama nazwa znacznika. Jednak ten sidebar ciągle jest powiązany ze stroną, bo przecież na stronie poświęconej językowi HTML5 czy PHP nie umieścisz ogłoszenia o sprzedaży samochodów. 

Ważna uwaga: <aside> powinien zawierać treść odbiegającą nieco od tematu, ale weź pod uwagę znacznik, w którym <aside> się znajduje. Jeżeli wrzucimy <aside> do <article>, to w <aside> powinny być informacje „dodatkowe” dla głównej treści zawartej w <article>.

<article>
   <p>Główna treść</p>

   <aside>
      <p>treść nieco odbiegająca od tematu</p>
   </aside>
</article>

Jeżeli natomiast <aside> jest w postaci sidebara czy innego elementu, to pewnie ten sidebar jest otoczony główną treścią strony i nie jest nigdzie zagnieżdżony (nie znajduje się w innym znaczniku). Wtedy w takim sidebarze powinna znajdować się treść odnosząca się do całej strony internetowej.

<article>
   <h2>Artykuł o tworzeniu stron internetowych w HTML 5</h2>

   <p>...</p>

   <aside>
      <h2>Poznaj narzędzia, których używają najlepsi programiści www</h2>
      <ul>
         <li>lista narzędzi...</li>
      </ul>
   </aside>
</article>

 

<footer>

<footer> czyli stopka elementu, w którym się znajduje. Takich <footer>ów możemy umieścić wiele.

Zazwyczaj zawiera informacje o elemencie, w którym się znajduje, np. o autorze, odnośniki z menu, dane kontaktowe, dodatkowe informacje czy linki społecznościowe.

<footer>
   <h3>Skontaktuj się</h3>

   <p>Telefon: 123-456-789</p>
   <p>E-mail: [email protected]</p>
</footer>

 

<main>

Stworzony po to, by wskazywał główną treść na stronie. Główną to znaczy taką, której poszukuje użytkownik, czyli bez menu strony, logo, stopki i innych niepotrzebnych do przeczytania artykułu elementów.

Używając tego znacznika urządzenia takie jak czytniki ekranów będą wiedziały gdzie znajduje się najważniejsza treść strony.

Przykład:

<body>
   <header>
      Nagłówek strony - logo, nazwa firmy lub menu
   </header>

   <main>
      Główna treść strony
   </main>

   <footer>
      Stopka - dane kontaktowe itd.
   </footer>
</body>

 

Z tymi właśnie znacznikami będziesz miał najczęstszy kontakt przy tworzeniu swoich stron.

Sposób ich używania zależy tylko od Ciebie – projektanta strony, który wie najlepiej kiedy zastosować dany tag, a kiedy użyć innego.

Jak sam widzisz czytelność kodu pisanego z wykorzystaniem znaczników HTML5 ulega znacznej poprawie w porównaniu do HTML4.

Nie mamy już całej masy <div>ów, które dało się rozszyfrować tylko patrząc na ich klasy lub ID. Teraz strony nabierają przejrzystości i czytelności.

 

Co jeszcze przynosi język HTML5?

Oprócz wyżej podanych znaczników, HTML5 wprowadza jeszcze kilka nowości, o których warto wspomnieć.

Element <canvas> umożliwia rysowanie prosto w dokumencie HTML, wykorzystując skrypty JavaScript.

Formularze otrzymały nowe artybuty: required, autocomplete, multiple, min, max czy autofocus. Pojawiły się nowe typy pól input.
Zamiast najczęściej wpisywanego „text”, teraz mamy do wyboru: time, date, email, url, search, color, range, tel i więcej.

Pojawiła się geolokalizacja, która umożliwia określenie położenia osoby korzystającej ze strony.

Zmianą, która nieco rewolucjonizuje odtwarzanie wideo i muzyki na stronach internetowych jest wprowadzenie znaczników <audio> i <video>.
Dają one możliwość odtwarzania mediów na stronie bez potrzeby instalacji dodatkowych wtyczek czy używania oprogramowania Flash.

 

Nic dziwnego, że coraz więcej potężnych firm i koncernów używa technologii zawartych w HTML5 do tworzenia własnych stron.

Stawiając na najnowsze technologie zapewniają sobie jednocześnie wyższe dochody, bo ich strony wyglądają i funkcjonują dużo lepiej, a programiści potrzebują dużo mniej czasu, by taką stronę stworzyć.

Jeżeli chcesz nauczyć się tworzyć strony internetowe, a jeszcze nigdy na poważnie tego nie robiłeś, możesz zacząć od mojego kursu HTML.

Dzięki niemu zrozumiesz podstawy działania tych wszystkich technologii w prosty sposób – czarno na białym.

Przeczytaj też...

Gregg Braden – Boska Matryca (audiobook)

Gregg Braden – Boska Matryca. Jedna z pierwszych książek, które… Gregg Braden – Boska Matryca (audiobook)

Co byś zrobił gdybyś wiedział, że umrzesz za…

5 lat? 2 lata? 1 rok? 6 miesięcy? 1 miesiąc?… Co byś zrobił gdybyś wiedział, że umrzesz za…

5 podstawowych Praw Kreacji wg Bashara

Pięć podstawowych praw ujawnionych przez Bashara obowiązuje wszędzie – w… 5 podstawowych Praw Kreacji wg Bashara

2 myśli na “Nowe znaczniki w HTML5”

  1. Gumis

    Mam problem. Na mojej strone zdjecia nie wyświetlaja sie przegladarce Internet Exproler. Tego problemu nie ma w innych przegladarkach.

    Odpowiedz

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *