Что такое html теги: Тег | htmlbook.ru

Leave a Comment / Html / By /

Содержание

Что такое теги в HTML? Какой тег определяют видимую часть документа? Содержимое какого тега можно увидеть в заголовке браузера?

Html – это не язык программирования, это общепринятый язык разметки текста в интернете. Называется все это хитрее («язык гипертекстовой разметки»), но если вы хотите «хитрее», просто ступайте в «Википедию». Я буду рассказывать об этом языке с вершин своего опыта и своими словами.

Итак, важно понимать, что html – это не язык программирования. В нем нет логических операторов (и вообще нет операторов). Следует сказать, что на сегодняшний день Html неприлично разросся, в нем тысячи тегов.

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

В целом без html не получится создать сайт. С другой стороны, с помощью html можно создать простейший сайт. Я как-то создала себе сайт-визитку на «голом» html. Это были времена, когда я только начинала изучение web-дизайна.

Отмечу, что если вы интересуетесь html, чтобы сделать себе сайт, помните: знать html совсем не обязательно. Сейчас существует огромное число конструкторов сайтов.

Если же вы интересуетесь html, чтобы самому стать разработчиком сайтов или верстальщиком, отвечу на ваши дополнительные вопросы:

  • видимую часть документа определяет тег <body>,
  • в заголовке браузера можно увидеть содержимое тега <title>.

Даже если просто говорить о гипотетической разработке сайтов на «голом» html (чем никто, конечно, не занимается), невозможно не сказать о файле стилей css.

Вы, наверное, знаете, что каждый тег можно снабдить атрибутами, которые будут описывать его размеры, цвет, положение на странице и т. д.

В современном html принято выносить все это описание в файлы стилей. В самом html должны быть только ссылки на эти стили.

Надеюсь, мой ответ смог вам помочь. Я постаралась изложить в ответе суть. Если вы хотите у меня что-то спросить или, наоборот, высказать свою точку зрения, оставляйте свои комментарии под моим ответом!

Что такое html-теги и зачем их знать копирайтеру

Бесспорно, язык html — прерогатива веб-мастеров. Но для копирайтера маниакальная тяга к знаниям из смежных областей – профессиональное качество. К тому же, иногда бывает просто необходимо продемонстрировать умение не растеряться в Интернет-пространстве без вспомогательных средств и проставить, скажем, красивый анкор. А потому, не имея целью отнять хлеб у программистов, мы всё-таки хотим знать, что же там, за семью печатями визуального редактора.

 

Как открыть исходный код страницы в браузере

 

Если необходимо скопировать какую-либо информацию с любого сайта, который «не против» (то есть, на котором html-код не запаролен), это можно сделать с помощью исходного кода страницы.

Так, в Firefox это будет строка меню «Вид», а далее – «Исходный код страницы» (или же одновременно нажатые клавиши CTRL и U). Или же просто правой кнопочкой мыши выбрать нужный пункт в контекстном меню. Он так и называется: «Просмотр исходного кода», причём посмотреть в подобном формате можно как всю страницу целиком, так и выделенный вами участок текста.

Кстати, таким нехитрым способом легко копировать те теги, которых вы ещё не знаете, но очень хотите использовать.

 

Список html-тэгов, которые полезно знать копирайтеру

 

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

 

<p>абзац</p>

 

Таким образом в html выделяется абзац. 

 

<br>Текст<br/>

 

Так мы переносим текст на следующую строку.

 

<b>выделение жирным </b>

 

Так прописывается выделение жирным шрифтом.

 

<i>текст прописью</i>

 

Возможность писать прописью

 

<a href=»«» http:=»»>анкор</a>

 

А так можно красиво вставить любой анкор. Вместо слова текст пишете «тут» или «холодильники», на место http://website.ru вставляем адрес сайта, на который ведёт ссылка.

 

 

Таким кодом выделяют заголовок.

 

<h3>Подзаголовок</h3>

 

А так на html-языке называется подзаголовок. Подзаголовков может быть много, потому может быть еще h4, h5 и так далее. О других тэгах читайте в курсе SEO копирайтинг.

 

Преимущества работы с визуальным редактором на бирже

 

Работать, когда все основные теги html прописываются одним нажатием кнопки, быстрее и удобнее. Чтобы освоить визуальный редактор, много времени не нужно. Достаточно выделить текст, кликнуть соответствующую кнопку, и останется только любоваться красиво оформленной работой. Визуальный редактор доступен для работы при работе над статьёй.

Элементы, теги и атрибуты — Основы HTML, CSS и веб-дизайна

Основы HTML, CSS и веб-дизайна

Немного формальностей

Мало кто любит терминологию и формальности, но, к счастью, в мире HTML всё довольно просто.

Вкратце:

  1. Страница состоит из элементов.
  2. Элемент — это набор из тегов и содержания.
  3. Теги чаще всего идут парами: открывающий (<tag>) и закрывающий (</tag>). Между ними находится то, что попадает под действие этого элемента.
  4. Открывающий тег может содержать дополнительную информацию — атрибуты и значения атрибутов. Атрибуты позволяют «настроить» тег.

В примере из предыдущего урока есть элемент a (anchor — якорь), состоящий из открывающего и закрывающего тегов <a></a>.

<a href="https://ru.hexlet.io">Хекслет</a>

Это ссылка, и у неё есть атрибут href со значением https://ru.hexlet.io. Между открывающим и закрывающим тегами находится содержание — слово «Хекслет». Именно оно становится ссылкой.

А ниже есть картинка. Это пример одиночного тега, элемента, в котором не нужен закрывающий тег. Их ещё называют self-closing element — «самозакрывающиеся элементы».

<img src="https://i.imgur.com/789p0uP.png">

Как видите, мы указали атрибут src (от английского «source» — источник) со значением https://i.imgur.com/789p0uP.png. Это адрес файла изображения.

А некоторые элементы состоят из нескольких вложенных элементов. Например, списки:

<ol>
  <li>Код. Тайный язык информатики (Чарльз Петцольд)</li>
  <li>Не заставляйте меня думать (Steve Krug)</li>
  <li>Дизайн привычных вещей (Donald Norman)</li>
</ol>

Это — пронумерованный список (ordered list), поэтому тег называется <ol>. А каждая строчка списка — это элемент списка (list item) — <li>.

На странице это будет выглядеть примерно так:

  1. Код. Тайный язык информатики (Чарльз Петцольд)
  2. Не заставляйте меня думать (Steve Krug)
  3. Дизайн привычных вещей (Donald Norman)

А непронумерованный список (unordered list) создаётся с помощью <ul>. Заметьте, что достаточно лишь изменить открывающий и закрывающий тег всего списка, а сами элементы списка изменять не нужно.

<ul>
  <li>Код. Тайный язык информатики (Чарльз Петцольд)</li>
  <li>Не заставляйте меня думать (Steve Krug)</li>
  <li>Дизайн привычных вещей (Donald Norman)</li>
</ul>

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

See the Pen HTML lists with links by Hexlet (@hexlet) on CodePen.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Наши выпускники работают в компаниях:

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

HTML

access_time

9 декабря, 2020

hourglass_empty

5мин. чтения

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

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

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

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

В целом, HTML — это язык разметки, который очень прост в освоении даже для начинающих в создании сайтов. Вот что вы узнаете, прочитав эту статью.

Нужен недорогой, но надёжный хостинг для учебного или небольшого коммерческого проекта? Ознакомьтесь с тарифами общего хостинга. Скидки до 90%!

К тарифам

История 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>
    <h2> Основная рубрика </h2>
    <h3> Броский подзаголовок </h3>
    <p> Пункт 1 </p>
    <img src = "/" alt = "Изображение">
    <p> Пункт второй с гиперссылкой <a href="https://example. com"> </a> </p>
</div>
  • Самый главный элемент — это простое разделение (<div> </div>), которое вы можете использовать для разметки больших разделов контента.
  • Он содержит заголовок (<h2> </h2>), подзаголовок (<h3> </h3>), два абзаца (
    <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. Они варьируются от <h2> </h2> до <h6> </h6>, где h2 — заголовок наивысшего уровня, а 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.

Базовые теги HTML — Джино • Журнал

Продолжаем знакомиться с языком разметки HTML, основой основ большинства сайтов в интернете. Раньше мы уже рассказывали об этом языке, а теперь изучим самые простые и самые необходимые теги и их атрибуты в HTML.

Напомним, что теги и атрибуты — это инструменты, с помощью которых контент на странице сайта организовывается тем или иным образом. Атрибуты прописываются внутри тегов и имеют рядом с собой знак «=», а сами теги всегда заключаются в угловые скобки. Почти все теги в HTML являются парными и окружают с двух сторон ту часть контента, к которой они должны быть применены. Первый, открывающий, тег пишется без дополнительных символов, а во втором, закрывающем, теге после первой скобки появляется знак «/».

Основное

<html></html> Сигнализирует браузеру, что он имеет дело с HTML-документом.

<head></head> Очерчивает часть документа, которая не видна на странице. Предназначен для тега названия, для размещения счётчиков веб-аналитики и не только.

<title></title> Тот самый тег названия документа, его содержимое отображается в ярлыке вкладки браузера.

<body></body> Ограничивает часть документа, которая видна на странице. О том, какие теги здесь могут использоваться, мы покажем далее.

Оформление текста

<i></i> Выделяет текст курсивом.

<b></b> Делает текст полужирным.

<u></u> Подчёркивает текст.

<s></s> Зачёркивает текст.

<cite></cite> Предназначается для оформления цитат.

<tt></tt> Имитирует шрифт печатной машинки.

<code></code> Выделяет текст шрифтом Monospace, который используется для оформления фрагментов кода.

<font size=?></font> Определяет размер текста с помощью значений от 1 до 7, которые нужно подставлять вместо вопросительного знака.

<font color=?></font> Определяет цвет текста с помощью формата RRGGBB. Шестизначный код цвета так же вставляется вместо вопросительного знака.

Организация текста

<h2></h2> Оформляет текст в виде самого большого заголовка.

<h6></h6> Оформляет текст в виде самого маленького заголовка. Также можно использовать промежуточные значения 2, 3, 4, 5: чем больше цифра, тем меньше значимость заголовка в структуре текста.

Заголовок h6

<p></p> Оформляет абзац.

<p align=?> Выравнивает абзац нужным образом. Вместо вопросительного знака здесь можно поставить одно из четырёх значений: left (по левому краю), right (по правому краю), justify (по ширине) или center (по центру).

<br> Добавляет перенос
строки.

<blockquote></blockquote> Вставляет отступы с обеих сторон текста.

<ol></ol>

    Предназначается
  1. для
  2. нумерованных
  3. списков.

<ul></ul>

    Оформляет
  • ненумерованный
  • список.

<li> Сопровождает каждый пункт в списке, обозначая его цифрой или маркером — в зависимости от типа списка.

Работа со ссылками

<a href="URL">ТЕКСТ</a> «Зашивает» ссылку в нужный фрагмент текста. Адрес ссылки вставляется вместо «URL», а текст по умолчанию окрашивается в синий цвет и подчёркивается.

<a href="URL"> <img src="imgURL"></a> Добавляет ссылку, которая открывается при нажатии на картинку. Адрес картинки ставится вместо «imgURL».

<a href="#якорь">ТЕКСТ</a> С помощью этого тега можно сослаться на «якорь» — определённый фрагмент внутри просматриваемой страницы. К примеру, якоря используется для быстрого перехода из оглавления к соответствующей части статьи. Вместо «ТЕКСТ» в первом теге необходимо поместить слово или фразу, нажав на которую, можно будет перейти в нужный участок страницы. А там, куда нужно привести читателя, необходимо добавить атрибут id="якорь" в любой тег. Например, по этой ссылке можно перейти в раздел «Основное» в начале статьи.

Работа с графикой

<img src="URL"> Добавляет изображение. Вместо «URL» нужна ссылка на необходимый файл.

<img src="URL" align=?> Как и в <p align=?>, этот параметр выравнивает изображение нужным образом, однако здесь применяется уже шесть значений: left (слева), right (справа) и center (по центру), а также bottom (внизу), top (вверху) и middle (посередине)

<img src="URL" border=?> Создаёт рамку в виде сплошной линии вокруг изображения. Вместо вопросительного знака можно указать любое целое положительное число. Чем больше число, тем толще рамка.

<body background="URL"> Атрибут background в теге <body> позволяет установить картинку в качестве фона страницы.

<hr> Создаёт сплошную горизонтальную линию.

Вы можете проверить работу всех перечисленных выше тегов, создавая свои собственные HTML-документы. Для этого подойдёт даже Microsoft Office Word или другой текстовый редактор. Необходимо лишь сохранить файл с кодом в формате .html. Но также существуют и HTML-редакторы, которые предназначены для работы с этим языком — о них мы расскажем в одной из наших следующих статей.

HTML 5 Справочник всех тегов онлайн и примеры

= Новое в HTML5.

ТегОписание
<!—…—>Определяет комментарий
<!DOCTYPE> Определяет тип документа
<a>Определяет гиперссылку
<abbr>Определяет аббревиатуру или акроним
<acronym>Не поддерживается в HTML5. Использовать <abbr> Вместо.
Определяет акроним
<address>Определяет контактные данные автора/владельца документа
<applet>Не поддерживается в HTML5. Использовать <embed> or <object> Вместо.
Определяет встроенный апплет
<area>Определяет область внутри изображения-карты
<article>Определяет статью
<aside>Определяет содержание в стороне от содержимого страницы
<audio>Определяет звуковое содержимое
<b>Определяет полужирный текст
<base>Указывает базовый URL-адрес/цель для всех относительных URL-адресов в документе
<basefont>Не поддерживается в HTML5. Вместо этого используйте CSS.
Задает цвет, размер и шрифт по умолчанию для всего текста в документе
<bdi>Изолирует часть текста, которая может быть отформатирована в другом направлении от другого текста за его пределами
<bdo>Переопределяет текущее направление текста
<big>Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет большой текст
<blockquote>Определяет раздел, который цитируется из другого источника
<body>Определяет тело документа
<br>Определяет один разрыв строки
<button>Определяет нажатую кнопку
<canvas>Используется для рисования графики, на лету, с помощью сценариев (обычно JavaScript)
<caption>Определяет заголовок таблицы
<center>Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет центрированный текст
<cite>Определяет название работы
<code>Определяет часть кода компьютера
<col>Задает свойства столбца для каждого столбца в <colgroup> element 
<colgroup>Задает группу из одного или нескольких столбцов в таблице для форматирования
<data>Связывает данное содержимое с машинно-читаемым переводом
<datalist>Задает список предварительно заданных параметров для элементов управления вводом
<dd>Определяет описание/значение термина в списке описания
<del>Определяет текст, который был удален из документа
<details>Определяет дополнительные сведения, которые пользователь может просматривать или скрывать
<dfn>Представляет определяющий экземпляр термина
<dialog>Определяет диалоговое окно или окно
<dir>Не поддерживается в HTML5. Использовать <ul> Вместо.
Определяет список каталогов
<div>Определяет раздел в документе
<dl>Определяет список описания
<dt>Определяет термин/имя в списке описания
<em>Определяет подчеркнутый текст 
<embed>Определяет контейнер для внешнего (не HTML) приложения
<fieldset>Группирует связанные элементы в форме
<figcaption>Определяет заголовок для <figure> Элемент
<figure>Указывает автономное содержимое
<font>Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет шрифт, цвет и размер текста
<footer>Определяет нижний колонтитул для документа или раздела
<form>Определяет HTML-форму для ввода данных пользователем
<frame>Не поддерживается в HTML5.
Определяет окно (фрейм) в фрейме
<frameset>Не поддерживается в HTML5.
Определяет набор фреймов
<h2> to <h6>Определяет заголовки HTML
<head>Определяет сведения о документе
<header>Определяет заголовок документа или раздела
<hr> Определяет тематическое изменение содержания
<html>Определяет корень HTML-документа
<i>Определяет часть текста в альтернативный голос или настроение
<iframe>Определяет встроенный фрейм
<img>Определяет изображение
<input>Определяет элемент управления вводом
<ins>Определяет текст, вставленный в документ
<kbd>Определяет ввод с клавиатуры
<label>Определяет метку для <input> Элемент
<legend>Определяет заголовок для <fieldset> Элемент
<li>Определяет элемент списка
<link>Определяет связь между документом и внешним ресурсом (наиболее используемым для связывания с таблицами стилей)
<main>Указывает основное содержимое документа
<map>Определяет изображение на стороне клиента-Map
<mark>Определяет выделенный/выделенный текст
<menu>Определяет список/меню команд
<menuitem>Определяет команду/пункт меню, который пользователь может вызвать из всплывающего меню
<meta>Определяет метаданные HTML-документа
<meter>Определяет скалярное измерение в пределах известного диапазона (датчика)
<nav>Определяет навигационные ссылки
<noframes>Не поддерживается в HTML5.
Определяет альтернативное содержимое для пользователей, которые не поддерживают кадры
<noscript>Определяет альтернативное содержимое для пользователей, которые не поддерживают сценарии на стороне клиента
<object>Определяет внедренный объект
<ol>Определяет упорядоченный список
<optgroup>Определяет группу связанных параметров в раскрывающемся списке
<option>Определяет параметр в раскрывающемся списке
<output>Определяет результат вычисления
<p>Определяет абзац
<param>Определяет параметр для объекта
<picture>Определяет контейнер для нескольких ресурсов изображения
<pre>Определяет предварительно отформатированный текст
<progress>Представляет ход выполнения задачи
<q>Определяет краткое предложение
<rp>Определяет, что отображать в обозревателях, не поддерживающих аннотации Ruby
<rt>Определяет объяснение/произношение символов (для восточно-азиатских типографии)
<ruby>Определяет аннотацию Ruby (для восточно-азиатских типографий)
<s>Определяет текст, который больше не является правильным
<samp>Определяет выборку выходных данных из компьютерной программы
<script>Определяет сценарий на стороне клиента
<section>Определяет раздел в документе
<select>Определяет раскрывающийся список
<small>Определяет меньший текст
<source>Определяет несколько мультимедийных ресурсов для элементов мультимедиа (<video> И <audio>)
<span>Определяет раздел в документе
<strike>Не поддерживается в HTML5. Использовать <del> или <s> Вместо.
Определяет текст зачеркивания
<strong>Определяет важный текст
<style>Определяет сведения о стиле для документа
<sub>Определяет текст с подстрочным текстом
<summary>Определяет видимый заголовок для <details> Элемента
<sup>Определяет текст с надписью
<svg>Определяет контейнер для графики SVG
<table>Определяет таблицу
<tbody>Группирует содержимое тела в таблице
<td>Определяет ячейку в таблице
<template>Определяет шаблон
<textarea>Определяет многострочный элемент управления вводом (область текста)
<tfoot>Группирует содержимое нижнего колонтитула в таблице
<th>Определяет ячейку заголовка в таблице
<thead>Группирует содержимое заголовка в таблице
<time>Определяет дату и время
<title>Определяет заголовок документа
<tr>Определяет строку в таблице
<track>Определяет текстовые дорожки для элементов мультимедиа (<video> И <audio>)
<tt>Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет телетайп текст
<u>Определяет текст, который должен быть стилистически отличается от обычного текста
<ul>Определяет неупорядоченный список
<var>Определяет переменную
<video>Определяет видео или фильм
<wbr>Определяет возможный разрыв строки

«Не закрывайте теги!» — CSS-LIVE

С таким провокационным призывом на днях обратился к своим читателям в Твиттере не кто-нибудь, а Таб Аткинс, главный редактор львиной доли спецификаций CSS. Конечно, речь шла не о любых тегах, а об опциональных (необязательных), которые разрешает не ставить сам стандарт HTML. Но всё равно призыв Таба многих шокировал, очень уж вразрез он шел со всем, чему нас учили с самого начала веб-карьеры.

Может, Таб просто всех троллил? Или же в его совете есть рациональное зерно? Попробуем непредвзято разобраться.

Какие теги можно не закрывать?

Так и хочется воскликнуть «Никакие!» :). Но давайте всё-таки обратимся к стандарту. Он разрешает опускать не только 19 закрывающих тегов, но и 5 открывающих. Все они, вместе с условиями, когда это можно делать, явно перечислены в целом одном страшно секретном разделе 12.1.2.4. И еще 14 тегов закрывать просто нельзя.

В таблицах ниже я попытался максимально упростить формулировку условий из спецификации (если где-то перестарался — прошу поправить):

Необязательные открывающие теги

ТегКогда можно не писать
<html>Если перед ним не идет <!-- комментарий -->
<head>Если перед ним не идет <!-- комментарий -->
<body>Если body начинается не с <!-- комментария -->, пробела, либо одного из тегов, который может быть и в head
<tbody>Перед <tr>, если перед ним нет незакрытого thead, tfoot или другого tbody
<colgroup>Перед <col>, если перед ним нет незакрытого другого colgroup

Нельзя опускать открывающий тег, если у него есть какие-либо атрибуты (напр. lang для <html>). Также открывающий <body> необходим, если его первым потомком должен быть script, link или другой элемент, который может быть и в head — иначе он попадет именно туда.

Необязательные закрывающие теги

ТегКогда можно не писать
</html>Если после него не идет <!-- комментарий -->
</head>Если после него не идет <!-- комментарий --> или пробел
</body>Если после него не идет <!-- комментарий -->
</li>Перед <li> или </ul>/</ol>
</dt>Перед <dt> или <dd>
</dd>Перед <dt>, <dd> или концом родителя
</p>Перед открывающим тегом любого не-фразового потокового («блочного» по-старому:) элемента, либо закрывающим тегом родительского элемента (если у того не прозрачная модель контента)
</rt> и </rp>Перед <rt>, <rp> или </ruby>
</optgroup>Перед <optgroup> или </select>
</option>Перед <option>, <optgroup>, </optgroup> или </select>
</colgroup>Если после него не идет <!-- комментарий --> или пробел
</caption>Если после него не идет <!-- комментарий --> или пробел
</thead>Перед <tbody> или <tfoot>
</tbody>Перед другим <tbody>, <tfoot> или </table>
</tfoot>Перед </table>
</tr>Перед <tr> или концом родителя
</td> и </th>Перед <td>, <th> или концом родителя

Общее правило: закрывающие теги обычно не нужны для однородных сущностей в специализированных контейнерах (пунктов списков, внутренних частей таблиц и т. п.). Напрямую вложенными друг в друга они не бывают, ничего другого в их родителе тоже быть не может, так что если начался следующий — логично, что предыдущий закончился.

У правила для <p> общая логика похожа, но оно сложнее и потому стоит особняком (мы к нему еще вернемся).

А условие про HTML-комментарий означает лишь требование предсказуемости итоговой DOM. Например, что без явного тега нельзя вставить этот комментарий снаружи элемента. Это всё равно не будет ошибкой, просто в итоговой DOM комментарий окажется внутри него.

Теги, закрывать которые нельзя

Это пустые (void) элементы: area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr.

Многие поспешат возразить: «Это же самозакрывающие(ся) теги, у них свой способ закрытия — слеш перед >!». Что ж, их ждет сюрприз: в HTML этот слеш… не значит ничего! Он не считается ошибкой, чтобы было легче переходить с XHTML, но «самозакрытыми», точнее, не требующими закрытия, их делает не слеш, а «зашитый» в алгоритм парсинга список этих пустых элементов. И «закрыть» по аналогии, скажем, <div /> нельзя — для HTML это будет открывающий тег (притом уже с ошибкой). Только для SVG- и MathML-элементов (напр. <g />) этот слеш означает честное «самозакрытие» (т.е. сокращение для <g></g>).

Аргументы против незакрытия тегов

«Это невалидный код!»

Необязательные теги — часть стандарта HTML. Значит, код, использующий их по правилам, валиден (точнее, соответствует этому стандарту). Так что это — невалидный аргумент:)

Нельзя полагаться на механизм исправления ошибок в браузерах

Вообще-то, в HTML5 алгоритм исправления ошибок «зашит» в стандартный алгоритм парсинга, и все браузеры мамой клянутся, что соблюдают этот стандарт. Так что ошибочная запись <a href="...">раз<a href="...">два</a> везде даст две ссылки подряд, а не вложенную ссылку.

Но я согласен: полагаться на ошибочное поведение чего бы то ни было — очень, очень плохая идея.

Вот только разрешенные необязательные теги — не ошибка. А хоть и непривычный, но вариант правильного HTML-кода. И этот аргумент валидный — но мимо:)

Хрупкость

Часто говорят, что код с незакрытыми тегами легче сломать чем-то непредвиденным. Но давайте поищем конкретную ситуацию, где это проявится.

Например, вдруг в нашем шаблоне появился HTML-комментарий. Давайте честно: на что может повлиять, добавится этот комментарий внутрь неявного <head> или <body> или снаружи?

Или возьмем динамически генерируемый список. Если внутрь нашего пункта списка попадет другой <li>, то пункт развалится на два — но это произойдет независимо от того, явно он был закрыт или неявно.

Еще в <head>...</head> нередко попадает то, что не может там находиться. Например, что-то, что браузер считает выводимым на экран текстом (в подключаемых PHP-шаблонах это часто могла быть BOM-метка). Это сразу же неявно закрывает </head> и открывает <body>. И снова независимо от того, где и как стояли соотв. теги.

Другое дело, если кто-то возьмет и не закроет другой тег, скажем, </div> или тот же </a>. Но это уже проблема нарушения стандарта (равно как и закрытие тега в неподходящем месте!). Ее решение — валидация кода (в т.ч. автоматическая, на этапе сборки/CI). И оно снова не зависит от наличия/отсутствия необязательных тегов!

Может быть, в комментариях вы подскажете более убедительный пример, где именно легально незакрытый тег будет причиной хрупкости?

Несовместимость с XML (и JSX)

Факт: HTML и XML — разные языки (а JSX — вообще де-факто третий, хоть отчасти и «косплеит» XML внешне), и правила у них разные. Если нужно соблюсти и те, и те, то, конечно, без явного закрытия тегов никак. Другой вопрос, где и зачем сегодня нужна совместимость HTML с XML?..

Несовместимость с редакторами и IDE

Многие редакторы кода при подсветке синтаксиса, сворачивании ветвей и т.п. привязываются к явным закрывающим тегам. Некоторые даже закрывают их автоматически. Что ж, правила инструментов тоже желательно соблюдать. Только стоит отличать их от правил языка.

Несовместимость с кодстайлами и рабочими процессами

Аналогично: если в проекте принят какой-то дополнительный стандарт оформления кода помимо синтаксической корректности HTML — будь то лимит длины строк или требование явно закрывать теги — его тоже надо соблюдать. Но он не должен становиться самоцелью: если на его соблюдение уходит слишком много сил и он мешает использовать какую-то стандартную возможность языка, удобную для конкретной задачи — может, легче будет его пересмотреть или перейти на другой?

Трудность чтения

Большинству из нас, наверное, читать код с незакрытыми тегами труднее: нет привычных маркеров конца элемента. Правда, это во многом вопрос привычки и форматирования исходника (см. далее). Но привычка — важный фактор, не поспорить. Особенно в команде.

Сложность правил для запоминания

Таблицы с правилами, когда какой тег можно не закрывать, выглядят внушительно. И это я еще их упростил! Даже сам Таб Аткинс в исходном твиттерском треде запутался, какие теги неявно закрывают <p>, а разница между случаями, когда открывающий <body> обязателен, а когда нет, навскидку еще менее интуитивна. Не лучше ли вместо этого вот всего запомнить одно простое правило «всегда закрывай все теги!»?

Увы: одним простым правилом от HTML не отделаешься:). Как минимум 14 исключений — пустые элементы, которые закрывать нельзя — помнить всё равно надо. А что еще важнее, явное закрытие тега не гарантирует, что элемент действительно закончится именно в этом месте (мы уже мельком видели пару примеров, дальше будет больше). Но разве в других языках нет таких «странных» правил? Одна таблица приведения типов в JS чего стоит.

Простота записи поощряет бардак в коде

Занятно, что этот аргумент часто сочетается с предыдущим.

Да, код в стиле «ляпнул открывающий тег и вперёд» может показаться небрежным и «несерьезным». Но это тоже вопрос привычки. Пример обратного — Markdown: одна звездочка — один пункт списка и никаких «закрывающих тегов», при этом в коде полный порядок и читать его — одно удовольствие. Но да, Markdown и HTML — тоже разные языки:)

В любом случае, закрыть тег много ума не надо не так уж сложно (тем более часто это на автомате делает IDE). Сложнее поставить его там, где надо, по правилам языка. Но не поставить его там, где можно по стандарту и уместно по задаче — сложность примерно сопоставимая. Ниже мы увидим, что чтобы писать правильный HTML — хоть с явными тегами, хоть без — его всё равно придется знать.

Явное лучше неявного

Безусловно!

Когда между ними действительно есть выбор.

Увы, с HTML это не всегда так (подробности чуть ниже).

Аргументы за незакрытие тегов

Всего лишь сокращенная запись

В XML были две равнозначные записи элемента без содержимого — полная (<tag></tag>) и сокращенная (<tag/>). Вторая почему-то до сих пор популярна даже в HTML, хотя там этот слеш ничего не значит (см. выше).

Точно так же и в HTML по сути есть две равнозначные записи конструкции «конец элемента и начало следующего» — полная (напр. </p><p>) и сокращенная (напр. <p>). Т.е. формально в обоих случаях эти теги закрыты, просто не всегда очевидным образом.

Экономия трафика

Принцип прост: если не видно разницы — зачем платить писать (и гонять по сети) больше. Древний «гайд» по оформлению HTML/CSS от Google так этот совет и формулировал: «байты — деньги».

Это может быть и вправду актуально для Гугла с его объемами трафика. Для остальных это скорее всего экономия на спичках. Особенно с gzip или еще лучшими новыми алгоритмами сжатия. Но протестировать всё равно не помешает:)

Экономия памяти

Любые символы между тегами — включая пробелы и переносы строк — попадают в DOM в виде текстовых нод. В эпоху верстки инлайн-блоками эти ноды-пробелы доставляли немало хлопот (и одним из решений как раз было не закрывать теги:). Сейчас это неактуально, но сами ноды никуда не делись. Так что в DOM списка с закрытыми тегами <li> на самом деле будет вдвое больше нод, чем в DOM списка с незакрытыми (при обычном форматировании исходника, без минификации):

See the Pen
poJKLzb by Ilya Streltsyn (@SelenIT)
on CodePen.

И эти лишние ноды — полноценные DOM-объекты, с кучей свойств и методов. Другой вопрос, так ли много места они занимают в памяти и сильно ли это влияет на производительность страницы (как всегда, надо тестировать и измерять!)

По правде, этот аргумент выходит не столько за незакрытие тегов, сколько за минификацию кода для продакшна, с убиранием всех ненужных пробелов и т. д. Хотя тот же минификатор можно настроить и на вырезание необязательных тегов. Если тесты покажут, что от этого есть толк. Добавлено 26.03.2020: к счастью, проблемы минификаторов 10-летней давности, не всегда умевших отличить необязательный тег от обязательного, остались в прошлом – нынешняя версия html-minifier использует честный HTML5-парсер и, если не злоупотреблять опциями с «невалидным HTML» на выходе, ничего не сломает.

«Защита от дурака»

Вопреки стереотипу, что «явно закрытые теги надежнее», эти добавочные сущности в DOM — еще и новые потенциальные точки отказа, если случайно поставить закрывающий тег не там:

See the Pen
KKpGBqO by Ilya Streltsyn (@SelenIT)
on CodePen.

Причем для абзацев это и валидатор пропустит. Неявно же элементы закрываются только сразу перед другим элементом, и такой неуправляемый «неприкаянный» текст заведомо не появится.

Удобство чтения

Как ни странно, некоторым проще читать код без закрывающих тегов. Для людей программистского склада, привыкших держать все сущности в контейнерах, это звучит дико, но тем, кто больше работает с текстом, часто привычнее думать о разделителях абзацев, пунктов списка и ячеек таблицы. Именно разделители используются в редакторах типа Word, вышеупомянутом Markdown… и HTML задумывался так же (в одном из ранних черновиков те же <p>, <li> и т.п. так и были одиночными разделителями, вроде <br>).

Сравните две разметки таблицы с внешне идентичным результатом:

<table>
  <caption>Цены на продукты<caption>
  <thead>
    <tr>
      <th>Продукт</th>
      <th>Февраль</th>
      <th>Март</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Гречка</th>
      <td>80</td>
      <td>120</td>
    </tr>
    <tr>
      <th>Соль</th>
      <td>5</td>
      <td>15</td>
   </tr>
   <tr>
     <th>Икра</th>
     <td>1500</td>
     <td>900</td>
   </tr>
  </tbody>
</table>

<table>
  <caption>Цены на продукты
  <thead>
    <tr>
      <th>Продукт <th>Февраль <th>Март
  <tbody>
    <tr>
      <th>Гречка  <td>80      <td>120
    <tr>
      <th>Соль    <td>5       <td>15
    <tr>
      <th>Икра    <td>1500    <td>900
</table>

Правда, тут повезло, что вся таблица и текст в ячейках короткие, а хороший кодстайл должен быть универсальным и не зависеть от везения. .:)

Лучшее понимание специфики HTML и защита от сюрпризов

Этот аргумент Таба я вынес отдельно, чтобы он не затерялся (и выделил ключевые, на мой взгляд, слова жирным):

Еще одна причина привыкнуть к этому [не ставить необязательные теги] — то, что HTML-парсер будет делать это [достраивать DOM] в любом случае, и вы сможете заодно выучить соответствующие правила, так что не споткнетесь на этом. Если вы используете закрывающие теги с бездумным фанатизмом, вы можете *полагать*, что знаете, где заканчивается элемент, но окажетесь неправы!

Частый вопрос на форумах, StackOverflow, да и в жизни верстальщика: «Почему мой список внутри абзаца не отображается как надо?» Во всех руководствах по HTML <p>...</p> — пример блочного контейнера. С детства мы помним, что абзац — это «законченная мысль», так что если она включает в себя список чего-либо, подводку к нему и некий итог — логично, чтобы всё это было в одном абзаце. Вот открывающий <p>, вот список внутри, вот закрывающий </p>, всё закрыто в правильном порядке… Почему же в DOM-инспекторе список оказался снаружи абзаца?

Да, иногда привычка «мыслить контейнерами» и безоговорочно доверять явным тегам может оказать медвежью услугу не только новичку, маскируя неочевидное поведение парсера. А новичку здесь и валидатор мало поможет: «Найден закрывающий тег без открывающего…» — ну как же его нет, когда вот он? Ладно, <p> допускает лишь «фразовое» («строчное», по-старому) содержимое, а список к нему не относится — но ведь другие теги, даже насквозь «строчный» <span>, от точно такой же неправильной вложенности не рвутся!

А вот знание, что закрывающий </p> необязателен, и открывающий тег любого «блочного» (по-старому) элемента — его стандартный эквивалент, эту ситуацию бы предотвратило. Мы бы сразу обернули эту «мысль» не в <p>. ..</p>, а во что-то другое, без неявного закрытия — хоть <div>. Что, кстати, рекомендует и спецификация.

Аргумент против тегов вообще

Браузерам, по большому счету, вообще плевать на теги. Они отображают не разметку, а DOM, и оперируют лишь DOM-элементами и их свойствами. DOM может строиться по-разному, и в современном мире куда чаще она строится скриптами, а не парсится прямо из разметки. Разметка — лишь один из способов описания будущей DOM в текстовом формате, в принципе не лучший для машины, зато более понятный для человека.

А люди в наше время тоже редко пишут разметку руками. Чаще эту скучную механическую работу за нас делают инструменты — препроцессоры, шаблонизаторы и всё такое прочее. И это их задача — ставить те теги, которые надо, где надо и как надо, чтобы парсеры, со всеми их странностями и документированными причудами, всё правильно поняли. Их, а не наша.

Не в том ли причина многих проблем нынешней веб-отрасли, что истинную природу веб-платформы от разработчиков всю их жизнь вольно или невольно скрывают — сначала за тегами (и пустяками типа их регистра, словно мы до сих пор в 90-х), а затем за абстракциями фреймворков?. .

Заключение

Думаю, подытожить эту статью можно примерно так:

  1. Необязательные теги — не ошибка, не «магия», не «браузерная самодеятельность» и т.п. (как часто считают), а документированная особенность стандарта. По сути — еще один инструмент HTML, такой же, как и закрывающие теги. Можно спорить, входят ли они в «The good parts» языка HTML (скорее всего нет!:), но в некоторых задачах (напр. для экстремальной оптимизации) они могут быть полезны;
  2. Почти все валидные аргументы и за, и против необязательных тегов сводятся к двум фразам: «делайте, как вам удобнее», и «делайте, как у вас (в проекте, в команде, в настройках окружения и т.д.) заведено». Ну и еще «смотрите по задаче и тестируйте!».

Поэтому в подавляющем большинстве случаев все необязательные теги лучше всё-таки ставить. Не потому, что «Так Надо, Ибо Воистину ©», или будто это автоматически «сделает код надежнее», а лишь потому, что:

  • так удобнее и понятнее большинству разработчиков;
  • так настроено по умолчанию большинство инструментов.

Код должен решать свою задачу. Задача исходников — не столько инструкция для браузеров (им-то стиль кода не важен), сколько коммуникация между разработчиками. Понятнее для большинства — коммуникация лучше.

Но не забывайте, что бывают люди и с другими предпочтениями. И увидев у кого-то непривычный стиль валидного кода, не спешите тыкать пальцем «гы-гы, вот ламер, даже теги не закрыл». Лучше поинтересуйтесь, почему так сделано. Некрасиво — не обязательно плохо, а непривычно — не всегда некрасиво. Иногда красота проявляется лишь в целой картине.

А вообще в веб-платформе масса вещей, куда более важных, чем стиль написания тегов или спор между табами и пробелами. Та же доступность хотя бы!

И всё-таки, к одному из аргументов я хотел бы вернуться. В общем-то, ради него я и затеял эту статью:)

Веб-платформа большая и сложная. В ней много неизвестного и непонятного — даже для авторов спецификаций. Сложность и неизвестность пугает. Это естественно. И людям естественно успокаивать себя, отгораживаться от своих страхов приметами и ритуалами. Сплюнул через левое плечо — «беда обойдет». Успел потрогать пуговицу перед черной кошкой — «неудача отступит». Написал тег со слешем — «код не сломается». И т.п.

Не надо так. Приметы не работают. Единственная настоящая защита против неизвестности — знание. Не бойтесь узнавать новое. Даже в том, что другие считают «элементарным». В технике нет мелочей. А HTML — давно не смешные буквы в угловых скобках, а целая колоссальная экосистема. В ней надолго хватит места самым неожиданным открытиям.

А лучший способ изучить что-либо — эксперимент. И у веба огромное преимущество перед, скажем, ядерной физикой или генетикой, что здесь в экспериментах «для себя» иногда можно нарушать правила и смотреть, что из этого выйдет — ничего действительно страшного не случится. Зато станет понятнее, почему правила именно такие. И вообще — а правила ли это (а не реликт совсем другой эпохи с совсем другими ограничениями, скажем — это я не про закрытие тегов, а абстрактно:)

Так что не бойтесь экспериментировать! И пусть с каждым днем всё больше особенностей веб-платформы становится для вас не странной «магией», а понятным и предсказуемым инструментом. Который при ненадобности всегда можно отложить в дальний ящик, но иногда, если задача того потребует, использовать на радость себе и пользователям.

P.S. Это тоже может быть интересно:

HTML-элементов

Элемент HTML определяется начальным тегом, некоторым содержимым и конечный тег.

Элементы HTML

Элемент HTML — это все, от начального тега до конечного тега:

Здесь идет контент …

Примеры некоторых элементов HTML:

Мой Первый заголовок

Мой первый абзац.

Начальный тег Содержание элемента Концевая метка

 Моя первая заголовок

Мой первый абзац.


 нет нет

Примечание. Некоторые элементы HTML не имеют содержимого (например,
элемент).Эти элементы называются пустыми элементами. Пустые элементы не имеют закрывающего тега!

Вложенные элементы HTML

HTML-элементов могут быть вложенными (это означает, что элементы могут содержать другие элементы).

Все HTML-документы состоят из вложенных HTML-элементов.

Следующий пример содержит четыре элемента HTML ( , ,

и

):

Пример


Мой первый заголовок


Мой первый абзац.


Попробуй сам »

Объяснение примера

Элемент является корневым элементом и он определяет весь HTML-документ.

Он имеет начальный тег и конечный тег .

Затем внутри элемента находится a элемент:

Мой первый заголовок


Мой первый абзац.

Элемент определяет тело документа.

Он имеет начальный тег и конечный тег .

Затем внутри элемента есть два других элемента:

и

:

Мой первый заголовок


Мой первый абзац

Элемент

определяет заголовок.

Он имеет начальный тег

и конечный тег

:

Мой первый заголовок

Элемент

определяет абзац.

Он имеет начальный тег

и конечный тег

:

Мой первый абзац.

Никогда не пропускайте конечный тег

Некоторые элементы HTML будут отображаться правильно, даже если вы забудете конечный тег:

Однако никогда не полагайтесь на это! Если вы забудете конечный тег, могут возникнуть непредвиденные результаты и ошибки!

Пустые элементы HTML

HTML-элементов без содержимого называются пустыми элементами.

Тег
определяет разрыв строки и это пустой элемент без закрывающего тега:

HTML не чувствителен к регистру

В тегах HTML

регистр не учитывается:

означает то же, что и

.

Стандарт HTML не требует тегов в нижнем регистре, но W3C рекомендует строчных букв в HTML, а требует строчных букв для более строгих типов документов, таких как XHTML.

В W3Schools мы всегда используем имена тегов в нижнем регистре.

Ссылка на тег HTML

Справочник тегов

W3Schools содержит дополнительную информацию об этих тегах и их атрибутах.

Тег Описание
Определяет корень HTML-документа
Определяет тело документа

до

 Определяет заголовки HTML


Что такое HTML — Простое руководство по HTML

Во-первых, HTML — это сокращение от «HyperText Markup Language». Это может показаться пугающим, но это просто означает, что это язык для описания веб-страниц с использованием обычного текста. HTML — это , а не — сложный язык программирования.

Файлы HTML

Каждая веб-страница на самом деле является файлом HTML. Каждый HTML-файл представляет собой обычный текстовый файл, но с расширением .html вместо .txt и состоит из множества HTML-тегов, а также содержимого веб-страницы.

Веб-сайт часто содержит множество файлов HTML, которые ссылаются друг на друга.Вы можете редактировать HTML-файлы в своем любимом редакторе.

HTML-тегов

Теги

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

Большинство тегов должны состоять из двух частей: открывающей и закрывающей. Например, — это открывающий тег, а — закрывающий тег. Обратите внимание, что закрывающий тег имеет тот же текст, что и открывающий тег, но имеет дополнительный символ прямой косой черты (/). Я склонен интерпретировать это как «конец» или «закрытие».

Есть некоторые теги, которые являются исключением из этого правила, и закрывающий тег не требуется. Тег для показа изображений является одним из примеров этого.

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

Остальная часть HTML-файла может содержать столько тегов, сколько вы хотите для отображения вашего контента.

Атрибуты тега

Атрибуты

позволяют настраивать тег и определяются в открывающем теге, например:
или

...

Атрибутам часто присваивается значение с использованием знака равенства, например border = "0" или width = "50%" , но есть некоторые, которые нужно только объявить в теге, например:

.

Большинство атрибутов являются необязательными для большинства тегов и используются только тогда, когда вы хотите что-то изменить в способе отображения тега в браузере по умолчанию. Однако некоторые теги, такие как тег , имеют обязательные атрибуты, такие как src и alt , которые необходимы для того, чтобы браузер правильно отображал веб-страницу.

Пример:

Ниже представлен базовый HTML-документ, содержащий все необходимые теги. Вы можете скопировать приведенный ниже код, вставить его в свой редактор и сохранить как mypage.html , чтобы начать свою собственную веб-страницу.

  
 
   Заголовок моей страницы 
 
 

  Вот куда идет весь контент моей веб-страницы!

Посмотрите живую демонстрацию этого примера или откройте в новом окне. (Примечание: закройте окно или вкладку, чтобы вернуться к руководству)

HTML-тегов против элементов — Учебное пособие по республике

В этом руководстве вы узнаете о тегах и элементах HTML.

Синтаксис элемента HTML

Элемент HTML — это отдельный компонент документа HTML. Он представляет семантику или значение. Например, элемент title представляет заголовок документа.

Большинство HTML-элементов записываются с помощью начального тега (или открывающего тега) и конечного тега (или закрывающего тега) с промежуточным содержимым. Элементы также могут содержать атрибуты, определяющие его дополнительные свойства. Например, абзац, который представлен элементом p , будет записан как:

Мы узнаем об атрибутах HTML в следующей главе.

Примечание: Все элементы не требуют наличия закрывающего тега или закрывающего тега.Они называются пустыми элементами , самозакрывающимися элементами или пустыми элементами .

HTML-теги по сравнению с элементами

Технически HTML-элемент представляет собой набор начального тега, его атрибутов, конечного тега и всего, что между ними. С другой стороны, тег HTML (открывающий или закрывающий) используется для обозначения начала или конца элемента, как вы можете видеть на приведенном выше рисунке.

Однако в общем случае термины «элемент HTML» и «тег HTML» являются взаимозаменяемыми, то есть тег — это элемент — это тег. Для простоты этого веб-сайта термины «тег» и «элемент» используются для обозначения одного и того же — поскольку они будут определять что-то на вашей веб-странице.

Нечувствительность к регистру в тегах и атрибутах HTML

В HTML имена тегов и атрибутов не чувствительны к регистру (но большинство значений атрибутов чувствительно к регистру). Это означает, что тег

и тег

определяют то же самое в HTML, что и абзац.

Но в XHTML они чувствительны к регистру, и тег

отличается от тега

.

  
 Это абзац. 


 Это тоже правильный абзац.

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

Пустые элементы HTML

Пустые элементы (также называемые самозакрывающимися или пустыми элементами) не являются тегами контейнера — это означает, что вы не можете записать

некоторый контент или
некоторый контент .

Типичным примером пустого элемента является элемент –, который представляет разрыв строки.Некоторые другие общие пустые элементы: , , , ,

и т. Д.

  
 Этот абзац содержит 
 разрыв строки. 

Облачное небо

Примечание. В HTML самозакрывающийся элемент записывается просто как
.В XHTML для самозакрывающегося элемента требуется пробел и косая черта в конце, например
.

Вложение элементов HTML

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

В следующем примере показаны некоторые элементы, вложенные в элемент

.

  
 Вот текст  жирным . 


 Вот несколько  выделенного  текста. 


 Вот  выделенный  текст.

Совет: Размещение одного элемента внутри другого называется вложением.Вложенный элемент, также называемый дочерним элементом, также может быть родительским элементом, если в него вложены другие элементы.

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

  
  Эти теги правильно вложены. 


  Эти теги неправильно вложены.

Написание комментариев в HTML

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

Комментарий HTML начинается с и заканчивается -> , как показано в примере ниже:

  


 Это обычный текст.

Вы также можете закомментировать часть своего HTML-кода для целей отладки, как показано здесь:

   Смайлик  Смайлик 
->

Типы HTML-элементов

Элементы могут быть помещены в две отдельные группы: уровень блока и встроенный уровень элементов. Первые составляют структуру документа, а вторые - оформляют содержимое блока.

Кроме того, блочный элемент занимает 100% доступной ширины и отображается с разрывом строки до и после.В то время как встроенный элемент будет занимать ровно столько места, сколько ему нужно.

Наиболее часто используемые элементы уровня блока:

,

,

–
,
,
    ,