Html - в чем разница между атрибутами src и data-src?

Неподдерживаемые элементы

Тег не поддерживается

Код	DEPRECATED_TAG
Формат	No error message defined as yet (no deprecated tags).
Действия	Удалите тег, который больше не поддерживается.

Это предупреждение отображается, если в AMP-документе обнаружен устаревший тег.
Оно не считается ошибкой.
В настоящее время устаревших тегов нет, эта функция предусмотрена на будущее.

Атрибут не поддерживается

Код	DEPRECATED_ATTR
Формат	«The attribute ‘%1’ in tag ‘%2’ is deprecated — use ‘%3’ instead.»
Действия	Рекомендуется удалить атрибут, который больше не поддерживается.

Это предупреждение отображается, если в AMP-документе обнаружен устаревший атрибут.
Оно не считается ошибкой.

Устаревшие атрибуты для каждого тега можно найти по запросу в спецификации валидатора AMP.

Значение и применение

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

<article> <!-- начало статьи -->
	<p>Сегодня мы с семьей пересматривали фильм "Один дома 2"...</p>
		<aside> <!-- отступление (выносим информацию, например, на поля) -->
			<p>В одной из сцен фильма снялся будущий президент <abbr title = "Соединенные штаты Америки">США</abbr> - <i>Дональд Трамп</i></p>
		</aside> 
</article> <!-- конец статьи -->

Пример размещения тега <aside> на странице.

Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.

Рис. 43 Человек, который использует только тег <div>.

HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега <div>. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, вы можете детально с ними познакомиться в статье учебника HTML 5 «Теги разметки страницы».

Семантические элементы HTML-страницы и их разновидности

Кроме логической структуры страниц сайта в спецификациях пятой версии HTML присутствует семантическая разметка.

Для начала, нужно пояснить, что такое семантика — это раздел филологии о смысле фраз и отдельных слов. Соответственно, семантические элементы – элементы, имеющие значение.

Семантический элемент жестко обозначает свою функцию браузеру и создателю сайта. К несемантическим элементам можно отнести теги <div> или <span> – из них не ясно, что находится внутри. А вот теги <form> (форма), <article>(статья) или <table> (таблица) уже относятся к семантическим элементам, так как явно дают понять, каким должно быть их содержание. На сегодняшний день все браузеры уже ввели поддержку семантических элементов HTML пятой версии.

Пример: пользователю, просматривающему страницу не видно разницы между тегами <i></i> и <em></em> потому, что в обоих случаях текст будет выделен курсивом, однако разница есть в том, как это видит браузер. В первом случае он просто выделит курсивом отдельный кусочек текста, а во втором – сделает это, так как разработчик считает, что этот участок нужно выделить логически.

Истории и поддержка браузеров

Content Security Policy — это рекомендация рабочей группы W3C по безопасности веб-приложений. Версия 1 (или уровень 1) была предложена в 2012 году, Level 2 — в 2014 году, а Level 3 разрабатывается с 2015 года в качестве проекта. Хотя это всего лишь рекомендации, создатели браузеров быстро внедрили CSP, начиная с Firefox 4. Подавляющее большинство современных браузеров поддерживают все или почти все директивы , и в этой статье описывается уровень 2 CSP как фактический текущий стандарт.

Реализации CSP использовали 3 разных имени заголовка политики безопасности контента, в зависимости от браузера и времени принятия:

: Стандартное имя заголовка, рекомендованное W3C и используемое всеми современными реализациями (GoogleChrome начиная с версии 25, Firefox начиная с версии 23, Safari и другие браузеры на основе WebKit начиная с версии 528 WebKit). В настоящее время это единственный заголовок для использования.
(устарел): Экспериментальный заголовок, используемый в прошлом Chrome и другими браузерами на основе WebKit.
(устарел): Экспериментальный заголовок, используемый в прошлом браузерами на базе Gecko 2.

Ошибки, связанные с шаблонами

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

Вы можете включать шаблоны в исходные файлы, если при выходе контент отображается без них (см. раздел об использовании препроцессоров CSS).

Атрибут содержит синтаксис шаблона

Код	TEMPLATE_IN_ATTR_NAME
Формат	«Mustache template syntax in attribute name ‘%1’ in tag ‘%2’.»
Действия	Удалите из атрибута синтаксис шаблона Mustache.

Эта ошибка возникает, если валидатор обнаруживает синтаксис шаблона Mustache в значении атрибута.

Атрибут содержит неэкранированный синтаксис шаблона

Код	UNESCAPED_TEMPLATE_IN_ATTR_VALUE
Формат	«The attribute ‘%1’ in tag ‘%2’ is set to ‘%3’, which contains unescaped Mustache template syntax.»
Действия	Экранируйте шаблон Mustache.

Эта ошибка возникает, если валидатор обнаруживает неэкранированный синтаксис шаблона Mustache в значении атрибута.

Атрибут содержит подшаблон

Код	TEMPLATE_PARTIAL_IN_ATTR_VALUE
Формат	«The attribute ‘%1’ in tag ‘%2’ is set to ‘%3’, which contains a Mustache template partial.»
Действия	Удалите подшаблон Mustache.

Эта ошибка возникает, если валидатор обнаруживает подшаблон Mustache в значении атрибута.

Синтаксис

Первым параметром в контексте HTTP должен быть или (это значение по умолчанию, указывающее, что контент должен быть отображён внутри веб-страницы или как веб-страница) или (указывает на скачиваемый контент; большинство браузеров отображают диалог «Сохранить как» с заранее заполненным именем файла из параметра , если он задан).

Content-Disposition: inline
Content-Disposition: attachment
Content-Disposition: attachment; filename="filename.jpg"

Первым параметром в контексте HTTP всегда является ; дополнительные параметры регистронезависимые и могут иметь аргументы, значения которых следуют после знака и берутся в кавычки. Несколько параметров разделяются через точку с запятой ().

Content-Disposition: form-data
Content-Disposition: form-data; name="fieldName"
Content-Disposition: form-data; name="fieldName"; filename="filename.jpg"

За параметром следует строка с именем HTML-поля на форме, к которому относится данная часть составного тела. При работе с несколькими файлами в том же самом поле (например, атрибуты элемента ), могут быть несколько частей с одинаковым именем.
Если имеет значение , указывающее, что данная часть не является HTML-полем, то она содержит кодировку по умолчанию для всех частей, в которых явно кодировка не указана.; За параметром указана строка с оригинальным именем передаваемого файла. Это имя опционально и не может слепо использоваться приложением: информация о пути должна быть очищена и должно быть сделано преобразование к файловой системе сервера. Этот параметр предоставляет в основном справочную информацию. Когда используется в комбинации с , это значение будет использовано как имя файла по умолчанию для диалога «Сохранить как».
filename*: Оба параметра «filename» и «filename*» отличаются только тем, что «filename*» использует кодирование, определённое в RFC 5987. Когда присутствуют оба параметра «filename» и «filename*» в одном поле заголовке, то преимущество имеет «filename*» над «filename», но только в случае когда оба значения корректны.

Директивы белого списка источников

Основной целью CSP является ограничение источников веб-контента, поэтому существует множество директив для указания разрешенных источников для различных типов ресурсов. Как только заголовок Content-Security-Policy указан, браузер будет отклонять любой контент из источников, которые явно не занесены в белый список, с использованием любой из приведенных ниже директив. Исходные значения разделены пробелами и могут включать как URL-адреса, так и специальные ключевые слова ‘none’, ‘self’, ‘unsafe-inline’ и ‘unsafe-eval’ (подробно обсуждается ниже)

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

является резервной директивой, используемой для определения политики содержимого по умолчанию для большинства исходных директив. Обычно используются default-src ‘self’, чтобы разрешить контент из текущего источника (но не его поддоменов), и default-src ‘none’, чтобы заблокировать все, что явно не занесено в белый список.

используется для внесения в белый список источников скриптов. Чтобы разрешить скрипты только из текущего источника, используйте script-src ‘self’.

используется для внесения в белый список источников стилей CSS. Чтобы разрешить таблицы стилей только из текущего источника, используйте style-src ‘self’.

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

позволяет контролировать источники плагинов, таких как Flash

Обратите внимание, что вы также можете указать разрешенные типы плагинов, используя директиву plugin-types (не поддерживается в Firefox начиная с v76).

позволяет ограничить источники изображения.

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

ограничивает источники для загрузки звуковых и видео ресурсов.

используется для ограничения разрешенных URL-адресов для worker JavaScript и содержимого встроенных фреймов, включая встроенные видеоролики. На Level 3 вместо этого можно использовать директивы frame-src и worker-src для управления встроенным контентом и рабочими процессами соответственно

ограничивает URL-адреса, которые могут встраивать текущий ресурс в , и подобные элементы.<br />

Пример

Пример аудио

Звуковой проигрыватель:

<audio src=»horse.ogg» controls>
Your browser does not support the audio element.
</audio>

Встроенная флэш-анимация:

Изображение помечено следующим образом:

Пример ввода

HTML-форма с изображением, представляющим кнопку Submit:

<form action=»/action_page.php»>

First name: <input type=»text» name=»fname»><br>
<input type=»image» src=»submit.gif» alt=»Submit»>
</form>

Наведите указатель на внешний файл JavaScript:

Пример источника

Аудио проигрыватель с двумя исходными файлами. Браузер должен выбрать, какой файл (если таковой имеется) он имеет поддержку:

<audio controls>
<source src=»horse.ogg» type=»audio/ogg»>
<source src=»horse.mp3″ type=»audio/mpeg»>
Your browser does not support the audio element.
</audio>

Пример трека

Видео с двумя треками субтитров:

CSS 3 псевдо-классы

Вы уже ознакомились со всеми основными селекторами и вам на первых парах этого должно хватить с горкой. Однако в CSS 3 появилось множество новых псевдо-классов, теперь мы можем брать не только первого ребёнка, но и любого другого по счёту, можем идти от обратного, брать не первого, а последнего ребёнка и так далее и тому подобное. Всё это очень удобно и практично, разве что у вас могут возникнуть проблемы со старыми версиями IE. Давайте соберём все силы в кулак и пробежимся по всем оставшимся селекторам, чтобы потом уже вы могли иметь их ввиду при вёрстке собственного макета.

:last-child – аналог :first-child, только берёт не первого, а последнего ребёнка.

:only-child – сработает, если элемент (тег) является единственным ребёнком.

:only-of-type — сработает, если элемент (тег) является единственным ребёнком своего типа.

:nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:

<style>
div p:nth-child(5) {background-color: green;} /* Обращаемся к 5 по счёту ребёнку, если он является тегом p. */
div p:nth-child(2n) {background-color: yellow;} /* Обращаемся к каждому второму ребёнку, если он является тегом p. */
div p:nth-child(2n+6) {background-color: red;} /* Обращаемся к каждому второму ребёнку начиная с шестого, если он является тегом p. */
</style>
<div>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<span>текст в спане</span>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
</div>

Результат:

:nth-last-child – работает также как и предыдущий, но отчёт начинается с конца.

:first-of-type – первый ребёнок своего типа в рамках прямого родителя.

:last-of-type – последний ребёнок своего типа в рамках прямого родителя.

:empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста).

:not() – делает исключение для заданных элементов. Пример:

<style>
p:not(.roll) {color: red;} /* для всех параграфов на странице делаем красный цвет текста, за исключением параграфов с классом roll */
</style>
<p class="roll">параграф с классом roll</p>
<p>параграф</p>
<p>параграф</p>
<p class="roll">параграф с классом roll</p>

Результат:

Родственный селектор

Идём дальше. Из статьи о наследовании в CSS вы уже знаете о двух самых простых видах селекторов, это селектор по тегу (элементу) и по потомку. Давайте освежим вашу память:

 div p {color: green;} /* Селектор по потомку */
p {color: red;} /* селектор по тегу */

Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:

<div>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <span>
      <p>Третий уровень</p>
    </span>
  </span>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <p>Второй уровень</p>
  </span>
  <p>Прямой наследник (первый уровень)</p>
</div>

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

div>p {color: blue;} /* только первый уровень вложенности */
div p {color: blue;} /* абсолютно все параграфы внутри div */

Зачем нам нужен CSP?

Веб-безопасность основана на same-origin policy (SOP), которая запрещает веб-сайту доступ к данным за пределами собственного происхождения. Теоретически этого должно быть достаточно для обеспечения безопасности, но современный интернет требует, чтобы сайты включали множество ресурсов из внешних источников, таких как скрипты и другие ресурсы из сетей доставки контента (CDN), скрипты Google Analytics, шрифты, стили, модули комментариев , кнопки социальных сетей и т.д..

В то же время злоумышленники используют атаки с использованием cross-site scripting (XSS), чтобы обманным путем заставить веб-сайты, которым доверяет пользователь, распространять вредоносный код. Без дополнительных мер безопасности браузер выполнит весь код из доверенного источника и так как он не может определить, какой код является допустимым, то любой внедренный вредоносный код также выполнится.

Content Security Policy (CSP) — стандартизированный набор директив, которые сообщают браузеру, каким источникам контента можно доверять, а какие следует блокировать. Используя тщательно определенные политики, вы можете ограничить содержимое браузера, чтобы устранить многие распространенные векторы атак и значительно снизить риск атаки XSS. По умолчанию CSP также применяет современные стили кодирования сценариев для дополнительной безопасности.

Использование директив CSP

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

Добавленный в файл httpd.conf или .htaccess, он установит политику по умолчанию, разрешающую только контент из текущего источника (подробности см. ниже).

При необходимости вы также можете указать желаемые директивы на уровне страницы, используя метатеги HTML. Вот пример, который устанавливает ту же политику, что и выше:

Каждая директива состоит из имени, за которым следует одно или несколько значений, и заканчивается точкой с запятой. Вы можете использовать подстановочный знак * для обобщения целых значений, поддоменов, схем и портов:

Этот заголовок позволяет использовать источники из любого субдомена example.com (но не самого example.com) по любой схеме (http, https и т.д.).

Официальная рекомендация W3C содержит полный список директив с более формальными определениями, но следующий обзор должен дать вам хорошее представление о наиболее часто используемых.

Пример решения задачи с составными условиями и data-атрибутами

В статье «Простые задачи по JavaScript» вы можете найти , в которой нужно написать код, проверяющий ответы пользователя на 4 вопроса и предлагающий ему определенные книги. Задачу можно решить с помощью ряда , использования массивов объектов и методов для работы с массивами, но также можно сделать список с data-атрибутами, имеющими значение 0 или 1. А список вопросов представить с помощью нескольких флажков. Вариант решения будет таким:

See the Pen Составные условия JavaScript by Elen (@ambassador) on CodePen.0

Надеюсь, что после прочтения этой статьи у вас появились поводы использовать data-атрибуты в HTML, CSS, JavaScript/jQuery для хранения нужной вам информации.

Активное обучение: использование классического внедрения

В этой статье мы собираемся перейти прямо в раздел активного обучения, чтобы сразу дать вам реальное представление о том, для чего используются технологии внедрения. Нам очень хорошо знаком Youtube, но многие не знают о некоторых доступных для него средствах совместного доступа. Давайте посмотрим, как Youtube позволяет нам встраивать видео на любую страницу, которая нам нравится, используя <iframe> (en-US).

Сначала перейдите на Youtube и найдите понравившееся вам видео.
Под видео вы найдёте кнопку «Поделиться» — нажмите, чтобы отобразить параметры совместного доступа.
Выберите кнопку «Вставить», и вам будет предоставлен код <iframe> — скопируйте его.
Вставьте его в поле ввода ниже и посмотрите на результат в Output.

Дополнительно вы также можете попробовать внедрить карту Google следующим образом:

Перейдите в Карты Google и найдите подходящую вам карту.
Нажмите «Меню» (три горизонтальные линии) в верхнем левом углу пользовательского интерфейса.
Выберите параметр Ссылка/код.
Выберите параметр Встраивание карт, который даст вам код <iframe> — скопируйте его.
Вставьте его в поле ввода ниже и посмотрите на результат в Output.

Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки «Сброс». Если вы действительно застряли, нажмите кнопку «Показать решение», чтобы увидеть ответ.

Nonces и Hashes чтобы разрешить встроенные скрипты

Если вам абсолютно необходимо сделать исключение для некоторого унаследованного встроенного кода, который нельзя перенести в отдельный файл, CSP предоставляет две функции, позволяющие разрешать определенные блоки кода, не прибегая к unsafe-inline. Для внесения в белый список определенного фрагмента кода вы можете использовать nonce (одноразовый) номер (уникальный одноразовый идентификатор) для тега <script> или криптографический хеш для самого кода. Затем вы можете указать nonce или hash в вашей директиве script-src, чтобы разрешить этот фрагмент встроенного кода.</p>

По определению, nonce номер — это «число, используемое один раз», поэтому оно должен генерироваться случайным образом для каждой загрузки страницы. Чтобы использовать nonce номер сценария, укажите его в теге <script> с помощью атрибута nonce, а также добавьте его в директиву script-src, добавив к значению nonce-. Например, у вас может быть устаревший код:

Чтобы разрешить этот конкретный тег сценария, используйте:

Генерация nonce номера для каждой загрузки страницы может быть проблематичным, поэтому другой подход заключается в использовании криптографического хэша самого разрешенного кода. Для этого начните с вычисления хэша SHA для всех символов внутри тега <script> (но без самого тега). Затем вы можете указать значение хеша в директиве script-src, добавив к нему префикс sha256-, sha384- или sha512-, в зависимости от используемого алгоритма. Вот тот же пример, но без атрибута nonce:

Тогда директива, использующая хэш SHA256 этого кода:

HTML Ссылки

HTML по АлфавитуHTML по КатегориямHTML Атрибуты ТеговHTML Атрибуты ГлобалHTML Атрибуты СобытийHTML ЦветаHTML ХолстыHTML Аудио / ВидеоHTML Наборы символовHTML DOCTYPEsHTML Кодирование URLHTML Языковые кодыHTML Коды странHTTP Ответы сервераHTTP МетодыPX в EM конвертерГорячие клавиши

HTML Теги

<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<menuitem>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

Использование атрибута sizes

Дополнительно к атрибуту srcset часто задается атрибут sizes, который настраивается верстальщиком в зависимости от требований к загруженным изображениям. Этот атрибут позволяет указать браузеру размер картинки, который он будет отображать для разных устройств. Ниже вы видите простой пример строчки кода с использованием этого атрибута:

sizes="(max-width: 720px) 100vw, 720px"

Разберем эту строчку, чтобы понимать, как она работает. Браузер считывает код и опускается к этому атрибуту. Если он определяет, что максимальная ширина экрана не превышает 720px, то выводит изображение в полном размере. Если же она больше – выводит в 720px.

Свои DOM-свойства

Ранее мы видели некоторые встроенные свойства DOM-узлов. Но, технически, никто нас ими не ограничивает.

Узел DOM – это объект, поэтому, как и любой объект в JavaScript, он может содержать пользовательские свойства и методы.

Например, создадим в новое свойство и запишем в него объект:

Можно добавить и новую функцию:

Нестандартные свойства и методы видны только в JavaScript и никак не влияют на отображение соответствующего тега.

Обратим внимание, пользовательские DOM-свойства:

Могут иметь любое значение.
Названия свойств чувствительны к регистру.
Работают за счёт того, что DOM-узлы являются объектами JavaScript.

Директивы CSP на уровне страницы

Помимо источников контента, внесенных в белый список, CSP также может налагать ограничения на действия, которые может выполнять текущая страница. Чтобы использовать эту функцию, используйте директиву sandbox, чтобы обрабатывать страницу так, как если бы она находилась внутри изолированного фрейма. Полное описание ограничений, накладываемых песочницей на страницу, см. в разделе в спецификации HTML5.

Чтобы повысить безопасность старых сайтов с большим количеством устаревших HTTP-страниц, вы можете использовать директиву upgrade-insecure-requests для перезаписи небезопасных URL-адресов. Это дает указание агентам пользователя изменять HTTP на HTTPS в схемах URL-адресов и может иметь неоценимое значение, если у вас все еще есть несколько URL-адресов HTTP.

Для обозначения начала и конца элемента применяются теги. Внутри тегов могут быть атрибуты со своими значениями, расширяющими возможности тегов, а также содержимое (рис. 1).

Рис. 1. Тег <a> с атрибутом href

Закрывающий тег похож на открывающий, но содержит слэш (/) внутри угловых скобок.

Пустые элементы не имеют закрывающего тега и содержимого (рис. 2).

Рис. 2. Пустой тег <img>

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

Динамические псевдо-классы

Динамические псевдо-классы – это :active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение:

p:active {background: red;} /* стиль, который применится к тегу по нажатию на него (клику мышью) */
input:focus {width: 400px;} /* стиль, который применится к элементу, на котором в данный момент фокус (работает, к примеру, для текстовых полей ввода: textarea, input). В данном случае по взятию в фокус, ширина input станет равна 400 пикселей, удобно использовать для красивого эффекта удлинения поля по клику. */
div:hover {background: green;} /* срабатывает по наведению курсора на элемент, в основном применяется для создания красивого эффекта при наведении на ссылки. */

Примените данные стили к нашему примеру выше, и вы сами всё увидите.

Зачем нужны метатеги

Помимо тега <title>, в <head> располагаются теги типа <meta>, которые предназначены для браузеров и поисковых систем. Корректное использование метатегов позволяет увеличить привлекательность сниппетов, управлять индексацией страниц. Также позволяет правильно отображать страницы сайта пользователям. Далее рассмотрим метатеги: description, robots, charset, viewport и keywords.

Meta description

Текст метатега description — это краткое описание контента страницы. Информация из этого тега напрямую не влияет на ранжирование страницы. При этом большинство поисковых систем использует содержимое метатега description при образовании сниппета. Цепляющий description, который к тому же отвечает на запрос пользователя, поможет привлечь человека на ваш сайт.

Сниппет — фрагмент текста, который представляет сайт в результатах поисковой выдачи. В декабре 2017 года Google расширил длину сниппетов с 160 до 320 символов с пробелами. Для кириллицы следует ориентироваться на длину в 280 символов. Это значение получили ребята из Serpstat, изучив 1 млн сниппетов.

Meta robots

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

Значение атрибута «name» указывает, что директива актуальна для всех роботов. Вы также можете закрыть доступ только одному из них. Для этого в атрибуте «name» следует указать нужного робота, например, основного робота Google — «googlebot» или Яндекса — «yandex».

Основные значения атрибута content:

index — страница доступна для индексации;
noindex — запрет добавления страницы в индекс;
follow — ссылки на странице доступны к индексации и открыты для передачи ссылочного веса;
nofollow — сигнализирует роботу о том, что переходить по ссылкам и передавать ссылочный вес запрещено;
all — инструкция, аналогичная «index, follow», противоположная настройка: «none».

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

Meta charset

Метатег с атрибутом «charset» указывает на тип кодировки документа. Он применяется для правильного отображения текста страницы браузером. Для операционной системы Windows и кириллицы используют значения атрибута «utf-8» или «windows-1251». Этот метатег следует размещать в самом начале блока <head> до элементов, которые содержат текст, включая тег <title>.

Пример кода:

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

Meta viewport

Метатег «viewport» сообщает браузеру, как следует обрабатывать размеры страницы, изменять ее масштаб под ширину экрана устройства, с которого выполнен переход. Meta viewport — один из пунктов внедрения адаптивного дизайна, когда для всех устройств используется один код с корректировкой по размеру экрана. Для корректного отображения контента сайта на любом устройстве, на всех страницах следует разместить следующий фрагмент кода:

Если этот элемент отсутствует, мобильные браузеры по умолчанию используют версию страниц для компьютера и пытаются оптимизировать контент собственными силами, подгоняя содержимое под размер экрана. Из-за этого контент страницы может выглядеть непропорционально, и посетителям сайта придется выполнять лишние действия, чтобы прочитать описание товара, посмотреть картинку, видео. Поисковые системы считают такой сайт не адаптированным для мобильных устройств и будут понижать его в результатах поиска.

Meta keywords

Правильно составленный метатег keywords должен содержать 5-7 ключевых слов, описывающих основное содержание страницы. Раньше он сильно влиял на ранжирование по заданным в нем ключевым словам, но утратил значимость из-за действий недобросовестных вебмастеров и постоянного развития поисковых систем. Тем не менее, для метатега keywords еще не все потеряно. Так, в отчете «Яндекс и Google: факторы ранжирования в 2017 году» от «Ашманов и партнеры» представлен вывод о влиянии метатега на продвижение в Google.

HTML Атрибуты

acceptaccept-charsetaccesskeyactionaltasyncautocompleteautofocusautoplaycharsetcheckedciteclasscolscolspancontentcontenteditablecontextmenucontrolscoordsdatadata-dirdraggabledropzoneformformactionheadersheighthiddenhighhrefhreflanghttp-equividitemiditempropitemrefitemscopeitemtypeismapkeytypekindlabellanglistlooplowmanifestmaxmaxlengthmediamethodminminlengthmultiplemutednamenovalidateonabortonafterprintonbeforeprintonbeforeunloadonbluroncanplayoncanplaythroughonchangeonclickoncopyoncutondblclickondragondragendondragenterondragleaveondragoverondragstartondropondurationchangeonemptiedonerroronfocusonhashchangeoninputoninvalidonkeydownonkeypressonkeyuponloadonloadeddataonloadedmetadataonloadstartonmousedownonmousemoveonmouseoutonmouseoveronmouseuponmousewheelonofflineononlineonpagehideonpageshowonpasteonpauseonplayonplayingonprogressonratechangeonresetonresizeonscrollonsearchonseekedonseekingonselectonshowonstalledonsubmitonsuspendontimeupdateontoggleonunloadonvolumechangeonwaitingonwheelopenoptimumpatternplaceholderposterpreloadreadonlyrelrequiredreversedrowsrowspansandboxscopescopedselectedshapesizesizesspanspellchecksrcsrcdocscrlangsrcsetstartstepstyletabindextargettitletranslatetypeusemapvaluewidth

Заключение

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

Если подвести итог, можно определить два основных плюса:

Теги избавляют структуру от лишнего мусора в виде дополнительных атрибутов. Код становится проще и понятнее.
Теги помогают быстрее обрабатывать код поисковым роботам, вследствие чего у вашего сайта больше шансов попасть на первые страницы Google, Yandex и т.д.

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

Узнать больше о новых элементах HTML5 можно тут:w3schools – предоставляет простое и ясное описание многих html-элементов и того, как/где их следует использовать.MDN – также предоставляет отличное описание всех элементов HTML + углубляется в каждый из них.

Заключение

Тема встраивания другого контента в веб-документы поначалу может показаться очень сложной для понимания, поэтому в этой статье мы попытались представить её простым, знакомым способом, который сразу же станет актуальным, но всё же намекает на некоторые из более сложных функций вовлечённых технологий. Начнём с того, что вы вряд ли будете использовать большое количество встраивании стороннего контента, помимо встроенных карт и видео на своих страницах.

Существует много других технологий, которые включают в себя внедрение внешнего контента, помимо тех, которые мы обсуждали здесь. Мы видели некоторые из ранних статей, например , и , но есть и другие. Например, для 2D-и 3D-графики, сгенерированной JavaScript, и для встраивания векторной графики. Мы рассмотрим SVG в следующей статье модуля.

Назад
Обзор: Multimedia and embedding
Далее