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