Структура документа css: Структура файла CSS — Справочный сайт «WEB дизайн» – CSS — Википедия

Leave a Comment / Css / By /

Основы CSS, подключение стилей — Уроки верстки FreeHtmlThemes

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

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

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

Подключение файлов CSS

Внешний файл стилей подключается элементарной конструкцией в голове документа, т.е. между тегами head. 

<link href="style.css" rel="stylesheet">

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

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

Структура файла стилей

Как же организован сам файл стилей? Для каждого селектора (это то над чем мы совершаем стилистические изменения) соответствует свой набор свойств и их значение. Селектор по тегу p в примере ниже определяет цвет текста, размер шрифта и отступ снизу. Цвет, размер шрифта и отступ снизу — это свойства селектора p, а справа от них через двоеточие их значения.

p {
color: #ccc;
font-size: 14px;
margin-bottom: 10px;
}

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

Что такое классы в CSS

Самым простым и рациональным способом добавления разных стилей для одинаковых тегов, становится добавление классов. Например, мы имеем два абзаца, хотим, чтобы размер шрифта одного был 14px, а другого 12px. В данном случае в код html добавляем атрибут class с уникальными значениями first и second.

<p>...</p>
<p>...</p>

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

.first {font-size: 14px;}
.second {font-size: 12px;}

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

НОУ ИНТУИТ | Лекция | Основы HTML

Аннотация: Лекция знакомит с основами языка HTML — что это такое, что он делает, кратко история его появления, и немного о том, как выглядит структура документа HTML

Введение

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

  • Что такое HTML
  • Как выглядит HTML
  • История HTML
  • Структура документа HTML
  • Синтаксис элементов HTML
  • Элементы блочного уровня и строковые элементы
  • Символьные ссылки
  • Заключение

Что такое HTML

Большинство настольных приложений, которые читают и записывают файлы, используют специальный формат файлов. Например, Microsoft Word понимает файлы «.doc», а Microsoft Excel понимает «.xls». Эти файлы содержат инструкции о том, как восстановить документ, когда вы откроете его в следующий раз, каково содержимое документа, и «метаданные» статьи, такие как автор, дата последней модификации документа, даже такие вещи, как список сделанных изменений, чтобы можно было перемещаться между различными версиями.

HTML («Язык разметки гипертекста») является языком описания содержимого документов Web. Он использует специальный синтаксис, содержащий маркеры (называемые » элементами «), которые охватывают текст в документе, чтобы указать, как агенты пользователя должны интерпретировать эту часть документа.

Здесь используется технический термин «агенты пользователя», а не «браузеры Web». Агент пользователя является любым программным продуктом, который используется для доступа к страницам Web от имени пользователей. Здесь необходимо сделать важное различие — все типы программ браузеров настольных компьютеров (Internet Explorer, Opera, Firefox, Safari, и т.д.) и альтернативные браузеры для других устройств (такие как Интернет-канал Wii и браузеры мобильных телефонов, такие как Opera Mini и WebKit на iPhone) являются агентами пользователей, но не все агенты пользователей являются программами-браузерами. Автоматические программы, которые компании Google и Yahoo! используют для индексирования Web для использования в своих поисковых системах, также являются агентами пользователей, но ни одно человеческое существо не управляет ими непосредственно.

Как выглядит HTML

HTML является просто обычным текстовым представлением содержимого и его общего смысла. Например, код заголовка «Что такое HTML » выше выглядит следующим образом:

<h3>Что такое HTML</h3>

Часть «<h3>» является маркером (который мы называем » тегом «), который означает «то, что следует далее, должно рассматриваться, как заголовок второго уровня». «</h3>» является тегом для указания, где находится окончание заголовка второго уровня (который мы называем «закрывающий тег «). Открывающий тег, закрывающий тег и все, что между ними называются » элементом «. Однако многие люди используют термины элемент и тег взаимозаменяемо, что не совсем строго правильно.

В большинстве браузеров имеется функция «Исходный текст» или «Просмотр исходного текста», обычно в меню «Вид». Если такая функция имеется, выберите ее и уделите некоторое время изучению исходного кода HTML страницы.

История HTML

В «лекции 2» , «История Интернет и Web», вы немного узнали о том, как появилась современная сеть Web. Когда Тим Бернерс-Ли изобрел World Wide Web, он создал первые Web-сервер и Web-браузер и первую версию HTML (http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/MarkUp.html).

Хотя HTML значительно изменился с тех пор, большая часть содержимого современного HTML реализована в этом первом документе и более половины » тегов «, описанных в исходном документе » Теги HTML » по прежнему существуют.

По мере того как все больше людей начали создавать Web-страницы и альтернативные варианты исходной программы браузера, все больше свойств добавлялось в HTML. Многие были признаны повсеместно (такие как элемент img, используемый для вставки изображения в документ, реализованный впервые в браузере NCSA Mosaic). Некоторые были более частными и использовались реально только в одном или двух браузерах. Возникла настоятельная потребность в стандартизации — чтобы авторы других программ Web-браузеров имели документ (называемый «спецификацией»), который окончательно описывал для них, как выглядит HTML, чтобы они могли оценить, пропустили они или нет при реализации некоторые части HTML.

IETF (Internet Engineering Task Force- орган стандартизации, занимающийся взаимодействием в Интернет) опубликовал черновик предложения по стандарту HTML в 1993. Он утратил силу, не став стандартом в 1994 г., но стимулировал IETF на создание рабочей группы для создания стандарта HTML.

В 1995 г. был написан » HTML 2.0″, использовавший идеи из исходного черновика HTML. Дейв Раггетт написал также альтернативное предложение, названное HTML +, которое использовалось в качестве основы для многих новых элементов, реализованных в браузерах (такие как метод вставки изображений в документы, предложенный впервые в браузере NCSA Mosaic).

Черновик HTML 3.0 появился позже в этом же году, но работа над этой версией была прервана, в связи с отсутствием поддержки со стороны производителей браузеров. HTML 3.2 потерял многие новые свойства 3.0, и вместо этого принял многие разработки популярных в то время браузеров Mosaic и Netscape Navigator.

В 1997 консорциум W3C опубликовал версию HTML 4.0 в качестве рекомендации, которая включила дополнительные специальные расширения браузеров, но попыталась также рационализировать и очистить HTML. Это было сделано, помечая различные элементы как исключенные — что означает, что элементы устарели и хотя они еще существуют в этой версии, они будут удалены в последующем. Это должно было стимулировать лучшее и более семантическое использование HTML в документах (что описано более подробно в «лекции 4» , Модель стандартов Web).

Версия HTML 4.01 была опубликована в 1999 г., и с некоторыми исправлениями опечаток в 2001 г. Это самая последняя версия HTML, хотя в настоящее время готовится черновик версии HTML 5.

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

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

Минимальный возможный действительный документ HTML будет выглядеть примерно следующим образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
            <html>
              <head>
                <title>Example page</title>
              </head>
              <body>
                <h2>Hello world</h2>
              </body>
            </html>

Документ начинается с элемента типа документа, или doctype (описанного более подробно в «лекции 14» , Выбор правильного типа документа … ). Он описывает, какой тип HTML будет использоваться — чтобы агенты пользователя могли определить, как интерпретировать документ, и решить, следует ли он тем правилам, которым собирался следовать по своему заявлению.

После этого можно видеть открывающей тег элемента html. Это оболочка вокруг всего документа. Закрывающий тег html является последним объектом в любом документе HTML.

Внутри элемента html имеется элемент head. Он является оболочкой, содержащей информацию о документе (метаданные). Это описано более подробно в следующей лекции. Внутри head находится элемент title, который определяет заголовок «Example page» в панели меню.

После элемента head следует элемент body, который является оболочкой, содержащей реальное содержимое страницы — в данном случае только элемент заголовка первого уровня ( h2 ), который содержит текст «Hello world». И это, собственно, и есть весь документ.

Как можно видеть, элементы часто содержат другие элементы. Тело документа всегда будет содержать множество вложенных друг в друга элементов.

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

Синтаксис элементов HTML

Как вы уже видели, базовый элемент в HTML состоит из двух маркеров вокруг блока текста. Существуют элементы, которые не являются оболочкой для текста, и почти в каждом случае элементы могут содержать подэлементы (как html содержит head и body в примере выше).

Элементы могут также иметь атрибуты, которые могут модифицировать поведение элемента и вводить дополнительное значение.

<div>
              <h2>The Basics of 
                <abbr title="Hypertext Markup Language">HTML</abbr>
              </h2>
            </div>

В этом примере элемент div (раздел страницы, способ разбиения документов на логические блоки) имеет добавленный атрибут id, для которого задано значение masthead. Элемент div содержит элемент h2 (заголовок первого, или самого важного уровня), который в свою очередь содержит некоторый текст. Часть этого текста упакована в элемент abbr (который используется для определения расширения сокращений), который имеет атрибут title, значение которого задано как Hypertext Markup Language.

Многие атрибуты в HTML являются общими для всех элементов, хотя некоторые являются специфическими для данного элемента или элементов. Они всегда имеют форму ключевое_слово=»значение». Значение должно быть помещено в одиночные или двойные кавычки (в некоторых ситуациях кавычки могут отсутствовать, но это не слишком хорошо с точки зрения предсказуемости, понимания и ясности — необходимо всегда заключать значения в кавычки).

Атрибуты и их возможные значения определяются в основном спецификациями HTML (http://www.w3.org/TR/html401/index/attributes.html) — нельзя создать свои собственные атрибуты, не сделав код HTML недействительным, так как это может путать агентов пользователей и вызывать проблемы правильной интерпретации Web-страницы. Единственными реальными исключениями являются атрибуты id и class — их значения полностью под вашим контролем, так как они предназначены для добавления в документы вашего собственного значения и семантики.

Элемент внутри другого элемента называют «потомком» этого элемента. Поэтому в примере выше abbr является потомком h2, который сам является потомком div. И наоборот, div будет называться «предком» элемента h2. Концепция предок/потомок является важной, так как она формирует основу CSS и активно используется в JavaScript.

Элементы блочного уровня и строковые элементы

Имеется две основные категории элементов в HTML, которые соответствуют типам контента и структуре, которую представляют эти элементы — элементы блочного уровня и строковые элементы.

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

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

Символьные ссылки

Последним вопросом, который стоит упомянуть о документе HTML, является использование специальных символов. В HTML символы <, > и & являются специальными. Они начинают и заканчивают части документа HTML, а не представляют символы меньше, больше и амперсанд.

Одной из первых ошибок, которую может сделать автор в Web, является использование символа амперсанда в документе и получение в связи с этим чего-то неожиданного. Например, запись «stones&pounds» может в действительности появиться в некоторых браузерах как «stones£s».

Это связано с тем, что литеральная строка «&pound;» является в действительности символьной ссылкой в HTML. Символьная ссылка является способом включения в документ символа, который трудно или невозможно ввести с помощью клавиатуры, или в кодировке конкретного документа.

Символ амперсанда ( & ) вводит ссылку, а точка с запятой ( ; ) заканчивает ее. Однако, многие агенты пользователя могут быть достаточно снисходительны к ошибкам HTML, таким как отсутствие точки с запятой, и интерпретировать «&pound» как символьную ссылку. Ссылки могут быть либо числами (числовые ссылки) или сокращенными словами (объектные ссылки).

Реальный амперсанд должен вводиться в документ как «&amp;», что является объектной ссылкой символа, или как «&#38;», что является числовой ссылкой. Полную таблицу символьных ссылок можно найти на сайте evolt.org (http://www.evolt.org/article/A_Simple_Character_Entity_Chart/17/21234/).

Заключение

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

Об авторе

Марк Норман Френсис работает с Интернет с момента изобретения Web. Он работает в настоящее время в компании Yahoo! в качестве архитектора внешнего интерфейса для крупнейшего в мире Web-сайта, определяя лучшие методы, стандарты кодирования и качества разработки Web.

До Yahoo! он работал в Formula One Management, Purple Interactive и City University на различных должностях, включая разработку Web приложений, серверное программирование CGI и архитектура систем. Он приписывает себе блог по адресу http://marknormanfrancis.com/.

Источник: Andy Budd http://flickr.com/photos/andybudd/98405468/

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

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

Создаём простейшую HTML-страницу, разбираемся из каких тегов она состоит и за что эти теги отвечают. Подключаем к странице CSS-стили и JS-скрипты.

×

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

Например, для старой версии HTML 4.01 доктайп выглядит так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

А для последней версии HTML уже намного проще:

<!DOCTYPE html>

Последнюю версию HTML ещё называют HTML 5. Но так как эта версия уже принята как стандарт и распространена почти везде, мы будем называть её просто HTML.

×

Простейшая HTML-страница состоит как минимум из трёх тегов.

Тег <html> — это контейнер, в котором находится всё содержимое страницы, включая теги <head> и <body>. Как правило, тег <html> идёт в документе вторым после доктайпа.

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

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

×

Заголовок страницы — это тот текст, который отображается в левом верхнем углу браузера, а также во вкладках.

Чтобы задать заголовок страницы, нужно использовать тег <title> внутри тега <head>. Например, вот так:

<head>
  <title>Курсы — HTML Academy</title>
</head>
×

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

Чтобы сообщить браузеру кодировку HTML-страницы, необходимо внутри тега <head> использовать тег:

<meta charset="имя кодировки">

Самая распространённая современная кодировка — utf-8. Используйте её во всех своих проектах.

Для кириллицы в Windows charset часто задавали как windows-1251. Но сейчас это считается плохой практикой.

×

Есть целое семейство тегов <meta>, называемых мета-тегами. Их можно использовать внутри тега <head>.

Мета-теги различаются набором атрибутов и их значений, вот некоторые из атрибутов: content, http-equiv, name и scheme.

Мета-теги хранят полезную для браузеров и поисковых систем информацию. Один из таких тегов — это описание ключевых слов страницы. Задаётся он так:

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

В атрибуте content через запятую перечисляются самые важные слова из содержания страницы. Раньше этот тег был очень важен для поисковиков. Каково положение дел сейчас — большой секрет Яндекса и Гугла.

×

Ещё один полезный для поисковых систем мета-тег — краткое описание страницы. Оно задаётся так:

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

В атрибуте content должно быть краткое содержание или аннотация страницы. Оно часто используется поисковиками при отображении результатов поиска.

Пойманный нами инженер из Яндекса не признался, важен ли этот тег для ранжирования, но дал ссылку на рекомендации по составлению описаний. Инженера из Гугла мы ещё только выслеживаем, так что следите за новостями.

×

Комментарий в HTML-коде задаётся так:

<!-- любой текст -->

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

  • Для комментирования кода. Всегда полезно оставить подсказку.
  • Для временного отключения кода. Удалять код неудобно, так как его надо будет восстанавливать, а закомментировать и потом раскомментировать — самое лучшее решение.

Комментарии можно использовать в любом месте страницы, кроме тега <title> — внутри него они не работают. Внутри тега <style> HTML-комментарии тоже не работают, так как в CSS код комментируется другим способом, о котором вы узнаете в курсе «Знакомство с CSS».

Чтобы быстро закомментировать или раскомментировать строку кода в HTML или CSS редакторе, можете использовать сочетание клавиш ctrl + / или cmd + /.

×

CSS-стили можно писать внутри HTML-кода страницы или подключать их как внешний файл.

В первом случае стили называются «встроенными» или «инлайновыми», а писать их нужно внутри тега <style>. Этот тег обычно размещают внутри <head>. Например:

<head>
  <style>
    CSS-код
  </style>
</head>

Внутри <style> пишут обычный CSS-код.

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

×

Теперь вы знаете про встроенные стили и можете узнать тайну нашего CSS-редактора.

CSS-код из редактора незаметно добавляется внутрь тега <style>, а этот тег добавляется в мини-браузер.

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

CSS-комментарии задаются с помощью символов /* и */:

/*
h2 {
  color: red; 
}
*/
×

Чаще всего стили подключают из внешнего файла с расширением .css. Для этого используется тег <link>. Например:

<head>
  <link href="style.css" rel="stylesheet">
</head>

В атрибуте href задают адрес файла, а атрибут rel="stylesheet" говорит браузеру, что мы подключаем стили, а не что-то другое.

Лучше подключать стили внутри <head>, но это необязательно. Тег <link> будет работать и в другом месте страницы.

В этом задании вы подключите внешний стилевой файл, который расположен по адресу /assets/course2/style.css щёлкните по ссылке, чтобы открыть этот файл в браузере.

×

В вебе следующее разделение ролей: HTML отвечает за структуру документа, стили — за его внешний вид, а скрипты — за поведение. С помощью скриптов, например, можно «оживлять» страницу, добавляя анимацию и другие эффекты. Скрипты создаются с помощью языка JavaScript.

Скрипты подключаются так же, как и стили: их либо пишут внутри страницы, либо подключают как внешние файлы.

Встроенные скрипты пишут внутри тега <script>. Например:

<script>
  JavaScript-код
</script>

Тег <script> можно использовать в любом месте HTML-документа, но лучше вставлять его в самом конце перед закрывающим тегом </body>.

Часть возможностей JavaScript постепенно переходит в CSS, например, возможность задавать плавное изменение значений свойств. Вы увидите это в задании.

×

Скрипты чаще всего подключают из внешних файлов с расширением .js. Для этого используют тег <script> с атрибутом src, в котором указывается путь к файлу. Например:

<script src="scripts.js"></script>

Обратите внимание, что тег <script> парный. Если вы подключаете внешние скрипты, то просто ничего не пишите внутри тега.

Внешние скрипты лучше подключать перед закрывающим тегом </body>.

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

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

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

В этом задании вы подключите внешний скрипт, который расположен по адресу: /assets/course2/scripts.js щёлкните по ссылке, чтобы открыть этот файл в браузере.

×

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

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

В первом задании закрепим навыки описания мета-информации:

  • заголовка страницы;
  • ключевых слов;
  • краткого описания страницы.

Прочитайте анонс статьи в мини-браузере и дополните его важной мета-информацией.

Самостоятельно задайте мета-информацию страницы:

  1. Цель 1 Заголовок страницы Вёрстка для не-технарей.
  2. Цель 2 Ключевые слова вёрстка, компьютерная грамотность, программирование.
  3. Цель 3 Краткое описание Примеры того, что изучение веб-технологий может быть полезно для всех.
×

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

Не забывайте, что хорошим тоном считается подключать внешние стили в <head>, а скрипты перед закрывающим тегом </body>.

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

  1. Цель 1 Подключите стилевой файл /assets/course2/final.css.
  2. Цель 2 Затем подключите скрипт /assets/course2/final.js.

Проблема выбора структуры документа — CSS-LIVE

Перевод статьи «The Document Outline Dilemma» с сайта css-tricks.com, опубликовано на css-live.ru с разрешения автора — Амелии Беллами-Ройдз

В последние несколько недель среди веб-стандартистов было много разговоров о HTML-заголовках. Возможно, вы видели какие-то записи в блогах, твиты и обсуждения разных ишью на Гитхабе. Заголовки — часть HTML начиная с самых первых сайтов в ЦЕРНе, так что может показаться странным, что спустя 25 лет в них нашлись какие-то противоречия. Я хочу сначала вкратце рассказать, почему это всё еще стоит обсуждения, а потом добавить собственные соображения по теме. Если вы сами следили за недавней дискуссией, можете перейти сразу к разделу «Более важная дилемма».

Предыстория

В HTML заголовки (<h2>, <h3>, <h4>, и т.д. вплоть до <h6>) служат для разметки названий последовательных разделов в тексте. Цифры (или уровни) в заголовочных элементах должны были логически соответствовать древовидной структуре вложенных разделов, вроде глав с разделами и подразделами в книгах.

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

Как указывает Брайан Карделл, это было вполне логично в эпоху раннего HTML, когда разметка была плоской, как Земля в представлении древних, и теги фактически были командами форматирования, внедренными в поток текста (напр. тег <p> фактически был командой «Начать с красной строки», подобно символу ^p в Ворде, и был одиночным тегом, как <br> — прим. перев.). Представление об HTML-странице как о древовидной структуре появилось позднее, когда так называемому «динамическому HTML» понадобилась объектная модель документа (DOM) для описания этого потока текста с тегами как структуры данных, с которой могли работать скрипты.

Не хотелось раскрывать концовку, но сейчас в HTML есть элемент <section>, с помощью которого можно (хотя и необязательно) создавать вложенную DOM-структуру, соответствующую логической структуре заголовков. Элементы <main>, <header>, <footer>, <article>, <aside> и <nav> тоже помогают строить вложенную структуру документа, выраженную во вложенности DOM.

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

В ранних предложениях для структурных элементов был также безуровневый элемент <h> или <heading>, уровень которому назначался бы по контексту (на самом деле эта идея восходит к самым первым обсуждениям HTML). Но когда структурные элементы наконец добавили в HTML, их «заточили» под работу с существующими заголовочными элементами. Зато спецификации определили «алгоритм структуры документа», который пересчитывал бы уровень заголовков для существующих «номерных» заголовочных тегов на основе вложенности секций.

С алгоритмом структуры документа можно было (в теории) использовать <h2> для всех заголовков, и браузер определял бы уровень каждого из них исходя из вложенности <article>, <section> и подобных элементов. Алгоритм структуры гарантировал бы, что у верхнего заголовка на странице будет уровень 1, а все остальные заголовки будут в логичном порядке вложенности, без пропуска уровней. WHATWG-версия структуры еще определяет правила для составных заголовков в элементе <hgroup>, чтобы подзаголовки не создавали подразделов (в W3C-версии вместо этого <hgroup> объявили устаревшим: составные заголовки надо размечать абзацами внутри <header>-а раздела или спанами внутри основного заголовочного элемента).

Браузеры изменили свои стили по умолчанию, чтобы заголовки во вложенных разделах отображались всё меньшим и меньшим шрифтом (подобно тому, как у <h4> по умолчанию шрифт мельче, чем у <h3>, а у того — мельче, чем у <h2>). Но не изменили то, как уровень заголовков «виден» API доступности, которым пользуются скринридеры. А пользователи скринридеров — единственные, для кого заголовки оказываются важной частью пользовательского интерфейса.

Зачитывая заголовки, скринридеры объявляют уровень их номера, и позволяют пользователям быстро «пробежаться» по заголовкам данного уровня. Согласно исследованию WebAIM для двух третей пользователей скринридеров такое «сканирование» заголовков — первый шаг в поиске нужной информации на большой странице. Для этих пользователей единственным эффектом от алгоритма структуры документа было то, что некоторые новые страницы (поспешно сделанные по новой спецификации) представлялись как плоский список заголовков первого уровня, вообще без какой-либо структуры.

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

Адриан Розелли хорошо систематизировал обсуждения проблем, связанных с нереализованной спецификацией для структуры, в статье «Структуры документа нет». В новейшей спецификации W3C HTML алгоритм структуры документа служит лишь напоминанием, как разработчикам следует синхронизировать номерные заголовочные теги со вложенными структурными элементами. В спецификации WHATWG HTML весь алгоритм структуры по-прежнему описан как требование, но есть открытое ишью, где многие советуют убрать его совсем. Как выразился редактор спецификации WHATWG Доменик Деникола:

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

Нынешние дебаты

Нынешний всплеск дебатов начался, когда Джонатан Нил открыл ишью по спецификации W3C HTML, в очередной раз предложив неуловимый элемент <h>. Ключевой пункт этого предложения — для заголовка <h> можно было бы определять уровень вложенности по структурным элементам, а обычным номерным заголовкам по-прежнему определять уровень по имени тега. Путем использования этого нового тега верстальщики могли бы включать алгоритм структуры, когда нужно. Пока браузеры не начнут поддерживать <h>, можно было бы рассчитывать уровни заголовков полифилом на JavaScript (или на стороне сервера) и добавлять их в DOM с помощью ARIA-атрибутов: role="heading" и aria-level="3" укажут браузеру, что для целей доступности элемент надо воспринимать как заголовок 3 уровня, вне зависимости от имени тега или вложенности, так что за любую путаницу с заголовками будет всецело отвечать автор страницы.

Много хороших аргументов высказано в обсуждении того ишью и в больших статьях в блогах по этому поводу. Главный аргумент за добавление нового элемента в том, что он не поменяет поведения имеющегося контента. Вдобавок к аргументам Нила на Гитхабе, с этим же взглядом на проблему выступает предложение Брайана Карделла насчет пользовательского элемента и полифилла. С другой стороны, Джейк Арчибальд призывает исправить те элементы, что у нас уже есть:

Работа по исправлению имеющегося веба — лишь часть работы по созданию нового элемента, делающего то же самое, но не исправляющего имеющийся веб.

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

Если вам до сих пор неясно, почему все никак не могут договориться о такой с виду простой вещи, как HTML-заголовки, то специально для вас Брайан Карделл написал второй пост, убрав все лишние технические подробности.

Более важная дилемма

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

Лично я не думаю, что простое вложенное оглавление может учесть все уровни смысла, передаваемые HTML-заголовками, как они используются в вебе. Чуть позже я покажу, почему. Но у того, что все обсуждают именно этот тип оглавления, есть причина: именно такого типа оглавления ждут пользователи скринридеров.

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

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

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

Если хотите взглянуть, на что похожа структура заголовков вашего сайта — и как она теоретически могла бы выглядеть благодаря алгоритму структуры документа — можете воспользоваться новым сервисом проверки HTML от W3C, с отмеченной галочкой «Show outline» («Показать структуру»).

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

Язык определяется теми, кто говорит на нём

HTML уникален среди компьютерных языков тем, что определяет множество конструкций, не привязывая к ним никакого конкретного поведения. Значение в компьютерном коде известно как семантическая сторона языка, в противовес синтаксическим структурам его грамматики. Но в большинстве языков программирования семантический аспект встроенных объектов жестко связан с инструкциями для компьютера. Например, в JavaScript у new Date() и new Promise() один и тот же синтаксис — вызов функции-конструктора — но интерпретатор JS понимает семантическое различие между именами обоих объектов и ведет себя с ними по-разному.

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

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

Когда я была младшеклассницей, библиотекарь показывала нам многотомный Оксфордский словарь английского языка, знакомя нас с отдельными редкими и необычными словечками. Слово «гугл*» обозначало число, записываемое единицей со 100 нулями (10100, если записать по-научному). Дико, правда? Кому и зачем нужно знать такое слово? Но времена меняются. В 2006-м Оксфордский словарь добавил новое определение, глагол «гуглить» (что означает искать в поисковике «Гугл»), которое в современной английской речи используется, наверное, в гугл раз чаще, чем название числа.

*Уточнение: как заметил в комментариях Марк, то слово, что мне тогда давным-давно показали, правильно пишется «гугол». И я не знаю уже, чему и верить.

В том, что касается значения HTML-тегов, роль словарей играют две конкурирующие HTML-спецификации (WHATWG и W3C). И совсем как словари, обе они начались с попыток описать язык так, как он реально используется.

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

Но не всё так просто, конечно. Языком HTML пользуются не только люди, но и компьютеры. И компьютеры не очень-то сильны в обработке расплывчатого и изменчивого значения.

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

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

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

И это лишь про описание того, что должны делать браузеры. Как насчет всех HTML-элементов, определяющих семантику контента? Надо ли им тоже «улучшить соответствие реальности»?

Несколько месяцев назад Сара Суайдан предложила рабочей группе HTML в W3C, не сделать ли элемент <address> валидным для любых адресов (а не только контактных адресов владельца страницы). И до нее многие просили об этом же. Но в этот раз случилось что-то необычное. После небольшого анализа наскоро собранных данных, показавшего, что реальное использование в вебе не ограничивается исходным определением, определение в спецификации W3C обновили.

Это что-то изменило? Может, и нет. Браузеры ничего не делают с <address>, разве что оформляют курсивом. И в спецификации WHATWG HTML определение по-прежнему старое. Но это значит, что спецификация чуть приблизилась к описанию того, как код действительно используется в вебе, а не чьих-то давнишних представлений о том, как это будет.

Что опять возвращает нас к нашим заголовкам: как они используются в вебе на самом деле? И можно ли вообще определить предписывающий набор инструкций, для авторов страниц и для браузеров, который гарантировал бы, что значение заголовков будет правильно передаваться скринридерам (а в теории и другим программам)?

Такие многозначные заголовки

Что такое заголовок? Это краткое название раздела документа. У этого раздела заголовок «Такие многозначные заголовки». Пока всё хорошо.

Но не все заголовки созданы равными.

Есть большие заголовки:

а есть намного меньшие заголовки:

Такой малюсенький заголовочек, что почти и не заголовок вовсе

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

Для каждого, кто читает эту страницу глазами, различие между этими заголовками видно из размера шрифта, и, возможно, из его стиля. Конкретные подробности зависят от того, смотрите ли вы на стили сайта или стили режима чтения у вас в браузере, а также от того, когда в последний раз Крис поменял стили CSS-Tricks. Но если Крис совсем уж не напортачил, при чтении глазами будет ясно, что <h2> крупнее и важнее, чем <h6>. Можно поменять CSS, чтобы они выглядели одинаково, но уже сейчас непонятно, зачем такое может понадобиться. Если они должны выглядеть одинаково, почему бы не использовать один и тот же тег?

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

See the Pen Heading outlines example #1 by Ilya Streltsyn (@SelenIT) on CodePen.

Вот другой способ выстроить те же заголовки и абзацы:

See the Pen Heading outlines example #2 by Ilya Streltsyn (@SelenIT) on CodePen.

А вот третий:

See the Pen Heading outlines example #3 by Ilya Streltsyn (@SelenIT) on CodePen.

Если невооруженным глазом смотреть только на вкладку «Результат» в этих примерах, легко можно подумать, что второй и третий примеры идентичны и очень отличаются от первого. Визуально и примере №2, и в примере №3 есть главный раздел с большим заголовком и боковая панель с маленьким заголовком. Разница лишь в том, что в одном структура строится с помощью элементов <div>, а в другом с помощью структурных элементов HTML.

Раз вы дочитали досюда, вас вряд ли слишком удивит, что эти два примера дают разные структуры при обработке алгоритмом структуры HTML-документа. В этом алгоритме дивы игнорируются, так что пример №2 будет воспринят точно так же, как пример №1: главный заголовок, абзац обычного текста, затем подзаголовок и еще один абзац. Оглавление никак не показывает, что боковая панель — отдельная структура, параллельная основной статье:

  1. Большой заголовок
    1. Такой малюсенький заголовочек, что почти и не заголовок вовсе

Напротив, если запустить алгоритм структуры для примера №3, он покажет нам, что здесь безымянный основной документ (заголовка верхнего уровня нет) с двумя равнозначными дочерними элементами (оба заголовка трактуются как второй уровень). Так что он четко передает параллельность структуры, но не передает различия в важности заголовков:

  1. [элемент body без заголовка]
    1. Большой заголовок
    2. Такой малюсенький заголовочек, что почти и не заголовок вовсе

Не думаю, что какое-либо из этих оглавлений точно описывает визуальную структуру блоков страницы. Не описывает ее и оглавление по названиям тегов, которое не только считает боковую панель вложенной в основную статью, но еще сбивается с толку наличием на моей страничке <h6> при отсутствии элементов <h3/3/4/5>.

Если бы меня попросили описать кому-нибудь эту структуру, я бы отметила два момента:

  • тут два раздела друг рядом с другом;
  • один из этих разделов более важен, чем другой.

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

Даже когда компоненты вложены, их уровень важности не всегда зависит от количества окружающих их разделов. Я пишу книги по SVG для издательства O’Reilly. Разметка, с помощью которой мы делаем книги, преобразуется в HTML. У книги (заголовок 1 уровня) есть главы (заголовки 2 уровня) с разделами (заголовки 3 уровня), в которых бывают подразделы и даже подподразделы (уровни 4 и 5). Но в ней есть также примеры, предупреждения и примечания на полях, и у них всех есть свои заголовки, с одинаковым оформлением независимо от того, находится ли этот компонент в обычном разделе или в подподразделе. Если бы мы использовали «правильные» HTML-заголовки, у них были бы разные имена тегов, в зависимости от глубины раздела, но их стили были бы идентичны.

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

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

А затем сосредоточиться на действительно важном вопросе:

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

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

  • Нужны лучшие правила для исключения безымянных разделов, может быть, стоит рассматривать их не как дополнительные уровни вложенности в оглавлении, а как ARIA-группы.
  • Могут понадобиться лучшие правила для работы с составными заголовками, объединенными с помощью элементов <hgroup> или <header>.
  • И, пожалуй, понадобятся лучшие правила насчет того, какие элементы инкапсулируют заголовки своих потомков и полностью изолируют их от основного оглавления (и будут ли такие элементы вообще).

Покажите мне данные

Но это лишь мое мнение.

Чтобы браузеры и скринридеры изменили свое поведение — не говоря уж о том, чтобы убедить сотни тысяч веб-разработчиков, использующих в своем контенте заголовки — одних мнений и догадок недостаточно. Как я еще давно утверждала, нам нужны данные. И Джейк, и Брайан дружно повторили этот призыв.

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

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

Так что я прошу вас: «прогоните» свои любимые сайты (которые вы делали или которые вы посещаете) через оба генератора оглавлений в HTML-валидаторе.

  • Есть ли смысл хоть у одного из оглавлений?
  • Можно ли сделать их осмысленными с помощью не слишком сложных доработок разметки, которые можно внедрить в вашу систему сборки или компонентный фреймворк?
  • Какое оглавление лучше?
  • Какие аспекты структуры документа вызывают больше всего проблем?

И пока мы не забыли, еще один вопрос:

Как вам самим, как пользователю веба, хотелось бы открывать документы и переходить по ним при помощи заголовков или оглавлений?

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *