Вы находитесь на странице: 1из 10

В браузерах которые не поддерживают HTML5 для корректного

отображения контента тегам разметки <section>, <article>, <aside>, <footer>,


<header>, <nav>, <hgroup> следует применять стиль: “display: block;”

<article></article> (статья) - независимая часть документа, которая не


относится к основному контенту страницы. Например: прогноз погоды, курс валют,
статьи в журнале или газете. Самостоятельный фрагмент содержимого. Даже если все
остальное удалить со страницы, <article> будет продолжать нести смысл.
<article> может быть вложен в <section> и наоборот.
● Каждый элемент <article> должен в качестве дочернего элемента иметь
заголовок <h1> - <h6>
● Если <article> является вложенным то он представляет собой контент
связанный с внешним элементом.
● Информация об авторе может быть представлена внутри <article> с помощью
тега <address>, но только если <article> не является вложенным элементом.
● Дата публикации может быть отмечена с помощью атрибута datetime элемента
<time>.

<aside></aside> (в стороне) - часть документа лишь косвенно


относящийся к основному контенту страницы. Например: блок пояснения или
реклама.

<nav></nav> - используется для создания навигационного меню сайта.


Коллекции ссылок как например список профилей соц.сетей или списки блогов НЕ
должны заключаться в <nav>. В <nav> не обязательно использовать списки для
ссылок, можно их заключать просто в абзацы.

<section></section> (раздел) - используется для тематической


групировки контента. Должен содержать заголовок.
<meta name=”” content=””> - в метаданых можно указать автора
страницы и ее краткое содержание. Учитывается поисковиками(SEO).

● <meta name=”author” content=”Cris Nolan”>


● <meta name=”description” content=”Interstellar”>

Open Graph Data - используется в теге <meta> для более детального


отображения информации о веб-сайте на Facebook (твиттер имеет аналог Twitter
Cards)

● <meta property=”og:image” content=”link.to.image”>


● <meta property=”og:description” content=”Description”>
● <meta property=”og:title” content=”Title”>
● <meta property=”twitter:title” content=”Title”>

Favicon - картинка которая отображается возле названия сайта или если


сайт добавить в закладки а также если ссылку сохранить как html. (традиционно 16px х
16px формат .ico, но современные браузеры поддерживают и .png, .jpg и другие
размеры в зависимости от необходимости)

● Основной значок
● <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>
● iPad третьего поколения с дисплеем Retina высокого разрешения:
● <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://">
● iPhone с дисплеем Retina высокого разрешения:
● <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://">
● iPad первого и второго поколения:
● <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://">
● Устройства iPhone, iPod Touch и Android 2.1+ без Retina:
● <link rel="apple-touch-icon-precomposed" href="https://"> (57x57)

<html lang=”en-US”> - задает язык страницы, легче индексируется а так-


же используется при определения языка для распознавания для тех у кого проблемы
со зрением.

<em></em> - элемент используется для акцентирования, тонко изменяет


значение фразы. Распознается программами для чтения. Выглядит как курсив.

<strong></strong> - элемент используется для акцентирования важности


фразы. Распознается программами для чтения. Выглядит как полужирный.

<i></i> - иностранные слова, таксономическое обозначение, технические


термины, мысль.

<b></b> - ключевые слова, названия продуктов, ведущее предложение.

<u></u> - (подчеркивание) имя собственное, орфографические ошибки.

URL - (Uniform Resource Locator) текстовая строка которая указывает на


ресурс( например веб-страница или рисунок). В контексте HTTP (HyperText Transfer
Protocol) URL называются веб-адрес или ссылка. Также URL могут быть
использованы для передачи файла (FTP - File Transfer Protocol ) или электронной
почты(SMTP - Simple Mail Transfer Protocol) или на все остальное что есть в сети.

<a href=”mailto:maks.enikarp.90@mail.ru”></a> - ссылка с схемой


mailto: открывает форму пустого электронного письма, в примере на адрес

maks.enikarp.90@mail.ru. Если не задать адрес то откроется письмо без


адреса, бывает полезным для ссылок “Поделиться”.

<a href="mailto:nowhere@mozilla.org?
cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject
%20of%20the%20email&body=The%20body%20of%20the%20email"></a> - письмо с

адресом, копией адреса, темой и содержанием заданным по умолчанию. & -


разделитель

<dl> - список описания терминов


<dt></dt> - название/титул
<dd></dd> - описание/пояснение
<dd></dd> - можно еще описание
</dl>
<blockquote cite="источник откуда взята цитата"></blockquote> -
блок цитаты взятой из другого источника. Будет отображаться по умолчанию как абзац
с отступом чтобы подчеркнуть что это цитата.

<q cite="источник откуда взята цитата"></q> - встроенная цитата,


отображается по умолчанию в строке/абзаце как текст заключенный в кавычки.

(похожа на <span>)

<cite></cite> - цитата, обычно используется в качестве названия источника.


По умолчанию курсивный шрифт.

<abbr title=”расшифровка аббревиатуры”></abbr> - аббревиатура, и

атрибут title для расшифровки при наведении.

<address></address> - включает в себя контактные данные, может


включать более сложную структуру нежели просто абзац, например списки или ссылки
на страницу с данными.
<sup></sup> -(superior) надстрочный индекс(степень)

<sub></sub> - подстрочный индекс(H2O)

<pre></pre> - используется для сохранения разметки кода(не удаляются


лишние пробелы и табуляции и текст выглядит как в исходном коде)

<code></code> - используется для разметки общих частей кода.

<var></var> - используется для разметки имен переменных.

<kbd></kbd> - используется для разметки информации введеной с


клавиатуры или тачпада.

<samp></samp> - используется для разметки вывода компьютерной


программы.

<time datetime=”гггг-мм-ддTчч:мм:сс.мс”></time> -
используется для разметки даты и времени которую поймет компьютер.
гггг-мм-ддTчч:мм+чч:мм - дата + часовой пояс
гггг-W04 - год + номер недели в году

<hgroup></hgroup> - позволяет сгруппировать первичный заголовок на


странице со вторичным. Удален из HTML5 но реализован частично в большинстве
браузеров.

<figure></figure> - рисунок с не обязательной подписью. Его заголовок и


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

<figure>
<figcaption></figcaption>
</figure>
<figcaption></figcaption> - заголовок или легенда описывающее

содержимое родительского элемента <figure>.

<hr></hr> - горизонтальная строка, семантически представляет собой


разрыв между пунктами.
<bdi></bdi> - исправляет путаницу при использовании текста который
читается справа-налево. Работает аналогично если бы мы использовали атрибут
dir=”auto”.

<bdo></bdo> - изменяет направленность текста. Текст получается задом на


перед.

<data></data> (данные) - связывает текст с номером (ID)


<data value=”123”>Apple</data> =>> Apple (ID 123)

<dfn></dfn> - используется для обозначения термина, ближайший потомок

<p>, <dt>/<dd>, <section> - считается определением термина.

<mark></mark> - выделяет текст для справки или обозначения.

<ruby></ruby> - представляет собой небольшие аннотации сверху или


сбоку элемента, используется для показа произношения символов Восточной Азии.

<rp>(</rp> - используется для предоставления резервных скобок для браузеров

которые не поддерживают <ruby>. 漢 <rp>(</rp><rt>kan</rt><rp>)</rp>

<rt></rt> - определяет рубиновый текстовый компонент, показывает как звучит

символ Азии. 漢 <rp>(</rp><rt>kan</rt><rp>)</rp>

<rb> - используется для разграничения Азиатского текста для которого будет

объясняться звучание. <rb>漢<rb>字 (нестандартный тег)

<rtc></rtc> - используется вместе с <ruby>, внутри находится перевод


фразы или значение фразы на английском (или другом языке).

<rbc></rbc> - включает в себя контент фразу на Азиатском+звучание.

<s></s> - делает текст перечеркнутым линией, используется для


обозначения не актуального контента.

<small></small> - побочные комментарии, мелкий шрифт, авторское право.


Текст на один размер меньше основного контента.

<wbr> - представляет собой слово-перерыв. Указывает где можно прервать


длинное слово чтобы перенести на другую строку.

<area> - используется только с <map>, определяет область по координатам


внутри <map> чтобы к этой области привязать гиперссылку или иное действие.
Использует атрибуты rel, href, target, shape, hreflang, download, coords,
alt, referrerpolicy.

<audio></audio> - используется для встраивания аудиофайлов в

документ. <audio src=”” controls>текст</audio> или <audio><source


src=”num1” type=””><source src=”num2” type=””><source
src=”num3” type=””>текст</audio>. Подробный разбор необходим!

<img> - Подробный разбор необходим!

<map></map> - используется с <area> для определения карты


изображения.

<track> - используется вместе с видео или аудио файлами. Позволяет


указать синхронизированные текстовые дорожки например для субтитров. Дорожки

отформатированы в формате WebVTT(.vtt). Атр: default, kind, src, srclang,


label.

<video></video> - используется для встраивания видеофайлов в документ.


<video src=”” controls>текст</video> или <video><source
src=”num1” type=””><source src=”num2” type=””><source
src=”num3” type=””>текст</video>. Подробный разбор необходим!

<embed> - вкладывает внешнее содержимое в данной точке документа.

Устарел

<iframe></iframe> - представляет собой окошко в котором можно


отобразить другую страницу HTML. Страница в странице. Плавающий фрейм.

<object></object> - позволяет вставлять в браузер объекты которые


браузер не понимает. Использует плагины.

<param> - передает дополнительные параметры для <object>. Включает


в себя name=””, value=””.

<picture></picture> - содержит ноль или больше элементов <source> и


один элемент <img>. Браузер сам выбирает наиболее подходящий для отображения
на устройстве элемент, если такого не находит отображает <img>.
<source> - указывает один или несколько медиа ресурсов для <picture>,
<audio> или <video>. Обычно используется для одного и того же контента в
различных браузерах и устройствах подстраиваясь под них и обеспечивая
совместимость.

<canvas></canvas> - позволяет создать холст для рисования графики и


анимации. Max 32767 x 32767px.

<noscript></noscript> - показывает свое содержимое, если браузер не


поддерживает работу со скриптами или их поддержка отключена пользователем. В
остальных случаях браузер игнорирует этот тег и все, что располагается внутри него.

<del></del> - применяется к фрагменту текста который был удален. Атр

cite=”” - ссылается на пояснения к изменениям.

<ins></ins> - применяется к фрагменту текста который был добавлен.


Атр cite=”” - ссылается на пояснения к изменениям.

<caption></caption> - заголовок таблицы.

<colgroup></colgroup> - определяет группу столбцов в таблице.

<col> - задает свойства столбца для каждого столбца в <colgroup>. Тег

<col> полезен для применения стилей ко всем столбцам, вместо того чтобы
повторять стили для каждой ячейки для каждой строки.

<datalist></datalist> - задает список предварительно заданных

параметров для <input> элементов с помощью тега <option>.

<fieldset></fieldset> - Тег <fieldset> используется для группирования

связанных элементов в форме. Тег <fieldset> рисует прямоугольник вокруг


связанных элементов.

<form></form> - используется для создания HTML-формы для ввода


данных пользователем.

<legend></legend> - определяет заголовок для <fieldset> элемент.

<meter></meter> - определяет скалярное измерение в пределах


известного диапазона или дробное значение. Это также известно как датчик.
Используйте элемент Meter для измерения данных в пределах заданного диапазона
(датчика).

<optgroup></optgroup> - используется для группирования связанных

параметров в раскрывающемся списке с помощью <option>. Если у вас есть


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

<option></option> - определяет параметр в списке выбора. <option>


элементы заходят внутрь <select>, <optgroup> или <datalist> элементов.

<output></output> - представляет результат вычисления или результат


действия (например, выполненный сценарием).

<progress></progress> - представляет ход выполнения задачи.

<select></select> - используется для создания раскрывающегося списка с


помощью тега <option>.

<textarea></textarea> - создает поле для ввода многострочного текста.

(комментарий/обратная связь) Размер поля возможно задать с помощью CSS.

<details></details> - виджет раскрытия. Заголовок виджета задается с

помощью тега <summary>. Можно открывать и закрывать.

<summary></summary> - определяет видимый заголовок для

<details> Элемента. Заголовок может быть нажата для просмотра/скрыть


подробности.

<dialog></dialog> - определяет диалоговое окно или окно. Элемент

<dialog> позволяет легко создавать всплывающие Диалоговые окна и модальные


элементы на веб-странице.

<slot></slot> - это заполнитель внутри веб - компонента , который вы


можете заполнить с вашей собственной разметки, которая позволяет создавать

отдельные DOM деревья и представить их вместе. (HTML/CSS)

<template></template> - это механизм для хранения HTML, который не


должен отображаться сразу после загрузки страницы, но может быть создан

впоследствии во время выполнения с использованием JavaScript. (JS)


<base></base> - указывает базовый URL-адрес/целевой объект для всех

относительных URL-адресов в документе. Может быть максимум один <base> в

документе, и он должен находиться внутри элемента <head> Элемент.

<svg></svg> - определяет контейнер для графики SVG.

Использование элементов HTML5 в браузерах, отличных


от HTML5

1. article, aside, footer, header, nav, section { display:


block; }
2. более старые версии IE не позволяют стилизовать
неподдерживаемые элементы
<!--[if lt IE 9]>
<script>
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("time");
</script>
<![endif]-->

3. Добавить явный <noscript>элемент внутри <head>элемента,


чтобы предупредить всех пользователей, у которых отключен
JavaScript, о том, что ваша страница использует JavaScript.

<noscript>
<p>
<strong>Эта веб-страница требует, чтобы был включен

JavaScript.</strong>

</p>
<p>
JavaScript - это объектно-ориентированный язык компьютерного
программирования, обычно используемый для создания
интерактивных эффектов в веб-браузерах.
</p>
<p>
<a href="https://goo.gl/koeeaJ">Как включить JavaScript?</a>
</p>
</noscript>

Вам также может понравиться