Семантичні елементи в 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.

також читайте