Чтобы сверстать простой сайт, необязательно знать все HTML-теги. Для начала можно изучить самые популярные — их достаточно для создания примитивной страницы с текстом, ссылками, картинками, подключёнными стилями и скриптами.
Мы будем рассматривать популярность тегов, опираясь на исследование Николая Шабалина — автора профессиональных курсов HTML Academy. Он проанализировал структуру 55 тысяч сайтов и посмотрел, из чего они состоят: какие теги встречаются часто, а какие — редко.
Теги , и
На каждой веб-странице есть три обязательных тега, они формируют структуру документа и содержат информацию для браузеров и поисковых систем.
— контейнер для содержимого страницы.
содержит служебную информацию. Здесь подключаются стили, указывается заголовок страницы, подключаются метатеги.
содержит контент — всё, что отображается в браузере.
Тег
Тег — самый популярный. Он используется как контейнер для HTML-элементов. В него можно добавить заголовок, абзацы текста, списки, формы или что-то ещё, а потом стилизовать.
О нас
Мы очень любим котов и веб-разработку.
Тег не имеет семантического значения, то есть не передаёт никакой информации о своём содержании. Он нужен для визуального форматирования и разметки.
Обращу внимание на отрыв от других тегов. Он потому популярный, что им можно описать бессмысленные сущности, коих больше, чем осмысленных. Также не для всех осмысленных сущностей есть теги. Например, используется для создания сетки. Для сеток нет тегов, только стили: гриды, флексы, флоаты и прочее.
Некоторые разработчики создают на смысловые блоки, например, шапку, подвал или меню. Так можно делать, но это плохая практика. Лучше использовать специальные семантические теги: , , , , и . Они дают больше информации о содержимом и делают код более читабельным.
Тег
Если в атрибут добавить протокол mailto: , ссылка откроет почтовый клиент пользователя и создаст электронное письмо. Например, когда пользователь кликнет по ссылке из примера ниже, откроется клиент с автоматически заполненным полем получателя — keks@example.com.
Тег
Тег — несемантический, как и . Он используется для стилизации отдельных слов и фраз в блоке текста. Например, вы можете использовать тег, чтобы изменить цвет слова в абзаце, применить другой шрифт или начертание.
В этом параграфе часть слов написана красным цветом.
280 978 и 1 463 187 упоминаний.
создаёт неупорядоченный список, то есть элементы в нём не пронумерованы, а помечены маркером. Внутри тега с помощью добавляются элементы списка.
С помощью таких списков разработчики создают навигацию, каталог с карточками товаров, пагинацию, раздел с отзывами и прочее. То есть блоки, которые содержат несколько однородных и равноправных элементов.
Тег
Тег
создаёт абзацы — отделяет одну часть текста от другой. Например, все абзацы на этой странице размечены тегом
Если вы верстаете личный блог, сайт-визитку или целый интернет-магазин, не забудьте правильно разметить текст. Неважно, для каких целей вы создаёте продукт и сколько в нём будет текста — в любом случае абзацы важны.
В письменной речи принято в одном абзаце раскрывать одну идею. Но в HTML абзац — не смысловая, а скорее структурная единица. Он лишь явно выделяет параграфы. Притом в тег можно вкладывать не только текст, но и, например, картинки.
Тег
Тег добавляет графики, иллюстрации и фотографии. Обычно его используют, когда на страницу нужно вставить контентное изображение — то есть которое доносит до пользователей полезную информацию. Например, показывает продукт или покупателей. Фоны и декоративные элементы чаще добавляют с помощью CSS или тега .
У есть четыре обязательных атрибута:
alt — альтернативный текст, описывающий изображение. Нужен на случай, если картинка не загрузится.
src — адрес, по которому находится изображение.
width — ширина изображения.
height — высота изображения.
Тег
Тег переносит текст на другую строку, не начиная нового абзаца.
Санкт-Петербург, набережная реки Карповки, 5.
Распространённая ошибка разработчиков-новичков — использовать для деления текста на абзацы. Тег не подходит для таких задач — для абзацев есть
.
Тег
Тег подключает на страницу JavaScript. ставится в конце документа, перед закрывающим тегом
. Если сделать наоборот и подключить JS в начале, страница будет отрисовываться медленнее.
У тега есть обязательный атрибут src , в котором указывается путь до файла.
Тег
Тег подключает CSS-файлы. В отличие от , он ставится в начале документа, в теге .
У два обязательных атрибута:
rel со значением stylesheet означает, что файл содержит таблицу стилей.
href указывает адрес файла.
Тег
Тег содержит метаданные — информацию, которая может влиять на страницу. Атрибут charset указывает кодировку страницы, чтобы браузер правильно отобразил текст. Самая распространённая современная кодировка — utf-8.
С помощью атрибута name=»keywords» можно подсказать поисковым системам ключевые слова, по которым пользователи должны находить сайт. Атрибут name=»description» указывает описание сайта, которое будет видно, например, в поисковике.
Тег
Тег форматирует текст — делает его курсивным.
Дизайнер решил выделить текст курсивом
Часто тег используется для иконок: . Именно поэтому он так часто встречается в исследовании. Однако такое использование тега — грубая ошибка, потому что он предназначен для работы с текстом
Кстати, есть ещё один тег для выделения курсивом, не такой популярный — . Разработчики используют его, чтобы поставить акцент на слове или фразе.
Тебе не стоило дразнить Кекса. Он обиделся
Что ещё надо знать
Как мы говорили в начале статьи, этих тегов хватит для создания простой страницы. Но чтобы верстать хорошо, придётся изучить семантические теги. То есть не создавать всю разметку на , а размечать элементы правильно. Например, для шапки сайта использовать , для подвала — , для навигации — , а для крупных смысловых разделов — .
Есть и другие теги — вы найдёте их в спецификации HTML.
Потренировать навыки вёрстки можно на курсе «Старт в программировании». Два первых раздела — бесплатные.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
HTML (Hypertext Markup Language) — это язык разметки, который используется для создания веб-страниц. HTML-документ состоит из набора тегов, которые определяют структуру и содержимое веб-страницы. В данной статье мы рассмотрим базовые HTML теги и их использование.
Заголовки
Теги h1-h6 используются для создания заголовков на веб-страницах. Каждый из них имеет свой уровень важности, при этом h1 является наиболее важным, а h6 — наименее.Рассмотрим каждый из них более подробно и выделим их на странице желтым цветом.
h1
Тег h1 используется для заголовка страницы и должен быть единственным на странице. Этот тег является наиболее важным и несёт в себе описание страницы в целом.
h1>Заголовок первого уровняh1>
Заголовок h1 всегда должен быть лишь один на страницу, и определить его легко: его текст должен рассказывать, о чем вся веб-страница
h2
Тег h2 используется для заголовков разделов(секций). Если на странице есть несколько разделов, то каждый из них может иметь заголовок второго уровня.
h2>Заголовок второго уровняh2>
Вернемся к нашей странице и найдем в ней секции. Заголовки данных отделов будут оборачиваться в тег h2,как например заголовки «Find great work» и «Featured Job».
h3
Тег h3 используется для заголовков подразделов. Если в разделе есть несколько подразделов, то каждый из них может иметь заголовок третьего уровня.Возьмем пример выше и выделим в главном разделе подразделы и выделим их заголовки желтым цветом.
h3>Заголовок третьего уровняh3>
h4-h6
Теги h4 — h6 используются для заголовков, которые являются менее важными, чем заголовки h1 — h3 . Их можно использовать для разделения информации на странице, но они должны быть использованы с умеренностью.
Как правило, при создании веб-страницы рекомендуется использовать не более трех уровней заголовков. Важно помнить, что использование заголовков не только помогает организовать информацию на странице, но также улучшает SEO-оптимизацию сайта.
Данные заголовки используются довольно редко и их все меньше можно увидеть в современной верстке
Параграф
Тег параграфа — p , используется для создания текстовых блоков на странице. Он обычно следует за заголовком и предназначен для описания основного содержания.
Воспользуемся уже знакомой нам страницей и выделим на ней данный тег оранжевым цветом.
Ссылка
Тег ссылки — a , используется для создания ссылок на другие страницы или на определенные участки на текущей странице, а также для скачивания файлов (с помощью атрибута download ). Атрибут href указывает на адрес страницы или на id якоря на текущей странице,существует также еще атрибут target который определяет, где откроется ссылка: в том же окне, в новой вкладке или в новом окне браузера.
Варианты значений атрибута target :
_self: на той же странице. Значение по умолчанию, если именно оно вам нужно, то можно не указывать этот атрибут
_blank: в новой вкладке или в новом окне браузера — это зависит от настроек браузера, но чаще всего это именно вкладка.
ahref="https://example.com">Ссылка на другую страницуa>
Изображение
Тег изображения — img , используется для вставки изображений на страницу. Атрибут src указывает на адрес изображения, так же у изображения есть атрибут alt — описание изображения. Это полезно, если картинка не загрузилась или если пользователь не видит изображения.
imgsrc="image.jpg"alt="Описание изображения">
Списки
Списки в HTML используются для представления информации в упорядоченном или неупорядоченном виде.Обычно это нумерованный или ненумерованный список. Также под список может подходить любой контент, элементы которого схожи и идут друг за другом
Маркированные (ненумерованные) списки
Маркированные списки создаются с помощью тега ul . Каждый элемент списка обозначается тегом li .
Нумерованные списки создаются с помощью тега ol . Каждый элемент списка также обозначается тегом li . Основное отличие нумерованного списка от маркированного заключается в наличие указателя(маркера) перед каждым элементом.
Элемент div группирует или оборачивает другие элементы и семантически ничего не значит. Сам по себе div без стилей ничего из себя не представляет — пользователь увидит пустое место на экране.Можно представить этот тег как универсальную коробку. В неё можно положить что угодно или не класть ничего и просто оформить как нужно.
Есть множество вариантов как расположить div на странице, давайте рассмотрим несколько из них. Синим цветом обозначен div который группирует несколько полей ввода,а красным тот который группирует заголовок и текст (подзаголовок).
Кнопка
Тег button используется для создания кнопок на странице. Он может содержать в себе текст или изображение.
Существует несколько типов кнопок, которые могут быть созданы с помощью атрибута type:
type=»submit» — кнопка может отправлять форму
type=»reset» — кнопка может сбрасывать данные формы
type=»button» — обычная кнопка, которая может выполнить любое действие со страницей.
Кнопки и ссылки вечно путают между собой. Давайте расставим точки на «i» в этом вопросе.
Основное применение тега button — это для создания элементов управления на веб-странице, таких как кнопки отправки формы или кнопки сброса,переключение контента, открытие модального окна и тд. Тег a , с другой стороны, используется для создания гиперссылок, которые пользователи могут нажать для перехода на другие страницы или для загрузки файлов.
Говоря простым языком, если по нажатию вы должны куда-то перейти, то смело используйте a , иначе button
Заключение
В этой статье я рассказал вам о самых основных HTML тегах без которых не обходиться не один сайт. Это лишь первая статья из цикла про HTML-теги, и я буду безмерно счастлив, если вы прочитаете следующую статью.
Спасибо за внимание, всем удачи, до скорых встреч)
