Пост

Html. Базовые теги

Разберем теги html head и body, которые являются основой html страницы

Опубликовано Обновлено
Html. Базовые теги
Html. Базовые теги
Автор alex
2 мин. чтения
Html. Базовые теги

В этой заметке посмотрим на костяк страницы html. Но прежде разберем понятие тега.

Тег

Теги обычно состоят из символов < и > и названия тега внутри, например <div>.

Большинство тегов парные, которым требуется закрывающий тег, например <div></div>, но бывают и одиночные теги к примеру <img>

Теперь посмотрим на основные элементы html страницы.

doctype

<!DOCTYPE html> - это объявление, которое сообщает браузеру какая версия html используется.

<!DOCTYPE html> должен идти обязательно первой строкой в документе

1

<!DOCTYPE html>

<!DOCTYPE html> нужен для того, чтобы браузер отображал документ в “стандартном режиме”.

Кстати <!DOCTYPE html> можно писать в регистронезависимом виде, но это не рекомендуется.

html

Корневой тег документа, который оборачивает всю страницу. Его нужно ставить сразу после <!DOCTYPE html>

То есть все что есть на странице должно быть внутри <html>.

1
2
3

<!DOCTYPE html>
<html lang="ru">
</html>

В качестве дочерних элементов здесь могут быть только <head> и <body>.

У элемента <html> есть обязательный атрибут lang который помогает понять браузеру на каком языке написан документ, например <html lang="en"></html>

Атрибут lang важен для доступности и SEO.

Элемент <html> может быть только один на странице и все остальные элементы должны быть в него вложены.

Элемент <head> является контейнером для метаданных документа.

1
2
3
4

<!DOCTYPE html>
<html lang="en">
<head></head>
</html>

Содержимое элемента <head> не отображается на странице

В качестве родительского элемента для <head> может быть только <html>.

Внутри элемента может быть расположена информация такая как:

  • Заголовок страницы
  • Стили css
  • Скрипты javascript
  • Метаданные для поисковых систем

Теги, которые могут быть внутри <head>

  • base - Базовый url адрес для всех относительных адресов в документе.
  • link - Определяет отношения между текущим документом и внешним ресурсом, чаще всего используется для подключения таблиц стилей css.
  • meta - Предоставляет метаданные о документе, такие как описание, ключевые слова, автор и другое.
  • noscript - Контент для тех у кого отключен javascript.
  • script - Клиентские скрипты
  • style - Встроенные css стили в страницу
  • template - Шаблон который может быть использован при создании новых элементов.
  • title - Определяет заголовок документа, который отображается на вкладке браузера, в результатах поиска и в истории браузера.

Что тут важно:

  • Элемент <head> является обязательным элементом в документе.
  • Элемент <head> может быть только один на странице.
  • Элемент <head> никак не отображается на странице, а только ее настраивает, то есть блок с технической информацией.
  • Рекомендуется придерживаться порядка элементов внутри <head>, Элемент <title> и <meta> идут вначале, а <link> и <script> в конце.

body

Тег body представляет собой основное содержимое документа. Элемент содержит все видимые элементы.

В качестве родительского элемента выступает элемент <html>.

Вот как выглядит стандартный шаблон html страницы

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>title</title>
</head>
<body>
  
</body>
</html>

Важные моменты:

  • Тег <body> может быть только один на странице.
  • Элемент <body> должен идти сразу же после элемента <head>
  • Элемент <body> содержит всю видимую информацию на странице
  • В теге <body> можно так же задавать скрипты и стили.
Html
Авторский пост защищен лицензией CC BY 4.0 .

Хотите оптимизировать свой бизнес, нужен сервис, сайт или интеграция.

Бесплатно расчитаю время разработки, предложу решение вашей задачи.