HTML5 Структурні елементи

21.11.2015 14:06 | Admin

Привіт, в цій статті я розкажу про основні можливості і переваги використання HTML5. Завжди під час верстки ми використовуємо тег "<div>", і коли структура складна, то цих div'ів з’являєтся дуже багато і це не зручно з ними потім розбиратись. В HTML5 є спеціальні теги, які зразу характеризують певну частину сторінки. Зразу скажу, що це від цього щось кардинально не зміниться, але з основних змін буде те,що пошуковим системам буде легше індексувати Ваш сайт, оскільки вони будуть розуміти, що за що відповідає.

Ось їх короткий список і значення:

section - призначений для розбиття контенту на секції. Наприклад на блоки новин.
header - призначений для позначення верхньої секції на сторінці.
footer - позначає нижню секцію на сторінці.
article - виділяє частину основного тексту на сторінці. Наприклад текст статті.
nav - позначає навігацію. Наприклад меню, хлібні крихти, і т.д.

А тепер прийшов час прикладів:

<html>
    <head>
        <meta charset="utf-8">
        <title>Основні структурні елементи HTML5</title>
    </head>
    <body>
        <header>
            <h1>Назва сайту</h1>
            <nav>
                <h2>Меню:</h2>
                <a>link 1</a>
                <a>link 2</a>
                <a>link 3</a>
            </nav>
        </header>
        <section>
            <article>
                <h2>Title 1</h2>
                <p>text 1...</p>
            </article>
            <article>
                <h2>Title 2</h2>
                <p>text 2...</p>
            </article>
        </section>
        <footer>
            <p>Copyright 2015&copy;</p>
        </footer>
    </body>
</html>

Категорія: HTML | Коментарі відсутні »

Тільки авторизовані користувачі можуть додавати коментарі.

Web-Programming.in.ua

Пошук

Авторизація

Останні коментарі

Популярні статті

Корисні поосилання

RSS

HTML5 Структурні елементи