Основы HTML для начинающих — в этой статье я расскажу об основах языка гипертекстовой разметки HTML. Статья предназначена для начинающих: школьников и студентов начальных курсов. Первая статья из серии самоучитель HTML.

HTML (HyperText Markup Language) — язык гипертекстовой разметки. Базовый язык для создания веб-страниц.

Гипертекст — текст связанный с другим текстом при помоги гиперссылок (или просто ссылок).

Гипертекстовые документы открываются в браузере.

Краткая история развития HTML

В 1986 году Международной организацией по стандартизации (ISO) был принят стандарт который назвали «Standard Generalized Markup Language» — SGML. Этот стандарт был посвящен описанию обобщенного мета языка, который позволял строить системы логической структурной разметки любых разновидностей текстов. Он соответствовал международному стандарту ISO 8879.

Суть состояла в том, что бы создать разметку текста которую без проблем можно было распознать на любом компьютере (что было очень важно в те времена).

Если вы знаете основы компьютерных сетей, то SGML можно сравнить с моделью OSI. SGML это базовый принципы которые легли в основу HTML так же как модель TCP/IP основывается на модели OSI.

В 1991 году на британский ученый Тимо Бернерс Ли разрабатывает на основе SGML язык гипертекстовой разметки который получает название HyperText Markup Language (HTML).

HTML в первую очередь был разработан для обмена научной и технической документации для использования людьми, не являющимися специалистами в области верстки. Путем определения небольшого набора структурных и семантических элементов, получались достаточно простые и в тоже время красиво оформленные документы. HTML успешно справился с проблемами SGML.

Изначально HTML соответствовал особенностям и идеологии SGML. В 1993 году появилась версия языка HTML 1.2, которая имела сорок с небольшим тегов, три из которых не были рекомендованы к использованию, так как указывали на физические параметры предоставления документа. Этот факт, в свою очередь, противоречил идеологии SGML.

Вся HTML- разметка была логической и только в описательной части стандарта можно было увидеть что-то типа ”в графических браузерах действие этого тега может передаваться жирным начертанием” (речь идет о теге <b>, одном из первых тегов).

В это время был единственный браузер – Mosaic, который поддерживал графические возможности. Этот браузер был разработан в Национальном центре суперкомпьютерных приложений США (National Center for Supercomputer Applications — NCSA), там же, кстати, была разработана технология WWW (World Wide Web). По этой причине никаких противоречий между официальными стандартами и их реализацией в браузерах тогда не существовало.

В апреле 1994 года был образован Консорциум W3C (World Wide Web Consortium). Так как официальной спецификации HTML 1.0 не существовало, W3C начал заниматься подготовкой спецификации HTML следующей версии. Но чтобы стандартная версия отличалась от всех предыдущих, ей сразу присвоили номер 2.0. Разработка спецификации HTML 2.0 шла не спеша и лишь в сентябре 1995 года она была утверждена. Из больших дополнений был добавлен лишь механизм форм для отсылки информации с компьютера пользователя на сервер.

Тем временем Консорциум W3 в параллель со спецификацией 2.0 занимался обсуждением HTML 3.0. Она была предложена в марте 1995 года. Третья версия предлагала много новых возможностей: поддержка таблиц, обтекание изображения текстом, отображение сложных математических формул, примечания. Поддержка этого стандарта браузерами того времени была не удовлетворена.

Авторы HTML 3 добавили поддержку нового средства — иерархические стилевые спецификации (Cascading Style Sheets, CSS). Это нововведение нужно было для того, чтобы разрешить назревшее к тому времени противоречие между идеологией структурной разметки и потребностями пользователей, которым в первую очередь нужно было гибкость и обширные возможности визуального представления. CSS имеет свой синтаксис и является формально независимой от HTML.

Следующей версией HTML стала 3.2 и в ней были опущены многие нововведения из версии 3.0.

18 декабря 1997 года бала принята четвертая версия HTML. Она содержала как и третья много элементов, специфичных для отдельных браузеров. Хотя в HTML 4.0 произошла чистка элементов из предыдущих версий спецификаций. Многие элементы были помечены как устаревшие и не рекомендуемые к использованию. Вместо них рекомендовалось использовать таблицы стилей CSS.

HTML 4.01 утвердили 24 декабря 1999. Изменения, принятые в нем были более значительные, чем, кажется на первый взгляд.

Сейчас W3C занимается разработкой пятой версии языка HTML. Ее черновой вариант стал доступен 20 ноября 2007 года.

В параллель ведется также разработка XHTML (Extensible Hypertext Markup Language) — расширяемый язык разметки гипертекста. В нем предъявляются более строгие требования к синтаксису, чем в HTML. XHTML 1.0 был утвержден 26 января 2000 года в качестве рекомендации W3C. Вариант XHTML 1.1 одобрен в качестве рекомендации консорциума 31 мая 2001 года.

Версии HTML

• HTML 2.0 — опубликован IETF как RFC 1866 в статусе Proposed Standard (24 ноября 1995 года);
• HTML 3.0 — 28 марта 1995 года — IETF Internet Draft (до 28 сентября 1995 года);
• HTML 3.2 — 14 января 1997 года;
• HTML 4.0 — 18 декабря 1997 года;
• HTML 4.01 — 24 декабря 1999 года;
• ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года;
• HTML5— 28 октября 2014 года;
• HTML 5.1 начал разрабатываться 17 декабря 2012 года. Рекомендован к применению с 1 ноября 2016 года.
• HTML 5.2 был представлен 14 декабря 2017 года.
• HTML 5.3 был представлен 24 декабря 2018 года.

Структура и основные элементы

Основным элементом HTML является тег. Тег это определенный текст заключенный в угловые скобки <...>.

Большинство тегов парные, они имеют открывающий и закрывающий тег. Закрывающий тег отличается от открывающего добавлением слеша перед текстом.

Например:
<html>
...
</html>

Теги могут иметь атрибуты которым присваиваются значения (об этом чуть позже).

Теги могут быть вложенными друг в друга.

Например:
<html>
<head>
...
</head>
</html>

Редактор HTML

Теги прописываются в редакторе. Простейший пример редактора — блокнот. Но я советую пользоваться редактором Notepad++, скачать его можно на официальном сайте, устанавливается он в два клика.

Основное преимущество этого (да и других) редактора в том, что в нем есть подсветка синтаксиса. Это значит что ваш код будет выделяться определённым цветом. Данное действие упрощает написание кода и позволяет избежать ошибок.

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

Основные элементы web-страницы

Проста веб-страница состоит из «базового» набора тегов. Это следующие теги:

• <html> — тег указывает что это HTML код.
• <head> (голова — в переводе с английского) — тег содержащий техническую информацию, например заголовок страницы, подключаемы стили и скрипты, мета-информацию и так далее.
• <title> (заголовок —  в переводе с английского) — тег содержит заголовок HTML-документа который отображается во вкладке браузера.
• <body> (тело —  в переводе с английского) — «тело» или основное содержимое документа которое видит пользователь.

Все базовые теги имеют закрывающие теги и являются вложенными друг в друга.

Давайте наберем в редакторе следующий код:

<html>
<head>
<title>Заголовок моей первой страницы (во вкладке браузера)</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

Затем сохраните файл с расширением .html, в моем случае это файл html-1.html. Если у вас появились проблемы, просто скачайте этот файл.

Откройте файл в браузере и посмотрите результат.

Рассмотрим основные элементы подробнее.

Элемент <html>

Корневой элемент веб-страницы. Все HTML-теги должны быть внутри него, иначе они не будут правильно обрабатываться браузером.

Помните, в начале статьи я писал что теги имеют атрибуты со значениями? Так вот, атрибут это определенное свойство тега имеющее значение. Атрибут со значением прописывается после тега.

Атрибуты элемента <html>.

Атрибут	Описание	Возможные значения
manifest	Указывает путь к кешу манифеста.	URL.

Манифест (manifest) представляет из себя текстовый файл со списком ресурсов для кеширования. Я знаю, сейчас ничего не понятно. Про манифест можно нет запоминать. дальше я приведу более понятный пример.

Прописываются атрибуты так:

<html manifest = "URL">

, где:

• html — тег;
• manifest — атрибут;
• URL — значение атрибута.

Элемент <head>

Между тегами <head> … </head> заключается информация которую не видит пользователь, эта информация «служебная» или «техническая», называть ее можно как угодно, но по сути она нужна для:

1. Роботов поисковых систем.
2. Стилизации и расширения функциональности сайта.
3. Указания, с помощью тега <title> заголовка документа в браузере.

Элемент <title>

Как я уже говорил, тег <title> используется для того, что бы указать название web-страницы которое будет отображаться в закладке браузера.

Элемент <body>

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

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

Теперь, когда у нас есть понимание основ HTML в общих чертах, давайте разберемся с атрибутами тегов.

Возьмем тег <p> —  параграф. По сути это тег в который вкладывают одно или несколько предложений. Один из глобальных атрибутов — style.

Style — стиль, то есть с помощью этого атрибута мы можем изменять стиль текста в теге <p>. Разберемся на примере.

<p style="color:blue;">Какой-то текст...</p>

Результатом выполнения этого кода будет:

Я повторюсь, но все же, в этом примере:

• p — тег;
• style — атрибут тега p;
• color:blue —  значение атрибута style тега p.

Тег meta

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

С помощью тега meta можно указать:

1. Описание страницы.
2. Ключевые слова.
3. Кодировку.
4. Возможность индексирования.
5. Время перезагрузки страницы.

Meta тег description

Meta тег description указывает описание страницы.

<meta name="description" content="Описание содержимого вашей web-страницы">

Оптимальная длинна meta-тега description составляет 160-180 символов. Тег должен содержать конкретное описание страницы, желательно делать описания уникальными, но не обязательно если в таком случае описания искажают содержание страницы.

Meta тег keywords

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

<meta name="keywords" content="ключевые слова">

Meta тег robots

Мета-тег robots содержит инструкции для роботов поисковых систем. Первая задача мета-тега — указать поисковым системам на возможность индексации веб-страницы. То есть можно индексировать эту страницу (index) или нельзя (noindex). Вторая задача — указать можно ли переходить по ссылкам (follow) или нельзя (follow).

Пример.

<meta name="robots" content="index, follow">

В данном случае роботам поисковых систем разрешено индексировать страницу и переходить по ссылкам.

Meta http-equiv

Этот meta-тег позволяет перезагружать страницу (meta http-equiv=»refresh») и перенаправлять пользователя на другую страницу (content=»0; url=https://abuzov.com/»).

Например.

<meta http-equiv="refresh" content="5; url=https://abuzov.com/">

Этот код означает, что через 5 секунд вы будете перенаправлены на главную страницу моего сайта.

Meta charset

При помощи meta charset мы устанавливаем кодировку документа. Если кодировку указать неправильно появиться, так называемые, «кракозябры».

Стандартная кодировка для HTML-документа это UTF-8.

<meta charset="utf-8">

Эта кодировка включает в себя наибольшее количество языков.

Тег style

Элемент style используется для оформления сайта. Он указывает что код между тегами <style>…</style> является css кодом. Тег <style> располагается в теге <head>.

Подключение стилей будет рассмотрено отдельно. Давайте допишем небольшой код в наш, уже созданный файл. Например, заголовок будет красным, а текст синим курсивом.

<html>
<head>
<style>
h1{color:red;}
p {color:blue;font-style:italic;}
</style>
<title>Заголовок моей первой страницы (во вкладке браузера)</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

Наберите код в редакторе и сохраните под именем html-2.html. Так же вы можете скачать этот файл. Посмотрите результат в браузере.

Тег link

Link подключает внешние файлы. В предыдущем примере мы прописали стили непосредственно в HTML-документе. Но что если нам нужен сайт состоящий из тысячи страниц? Прописывать код в каждом крайне затруднительно. Поэтому создается отдельный файл (обычно его называют style.css) который подключается веб-странице.

Код выше можно переписать следующим образом:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Заголовок моей первой страницы (во вкладке браузера)</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

А файл style.css будет выглядеть следующим образом:

h1{color:red;}
p {color:blue;font-style:italic;}

При этом мы избавляемся от тега <style>.

Атрибуты тега link

Атрибут	Описание	Возможные значения
href	Место расположения ресурса.	URL.
rel	Атрибут, определяющий отношение между веб-страницей которая ссылается и веб-страницей на которую ссылаются.	stylesheet: ссылка на файл стилей. alternate: ссылка на альтернативную версию текущей web-страницы. author: ссылка на контакты автора текста. help: ссылка на справку для текущей страницы. icon: ссылка на фавиконку. license: лицензия и авторские права на веб-страницу. next: значение указывает на то, что страница находится в последовательности, а связанная страница является следующей страницей в последовательностиe. prefetch: связанный ресурс должен быть кэширован. prev: значение указывает на то, что страница находится в последовательности, а связанная страница является предыдущей страницей в последовательности search: средство поиска, которое можно использовать для поиска текущих и связанных документов.
type	Тип документа, на который ведет ссылка.	MIME тип.
media	Тип (или типы) мультимедиа, к которому должен применяться связанный ресурс.	Медиа-запрос, например screen, print, или screen and max-width:640.
hreflang	Язык документа на который ведет ссылка.	Языковой код, например en (Английский) или ru (Русский).
sizes	Размер иконки, используется когда ссылка ведет на фавиконку rel="icon".	[ширина]x[высота], например 32x64.
crossorigin	Используется вместе с JavaScript, чтобы определить, как обрабатываются запросы на совместное использование ресурсов между источниками.	anonymous use-credentials

Фавиконка (favicon) это файл, рисунок, имеющий расширение .ico который отображается на вкладке браузера перед заголовком (тег <title>).

Тег script

Элемент <script> подключает к HTML-документу различные скрипты, например JavaScript. Скрипты, как в случае с тегом <style> могут  находятся как непосредственно в HTML-файле, так и в отдельных файлах с соответствующим расширением, например .js.

Атрибуты тега script

Атрибут	Описание	Значение
src	Расположение файла со скриптами или сценариями.	URL.
type	Тип используемого сценария.	MIME тип. По умолчанию это text/javascript.
charset	Кодировка символов внешнего скрипта. Используется только при наличии src .	Объявление кодировки символов, напримерUTF-8.
async	Указывает, что внешний сценарий должен выполняться асинхронно. Используется только при наличии src .	Нет.
defer	Указывает, что внешний сценарий следует отложить и выполнить только после анализа страницы. Используется только при наличии src .	Нет.
crossorigin	Определяет, как обрабатываются запросы на совместное использование ресурсов между источниками.	anonymous use-credentials

Отношения между тегами

Очень важная тема которую нужно понять. Тут нет ничего сложного. Давайте разбираться.

Возьмем наш последний код.

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Заголовок моей первой страницы (во вкладке браузера)</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

Изобразим его в виде дерева.

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

• Предок. Предком называют элемент который содержит в себе другие. То есть, исходя из рисунка можно сказать что <html> это предок для всех тегов, а <head> является предком для <link>, <script> и <title>. Аналогично <body> это предок по отношению к <h1> и <p>.
• Потомок. Потомком называют элемент вложенный в другой. То есть <body> — потомок <html>, а <h1> потомок <body>.
• Родительский элемент. Родительским элементом называют тег который связан с другими тегами более низкого уровня, и находится на дереве выше их. <html> является родителем только для тегов <head> и <body>.
• Дочерний элемент. Дочерним называют тег который который вложен в тег более высокого уровня, то есть противоположность родительскому элементу. На рисунке тег <h1> является дочерним элементом тега <body>.
• Сестринский элемент. Сестринским элементом называют тег имеющий один и тот же родительский тег. То есть, теги <head> и <body> на рисунке — сестринские элементы, так же как и теги <h1> с <p>.

Тут все довольно просто. Это нужно запомнить и знать. Теперь вы знаете основы HTML.

Расшифровка и перевод тегов

Когда я начинал изучать HTML, я задавался вопросом: как запомнить теги? Самым простым вариантом для меня стал перевод тегов. То есть, каждый HTML-тег это означает что-то на английском языке или это сокращение какого-то английского слова. Давайте разберемся с тегами которые уже нам известны.

Тег	Значение	Перевод
<html>	Hyper Text Markup Language	Язык гипертекстовой разметки
<head>	Head	Голова (документа)
<body>	Body	Тело (документа)
<title>	Title	Название, заголовок
<h1>	Heading 1…6	Заголовок с 1 по 6 уровень
<p>	Paragraph	Параграф
<link>	Link	Ссылка
<style>	Style	Стиль

Как это работает?

Теперь у вас есть общее понимание о том, что такое HTML. Возникает вопрос, а как это вообще работает?

Работает это так. Мы пишем HTML-код и сохраняем его с расширением HTML. Наша операционная система (Windows или Linux) понимает что файл с таким расширением нужно открывать при помощи браузера.

Браузер открывает файл и читает (интерпретирует) наш код в виде дерева (DOM) в соответствии с определенными правилами.

После того как браузер «прочитал» и интерпретировал наш код он отображает его нам в привычном виде — в виде текста, таблиц, изображений, ссылок, списков и других элементов.

Элемент DOCTYPE

В конце об элементе DOCTYPE. Почему в конце, а не в начале? В самоучителе для начинающих я не придаю этому тегу особое значение, не не могу не упомянуть о нем.

DOCTYPE задает тип документа. Обычно это html. Указывать тип документа нужно в самом его начале.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Заголовок моей первой страницы (во вкладке браузера)</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

При помощи этого тега мы даем понять браузеру что мы используем именно HTML код. Возникает вопрос, а что, в HTML-документе может быть другой код? Вообще да, документ может быть XML, но пока об этом думать рано. Нужно знать следующее.

Тип документа зависит от того, какие теги в нем используются и есть три типа синтаксиса. Если вы используете все новые теги, то есть теги HTML5 (на момент написания статьи) то достаточно указать <!DOCTYPE html>.

Типы синтаксиса:

1. Strict — строгий.
2. Transitional — переходный.
3. Frameset — набор фреймов.

Это типы для HTML 4.01.

Для строгого типа указываем:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//RU" "http://www.w3.org/TR/html4/strict.dtd">

Для переходного:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//RU" "http://www.w3.org/TR/html4/loose.dtd">

Для набора фреймов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//RU" "http://www.w3.org/TR/html4/frameset.dtd">

Более старые версии HTML сейчас практически не используются.

На этом все, теперь вы знаете основы HTML.