Які теги визначають структуру html сторінки

15

Від автора: вітаю вас на блозі webformyself. Мова html, як і багато інших речей в нашому житті, має певну структуру. У нашому випадку її закладають спеціальні команди. Які теги визначають структуру html сторінки і де їх потрібно прописувати? Про це я спробую розповісти сьогодні.

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

Будь-який, абсолютно будь-який html-документ має якісь однакові фрагменти. Кількість заголовоков, абзаців і списки на веб-сторінках може бути різним, але є певні теги, які обов’язково присутні у вихідному коді будь-якого сайту.

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

Раніше значення цього параметра були дуже довгими та незрозумілими. Сьогодні все спростилося і для роботи з сучасною версією мови потрібно використовувати такий рядок:

Всі, тип документа вказано і можна рухатися далі.

— головний елемент-контейнер на сторінці, в який поміщаються теги заголовку й тіла сторінки. Він парний і закривається в самому-самому кінці документа.

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

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

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

Які теги визначають структуру html сторінки

Рис. 1. Це типовий приклад обов’язкових тегів, які формують структуру документа.

Оскільки ми дійшли до тіла сторінки, далі я б хотів описати кілька тегів, які формують вже безпосередньо видиму структуру, тобто ті елементи, які ми бачимо на сторінці і які відокремлюють інформацію один від одного.

— дуже важливі парні теги заголовків, які виводяться на веб-сторінку. Як правило, в h1 укладають назва статті або іншої публікації, h2 – підзаголовки, h3 – підзаголовки підзаголовків і т. д. У великому документі дійсно можуть знадобитися всі ці теги.

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

— формує абзац (параграф) тексту. Також дуже важливий елемент. Навряд чи хтось захоче читати суцільний текст, ніяк не поділений на абзаци, вірно?

Абзац також має невеликі відступи. У візуальних редакторах систем управління сайтом цей тег може проставлятися автоматично всякий раз, коли ви робите два переносу рядка.

Вище були описані, мабуть, самі основні теги, що відповідають за структуру. Вони є у будь-якої веб-сторінки. Але як взагалі формується тег і що в нього входить?

Структура тега html

Давайте відразу розберемося на прикладі.

Заголовок

Тут видно, що ми не просто написали

. У будь-тег можна вписати додаткові атрибути. Вони пишуться відкривається частині елементу.

Які теги визначають структуру html сторінки

Спочатку пишеться назва атрибута, а потім задається його значення. У цьому прикладі рядок class = «title» прив’яже до нашого заголовку стильової клас title, так що через нього можна буде звернутися до цього елемента в css.

Між парними тегами ми записали те, що безпосередньо буде виведено на екран. Після цього слід закрити тег. Якщо забути це зробити, то це може привести до цікавих помилок. Наприклад, весь текст на сторінці може перетворитися в заголовок. В одинарних тегах не можна писати довільний текст, в них можна задати тільки певні атрибути.

Будь html-елемента можна задавати якісь атрибути. Є так звані універсальні атрибути, які можна прописати будь-якого елементу. Приміром, стильовий клас можна прив’язати до чого завгодно. Також є атрибути, які унікальні для якихось тегів. Наприклад:

Тут атрибут target є унікальним для посилання, так як ні для яких інших елементів він не потрібний і не прописується. Ці та інші атрибути ви можете вивчити в процесі вивчення мови HTML. Детальніше зі структурою документа можна ознайомитися у підручнику з основ html.

Підсумок

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

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

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