Структура HTML документа. Базовые теги HTML
Структура HTML документа
Давайте разберем структуру html документа чтобы понимать, как все работает.
Вы узнаете, какой каркас должен присутствовать на странице чтобы она считалась валидной (правильной).
Базовые теги HTML
Заголовки
Теги h1-h6 используются для создания заголовков на веб-страницах. Каждый из них имеет свой уровень важности, при этом h1 является наиболее важным, а h6 - наименее.
Параграфы
Тег параграфа - p, используется для создания текстовых блоков на странице. Он обычно следует за заголовком и предназначен для описания основного содержания.
Ссылки
Тег ссылки - a, используется для создания ссылок на другие страницы или на определенные участки на текущей странице, а также для скачивания файлов (с помощью атрибута download ). Атрибут href указывает на адрес страницы или на id якоря на текущей странице,существует также еще атрибут target который определяет, где откроется ссылка: в том же окне, в новой вкладке или в новом окне браузера.
Варианты значений атрибута target:
- _self: на той же странице. Значение по умолчанию, если именно оно вам нужно, то можно не указывать этот атрибут
- _blank: в новой вкладке или в новом окне браузера — это зависит от настроек браузера, но чаще всего это именно вкладка.
Изображения
Тег изображения - img, используется для вставки изображений на страницу. Атрибут src указывает на адрес изображения, так же у изображения есть атрибут alt- описание изображения. Это полезно, если картинка не загрузилась или если пользователь не видит изображения.
Списки
Маркированные списки создаются с помощью тега ul. Каждый элемент списка обозначается тегом li.
- Первый элемент
- Второй элемент
- Третий элемент
Нумерованные списки создаются с помощью тега ol. Каждый элемент списка также обозначается тегом li. Основное отличие нумерованного списка от маркированного заключается в наличие указателя(маркера) перед каждым элементом.
- Первый элемент
- Второй элемент
- Третий элемент
Блочные элементы
Элемент div группирует или оборачивает другие элементы и семантически ничего не значит. Сам по себе div без стилей ничего из себя не представляет — пользователь увидит пустое место на экране. Можно представить этот тег как универсальную коробку. В неё можно положить что угодно или не класть ничего и просто оформить как нужно.
Кнопки
Тег button используется для создания кнопок на странице. Он может содержать в себе текст или изображение.
Существует несколько типов кнопок, которые могут быть созданы с помощью атрибута type:
- type="submit" - кнопка может отправлять форму
- type="reset" - кнопка может сбрасывать данные формы
- type="button" - обычная кнопка, которая может выполнить любое действие со страницей.
