Что такое HTML? Основы языка разметки гипертекста
access_time
hourglass_empty
person_outline

Что такое HTML? Основы языка разметки гипертекста

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

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

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

<p> Вот как вы добавляете абзац в HTML. </p>
<br><p> У вас может быть более одного! </p></br>

В целом, 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:

<div>
    <h1> Основная рубрика </h1>
    <h2> Броский подзаголовок </h2>
    <p> Пункт 1 </p>
    <img src = "/" alt = "Изображение">
    <p> Пункт второй с гиперссылкой <a href="https://example.com"> </a> </p>
</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> содержит всё содержимое, отображаемое на странице.
 <html>
    <head>
      <!-- META INFORMATION -->
    </head>
    <body>
      <!-- PAGE CONTENT -->
    </body>
 </html>
  • Заголовки имеют 6 уровней в HTML. Они варьируются от <h1> </h1> до <h6> </h6>, где h1 — заголовок наивысшего уровня, а h6 — самый низкий. Абзацы прилагаются <p> </p>, в то время как в блочных комментариях используется тег <blockquote> </blockquote>.
  • Разделы — это более крупные секции контента, которые обычно содержат несколько абзацев, изображений, иногда блок-записей и других меньших элементов. Мы можем пометить их, используя тег <div> </div>. Элемент div может содержать ещё один тег div внутри него.
  • Вы можете также использовать теги <ol> </ol> для упорядоченных списков и <ul> </ul> для неупорядоченных. Отдельные элементы списка должны быть заключены в тег <li> </li>. Например, вот как выглядит основной неупорядоченный список в HTML:
 <ul>
    <li>Элемент списка 1</li>
    <li>Элемент списка 2</li>
    <li>Элемент списка 3</li>
 </ul>

Встроенные теги

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

Гиперссылки также являются встроенными элементами, для которых требуются теги <a> </a> и атрибуты href для указания адресата ссылки:

<a href="https://example.com/">Нажми сюда!</a>

Изображения также являются встроенными элементами. Вы можете добавить один с помощью <img> без закрывающего тега. Но вам также нужно будет использовать атрибут src для указания пути изображения, например:

<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.

Автор

Author

Anna / @annab

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

Похожие руководства

Оставьте ответ

Комментарий*

Имя*

Email*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Присоединиться к Hostinger сейчас!