Теги html сайту

19

Від автора: якщо ви вирішили зайнятися сайтобудування, то вам потрібно знати хоча б основні теги html. Це ті базові знання, яке допоможе вам створити свій перший сайт простий.

В цій статті спробую описати основні теги мови html. Всього їх більше сотні, але дійсно важливих і постійно потрібних не так багато. Найголовніші теги

html — це глобальний тег-контейнер, в який поміщається весь вміст веб-сторінки. Він є парним, втім, як і більшість описуваних далі тегів. Якщо і будуть потрапляти одинарні, то я про це скажу.

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

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

script — вкладені файли з розширенням bat (javascript).

title — задає назву сторінки, її заголовок, який буде видно в пошукових системах і в браузері.

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

body — тіло сторінки. Контейнер для всього вмісту, який буде безпосередньо виведено на веб-сторінку.

Теги для тексту, списки

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

blockquote — велика цитата, яка можете містити в собі інші теги для її оформлення. Може складатися, наприклад, з кількох абзаців.

h1 — h6 — теги для виділення заголовків на веб-сторінці. H1 – самий головний і далі за зменшенням важливості.

Теги html сайту

Рис. 1. Заголовки в html.

q — маленька цитата.

b, strong — виділяє текст жирним. Другий тег також надає словам особливої важливості.

em, i — виділення курсивом.

sub, sup — виводить текст в нижньому/верхньому індексі, заодно трохи зменшуючи розмір шрифту.

ol — це тег в html нумерованого списку, пунктами якого будуть присвоюватися порядкові номери.

ul — маркірований список. Його пункти просто відзначаються маркером, зовнішній вигляд якого можна змінювати. Маркований список роблять тоді, коли немає потрібно в суворій перерахуванні якихось пунктів.

li — парний тег, який поміщається один пункт маркірованого або нумерованого списку. Тобто ul або ol виступає лише в ролі контейнера.

Теги html сайту

Рис.2. Маркірований і немаркований списки.

Посилання

Для посилань в html є окремий тег , який має один обов’язковий атрибут:

анкор

Картинки

Картинки в html вставляються за допомогою одинарного тега Теги html сайту. Обов’язковим атрибутом src (source), тобто шлях до самої картинці. Інші параметри (розмір, позиціонування, ефекти) краще налаштовувати через css.

Таблиці

table — тег-контейнер, в який поміщається вся таблиця.

tr — ряд таблиці, в який вписуються її осередки. Сам ряд ніяк не можна виділити, він виступає лише в ролі контейнера.

td — клітинка таблиці. Ось до неї як раз і можна застосувати якісь стилі, розмір, в неї можна вписати інформацію, вставити картинку або відео.

Порожні блокові і малі контейнери

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

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

Мультимедіа

У список тегів html можна додати і більш сучасні. Наприклад, тег video, атрибути якого можна задати адресу до відеоролика, а також кодеки для програвання на веб-сторінці. Сюди ж входить audio. За допомогою цього парного тега можна вставити аудіозапис.

Форми

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

input — основний одинарний тег, який дозволяє вставити в форму різні поля для введення тексту, телефону, вибору дати народження).

textarea — велике текстове поле. Зазвичай в нього можна вписати відгук чи коментар.

Теги html сайту

Рис. 3. Проста форма, створена за допомогою тегів form і input.

HTML5

Хотілося б також згадати кілька сучасних тегів, які з’явилися в HTML5.

header — шапка сайту, статті або якогось розділу.

footer — підвал сайту, статті або якогось розділу.

aside — другорядна інформація, яка не має безпосереднього зв’язку з головним змістом. Але в цей тег не радять вставляти сайдбар (бічну колонку), яку краще робити поки що по-старому з допомогою div.

figure — дозволяє групувати елементи. Найпоширеніший приклад – картинка і опис для неї.

section — розділ сайту (зазвичай зі своїм заголовком).

article — незалежна стаття, новина або замітка.

nav — головна навігація сайту.

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

У статті були описані лише найпоширеніші елементи. Повний список тегів html c описом можна подивитися в якомусь словнику. Самий популярний в рунеті – htmlbook.

Один раз прочитавши статтю ви не запам’ятаєте всі перераховані теги. Набагато краще вони запам’ятовуються при реальній роботі над сайтом. Це були основні теги для створення html сайту. Заходьте на наш блог і ви знайдете набагато більше інформації по створенню власного сайту своїми руками.