Что такое HTML

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

Содержание:

Что такое HTML
История развития
Возможности
Основные команды
Пример тегов для простой HTML-страницы
Что невозможно сделать на HTML
Преимущества и недостатки HTML
HTML – не язык программирования

Аббревиатуру HTML можно расшифровать как:

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

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

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

Создание HTML-документа происходит в стандартном текстовом редакторе (например, «Блокноте») либо при помощи специальных приложений: Visual Studio Code, Notepad++ с подсветкой кода.

История развития

Точная дата создания HTML неизвестна – появление кода относится к периоду 1986-1991 гг. Язык разметки разрабатывался для людей, которые не обладали специальными познаниями в программировании и верстке. Сложная система SGML (Standard Generalized Markup Language) сводилась к незначительному перечню дескрипторов (тегов).

Изначально список команд для оформления текста включал 18 элементов, причем 11 из них применяются и сейчас. Главная задача состояла в корректном воспроизведении контента без искажений независимо от пользовательского устройства.

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

Актуальной версией считается HTML 5-ого поколения, которая появилась в конце 2012 г. и изменилась до релиза 5.3. Язык разметки поддерживается практически всеми браузерами, однако для устаревших web-обозревателей характерно искаженное отображение контента. Существует и понятие и «кроссбраузерной несовместимости», когда сайт на различных устройствах показывается иначе.

Возможности

HTML – это «каркас» сайта, с учетом которого браузер отрисовывает страницу, правильно расставляет элементы дизайна через CSS и добавляет логическую структуру при помощи JavaScript.

Например, в файле можно прописывать:

текстовые блоки, включая абзацы, заголовки H1-H6, перенос на новую строку;
ссылки (на файл изображения, прайс-лист либо страницу, на которую ссылается анкор в тексте либо пункт меню, причем доступны атрибуты для открытия документа в новом и текущем окне);
картинки, звуковые файлы, видео;
таблицы с любым количеством столбцов, строк и фиксированной шириной, высотой;
формы.

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

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

Несмотря на то, что действия пользователей обрабатываются через JavaScript и фреймворки, часть функций постепенно становится доступна и в HTML. Например, Drag & Drop, или перетаскивание объектов.

Основные команды

HTML – это своеобразный набор команд (тегов), указывающих браузеру, как отображать контент. Для каждой из них характерно название, которое заключается в угловые скобки «<» и «>».

Теги подразделяются на:

парные – состоят из открывающего и закрывающего тега;
непарные – включают единственный тег, который допускается закрывать, но необязательно.

Например, тег <img>, позволяющий поместить изображение на страницу, считается непарным:

Теги могут иметь атрибуты, которые передают элементам страницы дополнительные сведения. Например, уникальный id, размеры, гиперссылки на картинки и пр.

Элемент <img> содержит атрибуты alt и src. Последний добавляет гиперссылку на файл, а первый – подпись к фото, которая показывается, если картинка не загружается.

Тег <p> – парный, и всегда закрывается </p>. Стандартно применяется для обрамления текста, однако может использоваться и для разметки других данных, в которые допускается вложение прочих элементов, в т. ч. различных блоков: абзацев, подзаголовков, списков и т. д.

Например, код страницы с тегами <p> и <img> выглядит как:

<p>

Любой сопроводительный текст…

</p>

<p> Абзац, который заполняет пустоту.</p>

Если добавить дополнительный тег <center>, в который обернуть <p> и <img>, элементы на странице центрируются:

<p>

Сопроводительный текст…

</p>

<p> Абзац, который заполняет пустоту.</p>

</center>

Чтобы обозначить строку в списке, нужно применить следующую схему:

<ul>

<li> Название элемента в списке </li>

</ul>

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

Пример тегов для простой HTML-страницы

Стандартная HTML-страница содержит 3 основных тега:

<HTML>. Находится сразу после «доктайпа», который обозначает вид документа. По тегу браузер может определить версию HTML и понять, как корректнее показать страницу.
<HEAD>. Применятся для хранения важной служебной информации, включая кодировку и заголовок.
<BODY>. Предназначен для содержимого страницы, т. е. картинки и тексты добавляются внутрь тега.

В документе <body> и <head> задействуются только единожды.

К другим распространенным тегам HTML относятся:

<header> – задает вводную часть страницы, может содержать поисковую панель, навигацию, логотип;
<main> – содержит основные разделы HTML-страницы (помимо <footer> и <header>);
<nav> – необходим для управления навигационными элементами;
<sectіon> – указывает определенный подраздел веб-документа (например, «О компании», «Контакты», «Витрина»);
<artіcle> – нужен для структурирования информации при комбинированной работе с видео, текстом, изображениями.

Теги передают только фактическое значение – автоматическое размещение элементов на нужных местах страницы отсутствует, поскольку это осуществляется уже посредством CSS.

Что невозможно сделать на HTML

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

Для расширения функционала подключаются таблицы стилей CSS, которые упрощают адаптивную верстку. В результате дизайн сайта становится интереснее, а скорость загрузки увеличивается за счет низкой нагрузки на сервер.

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

Преимущества и недостатки HTML

К положительным сторонам, учитывая особенности языка HTML, относятся:

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

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

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

Также, чтобы сделать хороший ресурс, способный качественно открываться на любом устройстве, недостаточно применения тега <div>. Существует минимум 100 HTML-элементов, для которых важно знать семантику и особенности их прописывания. Например, если на макете отображена таблица, это вовсе не означает, что она таковой и будет являться.

HTML – не язык программирования

Удобство HTML позволило упростить интеграцию других инструментов. Например, на сайт можно встраивать системы аналитики Google Analytics и «Яндекс.Метрика». Аналогичная ситуация и с функциональными блоками, в т. ч. формами подписки, заказа обратного звонка. Для целевой аудитории нет разницы – пользователи видят только результат.

Часто востребованные интеграции:

JavaScript. Скрипт вставляется полностью либо гиперссылкой на документ.
PHP. В HTML-страницу добавляется ссылка на файл.
Iframes. Подразумевается технология встраивания интерактивных элементов в документ.
Ajax. Это сочетание асинхронного JS и XML.

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

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

HTML – это основа работы людей, которые по роду деятельности сталкиваются с разработкой онлайн-проектов, наполнением страниц контентом и продвижением ресурсов в поисковых системах. Например, SEO-специалисты посредством языка разметки подключают виджеты, взаимодействуют с аналитическими инструментами. Копирайтеры применяются HTML при форматировании текстов и различных таблиц.

HTML - что это, для чего используется