HTML (англ. HyperText Markup Language — Мова розмітки гіпертекстових документів) — стандартна мова розмітки веб-сторінок в Інтернеті.

Офіційні відомості про специфікації HTML завжди можна отримати з Web-сайту Консорціуму W3C за адресою http://www.w3.org/TR/.


Значення тегів

<html>

Тег <html> є контейнером, який містить в собі весь вміст веб-сторінки, включаючи теги <head> і <body>. Відкриваючий та закриваючий теги <html> в документі необов’язкові, але хороший стиль диктує неодмінне їх використання. Закриваючий тег <html> повинен завжди стояти в документі останнім.

Атрибути тега:

title Додає підказку на веб-сторінку.
manifest Вказує файл маніфесту, необхідний для створення оффлайнового програми.
xmlns Вказує простір імен для XHTML-документів.

Приклад:

<html>

….

</html>

<head>

Тег <head> призначений для зберігання інших елементів, мета яких – допомогти браузеру в роботі з даними. Також всередині контейнера <head> знаходяться метатеги, які використовуються для зберігання інформації призначеної для браузерів і пошукових систем. Наприклад, механізми пошукових систем звертаються до метатега для отримання опису сайту, ключових слів та інших даних.
Вміст тега <head> не відображається безпосередньо на веб-сторінці, за винятком тега <title>, що встановлює заголовок вікна веб-сторінки.
Всередині контейнера <head> допускається розміщувати такі елементи: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.

Атрибути тега:

Приклад:

<html>

<head>

……..

</head>

</html>

<title>

Визначає заголовок документа. Елемент <title> не є частиною документа і не показується безпосередньо на веб-сторінці. В операційній системі Windows текст заголовка відображається в лівому верхньому кутку вікна браузера. Допускається використовувати тільки один тег <title> на документ і розміщувати його в контейнері <head>.

Атрибутів не має.

Приклад

<head>
< title>Заголовок</title>
< /head>

<body>

Елемент <body> призначений для зберігання змісту веб-сторінки (контенту), що відображається у вікні браузера. Інформацію, яку слід виводити в документі, слід розташовувати саме всередині контейнера <body>. До такої інформації належить текст, зображення, теги, скрипти JavaScript і т.д.
Тег <body> також застосовується для визначення кольорів посилань і тексту на веб-сторінці.

Атрибути тега:

alink Встановлює колір активного посилання.
background Визначає фоновий малюнок на веб-сторінці.
bgcolor Колір фону веб-сторінки.
bgproperties Визначає, прокручувати фон разом з текстом чи ні.
bottommargin Відступ від нижнього краю вікна браузера до контенту.
leftmargin Відступ по горизонталі від лівого краю вікна браузера до контенту.
link Колір посилань на веб-сторінці.
rightmargin Відступ від правого краю вікна браузера до контенту.
scroll Встановлює, відображати смуги прокрутки чи ні.
text Колір тексту в документі.
topmargin Відступ від верхнього краю вікна браузера до контенту.
vlink Колір відвіданих посилань.

Приклад

<body>
…
< /body>

<br>

Тег <br> встановлює переведення рядка в тому місці, де цей тег знаходиться. Якщо текст, в якому використовується переведення рядка, обтікає плаваючий елемент, то за допомогою атрибута clear тега <br> можна зробити так, щоб наступний рядок починався нижче елемента.

Атрибути тега:

clear Повідомляє браузеру, як обробляти наступний рядок, якщо текст обтікає плаваючий елемент.

Приклад

текст<br>

текст

<h1>-<h6>

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

Атрибути тега:

align Визначає вирівнювання заголовка.

Приклад

<h1>Заголовок</h1>

<a>

Тег <a> є одним з важливих елементів HTML і призначений для створення посилань.
Для створення посилання необхідно повідомити браузеру, що є посиланням, а також вказати адресу документа, на який слід зробити посилання. Як значення атрибута href використовується адреса документа (URL, Universal Resource Locator, універсальний покажчик ресурсів), на який відбувається перехід.

Атрибути тега:

accesskey Активація посилання за допомогою комбінації клавіш.
charset Вказує кодування тексту, на який веде посилання.
coords Встановлює координати активної області.
href Визначає адресу документа, на який слід перейти.
hreflang Ідентифікує мову тексту за посиланням.
media Вказує тип носія документа, на який веде посилання.
name Встановлює ім’я якоря всередині документа.
rel Відносини між посилається і поточним документами.
rev Відносини між поточним і посилається документами.
shape Визначає форму активної області посилання на зображення.
tabindex Визначає послідовність переходу між посиланнями при натисканні на кнопку <Tab>.
target Ім’я вікна або фрейму, куди браузер буде завантажувати документ.
title Додає підказку до тексту посилання.
type Вказує MIME-тип документа, на який веде посилання.

Приклад

<a href=”URL”>…</a>
< a name=”ідентификатор”>…</a>

<img>

Тег <img> призначений для відображення на веб-сторінці зображень в графічному форматі GIF, JPEG або PNG. Цей тег має єдиний обов’язковий атрибут src, який визначає адресу файлу з картинкою. Якщо необхідно, то малюнок можна зробити посиланням на інший файл, помістивши тег <img> в контейнер <a>. При цьому навколо зображення з’явиться рамка, яку можна прибрати, додавши атрибут border = “0″ в тег <img>.
Малюнки також можуть застосовуватися в якості карт-зображень, коли картинка містить активні області, що виступають в якості посилань. Така карта на вигляд нічим не відрізняється від звичайного зображення, але при цьому воно може бути розбите на невидимі зони різної форми, де кожна з областей служить посиланням.

Атрибути тега:

align Визначає як малюнок буде вирівнюватися по краю і спосіб обтікання текстом.
alt Альтернативний текст для зображення.
border Товщина рамки навколо зображення.
height Висота зображення.
hspace Горизонтальний відступ від зображення до навколишнього контенту.
ismap Каже браузеру, що картинка є серверної картою-зображенням.
longdesc Вказує адресу документа, де міститься анотація до картинки.
src Шлях до графічного файлу.
vspace Вертикальний відступ від зображення до навколишнього контенту.
width Ширина зображення.
usemap Посилання на тег <map>, що містить координати Клієнтська карти-зображення.

Приклад

<img src=”URL” alt=”альтернативний текст”>

<center>

Тег <center> вирівнює вміст контейнера по центру щодо батьківського елементу.

Атрибутів не має.

Приклад

<center>Текст</center>

<frameset>

Визначає структуру фреймів на веб-сторінці. Фрейми розділяють вікно браузера на окремі області, розташовані впритул один до одного. У кожну з таких областей завантажується самостійна веб-сторінка визначається за допомогою тега <frame>. За допомогою фреймів веб-сторінка ділиться на два або більше документа, які зазвичай містять навігацію по сайту і його контент. Механізм фреймів дозволяє відкривати документ в одному фреймі, по посиланню, утримуючи в зовсім іншому фреймі. Тег <frameset> замінює собою елемент <body> на веб-сторінці. Припустимо використовувати вкладену структуру елементів, це дозволяє розбити один фрейм на дві і більше області.

Атрибути тега:

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

Приклад

<frameset>
< frame>
< /frameset>

<frame>

Тег <frame> визначає властивості окремого кадру, на які ділиться вікно браузера. Цей елемент повинен розташовуватися в контейнері <frameset>, який до того ж задає спосіб розмітки сторінки на окремі області. У кожну з таких областей завантажується самостійна веб-сторінка визначається за допомогою атрибуту src. Хоча обов’язкових атрибутів у тега <frame> і немає, рекомендується задавати кожному фрейму його ім’я через атрибут name. Це особливо важливо, якщо потрібно за посиланням з одного кадру завантажувати документ в іншій.

Атрибути тега:

bordercolor Колір лінії кордону.
frameborder Відображати рамку навколо фрейма чи ні.
name Задає унікальне ім’я фрейма.
noresize Визначає, можна змінювати розмір кадру користувачеві чи ні.
scrolling Спосіб відображення смуги прокрутки у фреймі.
src Шлях до файлу, призначеному для завантаження у фреймі.

Приклад

<frameset>
< frame>
< /frameset>

<iframe>

Тег <iframe> створює плаваючий фрейм, який знаходиться всередині звичайного документа, він дозволяє завантажувати в область заданих розмірів будь-які інші незалежні документи.
Тег <iframe> є контейнером, зміст якого ігнорується браузерами, не підтримують даний тег. Для таких браузерів можна вказати альтернативний текст, який побачать користувачі. Він повинен розташовуватися між елементами <iframe> і </ iframe>.

Атрибути тега:

align Визначає як фрейм буде вирівнюватися по краю, а також спосіб обтікання його текстом.
allowtransparency Встановлює прозорий фон фрейму, через який видно фон сторінки.
frameborder Встановлює, відображати кордон навколо фрейма чи ні.
height Висота фрейму.
hspace Горизонтальний відступ від кадру до навколишнього контенту.
marginheight Відступ зверху і знизу від змісту до кордону фрейму.
marginwidth Відступ зліва і праворуч від змісту до кордону фрейму.
name Ім’я фрейма.
sandbox Дозволяє задати ряд обмежень на контент завантажується у фреймі.
scrolling Спосіб відображення смуги прокрутки у фреймі.
seamless Визначає, що вміст фрейма повинне відображатися так, наче воно є частиною документа.
src Шлях до файлу, вміст якого буде завантажуватися у фрейм.
srcdoc Зберігає вміст фрейма безпосередньо в атрибуті.
vspace Вертикальний відступ від кадру до навколишнього контенту.
width Ширина фрейму.

Приклад

<iframe>…</iframe>

<div>

Елемент <div> є блоковим елементом і призначений для виділення фрагмента документа з метою зміни виду вмісту. Як правило, вид блоку управляється за допомогою стилів. Щоб не описувати кожен раз стиль всередині тега, можна виділити стиль в зовнішню таблицю стилів, а для тега додати атрибут class або id з ім’ям селектора.
Як і при використанні інших блочних елементів, вміст тега <div> завжди починається з нового рядка. Після нього також додається перенесення рядка.

Атрибути тега:

align Задає вирівнювання вмісту тега <div>.
title Додає підказку до вмісту

Приклад

<div>…</div>

<font>

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

Атрибути тега:

color Встановлює колір тексту.
face Визначає гарнітуру шрифту.
size Визначає розмір шрифту в умовних одиницях.

Приклад

<font>Текст</font>

<iframe>

Тег <iframe> створює плаваючий фрейм, який знаходиться всередині звичайного документа, він дозволяє завантажувати в область заданих розмірів будь-які інші незалежні документи.
Тег <iframe> є контейнером, зміст якого ігнорується браузерами, не підтримують даний тег. Для таких браузерів можна вказати альтернативний текст, який побачать користувачі. Він повинен розташовуватися між елементами <iframe> і </ iframe>.

Атрибути тега:

align Визначає як фрейм буде вирівнюватися по краю, а також спосіб обтікання його текстом.
allowtransparency Встановлює прозорий фон фрейму, через який видно фон сторінки.
frameborder Встановлює, відображати кордон навколо фрейма чи ні.
height Висота фрейму.
hspace Горизонтальний відступ від кадру до навколишнього контенту.
marginheight Відступ зверху і знизу від змісту до кордону фрейму.
marginwidth Відступ зліва і праворуч від змісту до кордону фрейму.
name Ім’я фрейма.
sandbox Дозволяє задати ряд обмежень на контент завантажується у фреймі.
scrolling Спосіб відображення смуги прокрутки у фреймі.
seamless Визначає, що вміст фрейма повинне відображатися так, наче воно є частиною документа.
src Шлях до файлу, вміст якого буде завантажуватися у фрейм.
srcdoc Зберігає вміст фрейма безпосередньо в атрибуті.
vspace Вертикальний відступ від кадру до навколишнього контенту.
width Ширина фрейму.

Приклад

<iframe>…</iframe>

<li>

Тег <li> визначає окремий елемент списку.

Зовнішній тег <ul> або <ol> встановлює тип списку – маркований або нумерований

Атрибути тега:

type Встановлює вид маркера нумерованого або маркованого списку.
value Число, з якого буде починатися нумерований список.

Приклад

<ul>
< li>элемент маркованого списку</li>
< /ul>

<ol>
< li>элемент нумерованого списку</li>
< /ol>

<meta>

<meta> визначає метатеги, які використовуються для зберігання інформації призначеною для браузерів та пошукових систем. Наприклад, механізми пошукових систем звертаються до метатега для отримання опису сайту, ключових слів та інших даних. Дозволяється використовувати більш ніж один метатег, всі вони розміщуються в контейнері <head>. Як правило, атрибути будь-якого метатега зводяться до пар «ім’я = значення», які визначаються ключовими словами content, name або http-equiv.

Атрибути тега:

charset Задає кодування документа.
content Встановлює значення атрибута, заданого за допомогою name або http-equiv.
http-equiv Призначений для конвертації метатега в заголовок HTTP.
name Ім’я метатега, також побічно встановлює його призначенн.

Приклад

<head>
< meta content=”…”>
< /head>