HTML-элемент <html> представляет собой корень (элемент верхнего уровня) HTML-документа, поэтому
его так же называют корневым элементом. Все другие элементы должны быть потомками этого элемента (должны
находиться внутри него).
В <html> должен быть один элемент <head>, за которым следует один элемент
<body>
Хорошие примеры использования:
HTML-элемент заголовка (<title>) определяет заголовок документа, который отображается в заголовке
окна браузера или на вкладке страницы. Он содержит только текст, а теги внутри элемента игнорируются.
Содержимое заголовка страницы может иметь важное значение для поисковой оптимизации (SEO). Как правило,
более длинный описательный заголовок будет лучше ранжироваться (Ranking), но, желательно, чтобы
суммарная длина текста заголовка была не более 60 символов.
Хороший пример использования: <title>Краткий справочник популярных элементов HTML</title>
name
Этот атрибут имеет здесь особое значение.
Для каждого атрибута <name> должен быть <content>
Атрибут <name> - определяет имя метаданных
Атрибут <content> - определяет значение для данного имени
Мы используем следующие элементы meta с атрибутом name
<meta name="description" content="Краткое описание. /> - это
строка, в которой разработчики могут объяснить, что делает приложение или краткое содержание
страницы.
<meta name="keywords" content="ключевые слова" /> - список
ключевых слов, соответствующих содержимому страницы сайта.
<meta name="viewport"
content="width=device-width,initial-scale=1"/> - дает подсказки о размере
изначального размера viewport. Используется на некоторых мобильных устройствах.
<meta name="HandheldFriendly" content="true" /> - Этот тег
первоначально использовался для идентификации мобильного контента в браузерах AvantGo, но стал
общим стандартом для идентификации мобильных веб-сайтов. Однако неизвестно, какой диапазон
браузеров поддерживает этот мета-тег.
<meta name="MobileOptimized" content="width" /> - Это
собственный мета-тег Windows, который также в конечном итоге стал использоваться в качестве еще
одного средства идентификации мобильного контента. Недостатком этого тега является то, что
необходимо указать определенную ширину. Опять же, неизвестно, какова поддержка этого тега.
<meta name="apple-mobile-web-app-capable" content="yes" /> - В
Safari iOS для закрепленных сайтов на экране "Домой" включает полноэкранный режим.
HTML-элемент <header> представляет собой вводный контент, обычно группу вводных или
навигационных средств. Он может содержать другие элементы-заголовки, а также логотип, форму поиска, имя
автора и другие элементы.
Не путайте с <head> - это другое!
HTML-элемент <main> предназначен для основного контента (содержимого) документа (страницы).
Основной контент состоит из контента, который непосредственно относится к главной теме документа.
HTML-элемент <footer> представляет собой нижний колонтитул (футер, подвал) для HTML страницы.
Футер обычно содержит информацию об авторе раздела, информацию об авторском праве или ссылки на
связанные документы.
Элемент разделения контента HTML (<div>) является универсальным контейнером для потокового
контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS.
Являясь "чистым" контейнером, элемент <div>, по существу, не представляет ничего. Между тем, он
используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты class или
id или style.
HTML-элемент <p> представляет собой абзац. Абзацы обычно представлены в визуальной среде в виде
блоков текста, отделённых от соседних блоков пустыми строками и/или отступом в первой строке, кроме
этого HTML-абзацы могут представлять собой структурную группировку однотипного содержимого, например
изображений или полей формы.
Абзацы являются блочными элементами и, в частности, автоматически закрываются, если другой блочный
элемент находится перед закрывающим тегом </p>.
HTML-элемент <br> устанавливает перевод строки в тексте (возврат каретки). Он полезен при
написании поэмы или адреса, где важно деление на строки.
Элемент <br> имеет единственную цель – создать разрыв линии в блоке текста. Таким образом, он не
имеет размеров или визуального стиля как такового.
HTML-элементы <h1> - <h6> представляют собой 6 уровней заголовков секций. <h1> это
наибольший заголовок и <h6> - наименьший
Рассмотрим их всех в сравнении:
Заголовок h2
Заголовок h3
Заголовок h4
Заголовок h5
Заголовок h6
Интересный эффект при использовании заголовков внутри HTML-элемента <article> - размеры
текстов внутри <h1> и <h2> не отличаются.
А валидатор дает предупреждение: Warning: Consider using the h1 element as a top-level heading
only.
Таким образом, вывод: не надо использовать <h1> внутри HTML-элемента <article>.
А вот использование заголовков за пределами HTML-элемента <article> - размеры текстов внутри
<h1> и <h2> отличаются:
HTML-элемент <img> встраивает изображение в документ.
Пример использования:
<img src="https://wpvi.ru/fs/html/ref/HTML5_Logo_64.png" width="64" height="64" alt="HTML5 лого"
title="HTML5 лого" />
Используются атрибуты:
src - обязателен и содержит путь к изображению, которое вы хотите встроить в
документ.
alt - содержит текстовое описание изображения, которое не обязательно, но полезно -
программы чтения с экрана читают это описание своим пользователям. Также оно отображается на
странице, если изображение не может быть загружено по какой-либо причине.
title - cодержит текст, предоставляющий консультативную информацию об элементе. Эта
информация может показываться пользователю в виде всплывающей подсказки.
The <table> HTML-элемент представляет табличные данные, то есть информацию, представленную в
двумерной таблице, состоящей из строк и столбцов ячеек, содержащих данные.
Типовая структура:
<caption> - заголовок таблицы (необязательный)
<colgroup> - группа колонок (необязательный, может быть от 0 до нескольких)
<thead> - описания колонок таблицы (необязательный)
<tbody> - тело таблицы, в который входят строки <tr>. Необязательный. Можно
использовать строки <tr> непосредственно в <table>.
HTML-элемент <aside> представляет собой часть документа, чьё содержимое только косвенно связанно с
основным содержимым документа. Чаще всего представлен в виде боковой панели, сносок или меток.
HTML-элемент <span> является основным строковым контейнером для фразового контента, который,
ничего не представляет. Он может использоваться для группировки элементов в целях стилизации
(использование атрибутов class или id) или потому, что они имеет общие значения атрибутов, например
lang. Он должен быть использован только когда нет другого подходящего по семантике элемента.
<span> очень похож на элемент <div>, но <div> является блочным элементом, в то время
как <span> является строчным.
HTML-элемент <a> определяет гиперссылку для перехода на определённое место на странице или на
другую страницу в Интернете. Также он может быть использован для создания якоря — это место назначения
для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами.
Элемент HTML <form> представляет собой раздел документа, содержащий интерактивные элементы
управления, которые позволяют пользователю отправлять информацию на веб-сервер.
Простая форма, которая пошлет GET запрос в "никуда", т.к. не установлен обработчик запроса.
Если Вы введете, например, "Света", то, поскольку это GET запрос, в адресной
строке браузера отобразится значение Света переменной name1:
?name1=Света#page_n22s
По факту эта информация некуда отправлена не будет, т.к. не установлен обработчик запроса.
HTML элемент <mark> представляет текст, выделенный в справочных целях из-за своей
актуальности в определённом контексте. Например, он может быть использован на странице с результатом
поиска, в которой выделяется каждый экземпляр искомого слова. Элемент сильной значимости (<strong>) указывает на то, что его содержание имеет
большое значение, серьёзность или срочность. Браузеры обычно отображают содержимое жирным шрифтом. Элемент <b> является частью текста стилистически отличающейся от нормального текста, не
носящий какого-либо специального значения или важности, и как правило выделен жирным шрифтом. HTML <em> элемент отмечает акцентируемый текст. Элемент <em> может быть вложенным,
причём каждый уровень вложенности
указывает на большую степень акцента. HTML элемент <i> представляет диапазон текста, который по какой-либо причине отличается от
обычного текста, например, идиоматический текст, технические термины, таксономические обозначения и
другие. Исторически они были представлены с использованием выделения курсивом (italicized),
который является исходным источником <i> наименования этого элемента.
<audio> (встраивание звукового контента в документ)
HTML-элемент <audio> используется для встраивания звукового контента в документ. Он может
содержать один или более источников аудио, представленных с помощью атрибута src или
элемента <source> – браузер выберет один наиболее подходящий.
Пример использования 1:
<audio controls src="https://wpvi.ru/fs/html/ref/pilot_game_chorus.mp3"></audio>
Мы - пилоты! Хор.
Пример использования 2:
<audio controls src="https://wpvi.ru/fs/html/ref/pilot_game.mp3"></audio>
Для встраивания видео контента в документ используйте элемент HTML <video>. Видео элемент может
содержать один или несколько источников видео. Чтобы указать источник видео, необходимо использовать
атрибут src или элемент <video>. Браузер определит подходящий источник.
Пример использования:
<video controls src="https://wpvi.ru/fs/html/ref/pilot20220122.mp4"></video>
Игра Пилота. Показательная партия.
Игра Пилота. Показательная партия.
HTML-элемент (<article>) представляет самостоятельную часть документа, страницы, приложения или
сайта, предназначенную для независимого распространения или повторного использования. Этот элемент может
представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой
самостоятельный фрагмент содержимого.
Элемент HTML <pre> представляет собой предварительно отформатированный текст, который должен быть
представлен точно так, как написано в HTML-файле. Текст обычно отображается с использованием моноширного
("monospace") шрифта. Пробелы внутри этого элемента отображаются как записанные.
Примеры использования:
Что ввожу, то и вижу!
1
2
3
4
5
Строка номер 6
...
.
.
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⠋⠄⠄⠄⠈⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⡿⠃⠄⠄⠄⠄⠄⣸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⡦⠄⠄⠄⠄⠄⢀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⡟⠛⠋⣀⠄⠄⠄⠄⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⡿⠟⠁⠄⠄⠄⠄⠘⠻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⡿⠄⢀⣀⠄⠄⠄⠄⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⡿⠁⢠⣾⣿⡆⠄⠄⣶⣿⣿⣿⠿⠛⠉⠄⠄⠹⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⡿⠄⢠⣿⣿⣿⡿⠄⠄⣿⠟⠋⠄⠄⠄⢀⣤⡀⠄⠙⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⠃⣰⣿⣿⣿⣿⠃⠄⠄⠄⠄⠄⠄⢀⣴⣿⣿⣿⣦⣀⠈⠻⣿⣿⣿⣿⣿
⣿⠉⠈⢰⣿⣿⣿⣿⣿⠄⠄⠄⠄⠄⢀⣴⣿⣿⣿⣿⣿⣿⣿⣷⣦⠙⠿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⣄⣀⣀⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣤⣶⣬⣽⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
