Будь-який HTML-документ складається зі спеціальних елементів, які ще прийнято називати тегами.
В основному, HTML код складається з так званих відкриваючих і закриваючих тегів. Хоча бувають і винятки. Лише поодинокі елементи використовуються без закриваючого тега, і ми звичайно ж їх розглянемо в свій час.
Відкриваючий тег – це елемент вкладений в кутові дужки <тут пишемо ім'я елемента>. Він показує браузеру, де починається цей елемент. Тому його ще іноді називають початковим тегом.
Закриваючий тег – містить в собі те ж ім'я, що і відкриваючий тег, але перед ним (перед ім'ям тега) обов'язково присутній знак / (слеш).
Все що обернуте в тег, тобто міститься між відкриваючим і закриваючим тегами називається вмістом елемента, або контентом.
Наприклад, якщо дивитися на використовуваний раніше в практичному завданні №1 код, то:
<title> – це початковий тег;
</title> – це закриваючий тег;
А текст «Пример HTML разметки» – це вміст елемента <title>.
У минулій темі, ви вже побачили з яких основних елементів складається HTML-документ. Але з усієї тієї розмітки вам навряд чи було щось зрозумілим крім слів, написаних кирилицею.
Тому давайте розглянемо більш детально кожен рядок коду HTML-документа з практичного завдання №1.
Тим самим ми вже на початкових етапах вивчимо основні елементи (теги), з яких складається наша HTML сторінка, і дізнаємося основні атрибути цих елементів (тегів).
Малюнок 1. 11. Структура HTML-документа
Першим рядком коду у нас йде <!doctype html>
<!DOCTYPE> – це елемент, який вказує браузеру тип поточного документа.
DTD (document type definition, опис типу документа, визначення типу документа) – це дуже важливий елемент. Завдяки йому браузер розуміє згідно яким стандартом потрібно відображати веб-сторінку. І в підсумку наша сторінка коректно відображається в браузері.
Якщо не вказати <!DOCTYPE>, то браузер може не зрозуміти, як інтерпретувати (виконувати код) поточної сторінки. В результаті певні елементи можуть або взагалі не відобразитися в браузері, або ж вони будуть відображені некоректно.
Зчитуючи перший рядок коду <!doctype html>, браузер розуміє, що дану сторінку слід інтерпретувати як HTML-документ і код в ньому написаний на HTML5.
Я не буду описувати вам всі допустимі DTD в цьому розділі, так як ми будемо вивчати створення сайтів на HTML5. І забивати голову зайвою інформацією на ранніх етапах я не бачу сенсу.
Другий рядок нашого коду містить елемент <html>. Цей тег не обов'язковий для HTML-документів, але хороший стиль написання коли диктує неодмінне його використання.
Елемент <html> складається з початкового тега <html> (в нашому прикладі це другий рядок коду), і кінцевого тега </html> (в нашому прикладі це 11 рядок коду).
Тег <html> – це контейнер, в який обернуто весь вміст веб-сторінки .
У третьому рядку коду у нас елемент <head>. Він також складається з відкриваючого тега <head> (3-й рядок коду) та закрываючого тега </head> (6-й рядок).
Все що укладено в тег <head> призначене для браузера і пошукових систем. Інформація, введена в тезі <head> не відображається на екрані монітора під час перегляду сайту (за винятком вмісту тега title).
У тезі <head> ми прописуємо інші елементи, які допомагають браузеру і пошуковим машинам обробляти дані сторінки. Тут можуть бути прописані: заголовок сторінки, її опис, ключові слова для пошукових машин, кодування HTML-документа і т. д.
<meta charset="utf-8"> – це рядок коду, який визначає кодування документа. У цьому рядку коду у нас задіяний тег <meta> і його атрибут charset (детально про атрибути буде розказано трохи пізніше).
Тег <meta> – це необов'язковий елемент розділу <head>. Його використовують для визначення метатегів. Ці мета-теги зберігають в собі інформацію, призначену для браузерів і пошукових систем.
Наприклад, пошукові роботи зчитують інформацію з метатегів, щоб отримати опис сторінки, ключові слова, ім'я автора HTML-сторінки та іншу інформацію.
На одній сторінці може бути декілька тегів <meta> в залежності від того, яку інформацію ми хочемо надати браузеру і пошуковим роботам.
Атрибут charset – задає кодування сторінки. У нашому прикладі – це найпоширеніше кодування UTF-8.
Раніше для кирилиці в Windows використовували кодування windows-1251, але зараз це вважається поганою практикою.
Наступним рядком коду у нас йде тег<title> (рядок 5). Цей тег призначений для визначення заголовка сторінки.
Безпосередньо в браузері цей пункт не відображається. Він відображається як заголовок вкладки браузера (згадайте наш приклад з практичного завдання №1). Також тег <title> призначений для пошукових систем. Саме той текст, який ви пропишите в title буде відображатися першим пошуковими системами, коли людина щось шукає.
Малюнок 1.12. Як відображається вміст Title в пошуковій системі
Тег <title> – обов'язковий елемент будь-якої веб-сторінки і він обов'язково знаходиться в контейнері <head>.
Важливо!
- На одній сторінці може бути тільки один тег title;
- Довжина заголовка (тега title) не повинна перевищувати 80 символів. Найкраще якщо довжина title буде 60-70 символів.
І останній елемент, який ми розглянемо в цій темі – це тег <body> (рядок 8 та 10).
У тезі <body> зберігається вся інформація, яку Ви бажаєте бачити у вікні браузера. Іншими словами – це контент нашої сторінки (зміст веб-документа).
Тут ми прописуємо який текст потрібно показати користувачеві, які картинки відобразити у вікні браузера, відео, форми входу (авторизації), кнопки, банери та іншу інформацію.
Початковий і кінцевий тег <body> є не обов'язковими. Але хороший стиль написання коду вимагає використання цього елемента в HTML-документі.
У наведеній нижче таблиці, ви можете ознайомитися з усіма елементами HTML5 доступними на сьогоднішній день. У цій книзі ми поступово, крок за кроком, розглянемо кожен з цих елементів.
Ну а якщо вам потрібно додаткове візуальне пояснення до даної глави, то його ви знайдете на моєму YouTube каналі.
Таблиця 1. 1. Повний список HTML-елементів
|
Тег |
Опис |
|---|---|
|
<!--...--> |
Використовується для додавання коментарів. |
|
<!DOCTYPE> |
Оголошує тип документа і надає основну інформацію для браузера – його мову і версію. |
|
<a> |
Створює гіпертекстові посилання. |
|
<abbr> |
Визначає текст як абревіатуру або акронім. Пояснювальний текст задається за допомогою атрибута title. |
|
<address> |
Задає контактні дані автора/власника документа або статті. Відображається в браузері курсивом. |
|
<area> |
Являє собою гіперпосилання з текстом, що відповідає певній області на карті-зображенні або активну область всередині карти-зображення. Завжди вкладений всередину тега <map>. |
|
<article> |
Розділ контенту, який утворює незалежну частину документа або сайту, наприклад, стаття в журналі, запис в блозі, коментар. |
|
<aside> |
Являє контент сторінки, який має непряме відношення до основного контенту сторінки/сайту. |
|
<audio> |
Завантажує звуковий контент на веб-сторінку. |
|
<b> |
Задає напівжирний шрифт уривка тексту, не надаючи акцент або на важливості виділеному. |
|
<base> |
Задає базову адресу (URL), щодо яої обчислюються всі відносні адреси. Це допоможе уникнути проблем при перенесенні сторінки в інше місце, так як всі посилання будуть працювати, як і раніше. |
|
<bdi> |
Ізолює уривок тексту, написаний на мові, в якій читання тексту відбувається справа наліво, від решти тексту. |
|
<bdo> |
Відображає текст в напрямку, зазначеному в атрибуті dir, перевизначаючи поточний напрямок написання тексту. |
|
<blockquote> |
Виділяє текст як цитату, застосовується для опису великих цитат. |
|
<body> |
Являє тіло документа (вміст, що не відноситься до метаданих документа). |
|
<br> |
Перенесення тексту на новий рядок. |
|
<button> |
Створює інтерактивну кнопку. Всередину тега можна помістити вміст – текст або зображення. |
|
<canvas> |
Полотно-контейнер для динамічного відображення зображень, таких як прості зображення, діаграми, графіки і т.п. Для малювання використовується скриптова мова JavaScript. |
|
<caption> |
Додає підпис до таблиці. Вставляється відразу після тега <table>. |
|
<cite> |
Використовується для вказівки джерела цитування. відображається курсивом. |
|
<code> |
Являє фрагмент програмного коду, відображається шрифтом сімейства monospace. |
|
<col> |
Вибирає для форматування один або декілька стовпців таблиці, які містять інформацію одного типу. |
|
<colgroup> |
Створює структурну групу стовпців, що виділяє безліч логічно однорідних осередків. |
|
<data> |
Елемент використовується для зв'язування значення атрибута value, яке представлено в машиночитаємому форматі і може бути оброблене комп'ютером, з вмістом тега. |
|
<datalist> |
Елемент-контейнер для списку елемента <input>. Варіанти значень поміщаються в елементи <option>. |
|
<dd> |
Використовується для опису терміну з тега <dt>. |
|
<del> |
Позначає текст як віддалений, переклеслюючи його. |
|
<details> |
Створює інтерактивний віджет, який користувач може відкрити або закрити. Являє собою контейнер для контенту, видимий заголовок віджета поміщається в тег <summary>. |
|
<dfn> |
Визначає слово як термін, виділяючи його курсивом. Текст, що йде слідом, повинен містити розшифровку цього терміна. |
|
<dialog> |
Інтерактивний елемент, з яким взаємодіє користувач для виконання завдання, наприклад, діалогове вікно, інспектор або вікно. Без атрибута open непомітний для користувача. |
|
<div> |
Тег-контейнер для розділів HTML-документа. Використовується для угруповання блокових елементів з метою форматування стилями. |
|
<dl> |
Тег-контейнер, всередині якого знаходяться термін і його опис. |
|
<dt> |
Використовується для завдання терміна. |
|
<em> |
Виділяє важливі фрагменти тексту, відображаючи їх курсивом. |
|
<embed> |
Тег-контейнер для вбудовування зовнішнього інтерактивного контенту або плагіна. |
|
<fieldset> |
Групує пов'язані елементи в формі, малюючи рамку навколо них. |
|
<figcaption> |
Заголовок/підпис для елемента <figure>. |
|
<figure> |
Самодостатній тег-контейнер для такого контенту як ілюстрації, діаграми, фотографії, приклади коду, зазвичай з підписом. |
|
<footer> |
Визначає завершальну область (нижній колонтитул) документа або розділу. |
|
<form> |
Форма для збору і відправки на сервер інформації від користувачів. Не працює без атрибута action. |
|
<h1-h6> |
Створюють заголовки шести рівнів для пов'язаних з ними розділів. |
|
<head> |
Елемент-контейнер для метаданих HTML-документа, таких як <title>, <meta>, <script>, <link>, <style>. |
|
<header> |
Секція для вступної інформації сайту або групи навігаційних посилань. Може містити один або кілька заголовків, логотип, інформацію про автора. |
|
<hr> |
Горизонтальна лінія для тематичного поділу параграфів. |
|
<html> |
Кореневий елемент HTML-документа. Повідомляє браузеру, що це HTML-документ. Є контейнером для всіх інших html-елементів. |
|
<i> |
Виділяє уривок тексту курсивом, не надаючи йому додатковий акцент. |
|
<iframe> |
Створює вбудований фрейм, завантажуючи в поточний HTML-документ інший документ. |
|
<img> |
Вбудовує зображення в HTML-документ за допомогою атрибута src, значенням якого є адреса вбудованого зображення. |
|
<input> |
Створює багатофункціональні поля форми, в які користувач може вводити дані. |
|
<ins> |
Виділяє текст підкресленням. Застосовується для виділення змін, що вносяться в документ. |
|
<kbd> |
Виділяє текст, який повинен бути введений користувачем з клавіатури, шрифтом сімейства monospace. |
|
<label> |
Додає текстову мітку для елемента <input>. |
|
<legend> |
Заголовок елементів форми, згрупованих за допомогою елемента <fieldset>. |
|
<li> |
Елемент маркованих або нумерованих списків. |
|
<link> |
Визначає відносини між документом і зовнішнім ресурсом. Також використовується для підключення зовнішніх таблиць стилів. |
|
<main> |
Контейнер для основного унікального вмісту документа. На одній сторінці повинно бути не більше одного елемента <main>. |
|
<map> |
Створює активні області на карті-зображенні. Є контейнером для елементів <area>. |
|
<mark> |
Виділяє фрагменти тексту, позначаючи їх жовтим фоном. |
|
<meta> |
Використовується для зберігання додаткової інформації про сторінку. Цю інформацію використовують браузери для обробки сторінки, а пошукові системи – для її індексації. У блоці <head> може бути декілька тегів <meta>, так як в залежності від використовуваних атрибутів вони несуть різну інформацію. |
|
<meter> |
Індикатор вимірювання в заданому діапазоні. |
|
<nav> |
Розділ документа, що містить навігаційні посилання по сайту. |
|
<noscript> |
Визначає секцію, яка не підтримує сценарій (скрипт). |
|
<object> |
Контейнер для вбудовування мультимедіа (наприклад, аудіо, відео, Java-аплети, ActiveX, PDF і Flash). Також можна вставити іншу веб-сторінку в поточний HTML-документ. Для передачі параметрів вбудованого плагіна використовується тег <param>. |
|
<ol> |
Упорядкований нумерований список. Нумерація може бути числова або алфавітна. |
|
<optgroup> |
Контейнер з заголовком для групи елементів <option>. |
|
<option> |
Визначає варіант/опцію для вибору в списку <select>, <optgroup> або <datalist>. |
|
<output> |
Поле для виведення результату обчислення, розрахованого за допомогою скрипта. |
|
<p> |
Параграфи в тексті. |
|
<param> |
Визначає параметри для плагінів, вбудованих за допомогою елемента <object>. |
|
<picture> |
Елемент-контейнер, що містить один елемент <img> і нуль або декілька елементів <source>. Сам по собі нічого не відображає. Дає можливість браузеру вибирати найбільш відповідне зображення. |
|
<pre> |
Виводить текст без форматування, зі збереженням прогалин і переносів тексту. Може бути використаний для відображення комп'ютерного коду, повідомлення електронної пошти та ін. |
|
<progress> |
Індикатор виконання завдання будь-якого роду. |
|
<q> |
Визначає коротку цитату. |
|
<ruby> |
Контейнер для Східно-Азіатських символів і їх розшифровки. |
|
<rb> |
Визначає вкладений в нього текст як базовий компонент анотації. |
|
<rt> |
Додає коротку характеристику зверху чи знизу від символів, укладених в елементі <ruby>, виводиться зменшеним шрифтом. |
|
<rtc> |
Зазначає вкладений в нього текст як додаткову анотацію. |
|
<rp> |
Виводить альтернативний текст в разі якщо браузер не підтримує елемент <ruby>. |
|
<s> |
Відображає текст, який не є актуальним, перекресленим. |
|
<samp> |
Використовується для виведення тексту, що представляє результат виконання програмного коду або скрипта, а також системні повідомлення. Відображається моно шрифтом. |
|
<script> |
Використовується для визначення сценарію на стороні клієнта (зазвичай JavaScript). Містить або текст скрипта, або вказує на зовнішній файл сценарію за допомогою атрибута src. |
|
<section> |
Визначає логічну область (розділ) сторінки, зазвичай з заголовком. |
|
<select> |
Елемент управління, що дозволяє вибирати значення із запропонованої безлічі. Варіанти значень поміщаються в <option>. |
|
<small> |
Відображає текст шрифтом меншого розміру. |
|
<source> |
Вказує місце розташування і тип альтернативних медіаресурсів для елементів <picture>, <video>, <audio>. |
|
<span> |
Контейнер для малих елементів. Можна використовувати для форматування уривків тексту, наприклад, виділення кольором окремих слів. |
|
<strong> |
Розставляє акценти в тексті, виділяючи напівжирним. |
|
<style> |
Підключає вбудовані таблиці стилів. |
|
<sub> |
Задає підрядкове написання символів, наприклад, індексу елемента в хімічних формулах. |
|
<summary> |
Створює видимий заголовок для тега <details>. Відображається з зафарбованим трикутником, клікнувши по якому можна переглянути подробиці заголовка. |
|
<sup> |
Задає надрядкове написання символів. |
|
<table> |
Тег для створення таблиці. |
|
<tbody> |
Визначає тіло таблиці. |
|
<td> |
Створює комірку таблиці. |
|
<template> |
Використовується для оголошення фрагментів HTML-коду, які можуть бути клоновані і вставлені в документ скриптом. Вміст тега не є його дочірнім елементом. |
|
<textarea> |
Створює великі поля для введення тексту. |
|
<tfoot> |
Визначає нижній колонтитул таблиці. |
|
<th> |
Створює заголовок комірки таблиці. |
|
<thead> |
Визначає заголовок таблиці. |
|
<time> |
Визначає дату/час. |
|
<title> |
Заголовок HTML-документа, що відображається у верхній частині рядка заголовка браузера. Також може відображатися в результатах пошуку, тому це слід брати до уваги надання назви. |
|
<tr> |
Створює рядок таблиці. |
|
<track> |
Додає субтитри для елементів <audio> и <video>. |
|
<u> |
Виділяє уривок тексту підкресленням, без додаткового акценту. |
|
<ul> |
Створює маркований список. |
|
<var> |
Виділяє змінні з програм, відображаючи їх курсивом. |
|
<video> |
Додає на сторінку відео-файли. Підтримує 3 відео формати: MP4, WebM, Ogg. |
|
<wbr> |
Вказує браузеру можливе місце розриву довжини рядка. |
