Краткий справочник популярных элементов HTML

HTML5 лого

Здесь мы Вам расскажем о самых популярных HTML-элементах, о которых должен знать начинающий HTML кодировщик.

Автор: владелец домена wpvi.ru © 2022-2099

Содержание
Тема Ссылка
Содержание... Стр.01
<!DOCTYPE html> Стр.02
<html> Стр.03
<head> Стр.04
<meta> атрибут "charset" Стр.05
<title> Стр.06
<meta> атрибуты "name" и "content" Стр.07
<body> Стр.08
<header> Стр.09
<main> Стр.10
<footer> Стр.11
<div> Стр.12
<p> (Paragraph. Параграф.) Стр.13
<br> (Break or Carriage-return. Возврат Каретки.) Стр.14
<h1> - <h6> (6 уровней заголовков) Стр.15
<img> (встраивает изображение в документ) Стр.16
<table> (таблица) Стр.17
<hr> (рисует горизонтальную прямую линию) Стр.18
<aside> (блок с вспомогательным содержимым) Стр.19
<span> (универсальный строчный контейнер) Стр.20
<a> (гиперссылка для перехода) Стр.21
<form> (форма для ввода информации) Стр.22
<mark> (выделение текста, похожие: <strong>, <b>, <em>, <i>) Стр.23
<audio> (встраивание звукового контента в документ) Стр.24
<video> (встраивание видео контента в документ) Стр.25
<article> Стр.26
<ul> (неупорядоченный список) и <ol> (упорядоченный список) Стр.27
<pre> (Предварительно отформатированный текстовый элемент) Стр.28
1 Содержание



<!DOCTYPE html>

Используйте всегда элемент (тег) <!DOCTYPE html> как первую строчку в любом файле *.html.

2 Содержание



<html>

HTML-элемент <html> представляет собой корень (элемент верхнего уровня) HTML-документа, поэтому его так же называют корневым элементом. Все другие элементы должны быть потомками этого элемента (должны находиться внутри него). В <html> должен быть один элемент <head>, за которым следует один элемент <body>
Хорошие примеры использования:
  • <html lang="ru"> - для сайтов на русском языке
  • <html lang="en"> - для сайтов на английском языке

3 Содержание



<head>

HTML-элемент <head> содержит машиночитаемую информацию (metadata) о документе, например его заголовок, скрипты и страницы стилей.

4 Содержание



<meta> атрибут "charset"

Определяет кодировку HTML-документа.
Хороший пример использования:
<meta charset="UTF-8" />

5 Содержание



<title>

HTML-элемент заголовка (<title>) определяет заголовок документа, который отображается в заголовке окна браузера или на вкладке страницы. Он содержит только текст, а теги внутри элемента игнорируются.
Содержимое заголовка страницы может иметь важное значение для поисковой оптимизации (SEO). Как правило, более длинный описательный заголовок будет лучше ранжироваться (Ranking), но, желательно, чтобы суммарная длина текста заголовка была не более 60 символов.
Хороший пример использования:
<title>Краткий справочник популярных элементов HTML</title>

6 Содержание



<meta> атрибуты "name" и "content"

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 для закрепленных сайтов на экране "Домой" включает полноэкранный режим.

7 Содержание



<body>

HTML-элемент <body> представляет собой контент (содержимое) документа HTML. В документе может быть только один и только один элемент <body>.

8 Содержание



<header>

HTML-элемент <header> представляет собой вводный контент, обычно группу вводных или навигационных средств. Он может содержать другие элементы-заголовки, а также логотип, форму поиска, имя автора и другие элементы. Не путайте с <head> - это другое!

9 Содержание



<main>

HTML-элемент <main> предназначен для основного контента (содержимого) документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа.

10 Содержание



<footer>

HTML-элемент <footer> представляет собой нижний колонтитул (футер, подвал) для HTML страницы. Футер обычно содержит информацию об авторе раздела, информацию об авторском праве или ссылки на связанные документы.

11 Содержание



<div>

Элемент разделения контента HTML (<div>) является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS.
Являясь "чистым" контейнером, элемент <div>, по существу, не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты class или id или style.

12 Содержание



<p> (Paragraph. Параграф.)

HTML-элемент <p> представляет собой абзац. Абзацы обычно представлены в визуальной среде в виде блоков текста, отделённых от соседних блоков пустыми строками и/или отступом в первой строке, кроме этого HTML-абзацы могут представлять собой структурную группировку однотипного содержимого, например изображений или полей формы.
Абзацы являются блочными элементами и, в частности, автоматически закрываются, если другой блочный элемент находится перед закрывающим тегом </p>.

13 Содержание



<br> (Break or Carriage-return. Возврат Каретки.)

HTML-элемент <br> устанавливает перевод строки в тексте (возврат каретки). Он полезен при написании поэмы или адреса, где важно деление на строки.
Элемент <br> имеет единственную цель – создать разрыв линии в блоке текста. Таким образом, он не имеет размеров или визуального стиля как такового.

14 Содержание



<h1> - <h6> (6 уровней заголовков)

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> отличаются:

Заголовок h1

Заголовок h2

Заголовок h3

Заголовок h4

Заголовок h5
Заголовок h6
15 Содержание



<img> (встраивает изображение в документ)

HTML-элемент <img> встраивает изображение в документ.
Пример использования:
<img src="https://wpvi.ru/fs/html/ref/HTML5_Logo_64.png" width="64" height="64" alt="HTML5 лого" title="HTML5 лого" />
HTML5 лого

Самая красивая балерина

Используются атрибуты:
  • src - обязателен и содержит путь к изображению, которое вы хотите встроить в документ.
  • alt - содержит текстовое описание изображения, которое не обязательно, но полезно - программы чтения с экрана читают это описание своим пользователям. Также оно отображается на странице, если изображение не может быть загружено по какой-либо причине.
  • title - cодержит текст, предоставляющий консультативную информацию об элементе. Эта информация может показываться пользователю в виде всплывающей подсказки.
  • width - ширина элемента.
  • height - высота элемента.

16 Содержание



<table> (таблица)

The <table> HTML-элемент представляет табличные данные, то есть информацию, представленную в двумерной таблице, состоящей из строк и столбцов ячеек, содержащих данные.
Типовая структура:
  1. <caption> - заголовок таблицы (необязательный)
  2. <colgroup> - группа колонок (необязательный, может быть от 0 до нескольких)
  3. <thead> - описания колонок таблицы (необязательный)
  4. <tbody> - тело таблицы, в который входят строки <tr>. Необязательный. Можно использовать строки <tr> непосредственно в <table>.
  5. <tfoot> - итоговая строка (строки) таблицы (необязательный)

17 Содержание



<hr> (рисует горизонтальную прямую линию)

HTML-элемент <hr> служит для тематического разделения абзацев. Рисует горизонтальную прямую линию.

18 Содержание



<aside> (блок с вспомогательным содержимым)

HTML-элемент <aside> представляет собой часть документа, чьё содержимое только косвенно связанно с основным содержимым документа. Чаще всего представлен в виде боковой панели, сносок или меток.

19 Содержание



<span> (универсальный строчный контейнер)

HTML-элемент <span> является основным строковым контейнером для фразового контента, который, ничего не представляет. Он может использоваться для группировки элементов в целях стилизации (использование атрибутов class или id) или потому, что они имеет общие значения атрибутов, например lang. Он должен быть использован только когда нет другого подходящего по семантике элемента. <span> очень похож на элемент <div>, но <div> является блочным элементом, в то время как <span> является строчным.

20 Содержание



<a> (гиперссылка для перехода)

HTML-элемент <a> определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. Также он может быть использован для создания якоря — это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами.

21 Содержание



<form> (форма для ввода информации)

Элемент HTML <form> представляет собой раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.
Простая форма, которая пошлет GET запрос в "никуда", т.к. не установлен обработчик запроса.


Если Вы введете, например, "Света", то, поскольку это GET запрос, в адресной строке браузера отобразится значение Света переменной name1:
?name1=Света#page_n22s
По факту эта информация некуда отправлена не будет, т.к. не установлен обработчик запроса.

22 Содержание



<mark> (выделение текста, похожие: <strong>, <b>, <em>, <i>)

HTML элемент <mark> представляет текст, выделенный в справочных целях из-за своей актуальности в определённом контексте. Например, он может быть использован на странице с результатом поиска, в которой выделяется каждый экземпляр искомого слова.
Элемент сильной значимости (<strong>) указывает на то, что его содержание имеет большое значение, серьёзность или срочность. Браузеры обычно отображают содержимое жирным шрифтом.
Элемент <b> является частью текста стилистически отличающейся от нормального текста, не носящий какого-либо специального значения или важности, и как правило выделен жирным шрифтом.
HTML <em> элемент отмечает акцентируемый текст. Элемент <em> может быть вложенным, причём каждый уровень вложенности указывает на большую степень акцента.
HTML элемент <i> представляет диапазон текста, который по какой-либо причине отличается от обычного текста, например, идиоматический текст, технические термины, таксономические обозначения и другие. Исторически они были представлены с использованием выделения курсивом (italicized), который является исходным источником <i> наименования этого элемента.

23 Содержание



<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>

Мы - пилоты!

Отрывки из презентации к игре Пилот

24 Содержание



<video> (встраивание видео контента в документ)

Для встраивания видео контента в документ используйте элемент HTML <video>. Видео элемент может содержать один или несколько источников видео. Чтобы указать источник видео, необходимо использовать атрибут src или элемент <video>. Браузер определит подходящий источник.

Пример использования:
<video controls src="https://wpvi.ru/fs/html/ref/pilot20220122.mp4"></video>

Игра Пилота. Показательная партия.

Игра Пилота. Показательная партия.

25 Содержание



<article>

HTML-элемент (<article>) представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для независимого распространения или повторного использования. Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого.

26 Содержание



<ul> и <ol>

<ul> (неупорядоченный список) и <ol> (упорядоченный список)

Примеры использования:
  1. упорядоченный список ol элемент 1
  2. упорядоченный список ol элемент 2
27 Содержание



<pre>

<pre> (Предварительно отформатированный текстовый элемент)

Элемент HTML <pre> представляет собой предварительно отформатированный текст, который должен быть представлен точно так, как написано в HTML-файле. Текст обычно отображается с использованием моноширного ("monospace") шрифта. Пробелы внутри этого элемента отображаются как записанные.

Примеры использования:
        Что ввожу, то и вижу! 
    
        1
        2
        3
        4
        5
        Строка номер 6
        ...
    
        .
        .
        ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
        ⣿⣿⣿⣿⣿⣿⣿⣿⠋⠄⠄⠄⠈⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
        ⣿⣿⣿⣿⣿⣿⡿⠃⠄⠄⠄⠄⠄⣸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
        ⣿⣿⣿⣿⣿⣿⡦⠄⠄⠄⠄⠄⢀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
        ⣿⣿⣿⡟⠛⠋⣀⠄⠄⠄⠄⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
        ⣿⣿⣿⣿⡿⠟⠁⠄⠄⠄⠄⠘⠻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
        ⣿⣿⣿⣿⣿⡿⠄⢀⣀⠄⠄⠄⠄⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
        ⣿⣿⣿⣿⡿⠁⢠⣾⣿⡆⠄⠄⣶⣿⣿⣿⠿⠛⠉⠄⠄⠹⣿⣿⣿⣿⣿⣿⣿⣿
        ⣿⣿⣿⡿⠄⢠⣿⣿⣿⡿⠄⠄⣿⠟⠋⠄⠄⠄⢀⣤⡀⠄⠙⣿⣿⣿⣿⣿⣿⣿
        ⣿⣿⣿⠃⣰⣿⣿⣿⣿⠃⠄⠄⠄⠄⠄⠄⢀⣴⣿⣿⣿⣦⣀⠈⠻⣿⣿⣿⣿⣿
        ⣿⠉⠈⢰⣿⣿⣿⣿⣿⠄⠄⠄⠄⠄⢀⣴⣿⣿⣿⣿⣿⣿⣿⣷⣦⠙⠿⣿⣿⣿
        ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⣄⣀⣀⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣤⣶⣬⣽⣿
        ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
        
        
        
    
28 Содержание