Elementy semantyczne HTML5.

1. Elementy semantyczne HTML5. Cześć Ten artykuł omówi elementy semantyczne w HTML5. Te elementy pomagają...
2. Element <Hgroup>
3. Element <Nav>
4. Element <article>
5. Element <sekcja>
6. Element <Aside>
7. Element <footer>
8. Element <Address>
9. Grupowanie treści
10. Elementy semantyczne dla treści tekstowych
11. Element <Czas>
12. Element <mark>
13. Element <wbr>

Elementy semantyczne HTML5.

Cześć Ten artykuł omówi elementy semantyczne w HTML5. Te elementy pomagają twórcy stron internetowych oznaczyć stronę w głównych częściach, a wyszukiwarka łatwiej będzie rozpoznawać poszczególne części strony. Przed HTML5 znacznik <div> został użyty w znaczniku strony, do którego przypisano klasy lub, rzadziej, identyfikatory id do strukturyzacji i porządkowania znaczników strony.

Tak więc nagłówek, panele boczne, nawigacja, piwnica (stopka) i wiele innych zostały umieszczone na stronie internetowej. Nowy standard HTML5 zapewnił programistom nowe tagi do strukturyzacji, organizowania treści i układu strony. Nowe elementy semantyczne HTML5 pozwoliły nam uporządkować dokument w osobne części, co wcześniej nie było wystarczające.

Aby wyświetlić wygląd elementów, nie ma ścisłych reguł, więc możesz stylizować elementy według własnego uznania. Domyślnie wszystkie nowe elementy są określane przez przeglądarkę jako ciąg znaków, więc aby mogły wyświetlać się poprawnie w przeglądarce, muszą ustawić wyświetlanie: blok, spowoduje to ich blokowanie, a rozmiary bloków mogą być ustawione i będą generować małe wcięcia po tym typowym dla wszystkich bloków przedmioty.

Elementy przekrojowe

Element <Header>

Ten element jest przeznaczony do wyświetlania górnej (nagłówka) strony. Łączy menu, ogólnie logo, wszystko, co znajduje się na górze strony. Strona internetowa może mieć więcej niż jeden element <header> na raz.

<header> <hgroup> <h1> ... </ h1> <h2> ... </ h2> </ hgroup> </ header> <header> <hgroup> <h1> ... </ h1> <h2> ... </ h2> </ hgroup> </ header>

Element <Hgroup>

Jest przeznaczony do grupowania elementów nagłówków <h1> - <h6> jest to wymagane, gdy nagłówek ma złożoną strukturę.

<hgroup> <h1> ... </ h1> <h2> ... </ h2> </ hgroup> <hgroup> <h1> ... </ h1> <h2> ... </ h2> </ hgroup>

Element <Nav>

Zaprojektowany, aby utworzyć pasek nawigacyjny menu i wszystko związane z menu.

<nav> <ul> <li> <a> ... </a> </ li> <li> <a> ... </a> </ li> <li> <a> ... < / a> </ li> </ ul> </ nav> <nav> <ul> <li> <a> ... </a> </ li> <li> <a> ... </ a > </ li> <li> <a> ... </a> </ li> </ ul> </ nav>

Jako menu możesz używać nie tylko list, ale także innych elementów, takich jak akapity, ale listy są zwykle używane.

<nav> <p> <a href=""> ... </a> </ p> <p> <a href=""> ... </a> </ p> </ nav> < nav> <p> <ahref = ""> ... </a> </ p> <p> <ahref = ""> ... </a> </ p> </ nav>

I możesz umieścić nagłówki wewnątrz elementu:

<nav> <h2> ... </ h2> <ul> <li> <a> ... </a> </ li> <li> <a> ... </a> </ li> <li> <a> ... </a> </ li> </ ul> </ nav> <nav> <h2> ... </ h2> <ul> <li> <a> ... </a> </ li> <li> <a> ... </a> </ li> <li> <a> ... </a> </ li> </ ul> </ nav>

Element <article>

Służy do grupowania treści, to znaczy treści tego artykułu, zapowiedzi stada itp. ogólnie wszystko związane z treścią.

<article> <header> <h2> ... </ h2> </ header> <p> ... &lt;/ p> <footer> Opublikowany w &lt;a href="/?cat=3"> Wiadomości < / a>. &lt;a href="/?p=17#respond"> 5 komentarzy </a> </ footer> </ article> <article> <header> <h2> ... </ h2> </ header> <p > ... &lt;/ p> <footer> Opublikowano w &lt;ahref = "/? cat = 2"> Wiadomości </a>. &lt;ahref = "/? p = 17 # respond"> 4 komentarze </a> </ footer> </ article>

Element <sekcja>

Służy do dzielenia strony lub artykułu na sekcje lub podsekcje tematyczne.

<article> <h1> ... </ h1> <sekcja> <h2> ... </ h2> <p> ... </ p> </ section> <sekcja> <h2> ... < / h2> <p> ... </ p> </ section> <p> ... </ p> </ article> <article> <h1> ... </ h1> <sekcja> <h2> ... </ h2> <p> ... </ p> </ section> <sekcja> <h2> ... </ h2> <p> ... </ p> </ section> <p > ... </ p> </ article>

Element <Aside>

Jest przeznaczony do organizacji paneli bocznych lub pasów bocznych bloków wyjściowych z reklamą, dodatkowymi menu.

<aside> <h2> ... </ h2> <p> ... </ p> </ aside> <aside> <h2> ... </ h2> <p> ... </ p> </ na bok>

Element <footer>

Tworzy stopkę witryny, w której zazwyczaj umieszczane są linki do stron witryny, a także informacje o prawach autorskich do treści witryny.

<footer> <adres> ... </ address> <small> @ 2017 ... </ small> </ footer> <footer> <adres> ... </ address> <small> @ 2017 ... </ small> </ footer>

Element <Address>

Cóż, tutaj nazwa mówi sama za siebie i poprawnie ten element jest przeznaczony do wysyłania adresu.

Grupowanie treści

Elementy <Figure> i <figcaption>

Elementy te są niezbędne do grupowania zdjęć, a figcaption służy jako podpis do zdjęć.

<figure> <img src = "picture.jpg" alt = "Winter"> <figcaption> Winter Forest </ figcaption> </ figure> <figure> <img src = "picture.jpg" alt = "Spring"> < figcaption> Spring Forest </ figcaption> </ figure>

Elementy semantyczne dla treści tekstowych

Elementy do obsługi języków wschodnioazjatyckich <rp>, <rt> i <ruby>

Znacznik <rp> określa, co wyświetlać, jeśli przeglądarka nie obsługuje adnotacji typografii wschodnioazjatyckiej. Używany z tagami <ruby> i <rt>.

Znacznik <rt> dodaje adnotację wyjaśniającą zapisywanie wschodnioazjatyckich znaków w kontenerze <ruby>.

Tag <ruby> wyjaśnia, jak pisać znaki.

Element <Czas>

Nuzhen, aby wyświetlić datę i godzinę

Przykład <time datetime = "2016-09-25T12: 00 ″> 25 września 2016 </ time>.

Element <mark>

Zaprojektowany, aby podkreślać ważne treści.

Element <wbr>

Pokazuje przeglądarkę, gdzie należy wstawić nowy podział wiersza.

Jeśli znajdziesz błąd, wybierz fragment tekstu i naciśnij Ctrl + Enter .

Przeczytaj także