Семантична структура за HTML5 страница
Днес ще говорим за семантика в HTML5. Вече написах кратка публикация за новите семантични тагове в HTML5. Препоръчвам ви да се запознаете с него, преди да прочетете тази статия. Сега ще се заемем с този проблем по-подробно, за това как правилно и правилно да съставим семантичната структура на HTML5 документ.
Семантична структура за HTML5 страница
В тази статия постепенно ще създадем html страница и ще я украсим със семантични HTML5 тагове.
Фигура - Семантична структура за HTML5 страница.
DOCTYPE и мета тагове в заглавието на страницата
Нека започнем със стандартен шаблон на HTML5 документ и да добавим мета тагове към главата:
Добавих таг, който отговаря за ключовите думи. И етикетът, който отговаря за описанието на страницата. Тези маркери са необходими за SEO оптимизация. Изисква се и правилното попълване на етикета. Заглавието на страницата трябва да бъде уникално за целия сайт и да съдържа в заглавието цялата същност на страницата, за която е посочено.
Да вървим по-нататък. HTML5 въвежда нови маркери, които се използват за семантично маркиране на документ. Това са заглавката на таговете, навигация, главна, статия, настрана, долен колонтитул и др Те работят по същия начин като нормалните.
Заглавие на страница
Заглавката на страницата е стилизирана в маркера на заглавката. Имайте предвид, че заглавието на страницата е написано с таг h1.
Ако имаме и лозунг до заглавието, тогава го поставяме в p, div или span.
Бележка H1 етикет
Трябва да се отбележи, че в HTML5 етикетът H1 се използва за обозначаване на заглавието на контейнера, в който се намира (това може да бъде заглавка, раздел, статия и т.н.)
Преди HTML5 таговете семантиката беше малко по-различна и различна. Така че в HTML4 може да има само едно заглавие H1 на страница! Обикновено това беше заглавието на статията или заглавието на страницата (например, ако това е страница с категория, която показва няколко статии.) H2 се използва за подзаглавия или за раздели на основната статия. H3 за под дялове и така нататък.