Существуют глобальные атрибуты, их можно применять ко всем тегам: список глобальных атрибутов.
Некоторые глобальные атрибуты:
class определяет класс, значение – имена классов;
id – идентификатор, значение – уникальный идентификатор;
style – стили, значение – код CSS;
hidden – скрывает элемент, но не удаляет его из DOM. Аналогично применению стиля display: none;
title – дополнительная информация в виде всплывающей подсказки, значение – текст.
Основные теги
Структура и инструкции для построения HTML-документа:
. Указывается в первой строке документа и означает: «Этот документ написан на HTML5». Не представлен в дереве документа DOM. Обязателен для корректного применения CSS.
html. Главный тег, сообщает браузеру, что это HTML-документ. Находится в основании дерева DOM и он – корневой элемент, или элемент верхнего уровня.
head. Не всю информацию надо показывать на странице. Служебная информация – в «голове» документа.
title, link. Служебная информация: краткий заголовок и ссылки на внешние файлы (иконка, стилевой файл). Определяются в head.
meta. Любая информация о мета-данных, которая не может быть представлена другими, ориентированными на мета-данные, HTML элементами. Например, кодировка страницы.
body. Все видимое в окне, вкладке браузера содержимое – в «теле» страницы.
комментарии: .
Основная разметка
Заголовки h1-h6. Заголовки и подзаголовки улучшают читаемость текста.
p и br. Параграф и принудительный перенос на новую строку. Заголовки нельзя вкладывать в параграфы!
hr. Разделитель содержимого, горизонтальная линия (display: block).
img. Картинка, изображение (display: inline-block). В обязательном атрибуте src указывается путь к файлу или его URL. Распространенные форматы изображений: jpeg, png, svg, webp (пример webp):
ul и ol, li: ненумерованный и нумерованный списки, элемент списка (display: list-item).
a. Ссылка. Атрибуты download, href, target и т.д. Якорь — это название после символа #, который указывает на элемент (идентификатор, ID) на текущей странице.
Стилистически выделенные строчные элементы: b (полужирный, font-weight: bold), i (курсив, font-style: italic), u (подчеркнутый, text-decoration: underline), s (перечеркнутый, text-decoration: line-through).
sub (vertical-align: sub; font-size: smaller;), sup (vertical-align: super; font-size: smaller).
Семантическая разметка
header. «Шапка» страницы. Не путать с head!
footer «Подвал» страницы.
main. Основное содержимое страницы.
section. Раздел, секция.
article. Статья.
Семантические теги по свойствам повторяют тег div.
Сколько всего тегов HTML?
Их 115–120, примерно как в периодической системе химических элементов – таблице Менделеева:
Спецсимволы HTML
Спецсимволы – запоминающиеся (мнемонические) обозначения символов вида &слово;. Они входят в стандарт HTML.
Когда использование спецсимволов – единственная возможность отобразить символ на web-странице:
Знак меньше: < Потому что с него начинаются теги.
неразрывный пробел, мнемоника . Потому что в коде HTML игнорируется более одного пробела подряд.
Другие часто используемые спецсимволы:
Знак больше >: >
короткое – тире – и длинное — тире —
двойные угловые кавычки, или французские кавычки, или «ёлочки»: « и »
Текстом Lorem ipsum, который не имеет перевода. Слово «lorem» получилось из-за переноса «dolorem» на новую страницу после первого слога. Фраза «dolorem ipsum» встречается в философском трактате Цицерона «О пределах добра и зла», написанном в 45 году до н.э. на латинском языке.
В оригинале: «Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit . »
Перевод: «Нет никого, кто любил бы свою боль, кто искал бы ее и хотел бы чтобы она была у него. Потому что это боль. »
Первые 100 слов, вызываются сокращением Emmet lorem100:
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio animi alias porro ipsam illum exercitationem odit cum perspiciatis quidem, a perferendis eum minus ea sapiente corporis libero quos ullam, debitis assumenda? Corrupti, culpa! Ut fuga corrupti culpa eligendi voluptas, molestiae aliquid quod soluta, nostrum doloribus maxime numquam illo facilis obcaecati excepturi expedita pariatur ullam necessitatibus ex eius odit, similique saepe omnis officiis. Maiores facilis ullam architecto numquam non tempore magni quae deleniti? Corrupti aspernatur officia qui recusandae quis mollitia facere illum corporis cum id harum, odit maxime repellat tempore deleniti exercitationem iste ullam suscipit provident delectus, sed necessitatibus doloremque. Excepturi?
Альтернативы HTML?
Языков разметки много, и HTML – всего один из множества, хотя сегодня и самый популярный. Существует SGML (Standard Generalized Markup Language), стандартный обобщённый язык разметки.
Языки HTML и XML произошли от SGML. HTML был приложением SGML, а XML – это подмножество SGML, разработанное для упрощения процесса машинного разбора документа. В 2000-х годах у консорциума W3C было серьезное намерение перевести веб на XML. К счастью, этого не случилось.
Markdown – облегчённый язык разметки, созданный с целью написания легко читаемого и удобного для правки текста, но пригодного для преобразования в другие форматы (например, HTML). Подходит для самых простых страниц, но требует конвертации в HTML.
HTML :: Понятие тега и его синтаксис
Как было сказано в определении, HTML – это язык гипертекстовой разметки веб-документов. Осуществляется такая разметка при помощи специальных меток, называемых тегами.
(от англ. tag ) – специальная метка, используемая в HTML для разметки веб-страницы в соответствии с установленными правилами.
Синтаксис тегов HTML
символ слеша, если он есть;
имя тега;
атрибуты тега, если они есть;
значения атрибутов, если они есть.
В качестве примера рассмотрим два тега:
и
. Эта пара тегов образует элемент «Абзац» разметки документа. Первый из них является и обозначает начало элемента «Абзац» . Второй же является . Он сообщает браузеру о том, что элемент «Абзац» закончился и все, что будет написано далее, следует отнести к другому элементу разметки.
Как легко догадаться, у закрывающего тега после символа < должен стоять символ слеша / . Далее следует имя тега (в нашем примере это идентификатор p ) и символ >. Других составляющих закрывающие теги не имеют.
В открывающих тегах слеш не пишется. Тоже самое касается и , т.е. тегов, для которых закрывающего тега не существует. Зато в них может присутствовать дополнительная информация в виде (от англ. attribute ), определяющих какие-нибудь дополнительные свойства, и значений атрибутов, которые обычно записываются в формате имя_атрибута=»значение_атрибута» и отделяются друг от друга пробелами. Так в теге
имеется два атрибута и два соответствующих им значения. Следует отметить, что существуют атрибуты и без значений. В таком случае вторая часть пары и символ = отсутствуют, а вместо этого через пробел указывается только сам атрибут. Кроме того, строковые значения атрибутов должны указываться в кавычках. Мы для этих целей будем использовать двойные кавычки. Числа разрешается в кавычки не брать, но желательно так не поступать во избежание путаницы.
Регистр символов HTML
Что касается регистра символов имен тегов и имен атрибутов, то он значения не имеет. Так обе записи
и равносильны. Однако мы, за редким исключением, как в случае с тегом , будем писать их в нижнем регистре.
Совсем по другому обстоит дело со значениями атрибутов, которые могут быть регистрозависимыми. Например, при указании путевых имен файлов регистр символов должен соответствовать первоисточнику, иначе наверняка возникнет ошибка. Так записи и не эквиваленты, поскольку ссылаются на два разных файла изображения.
Обобщенный синтаксис записи тегов HTML
Таким образом, в общем случае для записи открывающего или одиночного тега мы будем использовать следующий синтаксис: , где имя_тега , а также имя_атрибута мы будем писать строчными буквами, а «значение_атрибута» записывать в двойных кавычках в независимости от того, является значение числом или строкой.
используется для разделения блоков текста на параграфы или абзацы.
Примеры использования
Здесь какой-то текст.
Несколько абзацев текста:
Это первый параграф.
Это второй параграф.
Параграф со встроенным стилем:
Этот параграф голубого цвета
Параграф со ссылкой:
Параграф с курсивным текстом:
В этом параграфе курсивный текст.
Параграф с полужирным текстом:
В этом параграфе жирность текста.
Параграф с изображением:
В этом параграфе есть картинка.
Для чего использовать тег
для разделения блоков текста на абзацы;
для добавления текстовых описаний к изображениям;
для добавления текстовых описаний к видео;
для написания содержания статей;
для написания постов для блога;
для описания продуктов.
Глобальные атрибуты
Ограничения
если внутри тега
нет содержимого, тег все равно создаст пустое пространство на веб-странице;
если содержимое внутри тега
содержит только пробелы или переносы строк, тег создаст пустое место на веб-странице.
Чем заменить тег
В большинстве случаев тег
является наиболее подходящим для создания абзацев на веб-странице.
Однако если требуется создать блок текста без автоматического добавления пространства между абзацами, то можно использовать тег . Если же необходимо выделить на странице отдельный блок с контентом, то лучше использовать теги или , в зависимости от смысла и содержания блока.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Контейнер для чего угодно. Тег
Тег определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.
Заголовок секции
Какое-нибудь содержимое секции
6 октября 2023
Как добавить подпись в HTML. Тег
Описание изображения
Устаревший атрибут align — выравнивание подписи относительно элемента .
Тег может использоваться только внутри элемента .
Валидный HTML требует, чтобы тег находился после элемента или других медиа-элементов внутри . Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.
6 октября 2023
Метаданные HTML-страницы. Тег
Тег содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.
Атрибуты тега :
charset — кодировка символов в документе.
name — имя метаданных.
content — значение метаданных.
http-equiv — HTTP-заголовок для значения атрибута content .
Атрибут charset должен быть первым атрибутом в теге , а name и http-equiv нельзя использовать вместе.
4 октября 2023
Просто кнопка. Тег
Тег создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.
Атрибуты тега :
name — имя кнопки.
type — тип кнопки, по умолчанию — submit . Атрибут type необходим, если указан атрибут value .
value — значение, которое будет отправлено на сервер при нажатии на кнопку.
disabled — указывает, что кнопка должна быть отключена.
form — одна или несколько форм, к которым принадлежит кнопка.
formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
formmethod — метод HTTP, используемый при отправке данных формы.
formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
formtarget — указывает, где отображать ответ после отправки формы.
4 октября 2023
Независимый контент. Тег
Тег в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.
Заголовок статьи
Текст статьи.
Тегом размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.
Не используйте для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
3 октября 2023
Как встроить страницу через
Тег позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.
Простейший пример использования :
Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.
Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).
3 октября 2023
Выпадающий список. Тег
Тег используется для создания выпадающего списка. Этот тег содержит список опций, которые пользователь может выбрать. Когда пользователь выбирает опцию, выбранное значение отправляется на сервер или обрабатывается на клиентской стороне.
Все опции списка должны быть обёрнуты в тег .
Атрибуты тега :
autocomplete — подсказка для функции автозаполнения формы;
disabled — делает элемент неактивным;
form — связывает список с формой;
multiple — позволяет выбрать несколько опций;
name — задает имя элемента, которое будет отправляться на сервер;
required — делает элемент обязательным для заполнения;
size — задает количество строк в списке.
1 октября 2023
Встроенные CSS-стили для страницы с тегом
Тег используется для определения стилей для HTML-документов. Он является важным компонентом CSS, которые позволяют разработчикам создавать визуально привлекательные веб-страницы, определяя различные стили, такие как цвета, шрифты и макеты.
body
Добро пожаловать на мой сайт!
Атрибуты тега :
type — MIME-тип таблицы стилей.
media — типы носителей, для которы будет использоваться стиль.
29 сентября 2023
Изображение в HTML. Тег
Элемент используется для вставки изображений на веб-страницы.
У нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.
Существуют определенные правила или стандарты использования тега , которые рекомендуются для большинства случаев в веб-разработке. Несмотря на то что конкретные требования могут варьироваться в зависимости от проекта, ниже приведены атрибуты и практики, которые часто рекомендуются к использованию.
28 сентября 2023
Верхние и нижние индексы
Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальный тренажёр.
Следующие два тега обычно используются не для выделения слов, а для выделения отдельных символов. Их используют для указания единиц измерения или для написания простых формул.
Например: 20 м 2 , H2O, X 3 +X 2 =1
Тег отображает текст в виде верхнего индекса.
Тег отображает текст в виде нижнего индекса.
Стоит отметить, что эти теги являются чисто презентационными и не имеют собственной семантики.
Эти теги можно использовать внутри друг друга для создания более сложных формул.
Если вам нужно вставить очень сложную формулу в HTML-документ, лучше воспользоваться специальным языком разметки MathML.
и 
не эквиваленты, поскольку ссылаются на два разных файла изображения.
картинка.