HTML (HyperText Markup Language) – это язык гипертекстовой разметки, который применяется для структурирования и корректного отображения контента, размещенного на веб-странице, включая текст, таблицы, изображения, видео и другие элементы.
![](/images/seophoto/chto-takoe-html/1.png)
Содержание:
- Что такое HTML
- История развития
- Возможности
- Основные команды
- Пример тегов для простой HTML-страницы
- Что невозможно сделать на HTML
- Преимущества и недостатки HTML
- HTML – не язык программирования
Что такое HTML
Аббревиатуру HTML можно расшифровать как:
- HyperText (гипертекст) – текст, который соединяет связанные между собой элементы;
- Markup (разметка) – руководство по стилю набора текста;
- Language (язык) – код, который понимает система и в последующем задействует для интерпретации различных команд.
При вводе запроса и заходе пользователя на сайт браузером подгружается специальный файл в формате «.html», содержащий данные о контенте и структуре веб-страницы. HTML словно выстраивает визуальный фундамент ресурса, однако не запускает документ, а только указывает на размещение элементов, базовый дизайн, откуда брать скрипты.
Браузер распознает код и понимает, что нужно написать словами, как должны показываться заголовки, картинки, т. е. сведения из файла преобразуются в визуальные объекты. В результате пользователи видят на экране смартфона, компьютера либо другого устройства информацию в нужном виде.
Создание HTML-документа происходит в стандартном текстовом редакторе (например, «Блокноте») либо при помощи специальных приложений: Visual Studio Code, Notepad++ с подсветкой кода.
История развития
Точная дата создания HTML неизвестна – появление кода относится к периоду 1986-1991 гг. Язык разметки разрабатывался для людей, которые не обладали специальными познаниями в программировании и верстке. Сложная система SGML (Standard Generalized Markup Language) сводилась к незначительному перечню дескрипторов (тегов).
![](/images/seophoto/chto-takoe-html/2.png)
Изначально список команд для оформления текста включал 18 элементов, причем 11 из них применяются и сейчас. Главная задача состояла в корректном воспроизведении контента без искажений независимо от пользовательского устройства.
Современные выпуски HTML более требовательны к платформам из-за внедрения нового функционала. Например, были добавлены теги для графического и мультимедийного оформления, возможность рисования в заданной области посредством JavaScript, а также поддержка ввода типов данных – адреса электронной почты, даты и времени, домена.
Актуальной версией считается HTML 5-ого поколения, которая появилась в конце 2012 г. и изменилась до релиза 5.3. Язык разметки поддерживается практически всеми браузерами, однако для устаревших web-обозревателей характерно искаженное отображение контента. Существует и понятие и «кроссбраузерной несовместимости», когда сайт на различных устройствах показывается иначе.
Возможности
HTML – это «каркас» сайта, с учетом которого браузер отрисовывает страницу, правильно расставляет элементы дизайна через CSS и добавляет логическую структуру при помощи JavaScript.
Например, в файле можно прописывать:
- текстовые блоки, включая абзацы, заголовки H1-H6, перенос на новую строку;
- ссылки (на файл изображения, прайс-лист либо страницу, на которую ссылается анкор в тексте либо пункт меню, причем доступны атрибуты для открытия документа в новом и текущем окне);
- картинки, звуковые файлы, видео;
- таблицы с любым количеством столбцов, строк и фиксированной шириной, высотой;
- формы.
Имеется возможность форматирования текста, к которому относится выделение жирным шрифтом, курсивом, подчеркивание, установка размера кегля, разбивка на маркированные и нумерованные списки.
Верстка страницы выглядит так, как закодирует элементы разработчик. Посредством HTML допускается задавать даже простой дизайн. Например, устанавливать шрифт и цвет текста, оттенок блока. Однако для полноценной работы лучше указывать стили в файле CSS, позволяющим корректировать отступы, размещать элементы различными способами, экспериментировать с тенями, прозрачностью и анимацией, изменять фон кнопок при наведении.
![](/images/seophoto/chto-takoe-html/3.gif)
Несмотря на то, что действия пользователей обрабатываются через JavaScript и фреймворки, часть функций постепенно становится доступна и в HTML. Например, Drag & Drop, или перетаскивание объектов.
![](/images/seophoto/chto-takoe-html/4.gif)
Основные команды
HTML – это своеобразный набор команд (тегов), указывающих браузеру, как отображать контент. Для каждой из них характерно название, которое заключается в угловые скобки «<» и «>».
Теги подразделяются на:
- парные – состоят из открывающего и закрывающего тега;
- непарные – включают единственный тег, который допускается закрывать, но необязательно.
Например, тег <img>, позволяющий поместить изображение на страницу, считается непарным:
<img scr='….jpg' alt='photo …'>
Теги могут иметь атрибуты, которые передают элементам страницы дополнительные сведения. Например, уникальный id, размеры, гиперссылки на картинки и пр.
Элемент <img> содержит атрибуты alt и src. Последний добавляет гиперссылку на файл, а первый – подпись к фото, которая показывается, если картинка не загружается.
![](/images/seophoto/chto-takoe-html/5.png)
Тег <p> – парный, и всегда закрывается </p>. Стандартно применяется для обрамления текста, однако может использоваться и для разметки других данных, в которые допускается вложение прочих элементов, в т. ч. различных блоков: абзацев, подзаголовков, списков и т. д.
Например, код страницы с тегами <p> и <img> выглядит как:
<p>
Любой сопроводительный текст…
</p>
<img src='image.png'>
<p> Абзац, который заполняет пустоту.</p>
![](/images/seophoto/chto-takoe-html/6.png)
Если добавить дополнительный тег <center>, в который обернуть <p> и <img>, элементы на странице центрируются:
<center>
<p>
Сопроводительный текст…
</p>
<img src='image.png'>
<p> Абзац, который заполняет пустоту.</p>
</center>
![](/images/seophoto/chto-takoe-html/7.png)
Чтобы обозначить строку в списке, нужно применить следующую схему:
<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, которые упрощают адаптивную верстку. В результате дизайн сайта становится интереснее, а скорость загрузки увеличивается за счет низкой нагрузки на сервер.
![](/images/seophoto/chto-takoe-html/8.png)
При использовании только HTML требуется дублирование команд на каждой отдельной странице. Такой подход нерационален, например, при формировании общих элементов наподобие меню, подвала, шапки сайта. А технология CSS обеспечивает качественное оформление независимо от шаблона. Для изменения и преображения страницы достаточно подключить необходимую часть кода.
Преимущества и недостатки HTML
К положительным сторонам, учитывая особенности языка HTML, относятся:
- совместимость с любыми современными браузерами;
- возможность написания кода даже в простом текстовом редакторе;
- быстрое освоение базовых навыков за счет понятного синтаксиса;
- быстрая загрузка статических сайтов, которым не нужно обращаться к базам данных;
- хорошая интеграция с различными языками программирования.
HTML может самостоятельно закрывать теги и пропускать синтаксические ошибки. Даже с наличием недочетов в JS страница способна загрузиться, хотя и с некоторыми искажениями.
Из недостатков можно выделить необходимость вручную вносить повторяющиеся изменения. Например, проставлять на каждой странице элементы навигации, пункты меню. Аналогично и с созданием новых документов, т. е. даже при повторении структуры приходится оформлять каждый из них отдельно.
Также, чтобы сделать хороший ресурс, способный качественно открываться на любом устройстве, недостаточно применения тега <div>. Существует минимум 100 HTML-элементов, для которых важно знать семантику и особенности их прописывания. Например, если на макете отображена таблица, это вовсе не означает, что она таковой и будет являться.
HTML – не язык программирования
Удобство HTML позволило упростить интеграцию других инструментов. Например, на сайт можно встраивать системы аналитики Google Analytics и «Яндекс.Метрика». Аналогичная ситуация и с функциональными блоками, в т. ч. формами подписки, заказа обратного звонка. Для целевой аудитории нет разницы – пользователи видят только результат.
![](/images/seophoto/chto-takoe-html/9.png)
Часто востребованные интеграции:
- JavaScript. Скрипт вставляется полностью либо гиперссылкой на документ.
- PHP. В HTML-страницу добавляется ссылка на файл.
- Iframes. Подразумевается технология встраивания интерактивных элементов в документ.
- Ajax. Это сочетание асинхронного JS и XML.
Такие возможности приводят к ошибочному мнению, что HTML является языком программирования. Причем подобное определение дают даже авторитетные площадки, хотя технически это неверно. Технология позволяет только управлять отображением содержимого, а остальной функционал напрямую зависит от подключаемых модулей.
![](/images/seophoto/chto-takoe-html/10.png)
HTML не язык программирования и потому, что не содержит никаких условий, функций, классов, операторов и других параметров, необходимых для написания ПО и приложений. Здесь присутствуют только теги, помогающие браузеру правильно отображать содержание сайта.
HTML – это основа работы людей, которые по роду деятельности сталкиваются с разработкой онлайн-проектов, наполнением страниц контентом и продвижением ресурсов в поисковых системах. Например, SEO-специалисты посредством языка разметки подключают виджеты, взаимодействуют с аналитическими инструментами. Копирайтеры применяются HTML при форматировании текстов и различных таблиц.