Что такое HTML простыми словами

Что такое HTML? Речь идет о языке разметки, который позволяет браузеру понимать, как следует отображать пользователю ту или иную информацию. Изучив этот язык, можно заниматься веб-разработкой, а это достаточно востребованная и хорошо оплачиваемая специальность.

HyperText Markup Language – язык гипертекстовой разметки. Это набор команд, следуя которым, браузеры выводят на монитор различные документы и странички сайтов. Покажем на примере, что такое язык разметки HTML:

К примеру:

• <h1>Это заголовок</h1>
• <p>Это текстовый абзац <a href=»…»>с гиперссылкой</a>.</p>
• <ul>
• <li>Это элемент ненумерованного перечисления</li>
• <li>И ещё один</li>
• </ul>

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

Это заголовок

Это текстовый абзац с гиперссылкой.

• Это элемент ненумерованного перечисления
• И ещё один

Узнай, какие ИТ - профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес

Павел Симонов

Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов

Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно

pdf 3,7mb

doc 1,7mb

Уже скачали 31969

К языкам, имеющим свои варианты разметки, относятся и такие текстовые редакторы, как Microsoft Word или Apple Pages. Здесь также присутствует информация об особенностях оформления документа. Когда мы набираем любой текс с помощью таких редакторов в него автоматически добавляются невидимые для нас сведения о том, как выглядит этот документ. Затем эта информация позволяет нам открывать свой текс именно в том виде, в каком он был сохранен.

История развития HTML-кода

К сожалению, точной даты назвать не получится. Разработка формата HTML происходила, начиная с 1986 и по 1991 годы. Он был ориентирован на людей, не имеющих глубоких знаний в области программирования и верстки. В результате сложная система разметки (Standard Generalized Markup Language) свелась к небольшому списку дескрипторов (тегов).

Перечислим некоторые особенности HTML-кода:

• Начальный список дескрипторов для текстового оформления состоял лишь из 18 тэгов. 11 из них присутствуют и в новейших версиях.
• С использованием формата HTML можно без искажений выводить сохраненные тексты на разных технических устройствах.
• Новейшие версии HTML получили более сильную зависимость от платформы, что обусловлено появлениям тегов графики и мультимедийного оформления.

Версии HTML:

• 2.0 — была опубликована IETF, как RFC 1866 в статусе Proposed Standard (24.11.1995 г.);
• 3.0 — появилась 28.03.1995: IETF Internet Draft (до 28.09.1995 г.);
• 3.2 — опубликована 14.01.1997 года;
• 4.0 — представлена 18.12.1997 года;
• 4.01 — разработана 24.12.1999 года;
• ISO/IEC 15445:2000 (своеобразный ISO HTML, базирующийся на HTML 4.01 Strict) — 15.05.2000 года;
• Версия 5— 28.10.2014 года;
• Версия 5.1 стартовала в разработке 17.12.2012 года. Рекомендована к использованию с 1.11.2016 года.
• 5.2 появилась 14.12.2017 года.
• 5.3 опубликована 24.12.2018 года.

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

Основные элементы HTML

Раскрыть, что такое язык разметки HTML можно, представив его в качестве инструмента для преобразования простых команд (тегов), в визуальные объекты. К примеру, тег <img> применяется для вывода в браузере картинок. Обязательным атрибутом выступает ссылка на файл. Как правило, для хранения картинок используются ресурсы удаленного сервера, где расположены все файлы сайта, или специальные внешние сервисы.

Основные группы элементов HTML используются для решения следующих задач:

• Текстовое форматирование – жирный шрифт, курсив, подчеркивание, размер кегля, списки (нумерованные или маркированные).
• Текстовые блоки – разные уровни заголовков от H1 до H6, абзацы, написание с новой строки.
• Табличные формы – неограниченное число строчек, столбцов, указание фиксированных параметров высоты/ширины, заголовки.
• Вставка картинок, аудио, текстовых и видеофайлов.
• Гиперссылки, обеспечивающие переход на файл картинки, прайса и на отдельную страницу с определенного пункта меню или анкора в тексте. Кроме того, существуют атрибуты, обеспечивающие открытия документа в текущем/новом окне.

Читайте также!

Создание сайта html: кому это нужно сегодня

Подробнее

В языке HTML есть возможность для разработки простых форм для ввода текста, выбора пункта из списка. При необходимости создать более сложные конструкции следует использовать более функциональные языки — JavaScript или PHP.

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

Элемент <html>

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

Дарим скидку от 60%
на обучение «Веб-разработчик» до 24 ноября

Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

Забронировать скидку

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

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

• <html manifest = «URL»>

, где:

• html — тег;
• manifest — свойство (атрибут);
• URL — значение атрибута.

Только до 25.11

Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней

Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

Чтобы получить файл, укажите e-mail:

Введите e-mail, чтобы получить доступ к документам

Подтвердите, что вы не робот,
указав номер телефона:

Введите телефон, чтобы получить доступ к документам

Скачать подборку бесплатно pdf 2,5mb

Уже скачали 52300

Я подтверждаю согласие на обработку персональных данных.

Элемент <head>

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

• Поисковых роботов.
• Стилизации и расширения функциональности веб ресурса.
• Указания заголовка файла в браузере с применением тега <title>.

Элемент <title>

Тег <title> применяют для указания название web-страницы (оно будет отображено в закладке браузера).

Элемент <body>

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

Пример использования HTML

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

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

После этого тега указывается сам документ страницы, который имеет начало и конец. Они обозначены открывающим (<html>) и закрывающим (</html>) тегами (своеобразный контейнер, хранящий всю информацию веб страницы). Внутри таких элементов содержится весь полезный для пользователя контент.

Непосредственно внутри HTML-документа видим теги <head> и <body>. Выглядит это следующим образом:

Код:

• <html>
• <head></head>
• <body></body>
• </html>

Популярные статьи

Высокооплачиваемые профессии сегодня и в ближайшем будущем

Дополнительный заработок в Интернете: варианты для новичков и специалистов

Востребованные удаленные профессии: зарабатывайте, не выходя из дома

Разработчик игр: чем занимается, сколько зарабатывает и где учится

Как выбрать профессию по душе: детальное руководство + ценные советы

В <head> прописаны служебные элементы для поисковых систем и браузеров:

• заголовок <title>, является обязательным элементом документа, который отображается в поисковой выдаче и во вкладке браузера;
• мета теги названия, описания и ключевых слов;
• описание содержания файла;
• ссылки на стили <link>;
• ссылки на скрипты <script>.

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

• текст;
• табличные формы;
• графика;
• рисунки;
• аудио/видео файлы и другие варианты кода.

Для закрепления представленной выше информации, приведем простой пример HTML файла:

Код:

• <!DOCTYPE html>
• <html>
• <head>
• <title>Я написал свой первый HTML документ</title>
• </head>
• <body>
• <h1>Мой первый HTML документ</h1>
• <p>Всем привет!</p>
• </body>
• </html>

Если записать это в каком-либо текстовом документе (к примеру, в «Блокноте»), а затем сохранить в расширении html и открыть в браузере, то на мониторе отобразится заголовок <h1> и описание документа <p>. Заголовок всегда выделяется жирным шрифтом, который по размеру будет больше, чем остальной текст.

Здесь еще стоит раскрыть, что такое div в HTML. Тег <div> используется, чтобы обеспечить выделение фрагмента документа, в котором будет изменен вид содержимого.

Ограничения HTML

Мы отметили довольно широкий набор возможностей для форматирования веб-страниц в HTML, но при этом в данном языке разметки нет довольно большого перечня функций. К примеру, теги дают возможность использовать стандартный шрифт, но его нельзя изменить. В этом контексте будет полезно разобраться, что такое HTML и CSS. Второй язык используется для описания внешнего вида разметки HTML-документов. Что дает подключение таблиц стилей CSS?

Такое решение позволяет преодолеть недостатки HTML:

• Упрощается адаптивная верстка.
• Сокращается время на оформление интернет-страниц.
• Увеличивается стандартный перечень возможностей.

Читайте также!

Как вставить html в письмо: разбираемся в особенностях создания интерактивных писем

Подробнее

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

С использованием CSS появляется возможность для вставки короткой ссылки на необходимый участок кода. Изменение шаблона оставляет неизменным файл CSS, поэтому существенно упрощается редактирование сайтов.

Благодаря появлению технологии CSS можно разрабатывать корпоративное оформление сайта при использовании любых шаблонов. Необходимо лишь подключить требуемый отрезок кода, и веб страница меняется. Это кардинально меняет представление о том, что такое HTML-сайт

Интеграция HTML с другими инструментами

Благодаря особенностям языка разметки значительно упростился вопрос интеграции сторонних сервисов. На страницы любого ресурса можно быстро и просто встроить системы аналитики Яндекс.Метрика или Google Analytics. Точно также несложно разметить функциональные блоки сайта: формы подписки, обратной связи, контактов и т.д. Интернет-пользователи не видят никакой разницы, им доступен готовый результат.

Примеры самых популярных интеграций:

• PHP. В теле страницы HTML указывается ссылка на исполняемый файл.
• JavaScript. Все скрипты можно становить целиком или в форме ссылки на документ.
• Ajax – комбинация асинхронного JS и XML.
• Iframes. Метод встраивания в документ интерактивных элементов.

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

Автор статьи:

Редакция сайта GeekBrains Шеф-редактор раздела Программирование