Разбор базовых 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-оптимизацию сайта.
h4>Заголовок четвертого уровняh4>
h5>Заголовок пятого уровняh5>
h6>Заголовок шестого уровняh6>Данные заголовки используются довольно редко и их все меньше можно увидеть в современной верстке
Параграф
Тег параграфа — p , используется для создания текстовых блоков на странице. Он обычно следует за заголовком и предназначен для описания основного содержания.
Воспользуемся уже знакомой нам страницей и выделим на ней данный тег оранжевым цветом.
Ссылка
Тег ссылки — a , используется для создания ссылок на другие страницы или на определенные участки на текущей странице, а также для скачивания файлов (с помощью атрибута download ). Атрибут href указывает на адрес страницы или на id якоря на текущей странице,существует также еще атрибут target который определяет, где откроется ссылка: в том же окне, в новой вкладке или в новом окне браузера.
Варианты значений атрибута target :
- _self: на той же странице. Значение по умолчанию, если именно оно вам нужно, то можно не указывать этот атрибут
- _blank: в новой вкладке или в новом окне браузера — это зависит от настроек браузера, но чаще всего это именно вкладка.
a href="https://example.com">Ссылка на другую страницуa>
Изображение
Тег изображения — img , используется для вставки изображений на страницу. Атрибут src указывает на адрес изображения, так же у изображения есть атрибут alt — описание изображения. Это полезно, если картинка не загрузилась или если пользователь не видит изображения.
img src="image.jpg" alt="Описание изображения">
Списки
Списки в HTML используются для представления информации в упорядоченном или неупорядоченном виде.Обычно это нумерованный или ненумерованный список. Также под список может подходить любой контент, элементы которого схожи и идут друг за другом
Маркированные (ненумерованные) списки
Маркированные списки создаются с помощью тега ul . Каждый элемент списка обозначается тегом li .
Теги li всегда должны быть прямыми потомками ul .
ul>
li>Первый элементli>
li>Второй элементli>
li>Третий элементli>
ul>Нумерованные списки
Нумерованные списки создаются с помощью тега ol . Каждый элемент списка также обозначается тегом li . Основное отличие нумерованного списка от маркированного заключается в наличие указателя(маркера) перед каждым элементом.
ol>
li>Первый элементli>
li>Второй элементli>
li>Третий элементli>
ol>
Div
Элемент div группирует или оборачивает другие элементы и семантически ничего не значит. Сам по себе div без стилей ничего из себя не представляет — пользователь увидит пустое место на экране.Можно представить этот тег как универсальную коробку. В неё можно положить что угодно или не класть ничего и просто оформить как нужно.
Есть множество вариантов как расположить div на странице, давайте рассмотрим несколько из них. Синим цветом обозначен div который группирует несколько полей ввода,а красным тот который группирует заголовок и текст (подзаголовок).
Кнопка
Тег button используется для создания кнопок на странице. Он может содержать в себе текст или изображение.
Существует несколько типов кнопок, которые могут быть созданы с помощью атрибута type:
- type=»submit» — кнопка может отправлять форму
- type=»reset» — кнопка может сбрасывать данные формы
- type=»button» — обычная кнопка, которая может выполнить любое действие со страницей.
button>Нажми меняbutton>
button type="button">Нажми меняbutton>
button type="submit">Нажми меняbutton>
button type="reset">Нажми меняbutton>
Кнопки и ссылки вечно путают между собой. Давайте расставим точки на «i» в этом вопросе.
Основное применение тега button — это для создания элементов управления на веб-странице, таких как кнопки отправки формы или кнопки сброса,переключение контента, открытие модального окна и тд. Тег a , с другой стороны, используется для создания гиперссылок, которые пользователи могут нажать для перехода на другие страницы или для загрузки файлов.
Говоря простым языком, если по нажатию вы должны куда-то перейти, то смело используйте a , иначе button
Заключение
В этой статье я рассказал вам о самых основных HTML тегах без которых не обходиться не один сайт. Это лишь первая статья из цикла про HTML-теги, и я буду безмерно счастлив, если вы прочитаете следующую статью.
Спасибо за внимание, всем удачи, до скорых встреч)
HTML начало
Как следует из предыдущей главы, HTML является языком разметки задача которого — просто «размечать» текстовый документ используя теги, которые, в свою очередь, говорят веб — браузеру, как именно нужно отобразить данный документ.
Создание HTML документов
Для того, чтобы создать HTML документ необходимо:
- Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
- Набрать произвольный текст и разметить его HTML тегами;
- Cохранить файл с расширением .htm или .html.
Базовый документ HTML
Ниже приведен в своей простейшей форме пример HTML-документа:
Пример HTML:
Это заголовок
Это параграф.
Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML — кода, или сохраните код в HTML — файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб — браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:
HTML теги
Как говорилось ранее, HTML это язык разметки, который использует различные теги для форматирования содержимого документа. Эти теги заключены в угловые скобки . За исключением нескольких тегов, большинство тегов имеют соответствующие им закрывающие теги. Например имеет свой закрывающий тег , а тег в свою очередь, имеет свой закрывающий тег тег и т.д.
| Всегда закрывайте теги, так как отсуствие закрывающего тега может приводить к непредсказуемым ошибкам при отображении документа. |
Рассмотренный пример HTML-документа использует следующие теги:
| Название тега | Описание |
|---|---|
| Это инструкция для веб-браузера о том, на какой версии HTML написана страница. | |
| Этот тег является корневым элементом HTML страницы и заключает в себе весь HTML — документ | |
| Этот тег содержит мета-информацию о документе и может содержать другие теги, такие как , и т.д. | |
| Этот тег определяет заголовок веб-страницы, в браузере вы его видите вверху на текущей вкладке. | |
| Этот тег предназначен для предоставления структурированных метаданных о веб-странице. В нашем примере определяет кодировку документа. | |
| Элемент содержит видимое содержимое страницы, который включает в себя другие HTML-теги, например , , и т.д. | |
| Этот тег представляет собой заголовок. | |
| Этот тег представляет собой абзац. |
Теги могут быть написаны как в верхнем регистре так и в нижнем, но World Wide Web Consortium (W3C) — глобальный консорциум, который занимается поддержкой HTML-стандарта, рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).
Структура HTML-страницы
Ниже приведена визуализация структуры HTML-страницы: