Семантична верстка сайту, допоможіть роботу зрозуміти ваш сайт

1. Що таке семантична верстка?
2. Чому семантична верстка сайту так важлива?
3. Як реалізувати семантичну верстку сторінки?
4. Теги структури документа
5. текстові теги
6. медіа теги
7. кореляційні теги

Чим глибше ви вивчаєте html і web розробку, тим частіше чуєте одне загадкове слово "семантика". У цій статті ми розгадаємо загадку, і розповімо що таке семантична верстка. Розберемо основні теги які використовуються для опису семантичної структури.

Що таке семантична верстка?

Семантична верстка - це вивчення значень слів і виразів. В html ніщо інше як написання елементів зі змістом. Семантичний елемент чітко описує своє значення як для браузерів, так і для розробників.

Давайте поглянемо на відміну семантичного елемента від звичайного.

Наприклад div або span - прості елементи, дивлячись на них ми не можемо зрозуміти якого типу контент в них міститься. Це може бути просто текст, картинка, або інші теги.

Тепер семантичні form, table, і article тут вже зовсім інша справа. Тільки прочитавши назви ми можемо з легкістю зрозуміти що всередині цих тегів. Приклад верстки звичайної і семантичної:

<! - звичайна блокова верстка ->

<Div class = "content">

<Img src = "/pictures.jpg" alt = "">

<P> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis. </ P>

<a href = ""> Читати Далі </a>

</ Div>

<! - семантична верстка ->

<Article>

<Img src = "/pictures.jpg" alt = "">

<P> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque facere repellat. Maxime quod dolor exercitationem commodi, perspiciatis laborum, sunt, magni illo ipsam molestiae a ullam amet adipisci et omnis! </ P>

<a href = ""> Читати Далі </a>

</ Article>

Сподіваюся на цьому етапі ви вловили різницю між типами тегів. Хочу відразу зазначити, що це не єдині теги, їх багато, а з появою html5 стало ще більше. Далі ми познайомимося з ними.

Чому семантична верстка сайту так важлива?

Добре написаний CSS може приховати від очей користувача погану верстку html. Але ми не можемо приховати її від пошукових роботів, плагінів браузера, читалок і інших інструментів і комплектуючих.

Виходячи з цього семантична верстка є обов'язковою, якщо ви хочете щоб ваш сайт був доступний будь-яким відвідувачам з різноманітних пристроїв, і добре ранжирувався в пошукових системах. Не варто забувати і про текст, який теж повинен бути добре структурований, щоб користувачам було комфортно його читати.

Як реалізувати семантичну верстку сторінки?

Існує одне єдине правило, при написанні ми повинні використовувати теги які в конкретному випадку можуть найбільш точно передати значення і тип контенту, пошуковим роботам і програмами. Якщо немає відповідних тегів, то використовуємо звичайні тому div

Ми можемо згрупувати найбільш поширені і важливі елементи на чотири групи:

• Теги структури документа
• текстові теги
• медіа теги
• кореляційні теги

Теги структури документа

У минулому елемент div був основним за допомогою якого створювалася структура html документа , W3C звернули увагу на те, що розробники використовували в назвах id і class слова header, footer, menu і т.д. Які описували смислове вміст елемента. Так і з'явилися нові семантичні теги в HTML5.

header: Елемент який використовується як контейнер для логотипу, назви сайту і меню. Також для визначення заголовків, в статтях і т.д.

footer: Використовується в основному для опису нижній частині сторінки, зазвичай містить інформацію про автора, контакти, копірайт, додаткове меню і кнопку яка веде до верху сторінки.

main: Елемент високого рівня, використовується як контейнер для унікального вмісту на сторінці, яка не повторюється на інших сторінках сайту.

nav: елемент для створення навігації по сайту. nav зазвичай знаходиться в header (хедері) і footer (футере), а також може бути використаний в aside (сайдбарі) сайту.

section: Описує розділи документа, повинен містити в собі заголовок h1 - h6

aside: Використовується для ідентифікації контенту, який пов'язаний з основним контентом на сторінці. Наприклад, aside елемент може містити визначення терміна в статті, рекламні оголошення, докладнішу інформацію можна отримати.

article: Це самодостатній елемент який використовується для опису статті сайту, блогу так само публікації на форумі. Може містити елемент header і footer.

текстові теги

Існує безліч тегів для роботи з текстом на сторінці, але не всі вони семантичні. Наприклад можна використовувати span для стилізації тексту, але інформацію про вміст браузеру він не передає.

h1, h2, h3, h4, h5 і h6: використовуються для позначення заголовків. Найвищий рівень, або найголовнішим, заголовком є ​​h1, за ним йдуть в порядку убування важливості заголовки рівня h2 - h6.

strong: тег надає тексту важливості, як правило, відображається напівжирним шрифтом.

mark: використовується для виділення тексту в певному контексті. Наприклад, він може бути використаний, щоб виділити кожне входження ключа пошуку на сторінці результатів пошуку.

cite: тегом зазвичай позначають назви книг, пісень, фільмів, тв-передач.

blockquote і q: елементи використовуються для вставки цитати з тексту іншого джерела.

time: тег може бути використаний, щоб сказати браузеру, пошукачам і інших пристроїв, що конкретна частина контенту є час і дату.

медіа теги

HTML5 також включає в себе три тега, які визначають тип медіа контенту. Теги підказують браузеру як саме відображати даний контент. а так само вони надають смислове значення для контенту.

audio: Використовується для додавання одного або декількох аудіо на сторінку, відображається у вигляді аудіо плеєра.

video: подібний аудіо тегу, але використовується для додавання відео контенту в документ.

picture: Елемент picture дає розробникам можливість більш гнучко відображати картинку на сторінці. Часто використовується в адаптивної верстці, так як може містити відразу кілька картинок які відображаються при певних медіа умовах.

кореляційні теги

Деякі теги використовуються для створення зв'язку між іншими елементами. Наприклад тег маркованого списку ul говорить браузеру що елементи li пов'язані і повинні з'являтися в певному порядку. Є ще теги:

ol: тег нумерованого списку, аналогічний з тегом ul

figure: використовується для угруповання такого контенту як картинки, графіки, може містити заголовок figcaption.

address: описує контактну інформацію на сторінці. І пов'язує її з автором статті або сторінки.

Якщо ви новенький в html то спробуйте застосувати всі ці теги для створення семантичної верстки сторінки вже в наступному проекті. Не використовуйте елементи якщо не впевнені чи потрібен він там чи ні, використання правильного тега дуже важливий момент. Краще витратьте трохи часу для глибокого його вивчення. Це дасть свої плоди в майбутньому.