Основи HTML. Основи HTML Парні теги HTML

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

…

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

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

…

і тег

…

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

Класифікація тегів

Усього тегів у HTML налічується понад 90. Як правило, один тег впливає лише на частину документа, наприклад, тег заголовка першого рівня. У таких випадках використовуються парні теги: відкриваєі закриває. Тег, що відкриває (наприклад, ) створює ефект, а закриває ( ) - припиняє його дію. Як видно з прикладу, тег, що закриває, завжди має ось такий символ (/ ) — прямий сліш. Такі теги називають парні.

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

Типи тегів

Крім того теги поділяють на кілька типів, які розрізняються за виконуваними функціями:

теги заголовка документа;
блокові елементи;
малі елементи;
універсальні елементи;
списки;
таблиці;
кадри.

Цей поділ не суворий, тому деякі теги знаходяться в різних групах. Наприклад, теги для створення списків та

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

Всі теги мають певну структуру, яку необхідно дотримуватись при написанні. Крім того, практично всі теги мають різні атрибути, які можуть змінювати спосіб відображення вмісту.

Давайте подивимося на правильну структуру тегів, що містять атрибути:

Сам Собі Вебмайстер

Для прикладу я навів два абсолютно різні теги. Перший одинарний - відповідає за виведення зображень, атрибут - src = "logo.jpg". Другий …парний відповідає за створення посилань, атрибут - href = "сайт".

Висновок 1: Атрибути можуть мати парні та непарні теги.

Висновок 2 : Атрибути можуть мати тільки теги, що відкривають, закривають теги не мають атрибутів.

Зображення для роз'яснення:

Малюнок 1. Структура тега html

Давайте подивимося на прикладі простої веб-сторінки, яку ми розглядали на уроці

Ви вже прочитали, що вся мова складається з тегів. У цьому уроці розберемося докладніше з HTML-тегами. У мові HTML відбувається розподіл тегів на одинарні (не парні) та парні теги. Отже, одинарні HTML теги складаються з одного тега, тобто у них немає тега, що закриває. А у парних дескрипторів є тег, що відкривається і закривається.

теги HTML

Одинарні теги не мають тега, що закриває. Наприклад:
, . Раніше писали так:
, Тепер такий стиль написання одинарних тегів не актуальний, тому не пишіть так. Найбільш використовувані одинарні теги:
- перенесення на новий рядок, - розділова лінія, - Вставлення зображення.

Парних тегів набагато більше. У парного дескриптора є тег, що відкриває і закриває. Парний тег утворює контейнер. Вміст контейнера - це те, що знаходиться між тегом, що відкриває і закриває. У прикладі цієї статті ви бачили тег Що таке дескриптори в HTML? , так ось, це парний тег, вміст цього тега є текст «Що таке теги в HTML?». Його початком є тег, а кінцем.

Головна помилка новачків у написанні парних тегів – це плутанина у вкладеності. Наприклад, ось це правильний запис:

Жирний абзац

Як правильно писати парні теги

Мова HTML5 є розширенням HTML4, тому вона зберегла більшу частину або всі дескриптори з HTML4 і додала свої. У HTML5 з'явилися спеціальні теги для розбиття сайту на основні блоки: шапка, меню, підвал, сайдбар та контент.

Пошуковики Yandex і Google трепетно ставляться до верстки HTML документів, перевіряючи їх на валідність. Шукають у них ключовики ув'язнені у спеціальні дескриптори тощо. Але цей поділ не про це. Це стосується просування (SEO).

Так, теґів не мало. Але навчити їх не потрібно. Поки ви практикуватиметеся, щось писатимете, у вас усі дескриптори, парні та одинарні, легко запам'ятаються. Згодом, звичайно.

HTML-теги – основа мови HTML. Теги використовуються для розмежування початку та кінця елементів у розмітці.

Кожен HTML-документ складається з дерева HTML-елементів та тексту. Кожен HTML-елемент позначається початковим (відкриває) і кінцевим (закриває) тегом. Теги, що відкриває і закриває, містять ім'я тега.

Усі HTML-елементи поділяються на п'ять типів:

порожні елементи - , ,
, , , , , , , , , , , , ;
елементи з неформатованим текстом - ;
елементи, що виводять неформатований текст - ;
елементи з іншого простору імен MathML і SVG;
Звичайні елементи — решта елементів.

У таблиці наведено повний списокелементів, що підтримуються HTML4 та HTML5. Експериментальні та застарілі теги виключені. Елементи, додані до специфікації HTML5, виділені бірюзовим кольором.

Використовується для додавання коментарів.

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

Створює гіпертекстові посилання.

Визначає текст як абревіатуру чи акронім. Пояснюючий текст задається за допомогою атрибуту title.

Задає контактні дані автора/власника документа чи статті. Відображається у браузері курсивом.

Є гіперпосиланням з текстом, що відповідає певній області на карті-зображенні або активну область усередині карти-зображення. Завжди вкладений усередину тега.

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

Це контент сторінки, який має непряме відношення до основного контенту сторінки/сайту.

Завантажує звуковий вміст на веб-сторінку.

Задає напівжирне зображення уривка тексту, не надаючи акценту або важливості виділеному.

Задає базову адресу (URL), щодо якої обчислюються всі відносні адреси. Це допоможе уникнути проблем при перенесенні сторінки в інше місце, оскільки всі посилання працюватимуть, як і раніше.

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

Відображає текст у напрямку, вказаному в атрибуті dir, перевизначаючи поточний напрямок написання тексту.

Виділяє текст як цитату, використовується для опису великих цитат.

Представляє тіло документа (вміст, що не стосується метаданих документа).

Перенесення тексту на новий рядок.

Створює інтерактивну кнопку. Всередині тега можна помістити вміст тексту або зображення.

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

Додає підпис до таблиці. Вставляється відразу після тега .

Використовується для визначення джерела цитування. Відображається курсивом.

Представляє фрагмент програмного коду, що відображається шрифтом сімейства monospace .

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

Створює структурну групу шпальт, що виділяє безліч логічно однорідних осередків.

Елемент використовується для зв'язування значення атрибута value , яке представлене в форматі машиночитаемого і може бути оброблено комп'ютером, з вмістом тега.

Елемент-контейнер для списку елемента . Варіанти значень поміщаються в елементи.

Використовується для опису терміна з тега.

Позначає текст як віддалений, перекреслюючи його.

Створює інтерактивний віджет, який можна відкрити або закрити. Є контейнером для контенту, видимий заголовок віджету міститься в тег .

Визначає слово як термін, що виділяє його курсивом. Текст, що йде слідом, має містити розшифрування цього терміна.

Інтерактивний елемент, з яким взаємодіє користувач для виконання завдання, наприклад діалогове вікно, інспектор або вікно. Без атрибута open не видно користувача.

Тег-контейнер для розділів HTML-документів. Використовується для групування блокових елементів для форматування стилями.

Тег-контейнер, всередині якого знаходяться термін та його опис.

Використовується для завдання терміна.

Виділяє важливі фрагменти тексту, показуючи їх курсивом.

Тег-контейнер для вбудовування зовнішнього інтерактивного контенту або плагіна.

Групує пов'язані елементи у вигляді, малюючи рамку навколо них.

Заголовок/підпис для елемента .

Самодостатній тег-контейнер для такого контенту як ілюстрації, діаграми, фотографії, приклади коду зазвичай з підписом.

Визначає завершальну область (нижній колонтитул) документа чи розділу.

Форма для збору та відправки на сервер інформації від користувачів. Не працює без атрибуту action.

Створюють заголовки шести рівнів пов'язаних із нею розділів.

Елемент-контейнер для метаданих HTML-документів, таких як , , , , .

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

Горизонтальна лінія для тематичного розподілу параграфів.

Кореневий елемент HTML документа. Повідомляє браузер, що це HTML-документ. Є контейнером для решти html-елементів.

Виділяє уривок тексту курсивом, не надаючи йому додаткового акценту.

Створює вбудований кадр, завантажуючи в поточний документ HTML інший документ.

Вбудовує зображення в HTML-документ за допомогою атрибута src , значенням якого є адреса зображення, що вбудовується.

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

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

Виділяє текст, який має бути введений користувачем із клавіатури, шрифтом сімейства monospace.

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

Індикатор вимірювання у заданому діапазоні.

Розділ документа, що містить навігаційні посилання на сайті.

Визначає секцію, яка не підтримує сценарій (скрипт).

Контейнер для вбудовування мультимедіа (наприклад, аудіо, відео, Java-аплети, ActiveX, PDF та Flash). Також можна вставити іншу веб-сторінку до поточного документа HTML. Для передачі параметрів плагіна використовується тег .

Впорядкований нумерований список. Нумерація може бути числова чи алфавітна.

Контейнер із заголовком для групи елементів.

Визначає варіант/опцію для вибору в списку , або .

Поле для виведення результату обчислення розрахованого за допомогою скрипта.

Параграфи у тексті.

Визначає параметри для вбудованих плагінів за допомогою елемента .

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

Виводить текст без форматування, із збереженням пробілів та переносів тексту. Може використовуватись для відображення комп'ютерного коду, повідомлення електронної пошти і т.д.

Індикатор виконання завдання будь-якого роду.

Визначає коротку цитату.

Контейнер для Східно-Азіатських символів та їх розшифрування.

Визначає вкладений текст як базовий компонент інструкції.

Додає коротку характеристику згори або знизу від символів, укладених в елементі, виводиться зменшеним шрифтом.

Зазначає вкладений текст як додаткову інструкцію.

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

Відображає текст, який не є актуальним, перекресленим.

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

Використовується для визначення сценарію на стороні клієнта (зазвичай JavaScript). Містить текст скрипту, або вказує на зовнішній файл сценарію за допомогою атрибута src .

Визначає логічну область (розділ) сторінки, зазвичай із заголовком.

Елемент управління, що дозволяє вибирати значення із запропонованої множини. Варіанти значень містяться в .

Відображає текст меншим шрифтом.

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

Контейнер для малих елементів. Можна використовувати для форматування уривків тексту, наприклад, виділення кольором окремих слів.

Розставляє акценти у тексті, виділяючи напівжирним.

Підключає вбудовані таблиці стилів.

Задає підрядкове написання символів, наприклад індексу елемента в хімічних формулах.

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

Вказує надрядкове написання символів.

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

Створює рядок таблиці.
	Додає субтитри для елементів та .
	Виділяє уривок тексту підкресленням без додаткового акценту.
	Створює маркований список.
	Виділяє змінні із програм, відображаючи їх курсивом.
	Додає на сторінку відеофайли. Підтримує 3 відео формати: MP4, WebM, Ogg.
	Вказує браузеру можливе місце розриву довгого рядка.

Таблиця-шпаргалка з тегами

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

HTML є звичайним текстовим файлом з розширенням.htm (html). Для створення найпростішої сторінки спочатку, коли ви тільки тренуєтеся необхідно лише блокнот. Відкрийте блокнот та напишіть текст.

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

Ось цей тег просто вказує браузеру (це програма, в якій ви переглядаєте інтернет сторінки), що цей документ є html-документом розмітки.

Тег - означає початок html-документа, а - тег, що закривається, означає кінець html документа.

У цих тегах є ще кілька важливих тегів. Відразу за тегом йдуть теги, що означають заголовок сторінки та тіло сторінки.

Моя перша сторінка HTML

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

Отже, наведений вище текст буде для нас базовим каркасом будь-якої веб-сторінки.

Парні та непарні теги!

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

Непарні теги – у них немає тега, що закриває. Далі ми наведемо приклади таких тегів.

- Заголовок html сторінки, куди включаються ключові слова для пошукових систем, різні скрипти, і т.д.

- Безпосередньо тіло html-документа.

Непарний тег.

Примітка: У більшості випадків зараз при побудові сайтів використовують підпрограми, плагіни і т.д. – для більш швидкого створення сайтів, але для того, щоб застосовувати та використовувати такі підпрограми та шаблони – все ж таки необхідне мінімальне знання даних сесій.

HTML елемент – це основна структурна одиниця веб-сторінки, написана мовою HTML.

Парні та одиночні теги HTML

Синтаксис HTML елементів, що складаються з парних тегів:

Елемент починається з тега, що відкриває.
Елемент закінчується тегом, що закриває.
Вміст елемента є все, що знаходиться між тегами, що відкривають і закривають. Вміст може бути текстом та/або іншим HTML елементом.

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

Синтаксис HTML елементів, що складаються з одиночних тегів:

Елемент складається тільки з тега, що відкриває.

Елементи, що складаються з одиночних тегів, називаються порожніми . Всього в HTML 16 одиночних тегів:

Вкладені елементи

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

Наступний приклад складається з трьох елементів, два з яких вкладені:

Мій перший абзац

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

Це дуже

цікаво

Тут елемент виходить за межі елемента

Приклад із правильною вкладеністю:

Це дуже цікаво

Тут елемент правильно вкладений - він повністю в елементі

Пробільні символи

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

Заголовок Мій перший заголовок

Мій перший абзац

Код прикладу можна було б написати зовсім без використання пробельних символів, але такий код буде менш зручний для читання:

ЗаголовокМій перший заголовок

Мій перший абзац

Оскільки код HTML-документа з часом стає більшим і ускладнюється, стає видно, що використання пробілових символів дійсно покращує читабельність коду.