Изработка на сайт с HTML5 – Семантичен код
1. След като вече сме структурирали основните елементи в HTML5 документа, ние сме готови да запълним нашия сайт с информация. За тази цел всяка информация, която се вмъква във съдържанието, трябва да бъде сложена отново в подходящия за това елемент. Преди да пристъпим към вмъкване на новите елементи, важно е да поставим универсалния набор от символи – meta тага UTF-8, благодарение на който можем да пишем на всички езици – включително и на кирилица. Той изглежда така <meta charset=“UTF-8″> и се слага винаги в началото на елемента <head>.
2. Продължаваме с елемента <header>, който се слага в началото на елемента <body>. Елементът <header> трябва да се използва като уводно съдържание. Възможно е да имате няколко <header> елемента, но не може те да бъдат поставяни в рамките на <footer> или друг <header> елемент.
Елементът <p> (или параграф) представлява абзац от текст, който може да се използва множество пъти навсякъде в нашия html документ.
Елементът <nav> се използва за създаване на навигационен бар или така нареченото меню. Отделните менюта се създават благодарение на списък с елемента <ul> или unordered list, който съдържа в себе си множество <li> list елементи.
3. Елементът <section> означава раздел. Той може да съдържа в себе си множество от елементи <article>, което се превежда като статия. Всяка статия трябва да има заглавие, което се поставя в елемента <h1>. В елемента <p> (или параграф) се записва самото съдържание към статията.
4. Елементът <aside> включва съдържание, което се поставя в страничната лента. Това съдържание също може да бъде в нашето странично меню.
5. Елементът <footer> бележи края на нашия сайт. Там обикновено се поставят данни за авторски права, карта на сайта, други пояснения. Все по-модерно става във <footer> дори да се поставя навигационен бар <nav>.
Това е правилно структуриран код, написан на HTML5. Семантичният код в HMTL5 е от значение за ориентацията на търсачките. Така трябва да бъде структуриран един html документ. Това е препоръчителното правило за подредбата в HTML документа. Семантиката може да бъде още по-разнообразна, когато се приложат и други елементи, които ще разгледаме по-късно в следващите уроци.
Ето как нагледно трябва да изглежда структурата на Вашата HTML5 страница.
