Основы языка разметки гипертекста
Что такое HTML? Это язык разметки гипертекста. Он позволяет пользователю создавать и структурировать разделы, параграфы, заголовки, ссылки и блоки для веб-страниц и приложений.
HTML не является языком программирования, то есть он не имеет возможности создавать динамические функции. Вместо этого он позволяет организовывать и форматировать документы, аналогично Microsoft Word.
При работе с HTML мы используем простые структуры кода (теги и атрибуты), чтобы разметить страницу веб-сайта. Например, мы можем создать абзац, поместив прилагаемый текст в исходный тег
и закрывающий
.
p> Вот как вы добавляете абзац в HTML. p> 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 году. Было добавлено несколько новых семантических тегов к разметке, которые показывают смысл их собственного контента, например , и .
Как работает HTML?
HTML-документы — это файлы, которые заканчиваются расширением .html или .htm. Вы можете просматривать его с помощью любого веб-браузера (например, Google Chrome, Safari или Mozilla Firefox). Браузер читает HTML-файл и отображает его содержимое, чтобы пользователи интернета могли его просматривать.
Обычно средний веб-сайт включает несколько разных HTML-страниц (англ). Например: домашние страницы, обычные страницы, страницы контактов будут иметь отдельные HTML-документы.
Каждая HTML-страница состоит из набора тегов (также называемых элементами), которые вы можете назвать строительными блоками веб-страниц. Они создают иерархию, которая структурирует контент по разделам, параграфам, заголовкам и другим блокам контента.
Большинство элементов HTML имеют открытие и закрытие, в которых используется синтаксис .
Ниже вы можете увидеть пример кода, с помощью которого можно структурировать элементы HTML:
div> h1> Основная рубрика h1> h2> Броский подзаголовок h2> p> Пункт 1 p> img src = "/" alt = "Изображение"> p> Пункт второй с гиперссылкой a href="https://example.com"> a> p> div> - Самый главный элемент — это простое разделение ( ), которое вы можете использовать для разметки больших разделов контента.
- Он содержит заголовок ( ), подзаголовок ( ), два абзаца ( ) и изображение (
).
- Второй абзац содержит ссылку ( ) с атрибутом href, который содержит целевой URL.
- Тег изображения также имеет два атрибута: src для пути изображения и alt для описания изображения.
Обзор наиболее используемых HTML-тегов
HTML-теги имеют два основных типа: блок-уровень и встроенные теги.
- Элементы уровня блока занимают всё свободное пространство и всегда запускают новую строку в документе. Заголовки и параграфы — отличный пример блочных тегов.
- Встроенные элементы занимают столько места, сколько им нужно, и не запускают новую строку на странице. Они обычно служат для форматирования внутреннего содержимого элементов уровня блока. Ссылки и подчеркнутые строки — хорошие примеры встроенных тегов.
Теги блочного уровня
Три тега уровня блока, которые каждый HTML-документ должен содержать: , и .
- Тег — это элемент самого высокого уровня, который охватывает каждую HTML-страницу.
- Тег содержит метаинформацию, такую как заголовок страницы и кодировка.
- Наконец, тег содержит всё содержимое, отображаемое на странице.
html> head> head> body> body> html> - Заголовки имеют 6 уровней в HTML. Они варьируются от до , где h1 — заголовок наивысшего уровня, а h6 — самый низкий. Абзацы прилагаются , в то время как в блочных комментариях используется тег .
- Разделы — это более крупные секции контента, которые обычно содержат несколько абзацев, изображений, иногда блок-записей и других меньших элементов. Мы можем пометить их, используя тег . Элемент div может содержать ещё один тег div внутри него.
- Вы можете также использовать теги для упорядоченных списков и для неупорядоченных. Отдельные элементы списка должны быть заключены в тег . Например, вот как выглядит основной неупорядоченный список в HTML:
ul> li>Элемент списка 1 li> li>Элемент списка 2 li> li>Элемент списка 3 li> ul> Встроенные теги
Для форматирования текста используются многие встроенные теги. Например, тег визуализирует выделенный элемент жирным шрифтом, тогда как теги отображают его курсивом.
Гиперссылки также являются встроенными элементами, для которых требуются теги и атрибуты href для указания адресата ссылки:
a href="https://example.com/">Нажми сюда! a> Изображения также являются встроенными элементами. Вы можете добавить один с помощью без закрывающего тега. Но вам также нужно будет использовать атрибут src для указания пути изображения, например:
img src="/images/example.jpg" alt="Пример изображения"> Эволюция HTML. Что отличает HTML и HTML5?
Начиная с первых дней, HTML прошёл невероятную эволюцию. W3C постоянно публикует новые версии и обновления, в то время как исторические вехи также получают выделенные имена.
HTML4 (в наши дни обычно называемый «HTML») был опубликован в 1999 году, а последняя крупная версия вышла в 2014 году. HTML5 — это обновление, которое ввело множество новых функций для языка.
Одной из наиболее ожидаемых особенностей HTML5 является поддержка встраивания аудио и видео. Вместо использования Flash-плеера мы можем просто вставлять видео и аудио-файлы на наши веб-страницы с помощью новых тегов и . Он также включает встроенную поддержку масштабируемой векторной графики (SVG) и MathML для математических и научных формул.
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.