Семантычныя элементы ў HTML5.

1. Семантычныя элементы ў HTML5. Добры дзень! У гэтым артыкуле размова пойдзе аб семантычных элементах...
2. Элемент <hgroup>
3. Элемент <nav>
4. Элемент <article>
5. Элемент <section>
6. Элемент <aside>
7. Элемент <footer>
8. Элемент <address>
9. групоўка кантэнту
10. Семантычныя элементы для тэкставага змесціва
11. Элемент <time>
12. Элемент <mark>
13. Элемент <wbr>

Семантычныя элементы ў HTML5.

Добры дзень! У гэтым артыкуле размова пойдзе аб семантычных элементах ў HTML5. Гэтыя элементы дапамагаюць вэб-распрацоўніку размеціць старонку на асноўныя часткі і таксама пошукавіку будзе лягчэй распазнаваць асобныя частцы старонкі. Да HTML5 ў разметцы старонак выкарыстоўваўся тэг <div>, якому прысвойвалі класы або радзей ідэнтыфікатары id для структуравання і арганізацыі разметкі старонкі.

Такім чынам на вэб-старонцы размяшчалі хедар, бакавыя панэлі, навігацыю, склеп (футер) і многае іншае. Новы стандарт HTML5 прадаставіў распрацоўнікам новыя тэгі для структуравання, арганізацыі змесціва і разметкі старонкі. Новыя семантычныя элементы HTML5 дазволілі структураваць дакумент па асобных частках, чаго так раней не хапала.

Для таго як адлюстроўваць знешні выгляд элементаў няма строгіх правілаў, таму вы можаце задаваць стыль элементам як вам падабаецца. Па змаўчанні ўсе новыя элементы браўзэр адносіць да малыя таму для таго каб яны карэктна адлюстроўваліся ў браўзэры ім трэба задаць display: block, гэта зробіць іх блокавымі, а блокавы элемент можна задаць памеры і яны будуць генераваць пасля сябе невялікія водступы такія паводзіны характэрны для ўсіх блокавых элементаў.

секцыйныя элементы

Элемент <header>

Дадзены элемент прызначаны для адлюстравання верхняй (шапкі) частцы старонкі. Ён аб'ядноўвае меню, лагатып увогуле ўсё што знаходзіцца ў верхняй частцы сайта. На вэб-старонцы можа быць адначасова больш аднаго элемента <header>.

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

Элемент <hgroup>

Ён прызначаны для групоўкі элементаў загалоўкаў <h1> - <h6> гэта патрабуецца калі загаловак мае складаную структуру

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

Элемент <nav>

Прызначаны для стварэння панэлі навігацыі меню, і ўсяго што звязана з меню.

<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>

У якасці меню можна выкарыстоўваць не толькі спісы, але і іншыя элементы напрыклад абзацы, але як правіла выкарыстоўваюцца спісы.

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

І можна размяшчаць загалоўкі ўнутры элемента:

<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>

Элемент <article>

Выкарыстоўваецца для групоўкі змесціва то ёсць кантэнту гэта артыкулы, анонсы зграяй і.т.д. увогуле ўсё што звязана з кантэнтам.

<Article> <header> <h2> ... </ h2> </ header> <p> ... &lt;/ p> <footer> Апублікавана ў катэгорыі &lt;a href="/?cat=3"> Навіны < / a>. &lt;a href="/?p=17#respond"> 5 каментарыяў </a> </ footer> </ article> <article> <header> <h2> ... </ h2> </ header> <p > ... &lt;/ p> <footer> Апублікавана ў катэгорыі <ahref = "/? cat = 2"> Навіны </a>. &lt;Ahref = "/? P = 17 # respond"> 4 каментара </a> </ footer> </ article>

Элемент <section>

Выкарыстоўваецца для падзелу старонкі або артыкула на темматические раздзелы або падраздзелы.

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

Элемент <aside>

Прызначаны для арганізацыі бакавых панэляў глей сайдбар выода блокаў з рэкламай, дадатковых меню.

<Aside> <h2> ... </ h2> <p> ... </ p> </ aside> <aside> <h2> ... </ h2> <p> ... </ p> </ aside>

Элемент <footer>

Фармуе падвал сайта, дзе звычайна размяшчаюцца спасылкі на старонкі сайта таксама інфармацыя аб аўтарскіх правах на кантэнт сайта.

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

Элемент <address>

Ну тут назва кажа само за сябе ды правільна гэты элемент прызначаны для выода адрасы.

групоўка кантэнту

Элементы <figure> і <figcaption>

Гэтыя элементы патрэбныя для групоўкі малюнкаў, прычым figcaption служыць подпісам да малюначкаў.

<Figure> <img src = "picture.jpg" alt = "Зіма"> <figcaption> Зімовы лес </ figcaption> </ figure> <figure> <img src = "picture.jpg" alt = "Вясна"> < figcaption> Вясновы лес </ figcaption> </ figure>

Семантычныя элементы для тэкставага змесціва

Элементы для падтрымкі моў Усходняй Азіі <rp>, <rt> і <ruby>

Тэг <rp> ўсталёўвае, што паказваць, калі браўзэр не падтрымлівае анатацый тыпаграфікі Усходняй Азіі. Выкарыстоўваецца разам з тэгамі <ruby> і <rt>.

Тэг <rt> дадае анатацыю, тлумачачы напісанне сімвалаў Усходняй Азіі зняволеных у кантэйнер <ruby>.

Тэг <ruby> тлумачыць напісанне знакаў.

Элемент <time>

Нуджен для адлюстравання даты і часу

Прыклад <time datetime = »2016-09-25T12: 00"> 25 Верасня 2016 </ time>.

Элемент <mark>

Прызначаны для вылучэння важнага змесціва.

Элемент <wbr>

Паказвае браўзэру дзе трэба ўставіць новы разрыў радка.

Калі вы знайшлі памылку, калі ласка, вылучыце фрагмент тэксту і націсніце Ctrl + Enter.

таксама чытайце