HTML5 Semantic Elements

Semantyka jest badanie znaczeń słów i zwrotów w języku polskim.

elementy semantyczne są elementy o znaczeniu.

Semantyczny HTML jest wykorzystanie znaczników HTML do wzmocnienia semantykę, czyli znaczenie, informacji na stronach internetowych i aplikacji internetowych, a nie tylko określić jego prezentację lub wygląd.

Semantyczny HTML są przetwarzane przez tradycyjnych przeglądarek internetowych, jak również przez wiele innych czynników użytkowników. CSS służy zaproponować swoją prezentację dla człowieka użytkowników.

Jakie są Semantic Elements?

Semantyczna elementem jasno opisuje swoje znaczenie zarówno w przeglądarce i dewelopera.

Przykłady elementów non-semantycznych: <div> i <span> - Informuje nic na temat jego treści.

Przykłady elementów semantyczne: <form> , <table> i <img> - Wyraźnie określa zawartość.

Wsparcie przeglądarka

HTML5 elementy semantyczne są obsługiwane we wszystkich nowoczesnych przeglądarkach.

Ponadto, można "teach" starszych przeglądarek, jak radzić "unknown elements" .

Przeczytaj o tym obsługa przeglądarki HTML5 .

Nowe elementy semantyczne w HTML5

Wiele stron internetowych zawiera kod HTML, takich jak: <div id="nav"> <div class="header"> <div id="footer">
do wskazania nawigacji, nagłówek i stopkę.

HTML5 oferuje nowe elementy semantyczne zdefiniowanie różnych części strony internetowej:

HTML5 <section> Element

<section> element definiuje sekcję w dokumencie.

Według dokumentacji W3C HTML5: "A section is a thematic grouping of content, typically with a heading."

Strona główna witryny sieci Web mogłaby być podzielona na sekcje w celu wprowadzenia, treści i informacji kontaktowych.

HTML5 <article> Element

<article> element określa niezależny, samowystarczalny treści.

Artykuł powinien sensu na własną rękę, i powinno być możliwe, aby ją przeczytać niezależnie od reszty strony internetowej.

Przykłady gdzie <article> można stosować element:

• Wpis forum
• Post na blogu
• Artykuł w gazecie

Gniazdowania Semantic Elements

W standardzie HTML5, <article> element definiuje kompletny, samodzielny blok powiązanych elementów.

<section> element jest zdefiniowany jako element powiązanych elementów.

Możemy użyć definicji zdecydować, w jaki sposób elementy gniazdo? Nie, nie możemy!

W Internecie można znaleźć strony HTML z <section> elementy zawierające <article> elementy, a <article> elementów zawierających <sections> elementy.

Znajdziesz tu również stron z <section> elementy zawierające <section> elementy, a <article> elementy zawierające <article> elementy.

HTML5 <header> Element

<header> Element określa nagłówek dokumentu lub sekcji.

<header> Element ten powinien być używany jako kontener dla treści wprowadzającej.

Można mieć kilka <header> elementy w jednym dokumencie.

Poniższy przykład definiuje nagłówek artykułu:

HTML5 <footer> Element

<footer> element określa stopkę dokumentu lub sekcji.

<footer> Element ten powinien zawierać informacje o jego zawierającego elementu.

Stopka zawiera zwykle autor informacji dokument, prawa autorskie, linki do warunków użytkowania, dane kontaktowe itp

Można mieć kilka <footer> elementy w jednym dokumencie.

HTML5 <nav> Element

<nav> Element definiuje zbiór linków nawigacyjnych.

<nav> Element jest przeznaczony dla dużych bloków linków nawigacyjnych. Jednak nie wszystkie linki w dokumencie powinny być wewnątrz <nav> elementu!

HTML5 <aside> Element

<aside> element definiuje część zawartości poza treść jest umieszczona w (like a sidebar) .

Bok treść powinna być związana z otaczającym treści.

HTML5 <figure> i <figcaption> Elementy

W książkach i gazetach, to jest wspólne mieć podpisy z obrazami.

Celem podpis jest dodanie wizualnej wyjaśnienie do obrazu.

Z HTML5, obrazy i podpisy mogą być grupowane w <figure> elementów:

<img> elementu określa obrazu, <figcaption> element definiuje podpis.

Dlaczego HTML5 Semantic Elements?

Z HTML4, twórcy wykorzystali swoje własne ulubione nazwy atrybutów do typu elementów strony:

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

To sprawiło, że niemożliwe dla wyszukiwarek w celu określenia prawidłowej zawartości strony internetowej.

Z elementów HTML5, takich jak: <header> <footer> <nav> <section> <article> , to będzie łatwiej.

Według W3C, a Semantic Web:

„Pozwala dane mają być udostępniane i ponownie używane w różnych aplikacjach, przedsiębiorstw oraz społeczności.”

rozważania

W przypadku, gdy dokument wymaga bardziej precyzyjne semantykę niż te, wyrażone w HTML same fragmenty dokumencie mogą być zawarte w zakres lub dz elementów o nazwach znaczących klasy, takie jak <span class = „autor”> i <div klasy = „rachunku” >. Gdzie te nazwy klasy są również identyfikator fragment schematu lub w ontologii, mogą one odwołują się do bardziej zdefiniowanym znaczeniu. Mikroformaty sformalizować to podejście do semantyki HTML.

Jednym ważnym ograniczeniem tej metody jest to, że takie znaczniki oparte na integracji element musi spełniać warunki dobrego ukształtowania. Ponieważ dokumenty te są szeroko drzewo zbudowane, oznacza to, że tylko zrównoważony fragmenty z sub-tree może być oznaczony w ten sposób. Środek znakowania się dowolną część HTML wymaga mechanizm niezależny od konstrukcji samego znaczników, takich jak XPointer.

Dobry semantycznego HTML poprawia również dostępności dokumentów internetowych (patrz również Web Content Accessibility Guidelines). [Potrzebne źródło] Na przykład, gdy czytnik ekranu lub przeglądarki audio można prawidłowo ustalić strukturę dokumentu, nie będzie tracić niedowidzących użytkownika czas czytając z powtarzających się lub nieistotnych informacji, kiedy został on oznaczony prawidłowo.

Elementy semantyczne w HTML5

Poniżej znajduje się lista alfabetyczna z nowych elementów semantycznych w HTML5.

Linki przejść do naszej kompletnej HTML5 Reference .