Основы HTML: виды тегов и структура разметки документа.

Когда вы путешествуете по интернету, то ваш браузер показывает вам красивые и красочные страницы сайтов. Возможно даже полезные для вас. Но как это работает? Для того чтобы понять, давайте разберем основы Html языка.

Вот вы открываете какой-либо сайт в браузере и получаете контент. Перед тем как вам отобразить что-то полезное, браузер делает запрос к серверу и получает данные от сервера в формате html. Он их анализирует и выводит уже готовую отформатированную страницу. С изображениями, таблицами, списками и т.д.

Что такое HTML

HyperText Markup Language (HTML) - язык гипертекстовой разметки текста для браузера, который позволяет отобразить содержимое страницы именно так, как задумывал разработчик страницы с возможностью ссылаться на другие такие же страницы.

Hypertext (текст) - текстовые страницы, которые могут ссылаться друг на друга.
Markup (разметка) - руководство для браузера, как именно должна выглядеть страница. Цвет текста, размер и т.д.
Language (язык) - понятные браузеру команды, для правильного отображения данных на странице.

Из выше изложенного можно сказать, что html это не язык программирования, а всего лишь определенные правила отображения текста страницы сайта, которые понятны всем браузерам.

Это как англичанам понятен английский язык, а русским - русский язык.

Еще можно провести аналогию html документа с документом Word. Там вы тоже пишете текст и имеете возможность его отформатировать, сделать заголовки, поменять цвет и вставить картинку.

Любая страница, любого сайта - это текстовая информация, структурированная с помощью HTML разметки.

Синтаксис HTML

Теперь давайте посмотрим подробнее и с примерами, как именно работает html разметка.

При запросе страницы, браузер получает в ответ html документ. В нем имеются две сущности:

Это сам текст, т.е. основная информация страницы.
Теги разметки документа. Те самые команды, понятные браузеру.

Все вместе это является html кодом. Именно с помощью тегов, документ обретает некую структуру и аккуратный вид. Давайте рассмотрим это сразу на примере.

Создайте у себя на компьютере файл index.html. Для этого просто создайте новый текстовый файл index.txt и смените расширение txt файла на html.

Скопируйте код из примера ниже и вставьте в ваш index.html.

<!DOCTYPE html>
<html>
<head>
    <title>Демонстрационная страница HTML</title>
</head>
<body>
<h1>Заголовок H1</h1>
<p>Это параграф</p>
</body>
</html>

Поздравляем, вы только что создали простейший html документ!

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

Посмотрите внимательно на этот код html, и вы увидите в данном примере есть текст и есть какие-то слова в <скобочках> - это те самые управляющие теги. Именно благодаря им браузер отобразил заголовок большим, а текст под ним маленьким.

Что такое HTML тег (tag)

Теперь рассмотрим подробнее, что такое html тег. Тегами являются определенные слова-команды для браузера, обернутые в угловые скобки <>.

Именно они указывают на то, как необходимо отобразить данные, которые находятся внутри тега или что вывести вместо тега. (Об этом чуть позже)

Парные теги

Теги бывают парными <тег>тут контент</тег>. Т.е. сначала идет открывающий <тег>, потом текст внутри тега.

Завершается данная конструкция закрывающимся тегом с косой чертой после первой угловой скобки </тег>. Обычно парные теги указывают браузеру, как отформатировать текст между тегами.

В самом первом примере, у нас есть текст заголовок. Для того, чтобы он стал большим и красивым заголовком первого уровня мы его обернули в соответствующий парный тег <h1>. Таким образом мы дали команду браузеру, что содержимое между этими тегами, является заголовком.

Пример:

<h1>Заголовок 1 уровня</h1>
<h2>Заголовок 2 уровня</h2>
<h3>Заголовок 3 уровня</h3>

Еще у нас там есть тег , который говорит нашему браузеру, что содержимое этого тега, необходимо отобразить как абзац.

<p>Это текст абзац</p>

К примеру, чтобы сделать текст жирным, его необходимо обернуть тегом .

<b>Жирный текст</b>

Как вы уже заметили, у всех парных тегов есть открывающий тег и закрывающий тег. Это очень важно запомнить, потому что пропуск закрывающего тега, является очень частой ошибкой при написании html документа.

Одиночные теги (непарные)

Так же теги бывают одиночными (непарными) или одинарными, т.е. без закрывающегося тега в конце. Еще их иногда называют пустыми.

Как правило одиночные теги указывают на то, что необходимо вывести в браузере на их месте. Например тег <hr/> - одиночный и вместо этого тега браузер выведет горизонтальную полосу.

Посмотрим работу этих двух типов тегов на примере.

<!DOCTYPE html>
<html>
<head>
    <title>Демонстрационная страница HTML</title>
</head>
<body>
<h1>Заголовок H1</h1>
<hr/>
<p><b>Это параграф</b></p>
</body>
</html>

Вот что мы увидим в результате:

Под заголовком появилась горизонтальная линия, и текст стал жирным. В примере мы использовали те самые теги:

Вставили тег <hr/> после заголовка <h1>
Обернули текст в тег  , чтобы он стал жирным.

Как видите это просто.

Что такое элемент html

В html (языке гипертекстовой разметки), есть такое понятие как элемент. Вам это необходимо знать, прежде чем продолжить ознакомление.

Открывающий тег + контент + закрывающий тег, вместе взятые, являются элементом hml разметки. Это вариант для парных тегов. И одиночный тег, сам по себе является тоже элементом разметки.

Для чего необходимо запомнить это понятие? А для того, что в дальнейшем описании и в любых других статьях вы будете встречать именно это определение. И вы уже знаете, что парные теги с контентом и одиночный тег - это элемент html.

В дальнейшем, мы будем узнавать, что элементы могут иметь атрибуты, а так же что элементы могут быть вложенными друг в друга. У нас в примере даже есть вложенные элементы:

<p><b>Это параграф</b></p>

Тут у нас есть параграф в котором есть жирный текст. Т.е. у нас элемент  вложен в элемент 

Структура HTML документа

Любая веб страница - это html документ. И у него есть обязательная структура и обязательные теги.

Рассмотрим пример минимального набора элементов web страницы в html формате:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Что такое HTML</title>
    </head>
    <body>
        <h1>HTML это</h1>
        <p>Наш любимый текст про HTML</p>
    </body>
</html>

<!DOCTYPE html> - доктайп. Этот обязательный элемент указывает браузеру, что это именно Html документ. По сути дела этот элемент перешел еще из времен только зарождающегося хтмл. В те времена в этом элементе указывали ссылку на правила разбора документа html. В наши времена это уже не актуально. Просто запомнить что с него начинается документ гиперазметки.

<html></html> это корневой элемент и именно в нем будет весь контент вашей страницы.

<head></head> - это так называемый скрытый или технический элемент. В нем обычно располагаются элементы, не являющиеся контентом. Это указание заголовка страницы, кодировки документа, подключение стилей для элементов и многого другого. Об этом обязательно поговорим в следующих публикациях.

<body></body> - это уже элемент, в котором выводится сам контент страницы. Это могут быть заголовки, списки, изображения, таблицы и даже медиа.

<meta charset="utf-8"> - этот элемент устанавливает кодировку вашей страницы. В данном случае это UTF-8

<title></title> - этот элемент устанавливает название страницы, которое отображается во вкладке браузера, а также при внесении страницы в избранное. Это очень важный элемент для СЕО оптимизации сайтов и многого другого.

Атрибуты HTML тегов

Html элементы могут иметь атрибуты. Это дополнительные свойства или настройки тегов, позволяющие управлять отображением элемента на странице или взаимодействовать со скриптами на веб странице.

Атрибуты должны быть всегда:

Написаны в нижнем регистре.
Указываться только в первом открывающемся теге (для парных)
Иметь отступ в один пробел от имени тега.
Иметь имя, затем знак = и потом значение обернутое в кавычки. (не важно в двойные или одинарные)

Схематичное представление парного тега с атрибутом:

<тег атрибут="значение">контент тега</тег>.

А теперь на реальном примере:

<p class="item-paragraph">Красивый текст</p>

В данном примере, мы взяли тег  и прописали ему атрибут class со значением item-paragraph. Элементы могут иметь множество атрибутов, все зависит от поставленных задач.

Обязательные атрибуты

Бывают атрибуты обязательные, без которых тег не будет правильно работать. К примеру для тега ссылки <a>, атрибут href является обязательным. Так как именно в значении атрибута href указывается url ссылки.

Пример ссылки:

<a href="http://yandex.ru">Yandex</a>

Универсальные атрибуты

Можно еще некоторые атрибуты отнести к универсальным, которые можно использовать для всех существующих тегов. К таким можно отнести атрибуты:

Атрибут class - указывает стилевой class.
Атрибут id - присваивает идентификатор данному тегу.

На этом мы завершим поверхностное ознакомление со структурой html страницы.

Более подробно по каждому тегу и его свойствам мы ознакомимся в следующих публикациях.

Формат HTML: Разберемся как работают веб страницы.