Введение

Tips

  • Могут быть атрибуты без значений (булевые): <input type="text" disabled>

Tags

Общие замечания:

  • теги не чувствительны к регистру — <title> и <TITLE>— одно и то же

  • Если они правильно распределены в документе, поисковым системам легче анализировать сайт, а пользователям проще его читать (сюда же настройка инклюзивности).

Какие теги бывают:

  • Голова: head, скрытая дополнительная информация

    • заголовок страницы, title

    • метаданные: meta — инструкции, которые страница передаёт браузеру

      • Одиночный метатег <meta charset="UTF-8"> подключает к HTML-документу алфавиты всех живых языков Земли. Без него браузер может неверно отобразить иероглифы, буквы кириллицы и вообще символы, не входящие в базовый латинский алфавит.

    • подключаемые файлы и шрифты: link

      • стили (rel="stylesheet")

      • иконка для браузера (favicon)

        • <link rel="icon" href="favicon.ico" type="image">.

    • описание для поисковиков и социальных сетей

    • кодировка для правильного отображения

    • язык

    • ...

  • Тело: body, видимая часть страницы

  • Стиль: style, прописываем селекторы для описания стилей. Не рекомендуется его размещать в body. Их надо держать в head!

  • Заголовки: h1-h6

  • Абзац: p

  • Ссылка: a (от слова anchor — якорь)

    • Если использовать атрибут target="_blank", то ссылка будет открывать ресурс в новой вкладке

  • Изображение: img, нет закрывающего тега

    • Атрибут alt — текстовое описание изображения

  • Блоки: div — логическое объединение элементов. Они позволяют применять нам CSS стили сразу к множеству элементов. По умолчанию, div занимает все свободное место

Специальные теги — теги для SEO, поисковых роботов, инклюзивности:

  • header — шапка сайта

Атрибуты

Дополнительные настройки тегов. Значения могут быть в одинарных или двойных кавычках (без разницы).

У элементов есть общий набор атрибутов, например style — настройка CSS для элемента.

<h1 style="color: springgreen; font-size: 72px;">Твин Пикс</h1>

Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Тестовая страница</title>
  </head>
  <body>
    <p>Это — моя страница</p>
  </body>
</html>

1 — это объявление типа документа (необходимо указывать как артефакт) 2 — <html> — содержит в себе всё содержимое на всей странице, и иногда его называют "корневой элемент" 3 — <head> — Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы. 4 — <meta> — метаданные страницы — кодировка, то, что будет отображено в поисковике как краткое резюме, изображение как превью и тп 7 — <body> — Он содержит весь контент, который вы хотите показывать посетителям вашей страницы

PreviousHTMLNextПримеры

Last updated