Структура html: Структура кода | htmlbook.ru

Содержание

Структура html документа - разбор страницы с примерами

Вы узнаете какая должна присутствовать минимальная структура html документа. Подробно и с примерами разберем каждый необходимый ее элемент. Также поговорим о том, как правильно создавать файлы и страницы сайта.

Структура HTML документа

Давайте разберем структуру html документа чтобы понимать, как все работает. Вы узнаете, какой каркас должен присутствовать на странице чтобы она считалась валидной (правильной).

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

<!DOCTYPE html>
<html>
    <head>
        <title>Профессиональное создание сайта в интернете с примерами</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h2>Как создать сайт в интернете</h2>
        <p>Здесь размещается содержание документа, которое видно всем пользователям.</p>
    </body>
</html>

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

Визуальный пример html страницы

Тег DOCTYPE

Тег DOCTYPE всегда идет в самом начале веб-страницы. Он необходим для указания типа текущего документа. А также помимо этого браузер понимает какая версия html используется.

В последней версии 5 он имеет такой вид:

<!DOCTYPE html>

Рекомендую его таким и использовать. С помощью данного элемента браузер дальше интерпретирует то, что мы ему напишем. То есть все теги в стандарте html 5.

Тег HTML

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

Как правило, открывающий тег html идет вторым после определения документа при помощи doctype. Закрывающий всегда идет на странице последним.

Этот тег сообщает браузеру, где наш html документ начинается и где заканчивается. Поэтому все остальные элементы (кроме doctype) должны быть вложены внутри этого контейнера.

Тег head

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

Содержимое head не отображается напрямую на веб-странице, кроме тега title. Он отвечает за заголовок страницы.

В общем, в этом элементе хранится вся техническая информация о странице. Например, тип кодировки html страницы. Он будет говорить браузеру, как ему лучше декодировать документ. Также сюда мы можем подключать css стили и различные скрипты.

Тег title

У head есть один обязательный компонент. Это тег title. Он отвечает за то, как будет выглядеть html заголовок страницы. То, что вы напишите сюда, будет отображаться во вкладке браузера.

Отнеситесь к этому серьезно!

В данном элементе рекомендую использовать название не более 60 символов с пробелами. Это нужно чтобы оно не обрезалось в поисковой выдаче. И обязательно вписываем сюда осмысленные слова. То есть конкретно пишем, о чем будет страница.

<head> <title>Профессиональное создание сайта в интернете с примерами</title> </head>

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

Тег meta

Еще один элемент, это тег meta. Он не парный и особой ценности не представляет. Однако наиболее важными элементами являются его атрибуты.

Таким образом, с помощью параметров и атрибутов, тег может хранить важную информацию о вашей странице.

Давайте к элементу я пропишу параметр charset и в нем укажу предпочтительную кодировку документа.

<head>
    <title>Профессиональное создание сайта в интернете с примерами</title>
    <meta charset="utf-8">
</head>

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

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

Тег body

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

Обратите внимание, что body всегда идет ниже тега head. То есть сначала идет техническая информация о странице и только потом основной контент для пользователя. Но никак не наоборот!

Внутри body обязательно должен присутствовать тег h2. Это заголовок материала. То есть, как будет называться ваша статья. Рекомендую название делать не более 55 символов с пробелами.

Далее чуть ниже идут элементы текста. Это обязательно будет абзац (тег p), картинки, какие-то выделения и так далее.

Синтаксис html

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

<!DOCTYPE html>
<html><head>
<title>Профессиональное создание сайта в интернете с примерами</title><meta charset="utf-8">
</head><body><p>Здесь размещается содержание документа, которое видно всем пользователям.</p></body>
</html>

Браузеру будет все равно.

Он по-любому отобразит страницу правильно. Но вам самим будет очень неудобно редактировать html код страницы. Поэтому рекомендую не лепить и делать аккуратно.

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

<!DOCTYPE html>
<html>
    <head>
        <title>Название документа</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h2>Название материала</h2>
        <p>Основной текст</p>
    </body>
</html>

То есть тег head должен идти отступом в одну табуляцию относительно тега html. Body идет на уровне с head поскольку он тоже вложен в контейнер html.

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Название документа</title>
    <meta charset="utf-8">
</head>
<body>
    <p>Основной текст</p>
</body>
</html>

При большой вложенности этот метод поможет сэкономить место и не потеряться в структуре html.

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

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

Важно четко соблюдать порядок!

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

Правильный пример:

<body> <p>Здесь размещается содержание документа, которое видно всем пользователям.</p> </body>

Неправильный пример:

<body>
    <p>Здесь размещается содержание документа, которое видно всем пользователям.
</body>
    </p>

Кроме того, в один тег могут быть вложены несколько элементов. Но принцип тут тот же самый. Сначала мы открываем его. Затем вкладываем туда несколько тегов и потом закрываем.

Для наибольшей удобности дополнительно можно использовать html комментарии в коде. Например, прописать за что отвечает данный кусок кода. Это очень полезно при разработке.

Сам комментарий может быть, как однострочным, так и многострочным.

<!DOCTYPE html><!--Указываем тип документа-->
<html>
<head>
    <title>Название документа</title>
    <meta charset="utf-8"><!--Кодировка-->
</head>
<body>
    <!--Главное содержание страницы для пользователей-->
    <p>Основной текст</p>
</body>
</html>

Прописывается он между конструкциями <!— —>.

Как создать файл html

Возможно, некоторые из вас не знают, как создать файл html. Для этой задачи есть много специальных программ:

  • Brackets
  • Блокнот
  • Notepad++
  • Sublime Text
  • Atom и другие

Если у вас Windows, то Блокнот будет уже доступен по умолчанию. Но им не удобно пользоваться. Рекомендую для начала использовать бесплатный редактор html страниц Notepad++. В нем есть много возможностей для удобной работы с кодом.

Когда запустите редактор, то перед вами уже будет новый пустой файл. Пропишите в нем тот скелет html страницы (каркас), который мы выше разбирали. Он должен всегда присутствовать.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Профессиональное создание сайта в интернете с примерами</title> 
        <meta charset="utf-8"> 
    </head> 
    
    <body> 
        <h2>Как создать сайт в интернете</h2> 
        <p>Здесь размещается содержание документа, которое видно всем пользователям.</p> 
   </body> 
</html>

Текст можете изменить под себя. В общем, это будет самая простая html страница.

HTML кодировка

При создании страниц всегда прописывайте кодировку в meta теге. Это служебный тег, который вставляют в head.

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

Сейчас у нас он играет роль указателя кодировки. Здесь есть специальная запись. Она говорит браузеру о том, что данный документ создан в кодировке utf-8.

<meta charset="utf-8">

Для чего вообще нужна кодировка?

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

Раньше при создании html страницы нужно было указывать кодировку, что мы пишем на русском языке. Немцам нужно было указывать, что они пишут на немецком и так далее.

Когда мы заходим на страницу, браузер уже понимает, на каком языке написан сайт. Также он понимает какой язык для текста используется. Соответственно, он пытается отобразить этот текстовый контент в зависимости от заданной кодировки.

К сожалению, это не всегда получалось.

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

Неправильно задана html кодировка

Как решение этой проблемы была создана универсальная кодировка utf-8.

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

При этом упрощается еще работа и с базой данных. Поэтому здесь имейте в виду, что кодировку мы всегда будем указывать в utf-8. Но тут нужно обратить свое внимание еще на одну вещь.

Сохраняем html utf-8

Чтобы все работало и браузер отображал страницу, желательно сохранить сам html документ в utf-8. В этом программа Notepad ++ нам очень хорошо помогает.

Здесь есть пункт «Кодировки». Если у вас сейчас кодировка не стоит (как у меня на нижнем рисунке), то щелкните по пункту «Преобразовать в UTF-8 без BOM».

В этом случае ваш html файл будет преобразован в кодировку utf-8. Сохраните изменения.

В правом нижнем углу вы найдете надпись «Dos\Windows ANSI as UTF-8». Это значит, что документ создан в режиме utf-8 и отображение будет нормальным.

И сразу такой совет!

Зайдите в «Опции» —> «Настройки». Здесь есть вкладка «Новый документ». Сразу поставьте галочку на «UTF-8 без метки BOM». Так у вас все новые документы будут сразу создаваться в этой кодировке.

Как сохранить html страницу

Сейчас расскажу, как сохранить html страницу правильно. После того, как задали кодировку и структуру html страницы, вам нужно нажать на «сохранение». Заходим во вкладку «Файл» —> «Сохранить как…».

Имя файла может быть любое. Но по умолчанию и особенно если это главная страница сайта, то сохраняйте ее как index.html.

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

Если же мы указываем какую-то конкретную страницу, то в итоге она и будет выводиться. Но если адрес не указан, то будет возвращена индексная страница. Поэтому по умолчанию мы называем страницу index.html.

И как вы уже должны заметить, расширение файла должно быть html. То есть в типе файла выбираем «Hyper Text Markup Language» и нажимаем «Сохранить».

Как открыть html файл

Как открыть html файл чтобы посмотреть наглядное отображение страницы. Для этого используем любой браузер: Google Chrome, Opera, Edge, Mozilla Firefox, Safari и другие.

Не зря мы сохраняем файлы с расширением html. Ведь только этот тип документа воспроизводят браузеры. А сам язык HTML — это стандарт разметки страницы для последующего воспроизведения браузерами.

В общем, кликаем по файлу правой кнопкой мыши.

В меню наводим на «Открыть с помощью» и выбираем нужный вариант браузера. Если они не отобразятся, то кликаем на «Выбрать другое приложение». Там уже среди списка выбираем нужную программу для чтения html страниц.

Если же вам нужно отредактировать код, то выбираем подходящие редактор. Рекомендую использовать Notepad++.

Как посмотреть html код страницы

Еще хочу вам рассказать, как можно посмотреть html код страницы прямо в браузере. Это очень полезно на практике. Например, узнать, какую структуру html кода использует тот или иной сайт.

Посмотреть код очень просто. Достаточно нажать сочетание клавиш Ctrl + U. В новой вкладке вам откроется исходный код страницы сайта.

Исходный код сайта

Еще можно в адресной строке прямо перед адресом страницы прописать:

view-source:

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

Еще в браузерах есть встроенный инструмент веб-разработчика. Доступ к нему в меню у каждой программы будет разным. Однако клавишей F12 этот инструмент откроется в любом браузере.

Инструмент разработчика в браузере

Во вкладке «Elements» слева будет html код, а справа стили CSS. Удобен такой инструмент тем, что в нем можно править код и сразу посмотреть результат. Также при редактировании могут высвечиваться подсказки. Это тоже полезно.

На этом все!

Теперь вы знаете, как создать html страницу. Для этого мы рассмотрели саму структуру документа. Также я дал вам некоторые инструменты для удобной работы с кодом. Еще были важные правила по кодировке и работе с файлами. Обязательно их соблюдайте!

Мне нравится1Не нравится

Конспект «Структура HTML-документа» — Структура HTML-документа — HTML Academy

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

<!DOCTYPE html>

Простейшая HTML-страница состоит как минимум из трёх тегов: <html>, <head> и <body>. Тег <head> обычно содержит заголовок, ключевые слова, описание страницы и другие служебные данные. Также внутри него подключаются внешние ресурсы, например, стили. Содержимое этого тега не отображается на странице напрямую. А в теге <body> хранится содержание страницы, которое отображается в окне браузера.

Для подключения стилей к странице существует тег <link>. Для этого у него есть атрибут href в котором задаётся адрес стилевого файла, а значение stylesheet атрибута rel говорит браузеру, что мы подключаем именно стили, а не что-то другое.

<head>
  <link href="адрес_файла_стилей.css" rel="stylesheet">
</head>

Ещё один элемент, который располагается в <head> — это тег <title>. В нём задаётся заголовок страницы, который отображается во вкладках браузера. По заголовку должно быть понятно, о чём эта страница, даже когда она не открыта в браузере, а отображается в результатах поиска или в браузерных закладках.

<head>
  <title>Тренажёры — HTML Academy</title>
</head>

Ещё один важный тег, располагающийся внутри <head> это тег <meta>. Он одиночный, то есть не требует парный закрывающий тег в конце. С помощью <meta> можно сообщать браузеру, поисковому роботу или другому устройству различную служебную информацию (или метаинформацию) о вашем сайте: кодировку текста, описание контента и так далее. Для этого используются теги <meta> с разными атрибутами и их значениями.

Кодировка текста HTML-страницы указывается с помощью атрибута charset:

<meta charset="название кодировки">

Самая распространённая современная кодировка — utf-8.

Перечень ключевых слов задаётся тегом <meta>, у которого атрибут name имеет значение keywords. Ключевые слова (самые важные слова из содержания страницы) перечисляются в атрибуте content через запятую:

<meta name="keywords" content="важные, ключевые, слова">

Краткое описание (или аннотация) страницы задаётся похожим образом, только значение атрибута name меняется на description:

<meta name="description" content="краткое описание">

Внутри <body> находятся те теги, которые отображаются на странице. Например, тег <main> выделяет основное содержание страницы, которое не повторяется на других страницах. И обычно на странице используется один <main>.

Тег <header> содержит вводную часть страницы, которую чаще называют «шапкой», а тег <footer> описывает заключительную часть страницы, или «подвал». Существует тег <section>, который обозначает крупный смысловой (или «логический») раздел.

Тег <article>, обозначает цельный, законченный и самостоятельный фрагмент информации.

Для создания логического раздела с основной навигацией предназначен тег <nav> (сокращение от английского «navigation»). Обычно в <nav> включают ссылки на другие страницы или навигацию по текущей странице.

Тег <aside> включает в себя дополнительное содержание, не связанное напрямую с основным. Такие блоки ещё часто называют «сайдбарами» или боковыми панелями.

Для создания основной структуры текста используют заголовки. В HTML существует целое семейство заголовочных тегов: от <h2> до <h6>. Тег <h2> обозначает самый важный заголовок (заголовок верхнего уровня), а тег <h6> обозначает подзаголовок самого нижнего уровня.

<h2>Спецификация HTML</h2>
<h3>Раздел 1 Введение</h3>
<h4>Раздел 1.1 Происхождение языка</h4>

Основную структуру текста создают с помощью заголовков, а более мелкую выстраивают с помощью параграфов (или абзацев). Для разметки параграфов предназначен тег <p>. По умолчанию абзацы начинаются с новой строки и отделяются от остального контента отступами сверху и снизу.


Продолжить

Урок 2. Структура html документа (страницы)

Учим структуру HTML


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

Дабы не огорчать себя растратой бесценного времени, давайте посмотрим пример ниже и запомним расположение открывающих и закрывающих тегов html, head, body и того, что в них располагается

<html>
  <head>
    <title> <!--В head, например, есть тег title, в котором нужно записать заглавие страницы -->
      Заголовок на Ваш вкус
    </title>
  </head>
<body>

Любой текст. 
В тело документа вообще можно вставить не только текст, но и картинки, ссылки и прочее. 
Как это делать - рассмотрим позже. Поэтому пока здесь только текст  

</body>
</html>

Важно понять и соблюдать базовую структуру html-документа. Нужно будет выучить последовательно базовых тегов, таких как html, head, body. Если её нарушить, то и Ваш html-документ будет отображаться некорректно.

html - с него начинается и заканчивается html-документ. Исключение может составить так называемая - спецификация. О ней я расскажу ниже.
head - в голове документа содержатся данные о сайте или странице: заголовок, ключевые слова, описание, автор и тд
body - мы же пока конкретнее остановимся на ТЕЛЕ документа. Именно между открывающим и закрывающим тегами body будем вставлять текст, ссылки, изображение и многое другое.

Ещё раз смотрим код выше, анализируем и читаем дальше.

Спецификация документа HTML


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

И всё же...
html-документ в идеале должен состоять не только из базовых тегов (html, head,body). Почти все web-страницы начинаются со сторки вида:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Это так называемая спецификация html документа.

А уже позже прописываются остальные теги: html, head,body и их содержимое.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>
      Заголовок на Ваш вкус
    </title>
  </head>
<body>

Любой текст. 

</body>
</html>

Спецификация помогает браузеру определить, как правильно интерпретировать Ваш html-документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии XHTML 1.0.

Проще говоря, если Вы не укажете спецификацию или укажете её старую версию, то некоторые элементы у Вас будут отображены некорректно или не отображены вовсе.

Тег DOCTYPE cогласно спецификациям HTML и XHTML (что означает Объявление типа документа) сообщает валидатору, какую именно версию (X)HTML вы используете на своей странице. Данный тег всегда должен располагаться на Первой строчке каждой вашей старницы! Тег DOCTYPE - ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором.

Из истории спецификации...
Решение задачи создания спецификаций HTML взяла на себя организация, называемая World Wide Web Consortium (сокращенно -- W3C), владельцем которой является создатель HTML - Бернерс-Ли. В задачи W3C входит составление спецификации, отражающей современный уровень развития возможностей языка с учетом разнообразных предложений компаний-разработчиков браузеров. Официальные сведения о спецификации HTML всегда можно получить с Web-сайта Консорциума W3C по адресу http://www.w3.org/TR/.

Базовые теги HTML


После спецификации документ продолжает открывающий тег html. Закрывающий тег также должен Обязательно прописываться в Конце html-документа.

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

Тег title обозначает Название страницы. Это единственный тег, содержащийся в head, который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете

Тег body обозначает Тело страницы. То, что вписать после открывающего и перед закрывающыим тегами body и будет Содержимым Вашей страницы

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <!-- Спецификация -->

<html>
  <head>
    <title> 
      Название страницы 
    </title>
  </head>
<body>

<h2>Любой заголовок</h2>
Просто текст
Другой текст
<p>Текст в параграфе. Он будет писаться с новой строки, выделяться отступами и заканчиваться с закрывающим тегом</p>

</body>
</html>

Пример кода html-документа


Итоговая страница с комментариями по каждому тегу. Обязательно к внимательному просмотру.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <!-- Спецификация -->
<html> <!-- С открывающего html начинаем наш документ -->

   <head>  <!-- Открываем головную часть документа -->
     <title>Здесь будет заголовок Вашего документа</title>
   </head>  <!-- Закрываем головную часть документа. Пока не закрыли, к тегу body НЕ переходим -->

 <body> <!-- Открываем тело документа. ЗДЕСЬ будет всё содержимое -->

     Тело документа. Можно писать что угодно
     <h2>Вставлять заголовки</h2>
     И текст <b>жирный</b> и <i>курсив</i>

 </body>  <!--Закрываем body. После этого Содержимое не вставляем-->

</html> <!--Закрываем html. После него уже ВООБЩЕ НИЧЕГО НЕ вставляем-->

Учебник HTML 5. Статья "Теги разметки страницы"

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

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


Обращаю Ваше внимание на то, что элементы <div> и <span> сами по себе не оказывают никакого влияния на другие элементы страницы.


Тег <div> определяет любой отдельный блок содержимого и предназначен для деления веб-страницы на фрагменты. Вы можете объединить любой набор логически связанных элементов в единственном блоке <div>.

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

В отличии от блочного элемента <div> тег <span> является строчным и применяется к внутренним (inline) элементам страницы, то есть к словам, фразам, которые находятся в пределах абзаца или небольшого фрагмента текста, оглавления и тому подобное.

Тег <span> вы можете использовать для таких задач как:

  • Выделение участка текста определённым цветом, фоном или даже фоновым изображением.
  • Изменение отдельным словам или фразам размера шрифта, семейства шрифта или типа шрифта.
  • Создание различных форматирующих стилей для выбранного участка текста.
  • Использование скриптовых языков программирования к выбранным текстовым участкам, например подсветка синтаксиса кода и так далее.

Пример использования:


<!DOCTYPE html>
<html>
	<head>
		<title>Теги <div> и <span></title>
	</head>
	<body>
		<div style = "color:green">
			<p>Абзацы мы объединили тегом &amplt;div&ampgt;, а это <span style = "color:red">слово</span> мы заключили тегом &amplt;span&ampgt;.</p>
			<p>С помощью встроенной таблицы стилей мы выделили это слово красным цветом, а блок текста получил зеленый цвет.</p>
		</div>
		<div style = "background-color:khaki">
			<p>Обратите внимание, что тег &amplt;div&ampgt; является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину.</p>
			<p>Этот блок тоже содержит два абзаца. С помощью встроенной таблицы стилей мы указали для всего блока цвет заднего фона - khaki, а для этога <span style = "background-color:orangered">слова</span> orangeRed (мы заключили его в тег &amplt;span&ampgt;).</p>
		</div>
	</body>
</html>

В этом примере мы:

  • Блочными элементами <div> создали два блока, содержащие по два абзаца текста внутри (элементы <p>).
  • Для первого блока с помощью встроенной таблицы стилей мы указали, что все элементы получат цвет текста зеленый, а одно слово, которое мы поместили внутри тега <span> красный.
  • Для второго блока с помощью встроенной таблицы стилей мы указали, что весь блок получит цвет заднего фона хаки, а одно слово, которое мы поместили внутри тега <span> оранжево-красный.

Результат нашего примера:

Рис. 42 Использование тегов разметки в HTML.

Теги разметки страницы в HTML 5

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

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

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

Тег <header>

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


<header>
		<img src = "logo.png" alt = "logo"> <!-- изображение с логотипом -->
		<h2>Заголовок первого уровня</h2> <!-- заголовок первого уровня -->
</header>
Рис. 43а Пример размещения тега <header> на странице.

Обращаю Ваше внимание, что запрещается помещать элемент <header> внутрь таких элементов, как <footer> (нижний колонтитул), <address> (определяет контактную информацию) или внутрь другого элемента <header>.


Тег <nav>

Тег <nav> (навигация) используется для обозначения содержимого в виде основных навигационных ссылок. Документ может иметь несколько элементов <nav>, например, один для навигации по сайту, а второй для навигации по странице.


<nav> <!-- начало навигации -->
	<ul> <!-- маркированный список -->
		<li><a href = "#">Домой</a></li> <!-- ссылка в элементе списка -->
		<li><a href = "#">HTML</a></li> <!-- ссылка в элементе списка -->
		<li><a href = "#">CSS</a></li> <!-- ссылка в элементе списка -->
	</ul> <!--конец списка-->
</nav> <!-- конец навигации -->
Рис. 43б Пример размещения тега <nav> на странице.

Обратите внимание, что не все ссылки в документе следует помещать внутрь тега <nav>, элемент предназначен только для крупных навигационных блоков. Не используйте элемент <nav> внутри тега <footer> (нижний колонтитул). Программы чтения с экрана для пользователей с ограниченными возможностями, могут использовать этот элемент, чтобы определить, нужно ли опустить начальную визуализацию этого содержимого.


Тег <aside>

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


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

Тег <article>

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

Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от <h3> до <h6> (если до этого не использовался <h2>, то допускается его разовое размещение). Внутри тега <article> могут содержаться другие одноименные элементы с близким по смыслу содержимым.


<article> <!-- начало основной статьи -->
	<h2>Статьи о птицах</h2><!-- заголовок первого уровня (если был использован в документе, то h3, а во вложенных h4) -->
	<p>Вводная информация о птицах...</p>
	<article> <!-- начало первой вложенной статьи -->
		<h3>Статья о воробье</h3> 
		<p>Информация про воробьев...</p>
	</article> <!-- конец первой вложенной статьи -->
	<article> <!-- начало второй вложенной статьи -->
		<h3>Статья о синице</h3>
		<p>Информация про синиц...</p>
	</article><!-- конец второй вложенной статьи -->
</article> <!-- конец основной статьи -->
Рис. 43г Пример размещения тега <article> на странице.

Тег <section>

Тег <section> (раздел) служит для группировки взаимосвязанного содержимого.

Не используйте элемент <section> в качестве универсального контейнера, для этих целей подходит элемент <div>. Раздел должен логически отображать структуру документа, например, вы можете разбить содержимое главной страницы на три раздела: вводную информацию о сайте, контактную информацию и самые последние новости.


Данный тег часто используется при верстке целевых страниц (англ. landing page, "посадочная страница") для логического разделения страницы на разделы.


Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от <h3> до <h6> (если до этого не использовался <h2>, то допускается его разовое размещение).


<section> <!-- начало первой вложенной статьи -->
	<h3>Первый раздел</h3> 
	<p>Информация внутри раздела</p>
</section> <!-- конец первой вложенной статьи -->
<section> <!-- начало второй вложенной статьи -->
	<h3>Второй раздел</h3>
	<p>Информация внутри раздела</p>
</section><!-- конец второй вложенной статьи -->
Рис. 43д Пример размещения тега <section> на странице.

Совместное использование тегов <section> и <article>

Обратите внимание, что допускается в качестве дочернего (вложенного) элемента тега <article> использовать тег <section> (раздел), как бы разбивая по смыслу содержимое. При этом необходимо, чтобы элемент <article> и вложенные элементы <section> имели в качестве дочернего (вложенного) элемента заголовок от <h3> до <h6> (если до этого не использовался <h2>, то допускается его разовое размещение внутри <article>).

Рис. 43е Пример размещения тега <section> внутри <article>.

По аналогии с вышерассмотренным примером допускается помещать элементы <article> внутрь элементов <section>, формируя при этом разделы с тематической информацией. При этом на элементы действуют те же правила по размещению заголовков:

Рис. 43ж Пример размещения тега <article> внутри <section>.

Допускается помещать элементы <section> (раздел) в другие элементы <section>, но при этом рекомендуется учитывать следующую структуру документа:


<body>
	<h2>Заголовок первого уровня</h2>
	<section>
		<h3>Заголовок второго уровня</h3>
		<section>
			<h4>Заголовок третьего уровня</h4> 
		</section>
	</section>

Тег <footer>

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

Обращаю Ваше внимание, что на количество тегов <footer> на одной странице ограничений не накладывается, вы можете, допустим, поместить нижний колонтитул внутри тега <article>, чтобы хранить в нем информацию, относящуюся к статье, например сноски, ссылки или выписки.


<body>
	<h2>Важный заголовок</h2> 
	<article> <!-- начало первой статьи -->
		<h3>Статья о бытие</h3> 
		<p>Информация про бытие...</p>
		<footer>Сноски, ссылки и тому подобное <!-- "подвал" статьи -->
			<address>Информация об авторе статьи</address>
		</footer>
	</article><!-- конец первой статьи -->
	<article> <!-- начало второй статьи -->
		<h3>Статья о бытие 2</h3> 
		<p>Информация про бытие 2...</p>
		<footer>Сноски, ссылки и тому подобное <!-- "подвал" статьи -->
			<address>Информация об авторе статьи</address>
		</footer>
	</article> <!-- конец второй статьи -->
	<footer>сведения об авторских правах, навигация по сайту, счетчики... <!-- "подвал" сайта -->
		<address>Контактные данные автора сайта</address>
	</footer>
</body>
Рис. 43з Пример размещения тега <footer> на странице.

Тег <main>

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

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

Обращаю Ваше внимание, что тег <main> не должен быть потомком таких блоков как (не должен быть вложен в них):


Разметка для сайта на HTML 5

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

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


<!DOCTYPE html>
<html>
	<head>
		<title>Разметка страницы</title>
	</head>
	<body>
		<header style = "background-color:khaki; height:100px">
			<p>Верхний колонтитул (тег <header>)</p>
		</header>
		<nav style = "background-color:coral; height:75px">
			<a href = "#">Ссылка 1</a> |
			<a href = "#">Ссылка 2</a> |
			<a href = "#">Ссылка 3</a> |
		<p>Панель навигации (тег <nav>)</p>
		</nav>
		<aside style  = "float:right; width:200px; height:250px; background-color:tan">
			<p>Справа мы разместили тег <aside></p>
		</aside>
		<main style = "height:250px">
			<h2>Главный заголовок сайта</h2>
			<p>Основное содержимое (тег <main>)</p>
			<section style = "background-color:grey; height:75px">
				<h3>Заголовок второго уровня</h3>
				<p>Раздел 1 (тег <section>)</p>
			</section>
			<section style = "background-color:grey; height:75px">
				<h3>Заголовок второго уровня</h3>
				<p>Раздел 2 (тег <section>)</p>
			</section>
		</main>
		<footer style = "background-color:khaki; height:80px">
			<p>Нижний колонтитул (подвал) тег <footer></p> 
			<address>Пример с сайта basicweb.ru</address>
		</footer>
	</body>
</html>

Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3.

И так по порядку, что мы сделали в этом документе:

  • Для элемента <header> (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
  • Следующим на странице мы разместили элемент <nav> (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
  • Далее мы разместили элемент <aside>, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами.
  • Добавили на страницу элемент <main> в который мы добавили заголовок первого уровня (тег <h2>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
  • Внутри элемента <main> мы добавили два тематических раздела (тег <section>), поместили внутри этих элементов заголовки второго уровня (тег <h3>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
  • После основного содержимого мы разместили элемент <footer> (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

Результат нашего примера:

Рис. 44 Разметка страницы на HTML 5.

Разметка иллюстраций в HTML 5

Тег <figure> применяется для обозначения контента, иллюстрирующего или поддерживающего определенную идею текста. Тег <figure> может содержать изображение, видеоролик, схему, фрагмент кода, диаграмму или даже таблицу — почти все, что может встретиться в потоке веб-контента и должно восприниматься как автономная единица.

Благодаря тегу <figcaption> вы можете вывести пояснение к содержимому, которое находится внутри тега <figure>. Тег <figcaption> должен размещаться как первый, или последний элемент внутри тега <figure>.

Давайте рассмотрим пример использования:


<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <figure></title>
	</head>
	<body>
		<main>
			<figure>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
				<figcaption>Ничоси 1</figcaption>
			</figure>
			<figure>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
				<figcaption>Ничоси 2</figcaption>
			</figure>
		</main>
	</body>
</html>

В этом примере основное содержимое документа поместили внутри тега <main>, в который мы поместили два элемента <figure>, каждый из которых содержит внутри себя изображение (тег <img>) шириной и высотой 80 пикселей. Кроме того тегом <figcaption> мы вывели текстовое пояснение к содержимому каждого элемента <figure>. Элемент <figcaption> мы разместитили перед закрывающим тегом </figure>.

Результат нашего примера:

Рис. 45 Разметка изображений в HTML 5.

Обратите внимание, что если вы разместите элемент <figcaption> первым вложенным элементом тега <figure>, то пояснение будет отображаться сверху изображения:


<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <figcaption></title>
	</head>
	<body>
		<main>
			<figure>
				<figcaption>Ничоси 1</figcaption>			
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
			</figure>
			<figure>
				<figcaption>Ничоси 2</figcaption>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
			</figure>
		</main>
	</body>
</html>

Результат нашего примера:

Рис. 46 Пример использования тега <figcaption>

Скрытие содержимого в HTML 5

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

Тег <details> определяет дополнительные детали, которые пользователь может отобразить или скрыть. Данный тег может быть использован для создания интерактивных виджетов в будущем, которые пользователь может открывать и закрывать, т.к. внутри тега можно разместить любой контент. Содержание в <details> отображается для пользователя только если логический атрибут open установлен.

Тег <summary> определяет видимый заголовок для тега <details>. Если элемент не используется, то устанавливается значение браузера по умолчанию (как правило, заголовок "Подробнее").

Пример использования:


<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <details> и <summary></title>
	</head>
	<body>
		<details>
			<summary>Показать ? </summary>
			Пожалуйста <img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
			<details>
				<summary>Ещё? </summary>
				<img src = "10.jpg" alt = "ничоси" width = "80" height = "80">
			</details>
		</details>
	</body>
</html>

В этом примере мы использовали два элемента <details>, один из которых мы поместили внутрь первого, каждый их них скрывает изображение (тег <img>). Кроме того, они имеют различные заголовки, которые заданы с использованием тега <summary>.

Результат нашего примера:

Рис. 47 Пример использование тегов <details> и <summary>.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и изображение) в любую папку на вашем жестком диске:

  • Используя полученные знания составьте следующий одностраничный сайт посвященный енотам:

Практическое задание № 25.

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

Подсказка: в примере используются цвета coral и aliceblue.

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


Типовая структура страницы в HTML5 — CSS-LIVE

Дополнение от 1.03.2016: у нас есть более свежая статья на эту же тему (перевод заметки редактора спецификации W3C HTML5).

Типовая структура страницы в HTML5:

<!DOCTYPE HTML>

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Ваш сайт</title>
</head>

<body>

	<header>
		<nav>
			<ul>
				<li>Ваше меню</li>
			</ul>
		</nav>
	</header>
	
	<section>
	
		<article>
			<header>
				<h3>Заголовок статьи</h3>
				<p>Опубликовано <time datetime="2014-01-30T16:31:24+03:00">30 января 2014</time> <a href="#">Автор</a> - <a href="#comments">6 комментариев</a></p>
			</header>
			<p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.</p>
		</article>
		
		<article>
			<header>
				<h3>Заголовок статьи</h3>
				<p>Опубликовано <time datetime="2014-01-30T16:31:24+03:00">30 января 2014</time> <a href="#">Автор</a> - <a href="#comments">6 комментариев</a></p>
			</header>
			<p>Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию.</p>
		</article>
		
	</section>

	<aside>
		<h3>Об авторе</h3>
		<p>Нет никого, кто любил бы боль саму по себе, кто искал бы её и кто хотел бы иметь её просто потому, что это боль..</p>
	</aside>

	<footer>
           <p>Copyright 2014 Ваш сайт</p>
	</footer>

</body>

</html>
P.S. Это тоже может быть интересно:

Глобальная структура HTML-документа

Глобальная структура HTML-документа

7.1 Введение в структуру HTML документ

Документ HTML 4 состоит из трех частей:

  1. строка, содержащая версию HTML информация,
  2. декларативный раздел заголовка (разделенный заголовком HEAD элемент),
  3. тело, которое содержит фактическое содержание документа. Тело может быть реализуется элементом BODY или Элемент FRAMESET .

Пробелы (пробелы, символы новой строки, табуляции и комментарии) могут появляться перед или после каждого раздела. Разделы 2 и 3 должны быть разделены кодом HTML элемент.

Вот пример простого HTML-документа:


   <ГОЛОВА>
       Мой первый HTML-документ 
   
   <ТЕЛО>
      

Привет, мир!

Действительный документ HTML определяет, какая версия HTML используется в документе.Декларация типа документа называет определение типа документа (DTD), используемое для документа (см. [ISO8879]).

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

  • HTML 4.01 Strict DTD включает все элементы и атрибуты, которые не были устарели или не отображаются в документах набора фреймов. Для документов, использующих это DTD, используйте это объявление типа документа:
     
  • HTML 4.01 Переходный DTD включает в себя все в строгом DTD plus устаревшие элементы и атрибуты (большинство из которых касается визуального представления). Для документов, которые используют это DTD, используйте это объявление типа документа:
     
  • DTD набора фреймов HTML 4.01 включает все в переходных кадрах DTD plus.Для документов, использующих это DTD, используйте это объявление типа документа:
     

URI в каждом объявлении типа документа позволяет пользовательским агентам загружать DTD и любые наборы сущностей, которые необходимо. Следующие (относительные) URI относятся к DTD и наборы сущностей для HTML 4:

Связь между общедоступными идентификаторами и файлами может быть указана с помощью каталог в формате, рекомендованном Oasis Open Consortium (см. [ОАЗИСОПЕН]).Образец файла каталога для HTML 4.01 включен в начало раздела справки по SGML информация для HTML. Последние две буквы декларации обозначают язык DTD. Для HTML это всегда английский («EN»).

Примечание. Начиная с версии HTML 4.01 от 24 декабря, Рабочая группа HTML придерживается следующей политики:

  • Любые изменения в будущих HTML 4 DTD не сделают недействительными документы, которые соответствуют DTD данной спецификации. Рабочая группа HTML оставляет за собой право исправлять известные ошибки.
  • Программное обеспечение, соответствующее DTD данной спецификации, может игнорировать особенности будущих HTML 4 DTD, которые он не распознает.

Это означает, что в объявлении типа документа авторы могут безопасно использовать системный идентификатор, относящийся к последней версии HTML 4 DTD. Авторы может также выбрать использование системного идентификатора, который относится к конкретному (датированному) версия HTML 4 DTD, когда требуется проверка этого конкретного DTD.W3C приложит все усилия, чтобы архивные документы были доступны на неопределенный срок по адресу их первоначальный адрес в исходном виде.

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

версия = cdata [CN]
Устарело. г. значение этого атрибута указывает, какая версия HTML DTD управляет текущей документ. Этот атрибут устарел, поскольку он избыточен с информацией о версии, предоставленной типом документа. декларация.

Атрибуты, определенные в другом месте

После объявления типа документа остаток HTML-документа содержится в элементе HTML . Таким образом, типичный HTML-документ имеет это состав:


  ... Сюда идет голова, тело и т.д. ... 

 

7,4 Заголовок документа

7.4.1 Модель HEAD элемент

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

профиль = uri [CT]
Этот атрибут определяет расположение одного или нескольких профилей метаданных, разделенные пробелом.Для будущих расширений пользовательские агенты должны учитывать значение должно быть списком, хотя эта спецификация рассматривает только первый URI должен быть значимым. Профили обсуждаются ниже в раздел по метаданным.

Атрибуты, определенные в другом месте

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

7.4.2 Модель TITLE элемент

 TITLE  - - (#PCDATA) - (% head.misc;) - заголовок документа ->

 

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

Каждый HTML-документ должен иметь НАЗВАНИЕ элемент в разделе HEAD .

Авторам следует использовать элемент TITLE для идентификации содержимого документ. Поскольку пользователи часто просматривают документы вне контекста, авторы должны предоставлять заголовки с расширенным контекстом. Таким образом, вместо названия, такого как «Введение», которое не дает много контекстной справки, авторы должен содержать заголовок, например "Введение в средневековое пчеловодство" вместо.

По причинам доступности пользовательские агенты всегда должны делать содержимое Элемент TITLE , доступный пользователям (включая TITLE элементы, встречающиеся в кадрах).Механизм этого зависит от пользователя. агент (например, как заголовок, произносится).

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


<ГОЛОВА>
 Исследование динамики населения 
  ... другие элементы головки... 

<ТЕЛО>
  ... тело документа ... 


 

7.4.3 Название атрибут

Определения атрибутов

заголовок = текст [CS]
Этот атрибут предлагает справочную информацию об элементе, для которого он установлен.

В отличие от элемента TITLE , который предоставляет информацию обо всем документ и может появляться только один раз, атрибут title может аннотировать любое число элементов.Пожалуйста, обратитесь к определению элемента, чтобы убедитесь, что он поддерживает этот атрибут.

Значения атрибута title могут отображаться пользовательскими агентами в различных способов. Например, визуальные браузеры часто отображают заголовок как инструмент подсказка "(короткое сообщение, которое появляется, когда указывающее устройство останавливается над объект). Аудио пользовательские агенты могут озвучивать информацию заголовка аналогичным контекст. Например, установка атрибута для ссылки позволяет пользовательским агентам (визуальный и невизуальный), чтобы рассказать пользователям о характере связанных ресурс:

 ... какой-то текст ... 
Вот фото

   я нырял с аквалангом прошлым летом

  ... еще текст ... 
 

Атрибут title имеет дополнительную роль при использовании с LINK элемент для обозначения внешняя таблица стилей. Пожалуйста, обратитесь к разделу о ссылках и таблицах стилей для получения подробной информации.

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

7.4.4 Мета данные

Примечание. W3C Структура описания ресурсов (см. [RDF10]) стала W3C Рекомендация от февраля 1999 г. RDF позволяет авторам указывать машиночитаемые метаданные о HTML-документах и ​​других сетевых ресурсах.

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

Например, чтобы указать автора документа, можно использовать META следующий элемент:


 

Элемент META определяет свойство (здесь "Автор") и назначает значение для него (здесь «Дэйв Рэггетт»).

Эта спецификация не определяет набор допустимых свойств метаданных. В значение свойства и набор допустимых значений для этого свойства должны быть определены в справочном лексиконе, называемом профилем. За Например, профиль, предназначенный для помощи поисковым системам в индексировании документов, может определять такие свойства, как "автор", "авторское право", "ключевые слова" и т. д.

Указание метаданных

Обычно определение метаданных состоит из двух шагов:

  1. Объявление свойства и значения этого свойства.Это можно сделать за два способы:
    1. Изнутри документа через элемент META .
    2. извне документа, путем ссылки на метаданные через LINK элемент (см. раздел по ссылке типы).
  2. Ссылаясь на профиль, в котором недвижимость и ее правовые значения определены. Для обозначения профиля используйте Атрибут profile элемента HEAD .

Обратите внимание, что, поскольку профиль определен для элемента HEAD , тот же профиль применяется ко всем элементам META и LINK в заголовке документа.

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

Элемент META
 META  - O EMPTY - общая метаинформация ->
 http-Equiv  NAME #IMPLIED - Имя заголовка HTTP-ответа -
    name  NAME #IMPLIED - имя метаинформации -
    содержимое  CDATA # ТРЕБУЕТСЯ - связанная информация -
    схема  CDATA # ПРЕДПОЛАГАЕТСЯ - выберите форму содержания -
  >
 

Начальный тег: требуется , Конечный тег: запрещено

Определения атрибутов

Для следующих атрибутов допустимые значения и их интерпретация являются профиль зависимый:

имя = имя [CS]
Этот атрибут определяет имя свойства.В этой спецификации не указаны допустимые значения для этого атрибута.
содержимое = cdata [CS]
Этот атрибут определяет значение свойства. Эта спецификация не перечислить допустимые значения для этого атрибута.
схема = cdata [CS]
Этот атрибут называет схему, которая будет использоваться для интерпретации значения свойства. (подробности см. в разделе о профилях).
http-Equiv = имя [CI]
Этот атрибут может использоваться вместо имени атрибут.HTTP-серверы используют этот атрибут для сбора информации для HTTP. заголовки ответного сообщения.

Атрибуты, определенные в другом месте

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

каждый Элемент META определяет пару свойство / значение. Атрибут name идентифицирует свойство, а Атрибут content определяет значение свойства.

Например, следующее объявление устанавливает значение для Author недвижимость:


 

Атрибут lang может использоваться с META , чтобы указать язык для значение атрибута содержимого . Это позволяет синтезаторам речи применять языковые правила произношения.

В этом примере имя автора указано как французское:


 

Примечание. Элемент META - это общий механизм для указание метаданных. Однако некоторые элементы и атрибуты HTML уже обрабатывают определенные части метаданных и могут использоваться авторами вместо META для укажите эти части: элемент TITLE , элемент ADDRESS , INS и DEL элементы, атрибут title и атрибут cite .

Примечание. Когда свойство указано в META элемент принимает значение, которое является URI, некоторые авторы предпочитают указывать метаданные через LINK элемент.Таким образом, следующее объявление метаданных:


 

можно также записать:


 
Заголовки META и HTTP

Атрибут http-Equiv может использоваться вместо атрибута name и имеет особое значение, когда документы извлекаются через протокол передачи гипертекста (HTTP).HTTP серверы могут использовать имя свойства, указанное в атрибут http-Equ для создания заголовка в стиле [RFC822] в ответ HTTP. См. Спецификацию HTTP ([RFC2616]) для подробности о допустимых заголовках HTTP.

Следующий образец декларации META :


 

приведет к заголовку HTTP:

Истекает: Вт, 20 августа 1996 14:25:27 GMT
 

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

Примечание. Некоторые пользовательские агенты поддерживают использование META для обновить текущую страницу через указанное количество секунд, с опцией заменить его другим URI. Авторы должны использовать , а не . этот метод перенаправления пользователей на разные страницы, так как это делает страницу недоступен для некоторых пользователей. Вместо этого следует выполнять автоматическую переадресацию страниц. с использованием перенаправления на стороне сервера.

META и поисковые системы

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

<- Для носителей американского английского ->

<- Для носителей британского английского ->

<- Для носителей французского ->

 

Эффективность поисковых систем можно также повысить с помощью LINK элемент для указания ссылок на переводы документа на другие языки, ссылки на версии документа на других носителях (например,g., PDF), а когда документ является частью коллекции, ссылки на соответствующую отправную точку для просмотр коллекции.

Дополнительную помощь можно найти в разделе, помогающем поисковым системам индексировать ваш Интернет. сайт.

META и PICS
Платформа для выбора интернет-контента (PICS, указанные в [PICS]) это инфраструктура для связывания ярлыков (метаданных) с интернет-контентом. Первоначально разработан, чтобы помочь родителям и учителям контролировать, что дети могут доступ в Интернет, он также облегчает другое использование этикеток, в том числе подписание кода, конфиденциальность и управление правами интеллектуальной собственности.

Этот пример показывает, как можно использовать объявление META для включения Этикетка PICS 1.1:

<ГОЛОВА>
 
   <em> ... название документа ... </em> 

 
META и информация по умолчанию

Элемент META может использоваться для указания информации по умолчанию для документ в следующих случаях:

В следующем примере указывается кодировка символов для документа как ISO-8859-5


 
Профили метаданных
Модель Атрибут profile заголовка HEAD определяет расположение профиля метаданных.Стоимость Атрибут профиля - это URI. Пользовательские агенты могут использовать этот URI в двух способы:
  • Как глобально уникальное имя. Пользовательские агенты могут распознавать имя (без фактического получения профиля) и выполнить некоторые действия на основе известные соглашения для этого профиля. Например, поисковые системы могут предоставить интерфейс для поиска по каталогам документов HTML, где эти все документы используют один и тот же профиль для представления записей каталога.
  • По ссылке.Пользовательские агенты могут разыменовать URI и выполнить некоторые действия на основе фактических определений в профиле (например, разрешить использование профиля в текущем HTML-документе). Эта спецификация не определить форматы для профилей.

Этот пример относится к гипотетическому профилю, который определяет полезные свойства. для индексации документов. Свойства, определенные этим профилем, включая "автор", "авторские права", "ключевые слова" и "дата" - имеют значения, установленные последующие Декларации МЕТА .

 
   Как заполнять титульные листы меморандума 
  
  
  
  
 
 

Во время написания данной спецификации обычной практикой является использование форматы даты, описанные в [RFC2616], раздел 3.3. Как эти форматы относительно сложно обрабатывать, мы рекомендуем авторам использовать Формат даты [ISO8601]. Для получения дополнительной информации см. Разделы о INS и DEL элементы.

Атрибут scheme позволяет авторам предоставлять пользовательским агентам больше контекст для правильной интерпретации метаданных. Иногда такие дополнительная информация может иметь решающее значение, например, когда метаданные могут быть указаны в разные форматы. Например, автор может указать дату в (неоднозначный) формат «10-9-97»; означает ли это 9 октября 1997 г. или 10 сентября 1997? Модель Значение атрибута scheme "Месяц-День-Год" устраняет неоднозначность этой даты значение.

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

Например, следующие Схема Объявление может помочь пользовательскому агенту определить, что значением свойства "идентификатор" является код ISBN номер:


 

Значения атрибута схемы зависят от свойства имя и связанный профиль .

Примечание. Одним из примеров профиля является Dublin Core (см. [DCORE]). Этот профиль определяет набор рекомендуемых свойств для электронные библиографические описания и предназначены для продвижения совместимость разрозненных моделей описания.

7,5 Тело документа

7.5.1 Модель BODY элемент

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

фон = uri [CT]
Устарело. г. значение этого атрибута - URI, который обозначает ресурс изображения. Изображение как правило, мозаика фона (для визуальных браузеров).
текст = цвет [CI]
Устарело. Это атрибут устанавливает цвет переднего плана для текста (для визуальных браузеров).
ссылка = цвет [CI]
Устарело. Это атрибут устанавливает цвет текста, помечающего непосещенные гипертекстовые ссылки (для визуальных браузеры).
vlink = цвет [CI]
Устарело. Это атрибут устанавливает цвет текста, обозначающего посещенные гипертекстовые ссылки (для визуальных браузеры).
alink = цвет [CI]
Устарело. Это атрибут устанавливает цвет текста, обозначающего гипертекстовые ссылки, при выборе пользователь (для визуальных браузеров).

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (язык информация), реж (текст направление)
  • title (заголовок элемента)
  • стиль (рядный информация о стиле)
  • bgcolor (цвет фона)
  • onload , onunload (внутренние события)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Тело документа содержит содержимое документа.Содержание может быть представлен пользовательским агентом различными способами. Например, для визуального В браузерах тело можно рассматривать как холст, на котором отображается контент: текст, изображения, цвета, графика и т. д. Для звуковых агентов пользователя одно и то же содержимое можно говорить. Поскольку таблицы стилей теперь предпочтительный способ указать представление документа, презентационный атрибуты BODY были устарело.

УСТАРЕВШИЙ ПРИМЕР:
Следующий фрагмент HTML иллюстрирует использование устаревших атрибутов.Он устанавливает фон цвет холста на белый, цвет текста переднего плана на черный, а цвет гиперссылок изначально на красный, на фуксию при активации и на темно-бордовый один раз посетил.


<ГОЛОВА>
  Исследование динамики населения 


   ... тело документа ... 


 

Использование таблиц стилей, тот же эффект может быть выполнено следующим образом:


<ГОЛОВА>
  Исследование динамики населения 
 

<ТЕЛО>
   ... тело документа ... 


 

Использование внешних (связанных) таблиц стилей дает вам гибкость для изменения презентация без изменения исходного HTML-документа:


<ГОЛОВА>
  Исследование динамики населения 
 

<ТЕЛО>
   ... тело документа ... 


 

7.5.2 Идентификаторы элементов: id и class атрибуты

Определения атрибутов

id = имя [CS]
Этот атрибут присваивает имя элементу. Это имя должно быть уникальным в документ.
класс = cdata-list [CS]
Этот атрибут назначает элементу имя класса или набор имен классов.Любому количеству элементов может быть присвоено одно и то же имя или имена класса. Множественный имена классов должны быть разделены пробелами.
Модель Атрибут id присваивает

Структура документа

Объявление! DOCTYPE

Каждый документ HTML должен начинаться с базового объявления, определяющего его тип. Это очень полезная мера, которая заранее информирует браузеры о том, какой тип документа они собираются обрабатывать, что позволяет им соответствующим образом настраивать свои механизмы обработки.

DTD вставляется с использованием специального тега (! DOCTYPE ), который принимает определенную форму для каждого типа документа. Это объявление может присутствовать только в начале документа. В следующем примере показан DTD для документа HTML 5:

  
  

Если вы не пишете документы для очень конкретного сценария, вы собираетесь использовать это объявление.С появлением и утверждением HTML 5 в качестве веб-стандарта другие DTD потеряли важность и канули в лету. Чтобы увидеть другие DTD , перейдите по ссылке на декларацию ! DOCTYPE .

Основной контейнер: элемент html

После размещения DTD прямо в верхней части документа, пора создать основной контейнер: место, куда упадет весь документ (кроме DTD ).Этот контейнер вставляется с элементом html , и, помимо того, что он действует как контейнер, он дает хорошую возможность определить язык по умолчанию, используемый в документе, через глобальный атрибут lang .

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

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

  
  ... Элементы документа ...

  

Содержимое этого элемента можно разделить на две части: head и body .

Заголовок документа

Раздел head - это контейнер для метаданных о документе. Эти метаданные можно разделить на пять категорий в соответствии с используемым элементом.

  • Название документа : кратко описывает предмет, рассматриваемый в документе.Это обязательный элемент, который вставляется вместе с элементом title .
  • Объявления стилей : группирует определения стилей, используемых для установки атрибутов представления для элементов в документе. Он вставлен с элементом стиля .
  • Клиентские сценарии : вставляет программы, которые обеспечивают функциональность и интерактивность. Он объявлен элементом скрипта .
  • Мета-операторы : определяют настраиваемые атрибуты и значения.Они вставляются с помощью мета-элемента .
  • Реляционная информация : указывает ресурсы, которые так или иначе связаны с документом. Он вставлен с элементом link .

В следующем примере показано объявление блока head документа с некоторыми из элементов, описанных выше.

  
   Eppur si muove 
  
  
  
  <стиль>
    стол {
      ширина: 100%;
      цвет границы: черный;
    }
  
  <сценарий>
    результат = 0;
    приращение функции (количество) {
      результат + = сумма;
    }
  
  
  

  

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

HTML5: глобальная структура документа

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

Концепция веб-страницы, соответствующая философии стандарта HTML5 для W3C (или standard vivant tel que désigné par le WhatWG), отвечает на все исходные рефлексы.Структура документа (упрощенная структура документа) упрощена для ответа на вопросы прагматических специалистов по интеграции и веб-дизайнеру.

Документ ООН HTML5 минимальный

Без всякого удивления, основы кода HTML5 представляют собой прекрасные выпуски и поддержку предварительных версий HTML 4 и XHTML 1.x. Rétro-compatibilitybilité Обязанность. On y retrouve donc un doctype suivi des éléments les plus courants: , , </code>, <code> <meta> </code>, <code> <link> </code>, <code> <script> </code> et <code> <body> </code>.</p> <pre> <code> <! Doctype html> <html lang = "fr"> <head> <meta charset = "utf-8"> <title> Название страницы ... ...

Le doctype

La première ligne d'en-tête a été considérablement simpleifiée.Сохранен доступ к типу doctype pareur, без использования копировального устройства.

    

Этот документ соответствует требованиям тестирования и использования: il permet toujours - pour les anciens navigateurs - для восстановления в режиме сотрудничества, соответствующего стандартам и требованиям режима quirks . На peut remarquer qu'il n'y a pas d'allusion à un quelconque numéro de version. Сын имеет роль специалиста по обработке данных, который является type de doc ument qui va suivre, afin de permettre au navigateur de savoir quel langage de la vaste famille SGML для переводчика.

L'élément racine

C'est lui qui va recueillir les deux Principaux éléments de la hiérarchie: et .

Атрибут язык (из )

На более высоком уровне: l'attribut lang précise la langue utilisée pour le contenu de la page, lorsqu'il est placé sur la racine .

    

Une langue bien indiquée sera utile ainsi aux synthèses voice (для усыновителя le bon accent).

Les fameux et

À ce niveau, le code HTML peut être divisé en deux party: l'en-tête située entre les balises et , qui regroupe toutes les méta-informations, c'est-à- Dire les données qui ne sont pas représentées directement à l'écran dans le rendu du document, mais qui lui sont tout de même liées: le titre dans </code> (внешняя рекомендация), les autres méta-информационные варианты: mots-clés, description générale de la page) dans zéro ou plusieurs <code> <meta> </code>, et éventuellement <code> <link> </code>, <code> <script> </code> or <code> <style> </code>.</p> <p> La deuxième partie comprend le corps à proprement parler, c'est-à-dire <code> <body> </code>. On y retrouvera tout le reste du contenu HTML, structuré par des balises varées - selon ce que l'on aura a y placer - et dont l'apparence seraffected par les styles CSS chargés dans <code> <link> </code> et / ou <code> < стиль> </code>. </p> <h5><span class="ez-toc-section" id="Lattribut_charset"> L'attribut <code> charset </code> (из <code> <meta> </code>) </span></h5> <p> Подробная информация о кадрах является изначальной для использования бонн-страницы кода и не проходит через ретровер с особыми знаками или акцентами.Le choix de l'UTF-8 est désormais préconisé par le W3C для всех протоколов обмена текстов в Интернете (не HTML). </p> <pre> <code> <meta charset = "utf-8"> </code> </pre> <p> On retrouvera donc très souvent ce codage de caractères, par contre il faut toujours veiller à ce que l'éditeur permettant de coder en HTML (que ce soit un IDE tout-en-un ou un simple éditeur de texte) enregistre le fichier avec le bon encodage и не только на Latin-1 (псевдоним ISO-5589-1) или ANSI в формате <code> <meta> </code> indique UTF-8.</p> <p> Veillez à toujours placer cette declaration d'encodage avant toutes les autres balises contenues dans la section <code> <head> </code>. En effet, celles-ci sont immédiatement Concertées, par instance <code> <title> </code> qui peut déjà faire appel à des caractères en UTF-8; ceci également dans un, но de sécuriser l'interprétation des caractères spéciaux et prevenir les injection de contenu нежелательные. </p> <h5><span class="ez-toc-section" id="Lelement"> L'élément <code> <ссылка> </code> </span></h5> <p> Dans la majorité des cas, une balise <code> <link> </code> placée dans l'en-tête permet de mettre en Relationship la page avec d'autres documents externes.La plupart du temps cela Concerne les feuilles de style CSS externes имеет отношение типа <code>, таблица стилей </code>, mais il est aussi possible de definir d'autres types de Relations (par example avec <code> author </code>, <code> icon </code>, <code> prefetch </code>, <code> следующий </code>, <code> предыдущий </code> и т. Д.). </p> <pre> <code> <link rel = "stylesheet" href = "style.css"> </code> </pre> <p> En HTML5, плюс обязательные ограничения для спецификации атрибута <code> type </code>.</p> <p> Добавьте директиву с инструкциями CSS в документ HTML без указания внешнего вида, <code> <style> </code> - это ваша услуга. Cependant, il vaut mieux faire confiance à un fichier indépendant: il n'y aura qu'un seul code à maintenir для нескольких страниц (voire pour tout le site), et la mise en cache par le navigateur n'en sera que plus эффективность. </p> <h5><span class="ez-toc-section" id="Lelement-2"> L'élément <code> <script> </code> </span></h5> <p> Этот элемент, позволяющий создавать сценарии (JavaScript), не запускает клиента для навигации и взимания платы.</p> <pre> <code> <script src = "script.js"> </script> </code> </pre> <p> En HTML5, плюс обязательный спецификатор атрибута <code>, тип </code>. Celui-ci est de toute manière interprété par défaut en <code> text / javascript </code> par tous les navigateurs. </p> <h4><span class="ez-toc-section" id="Les_autres_elements_HTML5"> Les autres éléments HTML5 </span></h4> <p> Une fois la structure de base préparée, il est temps de start at y placer d'autres éléments HTML для содержимого в соответствии с определением: параграфы, листы, залоговые права, изображения, видео, таблицы, формулы и т. Д.Большинство элементов HTML не содержит изображений в HTML5, и это все, что нужно для новых элементов, для создания баланса. Пример по номиналу: </p> <ul> <li> Элементы раздела <code> <section> </code>, <code> <article> </code>, <code> <header> </code>, <code> <footer> </code>, <code> <nav> </code> et <code> <aside> </code> </li> <li> Эльемент <code> <datalist> </code> </li> <li> Éléments <code> <подробности> </code> и <code> <резюме> </code> </li> <li> Éléments <code> <figure> </code> & <code> <figcaption> </code> </li> <li> Éléments média <code> <audio> </code> et <code> <video> </code> дополнений по <code> <source> </code> </li> <li> Élément <code> <холст> </code> </li> <li> Éléments <code> <meter> </code>, <code> <output> </code> et <code> <progress> </code> </li> <li> Élément <code> <время> </code> и <code> <отметка> </code> </li> <li> Et tous les autres, que l'on peut retrouver dans une liste complete maintenue par le W3C: HTML: The Markup Language </li> </ul> <p> Pour rappel, tous les nouveaux éléments HTML5 не требует обновления фасона родного и связанного с другими навигаторами (même les plus récents).Вылейте определенные сведения, возможные проблемы с альтернативами с дополнениями на JavaScript. Pour d'autres, il faudra Patienter jusqu'à une implémentation Totale, et évaluer le risque selon le besoin: un nouvel élément sera-t-il tout de même консультируемый, masqué, ou géré de façon erronée? </p> <p> Pour juger de l'etat de la prize en charge par les navigateurs, fiez-vous на Caniuse.com qui dresse des tableaux de support Complete, ou bien encore в HTML5Please, qui indique de façon rationnelle par rapport aux parts de marché ce qu ' Возможно использование в производстве для максимального количества посетителей.</p> <h4><span class="ez-toc-section" id="i-15"> Шаблоны и шаблоны </span></h4> <p> Существующие модели и структуры для облегчения борьбы с новым веб-проектом на основе HTML5 и будущих эволюций. Он представляет собой глобальную структуру документа, содержащую некоторые полезные функции, а также параметры конфигурации для сервера и элементов базовых стилей и библиотеки JavaScript. </p> <h5><span class="ez-toc-section" id="_HTML5-2"> Шаблон HTML5 </span></h5> <p> </p> <p> Шаблон HTML5 </p> <h5><span class="ez-toc-section" id="Initializr"> Initializr </span></h5> <p> </p> <p> Initializr par Джонатан Верреккья </p> <h5><span class="ez-toc-section" id="HTML_KickStart"> HTML KickStart </span></h5> <p> </p> <p> HTML KickStart, часть 99lime </p> <h5><span class="ez-toc-section" id="i-16"> Бутстрап </span></h5> <p> </p> <p> Bootstrap (как команда Twitter) </p> <p> </p> <p> Шнапс.это (по команде Alsacréations) </p> <h4><span class="ez-toc-section" id="Jetez-vous_a_leau"> Jetez-vous à l'eau! </span></h4> <p> Начни peut le constater, создатель документа HTML5, который легко доступен, и остается ретро-совместимым, для того, чтобы сделать новые элементы более сложными и интеллектуальными. Это новая версия языка, большая часть элементов дежа коннус в предвкушении, что делает его более рискованным для авантюриста. </p> <p> HTML5 предлагает новые элементы, предназначенные для фасилитатора интеграции средств массовой информации, средства использования композиционных материалов и динамики без использования справедливого обращения - плюс долгосрочное - на собственных расширениях (Flash, Java, Silverlight).Le balisage предлагает également d'obtenir une meilleur sémantique, avec tous les members bénéfiques qui en découlent (доступность, изменение, синдицирование, перевод по принципу «moteurs de rendu» и т. Д.) </p> <p> HTML5 siginifie-t-il Обязательное использование CSS 3? Dois-je tout réapprendre? Публикуйте ответы на вопросы, эта статья уже есть на сайте: Les 5 mythes et vérités de HTML5 </p> . </div><!-- .entry-content --> <footer class="entry-footer"> <span class="cat-links">Категории: <a href="https://schtirlitz.ru/category/raznoe-2" rel="category tag">Разное</a></span> </footer><!-- .entry-footer --> </article><!-- #post-7286 --> <nav class="navigation post-navigation" role="navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://schtirlitz.ru/raznoe-2/kist-lepestok-kakaya-dlya-chego-nuzhna-i-kak-polzovatsya.html" rel="prev"><span class="be-post-nav-label btn btn-sm cont-btn no-underl"><small class="fas fa-chevron-left mr-2"></small>Назад</span></a></div><div class="nav-next"><a href="https://schtirlitz.ru/raznoe-2/absolyutnye-ssylki-eto-absolyutnye-i-otnositelnye-ssylki-v-html-sozdanie-sajtov-i-zarabotok-v-seti.html" rel="next"><span class="be-post-nav-label btn btn-sm cont-btn no-underl">Вперед<small class="fas fa-chevron-right ml-2"></small></span></a></div></div> </nav> <div id="comments" class="comments-area"> <a href="#" class="btn btn-primary btn-sm be-open-comment-form">Оставить комментарий</a> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/struktura-html-struktura-koda-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://schtirlitz.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> Обязательные поля помечены <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Комментарий</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='7286' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> </main><!-- #main --> </div><!-- #primary --> </div> </div><!-- #content --> <footer id="colophon" class="site-footer row"> <div class="site-info col-md-8"> <p>© 2019 Штирлиц Сеть печатных салонов в Перми</p> <p>Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.</p> </div> <div class="col-md-4"> <a href="/sitemap.xml">Карта сайта</a> </div><!-- .site-info --> </footer><!-- #colophon --> </div><!-- #box-container --> </div><!-- #page --> <style type="text/css"> .pgntn-page-pagination { text-align: left !important; } .pgntn-page-pagination-block { width: 60% !important; padding: 0 0 0 0; } .pgntn-page-pagination a { color: #1e14ca !important; background-color: #ffffff !important; text-decoration: none !important; border: 1px solid #cccccc !important; } .pgntn-page-pagination a:hover { color: #000 !important; } .pgntn-page-pagination-intro, .pgntn-page-pagination .current { background-color: #efefef !important; color: #000 !important; border: 1px solid #cccccc !important; } .archive #nav-above, .archive #nav-below, .search #nav-above, .search #nav-below, .blog #nav-below, .blog #nav-above, .navigation.paging-navigation, .navigation.pagination, .pagination.paging-pagination, .pagination.pagination, .pagination.loop-pagination, .bicubic-nav-link, #page-nav, .camp-paging, #reposter_nav-pages, .unity-post-pagination, .wordpost_content .nav_post_link,.page-link, .page-links,#comments .navigation, #comment-nav-above, #comment-nav-below, #nav-single, .navigation.comment-navigation, comment-pagination { display: none !important; } .single-gallery .pagination.gllrpr_pagination { display: block !important; } </style> <link rel='stylesheet' id='pgntn_stylesheet-css' href='https://schtirlitz.ru/wp-content/plugins/pagination/css/nav-style.css?ver=5.6' type='text/css' media='all' /> <script type='text/javascript' src='https://schtirlitz.ru/wp-content/themes/blogdot/assets/js/jquery.slicknav.js?ver=v1.0.10' id='slicknav-js'></script> <script type='text/javascript' src='https://schtirlitz.ru/wp-content/themes/blogdot/assets/js/theme.js?ver=1.0.0' id='blogdot-theme-js'></script> <script type='text/javascript' src='https://schtirlitz.ru/wp-includes/js/comment-reply.min.js?ver=5.6' id='comment-reply-js'></script> <script type='text/javascript' src='https://schtirlitz.ru/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script> <script type='text/javascript' src='https://schtirlitz.ru/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script> <script type='text/javascript' src='https://schtirlitz.ru/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script> <script type='text/javascript' src='https://schtirlitz.ru/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script> <script type='text/javascript' id='ez-toc-js-js-extra'> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */ </script> <script type='text/javascript' src='https://schtirlitz.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script> <script type='text/javascript' src='https://schtirlitz.ru/wp-includes/js/wp-embed.min.js?ver=5.6' id='wp-embed-js'></script> </body> </html>