Вы находитесь на странице: 1из 5

Что такое HTML?

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

HTML не является языком программирования, то есть он не имеет возможности


создавать динамические функции. Вместо этого он позволяет организовывать и
форматировать документы, аналогично Microsoft Word.

При работе с HTML мы используем простые структуры кода (теги и атрибуты),


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

1. <p> Вот как вы добавляете абзац в HTML. </p>


2. <br><p> У вас может быть более одного! </p></br>
В целом, HTML — это язык разметки, который очень прост в освоении даже для
начинающих в создании сайтов. Вот что вы узнаете, прочитав эту статью:
 История HTML
 Как работает HTML?
 Обзор наиболее используемых HTML-тегов
 Теги блочного уровня
 Встроенные теги
 Эволюция HTML. Что отличает HTML и HTML5?
 Плюсы и минусы HTML
 Как связаны HTML, CSS и JavaScript?
 Итак … Что такое HTML?

История HTML
HTML был изобретён Тимом Бернерсом-Ли, физиком из исследовательского
института ЦЕРН в Швейцарии. Он придумал идею интернет-гипертекстовой
системы.

Hypertext означает текст, содержащий ссылки на другие тексты, которые зрители


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

Согласно Справочнику HTML Element Reference от Mozilla Developer Network, в


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

Из-за быстрого роста популярности HTML теперь считается официальным веб-


стандартом. Спецификации HTML поддерживаются и разрабатываются
консорциумом World Wide Web (W3C). Вы можете проверить последнее состояние
языка в любое время на веб-сайте W3C (англ).

Самым большим обновлением языка стало внедрение HTML5 в 2014 году. Было


добавлено несколько новых семантических тегов к разметке, которые показывают
смысл их собственного контента, например <article>, <header> и <footer>.
Как работает HTML?
HTML-документы — это файлы, которые заканчиваются
расширением .html или .htm. Вы можете просматривать его с помощью любого
веб-браузера (например, Google Chrome, Safari или Mozilla Firefox). Браузер
читает HTML-файл и отображает его содержимое, чтобы пользователи интернета
могли его просматривать.

Обычно средний веб-сайт включает несколько разных HTML-страниц (англ).


Например: домашние страницы, обычные страницы, страницы контактов будут
иметь отдельные HTML-документы.

Каждая HTML-страница состоит из набора тегов (также


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

Большинство элементов HTML имеют открытие и закрытие, в которых


используется синтаксис <tag> </tag>.

Ниже вы можете увидеть пример кода, с помощью которого можно


структурировать элементы HTML:

1. <div>
2. <h1> Основная рубрика </h1>
3. <h2> Броский подзаголовок </h2>
4. <p> Пункт 1 </p>
5. <img src = "/" alt = "Изображение">
6. <p> Пункт второй с гиперссылкой <a href="https://example.com"> </a> </p>
7. </div>

 Самый главный элемент — это простое разделение (<div> </div>), которое


вы можете использовать для разметки больших разделов контента.
 Он содержит заголовок (<h1> </h1>), подзаголовок (<h2> </h2>), два абзаца
(<p> </p>) и изображение (<img>).
 Второй абзац содержит ссылку (<a> </a>) с атрибутом href, который
содержит целевой URL.
 Тег изображения также имеет два атрибута: src для пути изображения
и alt для описания изображения.

Обзор наиболее используемых HTML-тегов


HTML-теги имеют два основных типа: блок-уровень и встроенные теги.

1. Элементы уровня блока занимают всё свободное пространство и всегда


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

Теги блочного уровня


Три тега уровня блока, которые каждый HTML-документ должен
содержать: <html>, <head> и <body>.

1. Тег <html> </html> — это элемент самого высокого уровня, который


охватывает каждую HTML-страницу.
2. Тег <head> </head> содержит метаинформацию, такую как заголовок
страницы и кодировка.
3. Наконец, тег <body> </body> содержит всё содержимое, отображаемое на
странице.

1. <html>
2. <head>
3. <!-- META INFORMATION -->
4. </head>
5. <body>
6. <!-- PAGE CONTENT -->
7. </body>
8. </html>

 Заголовки имеют 6 уровней в HTML. Они варьируются от <h1>


</h1> до <h6> </h6>, где h1 — заголовок наивысшего уровня, а h6 — самый
низкий. Абзацы прилагаются <p> </p>, в то время как в блочных
комментариях используется тег <blockquote> </blockquote>.
 Разделы — это более крупные секции контента, которые обычно содержат
несколько абзацев, изображений, иногда блок-записей и других меньших
элементов. Мы можем пометить их, используя тег <div> </div>. Элемент div
может содержать ещё один тег div внутри него.
 Вы можете также использовать теги <ol> </ol> для упорядоченных списков
и <ul> </ul> для неупорядоченных. Отдельные элементы списка должны
быть заключены в тег <li> </li>. Например, вот как выглядит основной
неупорядоченный список в HTML:

1. <ul>
2. <li>Элемент списка 1</li>
3. <li>Элемент списка 2</li>
4. <li>Элемент списка 3</li>
5. </ul>
Встроенные теги
Для форматирования текста используются многие встроенные теги. Например,
тег <strong> </strong> визуализирует выделенный элемент жирным шрифтом,
тогда как теги <em> </em> отображают его курсивом.

Гиперссылки также являются встроенными элементами, для которых требуются


теги <a> </a> и атрибуты href для указания адресата ссылки:
1. <a href="https://example.com/">Нажми сюда!</a>
Изображения также являются встроенными элементами. Вы можете добавить
один с помощью <img> без закрывающего тега. Но вам также нужно будет
использовать атрибут src для указания пути изображения, например:

1. <img src="/images/example.jpg" alt="Пример изображения">


Если вы хотите узнать больше тегов HTML, попробуйте проверить наш полный
HTML-лист (англ) (который также доступен для загрузки).

Эволюция HTML. Что отличает HTML и HTML5?


Начиная с первых дней, HTML прошёл невероятную эволюцию. W3C постоянно
публикует новые версии и обновления, в то время как исторические вехи также
получают выделенные имена.

HTML4 (в наши дни обычно называемый «HTML») был опубликован в 1999 году, а
последняя крупная версия вышла в 2014 году. HTML5 — это обновление, которое
ввело множество новых функций для языка.

Одной из наиболее ожидаемых особенностей HTML5 является поддержка


встраивания аудио и видео. Вместо использования Flash-плеера мы можем
просто вставлять видео и аудио-файлы на наши веб-страницы с помощью новых
тегов <audio> </audio> и <video> </video>. Он также включает встроенную
поддержку масштабируемой векторной графики (SVG) и MathML для
математических и научных формул.

HTML5 также ввёл несколько семантических улучшений. Новые семантические


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

Наиболее популярными семантическими тегами являются <article>


</article>, <section> </section>, <aside> </aside>, <header> </header> и <footer>
</footer>. Чтобы найти уникальные отличия, попробуйте проверить наше
подробное сравнение HTML и HTML5.

Плюсы и минусы HTML


Как и большинство вещей, HTML имеет как сильные стороны так и слабые.

Плюсы:

 Широко используемый язык с большим количеством ресурсов и огромным


сообществом.
 Выполняется изначально в каждом веб-браузере.
 Поставляется с плоской кривой обучения.
 В открытом доступе и совершенно бесплатный.
 Чистая и последовательная разметка.
 Официальные веб-стандарты поддерживаются консорциумом World Wide
Web (W3C).
 Легко интегрируется с базовыми языками, такими как PHP и Node.js.
Минусы:

 В основном используется для статических веб-страниц. Для динамической


функциональности вам может потребоваться использовать JavaScript или
бэкэнд-язык, такой как PHP.
 Это не позволяет пользователю реализовать логику. В результате все веб-
страницы нужно создавать отдельно, даже если они используют одни и те
же элементы, например. заголовки и колонтитулы.
 Некоторые браузеры принимают новые функции медленно.
 Иногда поведение браузера трудно предсказать (например, старые
браузеры не всегда создают новые теги).

Как связаны HTML, CSS и JavaScript?


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

Однако HTML отлично работает с двумя другими интерфейсами: CSS (каскадные


таблицы стилей) и JavaScript. Вместе они могут обеспечить богатый
пользовательский интерфейс и реализовать расширенные функции.

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

Подумайте об HTML как о человеке, тогда CSS будет его одеждой а JavaScript —
движениями и манерами.

Итак … Что такое HTML?


HTML является основным языком разметки в интернете. Он запускается
изначально в каждом браузере и поддерживается консорциумом World Wide Web.

Вы можете использовать его для создания структуры контента веб-сайтов и веб-


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

Оценить