HTML расшифровывается как «Hypertext Markup Language», то есть «язык гипертекстовой разметки». Другими словами, набор команд, с помощью которых вы сможете создать сайт.
HTML формирует структуру (скелет) веб-страницы с помощью меток, или, как их чаще называют, тегов (tags). Именно они образуют элементы, из которых и состоит код HTML.
Имя тега заключают в угловые скобки(<>). Теги бывают одиночные и парные — последние имеют открывающий и закрывающий тег со слэшем (/).
- Одиночные теги: <img>, <hr>, <style> и т.д.
- Парные теги: <h1>Текст заголовка</h1>, <li>Элемент списка</li> и т.д.
От правильного использования тегов зависит не только адекватность структуры веб-страницы, но и правильность её отображения интернет-браузерами. Например, если не закрыть парный тег, код не заработает.
Простейшая HTML-страница состоит как минимум из трёх тегов:
- <html>...</html>
- <head>...</head>
- <body>...</body>
Тег <head> обычно содержит заголовок, ключевые слова, описание страницы и другие служебные данные. Содержимое этого тега не отображается на странице напрямую. А в теге <body> хранится содержание страницы, которое отображается в окне браузера.
Другие базовые теги
<title>...</title> — находится внутри <head>. Текст, который написан внутри этого тега, отображается в названии вкладки и в закладках браузера.
<header>...</header> — содержит вводную часть страницы, которую чаще называют «шапкой».
<footer>...</footer> — описывает заключительную часть страницы, или «подвал».
<h1>...</h1>, <h2>...</h2> и так далее — заголовки разного уровня.
<p>...</p> — абзац.
<a href="...">...</a> — гиперссылка. Атрибут href отвечает за адрес ссылки.
<img src="..."> — предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src.
<ul><li>...</li></ul> — ненумерованный список с одним элементом внутри. Чтобы включить другой элемент, нужно добавить ещё <li>...</li> внутрь <ul>...</ul>.
<ol><li>...</li></ol> — нумерованный список.
Все категории тегов и их атрибуты с описанием назначения есть в спецификации языка HTML — HTML Living Standard. Это основной документ всех разработчиков.
Комментарии
Код, заключённый между символами <!-- и -->, работать не будет. Если эти символы удалить, то код заработает. Это называется «раскомментировать». С помощью комментариев обычно временно отключают какой-то код или оставляют подсказки и разъяснения.
Кто такой фронтенд-разработчик и причём тут HTML?
Это человек, который может сделать сайт с нуля. Он берёт макет, превращает его в готовую веб-страницу с помощью языков разметки HTML и CSS и оживляет сайт, используя JavaScript.
Хотите узнать больше?
8 сентября на лайве «Как стать фронтенд-разработчиком с нуля» всё станет совсем понятно. А в конце ещё и полезных материалов пришлют.