Как правильно задать язык документа согласно спецификации html5

Конспект «Разметка текста»

(сокращение от «unordered list»). Используется, когда порядок элементов не важен. Например, для разметки перечня ссылок в меню, преимуществ товара, ингредиентов в составе продукта.

могут находиться только теги
(сокращение от «list item»), которые обозначают элементы или пункты списка:

• Я пункт списка, могу быть на любом месте
• И я пункт списка, и мне тоже не важен порядок

отмечаются маркерами такого же цвета, как цвет текста.

• Я пункт списка, могу быть на любом месте
• И я пункт списка, и мне тоже не важен порядок

Упорядоченный список

(сокращение от «ordered list»). В этом списке действительно важно, в каком порядке идут элементы. Упорядоченные списки подходят для разметки алгоритмов, инструкций, рецептов, результатов соревнований и так далее.

1. Я первый и только первый пункт
2. Я не я, если я не второй пункт
3. Третий после стольких лет? Всегда!

ставится их порядковый номер.

1. Я первый и только первый пункт
2. Я не я, если я не второй пункт
3. Третий после стольких лет? Всегда!

может быть несколько атрибутов: start , reversed и type .

Атрибут start меняет стартовое число нумерации пунктов. Может быть отрицательным.

Атрибут reversed меняет направление нумерации на противоположный. Этот атрибут не требует значения.

С помощью атрибута type можно задавать различные типы маркеров: строчные и заглавные латинские буквы или римские цифры.

Список описаний

Тег (сокращение от «description list»). Список описаний используется для разметки вопросов-ответов, наименований и определений, категорий и тем. Он создаётся с помощью трёх тегов:

• обозначает сам список описаний;
• (сокращение от «description term») обозначает термин;
• (сокращение от «description definition») обозначает описание или определение.

Теги и пишутся внутри . Каждый список может содержать один или несколько терминов и одно или несколько описаний для каждого термина. Пример кода:

 
HTML
 
Язык гипертекстовой разметки
 
CSS
 
Каскадные таблицы стилей
 
Язык для оформления HTML-документов
 

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

HTML Язык гипертекстовой разметки CSS Каскадные таблицы стилей Язык для оформления HTML-документов

Преформатированный текст и код

Тег (сокращение от «preformatted text»). Используется для отображения примеров кода, также применяется для отображения картинок ASCII Art. Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега .

Пример преформатированного текста с сохранёнными пробелами и переносами строк

Пример преформатированного текста с сохранёнными пробелами и переносами строк
Тег . Используется для обозначения фрагментов кода.
С его помощью размечается любой фрагмент текста, который распознается компьютером: код программы, разметки, название файла и так далее. Обычно браузеры отображают текст в теге моноширинным шрифтом.
Тег ul — это неупорядоченный список.
Тег ul — это неупорядоченный список.
Тег можно вкладывать внутрь тега .
Цитаты
Небольшие цитаты
Тег (сокращение от «quote»). Предназначен для выделения цитат внутри предложения. Текст внутри тега браузер автоматически обрамляет кавычками, поэтому добавлять кавычки вручную не нужно.
Источник цитат
Тег . В нём можно указывать помимо адреса источника цитаты ещё и название произведения, откуда цитируется текст, а также имя автора или организации, чей текст цитируется. Содержимое в браузере выделяется курсивом.
По словам Чарльза Буковски — Интеллектуал о простой вещи говорит сложно — художник сложную вещь описывает простыми словами.
По словам Чарльза Буковски — Интеллектуал о простой вещи говорит сложно — художник сложную вещь описывает простыми словами.
Тег может быть самостоятельным и не привязываться к цитате:
Какой доктор ваш любимый (в сериале Доктор Кто)?
Длинные цитаты
Тег . Предназначен для выделения длинных цитат, которые могут состоять из нескольких абзацев. Тег выделяет цитату не как фрагмент текста в предложении, а как отдельный блок текста с отступами.
 
Ум ценится дорого, когда дешевеет сила.
 Джейсон Стэтхэм 
В браузере контенту тега обычно добавляется дополнительный отступ слева и справа.
Обычный текст.

Ум ценится дорого, когда дешевеет сила.
 Джейсон Стэтхэм
Разметка фрагментов текста
Символы-мнемоники
Это особые строки, которые начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Например, знак меньше на страницу можно вставить мнемоникой < (less than), а знак больше мнемоникой > (greater than):
<ul> </ul>
Перенос строк
Тег 
(сокращение от «line break»). Применяется, чтобы вставить в текст перенос строки, не создавая при этом абзац. Например, при разметке стихов или текстов песен.
Верхний и нижний индексы
Теги и . Названия образованы от слов «superscript» и «subscript».
Тег отображает текст в виде верхнего индекса, а отображает текст в виде нижнего индекса.
Их используют для указания единиц измерения или для написания простых формул:
20м2 H2O X3+X2=1
20м 2 
H2O 
X 3 +X 2 =1
Для создания более сложных формул, эти теги можно использовать внутри друг друга.
Дата и время
Тег . С помощью него можно описывать даты одновременно и для человека, и для машины. Для указания даты в машиночитаемом формате ISO 8601 существует атрибут datetime и выглядит так:
09:54 утра 18 ноября 2015 в прошлую субботу вчера
Браузер отображает только содержимое тега, а содержимое datetime не отображается.
Акцентирование внимания
Теги и . Названия образованы от слов «emphasis» и «italic». Предназначены для акцентирования внимания на слово или фразу. Визуально оба тега одинаковы, они выделяют текст курсивом.
Тег определяет текст, на который сделан особый акцент, меняющий смысл предложения.
Я просто обожаю холодные зимние дни!
Тег применяется для обозначения текста, который отличается от окружающего текста, но не является более важным. Например, в можно заключать названия, термины, иностранные слова. Также в этот тег можно обернуть мысли героя. В речи такой текст обычно выделяется интонационно:

Он взглянул в окно и подумал — такого просто не может быть!
Выделение и придание важности
Теги и . Название образовано от слова «bold». Отображаются оба тега одинаково, они выделяют текст жирным.
Тег указывает на важность отмеченного текста. Он может использоваться для выделения предупреждений или части документа, которую пользователь должен увидеть раньше остального. При этом обозначение части текста тегом не должно изменять смысла предложения.
Внимание! Это место опасно. Вы можете упасть в пропасть, если подойдёте близко к краю.
Тег предназначен для выделения текста с целью привлечения к нему внимания, но без придания ему особой важности. Использовать его нужно только в случае, когда остальные теги выделения не подходят. Типичный пример — выделение вводного предложения статьи.
Вы входите в небольшую комнату. Ваш меч загорается ярче. Крыса стремительно пробегает вдоль стены.
Описание изменений
Теги и . Названия тегов образованы от слов «delete» и «insert». Предназначены для описания изменений в документе.
Тег выделяет текст, который был удалён в новой версии документа. В браузере этот текст перечёркивается.
Тег выделяет текст, который был добавлен в новой версии документа. В браузере этот текст подчёркивается.

Почистить посудомоечную машину
Погулять
Поспать

Разделение контента
Теги и . Это «чистые» элементы, и обычно они отлично подходят в качестве обёртки для стилизации или группировки других элементов. Использовать эти теги рекомендуется в тех случаях, если более подходящих семантических тегов не нашлось.
Тег используется для группировки структурных элементов или в качестве вспомогательных контейнеров для создания нужной раскладки.
Тег используется для группировки текстовых элементов, выделения отдельных слов или фраз внутри абзацев, пунктов списка и так далее.
 
 
…
 
…
 
 
Текст, в котором выделена фраза
 

Наша группа в VK
Наш канал на YouTube
Наша страница в Twitter
Наш канал в Telegram

В HTML5 до­бав­лен но­вый ат­ри­бут translate
В HTML5 недавно добавился новый атрибут — translate . На трёх семинарах MultilingualWeb, которые мы провели за последние два года, идея такого булева флага — «переводить или не переводить» постоянно вызывает довольно большой интерес у локализаторов, создателей текста, и всех тех, кто работает с языковыми технологиями.
Как это работает? Скопировать ссылку
Обычно либо автор текста, либо среда вывода, которая автоматически формирует текст, ставит этот атрибут в разметку страницы. Кроме того, в ситуации промышленного перевода локализаторы могут добавлять этот атрибут на стадии подготовки перевода, чтобы избежать множества ошибок перевода при большом количестве языков в одном тексте.
На рендеринге страницы этот атрибут никак не сказывается (впрочем, можно добавить к нему свои стили, если вы найдёте для этого повод). Планируется, что этот атрибут в основном будет полезен для тех инструментов, которые используются в процессе перевода текста — будь это тщательная работа профессиональных переводчиков, быстрые API или облачные сервисы перевода коротких текстовых фрагментов.
Этот атрибут может быть применён к любому элементу, и может иметь одно из двух значений: yes или no . Если значение — no , инструменты перевода должны предохранять текст внутри элемента от перевода. Этот инструмент может быть автоматической системой перевода (как, например, в онлайн-сервисах Google или Microsoft) или профессиональной системой перевода, которая не будет давать переводчику случайно изменить текст.
Если установить этот флаг на элемент, то же самое значение будет применено ко всем вложенным элементам и атрибутам этих элементов.
Для того, чтобы система работала, не нужно использовать translate=»yes» . Если на странице нет атрибута translate , система перевода (или переводчик) должна предположить, что перевести нужно весь текст. Вряд ли значение yes будет использоваться широко, хотя оно может быть очень полезно, если вам нужно переопределить значение флага translate на родительском элементе и указать кусочки текста, которые должны быть переведены. Например, вы можете захотеть перевести комментарии на обычном языке в исходном коде, а сам код оставить без перевода.
Зачем это нужно? Скопировать ссылку
Потребность в этом встречается довольно-таки часто. В спецификации HTML5 есть пример с игрой про пчелу и мёд. Вот похожий, но на этот раз реальный пример из моего опыта работы в Xerox, где документация, которая переводилась на другой язык, относилась к устройству, на котором текст находился прямо на «железе» и поэтому не переводился.
Click the Resume button on the Status Display or the CONTINUE button the printer panel.
 
Оригинальный текст на английском — прим. переводчика.
Нажмите кнопку «Продолжить» на дисплее состояния или кнопку CONTINUE на панели принтера.
 
Текст при переводе на русский язык — прим. переводчика.
Вот ещё несколько примеров текста из жизни, которым принесёт пользу атрибут translate . Отрывок из книги, цитирующий название работы.
The question in the title How Far Can You Go? applies to both the undermining of traditional religious belief by radical theology and the undermining of literary convention by the device of “breaking frame”…
 
Оригинальный текст на английском — прим. переводчика.
Вопрос в названии, How Far Can You Go?, относится и к отрицательному влиянию радикальной теологии на традиционные религиозные воззрения, и к отрицательному влиянию приема «разрыва рамок» на правила построения литературного произведения…
 
При переводе на русский язык. На русском языке в таких случаях, впрочем, название работы обычно принято переводить — прим. переводчика.
Следующий пример со страницы о французском хлебе — «хлеб» по-французски «pain».
Welcome to french pain on Facebook. Join now to write reviews and connect with french pain. Help your friends discover great places to visit by recommending french pain.
 
Оригинальный текст на английском — прим. переводчика.
Добро пожаловать на страницу french pain на Facebook. Присоединяйтесь, пишите отчёты и свяжитесь с french pain. Помогите друзьям узнать отличные новые места, порекомендовав им french pain.
 
При переводе на русский язык. Речь идёт о французской компании, которая называется «french pain» — прим. переводчика.
Таким образом, добавив на вашу страницу атрибут translate , вы поможете читателям лучше понять ваш текст, если они читают его через системы автоматического перевода, и значительно сэкономить денежные и временные затраты системам перевода с большим потоком информации на разных языках.
Как обстоят дела у Google Translate и Microsoft Translator? Скопировать ссылку
Службы перевода Google и Microsoft и ранее предоставляли возможность предохранять текст от перевода посредством добавления разметки, но делали они это (несколькими) разными способами. Будем надеяться, что новый атрибут очень поможет тем, что предоставит стандартный подход.
И Google, и Microsoft в настоящее время поддерживают синтаксис class=»notranslate» , но замена названия класса атрибутом — формальной частью языка — сделает эту функцию гораздо более надёжной, особенно в более широких контекстах. Например, инструмент переводчика может всегда считать, что HTML5-атрибут translate значит именно то, что он должен значить. Становится проще портировать эту идею и для других сценариев использования: скажем, для других API перевода или стандартов локализации (например, XLIFF).
Кстати, онлайн-сервис перевода компании Microsoft (которая, собственно, и предложила флаг translate в HTML5 некоторое время назад) уже поддерживает translate=»no» . До сих пор, конечно, это был проприетарный атрибут, и Google не поддерживал его. Однако, буквально вчера утром я совершенно случайно узнал, что WebKit и Chromium только что добавили поддержку атрибута translate , а вчера днём Google добавил поддержку translate=»no» к своему сервису онлайн-перевода. Вот результаты нескольких тестов, которые я провёл этим утром. Ни Microsoft, ни Google пока не поддерживают переопределение translate=»yes» . Статья опубликована 22 февраля 2012 года (прим. переводчика)
Во всех этих проприетарных системах, впрочем, есть масса нестандартных способов синтаксически выразить эту же идею (даже если мы говорим только о Google и Microsoft).
Так, Microsoft поддерживает style=»notranslate» . Google не поддерживает этот синтаксис в списке возможных флагов для своего онлайн-сервиса перевода, но зато у них есть варианты, которые недоступны в сервисе Microsoft.
Например, если у вас есть целая страница, которая не должна переводиться, можете добавить внутри элемента вашей страницы, и Google не будет переводить никакой текст на этой странице. А ещё они поддерживают . Конечно, это не должно быть специфично для Google, и единообразный способ делать это, то есть translate=»no» для элемента — гораздо более удачное решение.
Также непонятно, кстати, и с тем, и с другим сервисом перевода, как делать доступными для перевода вложенные элементы внутри элемента, для которого translate установлено в значении no — а это иногда может понадобиться.
Как говорилось выше, новый HTML5-атрибут использует простую и стандартную возможность HTML, которая может заменить и упростить все эти различные подходы. И, конечно, это поможет авторам создавать такое текстовое содержимое, настройки локализации которого будут работать и с другими системами.
А почему не использовать просто атрибут lang ? Скопировать ссылку
Конечно, во время дискуссий о том, как правильно реализовать флаг translate , кто-нибудь обязательно должен был предложить именно это, но перегружать текст метками языков — это не решение. Например, языковая метка может указывать, какой орфографический словарь использовать для проверки какого текста. Это не имеет ничего общего с тем, нужно переводить текст или нет. Это разные концепции. Если в документе, где у элемента указан lang=»en» , дальше на странице вы поставите lang=»notranslate» , орфография в тексте не будет проверяться, потому что указанный язык уже не английский. Кроме того, стили для lang перестанут работать, голосовые браузеры не будут правильно произносить текст и т.п.
Больше, чем просто атрибут translate Скопировать ссылку
Рекомендация ITS (Internationalization Tag Set), сделанная W3C, предлагает использовать флаг возможности автоматического перевода в таком виде, как атрибут translate , только что добавленный к HTML5, но идёт дальше и описывает способ присвоить значение флага каким-либо элементам или наборам разметки по всему документу или в наборе документов. Например, вы можете определить (если так нужно для вашего содержимого), что по умолчанию все элементы 
с указанным классом должны иметь флаг translate в значении no в каком-либо конкретном наборе документов.
Накануне публикации перевода был представлен первый рабочий черновик ITS 2.0, следующей версии спецификации — прим. редактора.
Microsoft уже предлагает что-то в этом духе, хотя их подход предоставляет гораздо меньше возможностей, чем рекомендация ITS. Если вы пишете где-либо на странице (или в виджете) , то эта строчка гарантирует, что все CSS-классы, перечисленные после директивы notranslateclasses , будут вести себя так же, как класс notranslate .
Кроме того, движки автоматического перевода Microsoft и Google не переводят содержимое элементов . Впрочем, обратите внимание, что относительно этого у вас особенно нет выбора — нет никаких инструкций относительно того, как переопределить это значение, если вы хотите, чтобы содержимое вашего элемента всё же было бы переведено.
Кстати, в ближайших планах W3C есть организаций новой рабочей группы совместно с проектом Европейской Комиссии — MultilingualWeb-LT — чтобы дальше развивать идеи по спецификации ITS и разработать ряд её практических реализаций. Помимо всего прочего, эта группа будет искать новые способы интеграции нового атрибута translate в процессы и стандарты индустрии локализации. Ждите, скоро всё будет!
HTML5
Значение данного атрибута должно быть уникальным среди всех ID в домашнем поддереве элементов, а также должно содержать не менее одного символа. При этом значение не должно содержать пробельных символов.
Отсутствуют ограничения на то, какие значения может принимать ID, в частности, идентификаторы могут состоять только из цифр, начинаться с цифры, с символа подчеркивания, состоять только из знаков препинания и т.д.
уникальный идентификатор элемента может быть использован для различных целей, в первую очередь для установки якоря, в конкретной части документа используя идентификаторы фрагментов, потом как способ указания уникального имени элемента для работы с ним из скриптов, а так же для того чтобы установить CSS стиль для конкретного элемента.
IИдентификаторы являются непрозрачными строками. Особая смысловая нагрузка не должна быть получена от значения атрибута id .
3.2.5.2 Атрибут title 
Атрибут представляет справочную информацию для элемента, например, в виде всплывающей подсказки. При указывании атрибута в теге ссылки, он может выполнять роль названия или описания целевого ресурса; в изображении может выполнять роль альтернативы изображению или описание изображения; в теге абзаца может выполнять роль сноски или комментария к тексту; в цитате может выполнять роль дополнительной информации об источнике; в интерактивном содержимом может выполнять роль отметки или инструкции к использованию элемента; и так далее. В качестве значения данного атрибута может выступать любой текст.
Полагаться на атрибут title в настоящее время не рекомендуется, поскольку многие агенты пользователей не предоставляют атрибут в доступной форме в соответствии с требованиями настоящей спецификации (например, требуется указывающее устройство, такое как мышь, чтобы вызвать всплывающую подсказку, что исключает не только устройства, использующие только клавиатуру, но и устройства, использующие только сенсорное управление, такие как любой современный телефон или планшет).
Если этот атрибут опущен из элемента, то подразумевается, что атрибут title ближайшего предка являющегося HTML элементом с title атрибутом является также актуальным по отношению к данному элементу. Установка данного атрибута переопределяет это правило, прямо указывая, что справочная информация от любых родительских элементов больше не имеет отношения к этому элементу. Установка пустой строки в качестве значения данного атрибута означает, что у элемента отсутствует всплывающая подсказка.
Если значение title атрибута содержит «LF» (U+000A) символы, то содержание разделяется на несколько строк. Каждый «LF» (U +000A) символ во всплывающей подсказке представляет символ перевода строки.
Следует проявлять осторожность при переводе сроки в значениях title атрибутов.
Например, в следующем примере определение аббревиатурной расшифровки написано с разрывом строки:
My logs show that there was some interest in HTTP today.
Некоторые элементы, такие как link , abbr , и input , определяют дополнительную семантику для атрибута title за пределами семантики, описанной выше.
элемента является значением, которое возвращает следующий алгоритм, с алгоритмом который прерывается, как только возвращается значение. Когда алгоритм возвращает пустую строку, то справочная информация отсутствует.

Если элемент является link , style , dfn или abbr элементом и: если элемент имеет атрибут title , то возвращается значение этого атрибута, в противном случае возвращается пустая строка. input doesn’t do this —>
В противном случае, если элемент имеет атрибут title , то возвращается его значение.
В противном случае, если элемент имеет родительский элемент, то возвращается справочная информация родительского элемента.
В противном случае, возвращается пустая строка.

Агенты пользователей должны информировать пользователя, когда элементы имеют справочную информацию, в противном случае информации не должно быть видно.
IDL атрибут должен вернуть содержимое атрибута title .
3.2.5.3 Атрибуты lang и xml:lang 
Атрибут (без пространства имён) указывает основной язык содержимого элемента и любого из атрибутов элемента, содержащих текст. Его значение должно быть допустимым BCP 47 языковым тегом, или пустой строкой. Установка пустой строки в качестве атрибута указывает, что основной язык неизвестен . [BCP47]
XML атрибут в XML пространстве имён определён в XML. [XML]
Если данные атрибуты не указаны в элементе, то язык этого элемента совпадает с языком его родительского элемента, если таковой имеется.
Атрибут lang вне пространства имён может быть использован в любом HTML элементе.
Атрибут lang в XML пространстве имён может быть использован в HTML элементах в XML документах, а также в элементах других пространств имён, если позволяют это соответствующие технические характеристики (в частности, в MathML и SVG допускается использование lang атрибутов в XML пространстве имён указаных в их элементах). Если и атрибут lang не принадлежащий пространству имён и атрибут lang принадлежащий XML пространству имён указывается в одном элементе, то они должны иметь одинаковое значение без учёта ASCII регистра символов.
Авторы не должны использовать XML атрибут lang принадлежащий the XML пространству имён в HTML элементах HTML документов. Для облегчения перехода от XHTML, авторы могут указать атрибут не принадлежащий пространству имён без префикса и с буквальным локальным именем » xml:lang » в HTML элементах HTML документов, но такие атрибуты должны быть указаны только в случае, если для элемента уже указан атрибут lang не принадлежащий пространству имён, при условии, что оба этих атрибута имеют одинаковое значение без учёта ASCII регистра символов.
Атрибут вне пространства имён без префикса и с буквальным локальным именем » xml:lang » не влияет на обработку языка.
Для определения узла, агенты пользователей должны посмотреть на ближайший родительский элемент (в том числе и сам элемент, если узел является элементом), который имеет атрибут lang принадлежащий XML пространству имён или является HTML элементом, который имеет lang не принадлежащий пространству имён набора атрибутов. Данный атрибут задаёт язык узла (вне зависимости от его значения).
Если и атрибут lang не принадлежащий пространству имён и атрибут lang принадлежащий XML пространству имён задаются одному элементу, то агенты пользователей должны использовать атрибут lang принадлежащий XML пространству имён , а атрибут lang не принадлежащий пространству имён должен быть проигнорирован в целях определения языка элемента.
Если ни один узел, ни кто-либо из предков узла, включая корневой элемент, не имеет ни одного из данных атрибутов, но присутствует pragma-набор действий для установления языка по умолчанию, то это установленный таким образом язык является языком узла. Если нет pragma-набора действий для установления языка по умолчанию, то информация о языке, получается, от высокоуровневого протокола (например, HTTP), если таковой имеется, должен быть использован в качестве последнего резервного метода определения языка. В случае отсутствия какой-либо информации о языке, а также в случаях, когда протокол более высокого уровня предоставляет отчеты на нескольких языках, язык узла неизвестен и соответствующая метка языка является пустой строкой.
Если полученное значение является нестандартной меткой языка, то данное значение должно рассматриваться как неизвестный язык, имеющий данную метку языка отличающуюся от остальных языков. В целях кругооборота или общения с другими службами, которые ожидают языковые метки, web-браузеры должны оставить неизвестные метки языка без изменений, и пометить как языковые метки BCP 47, так чтобы впоследствии сервисы не интерпретировали данные как ещё один тип описания языка. [BCP47]
Так, например, элемент с lang=»xyzzy» будет соответствовать селектору :lang(xyzzy) (например в CSS), но не будет соответствовать :lang(abcde) хотя оба они одинаково недействительны. Аналогично, если веб-браузер и программа чтения с экрана, работают совместно обмениваясь информацией о языке элемента, браузер должен будет сообщать программе чтения с экрана, что меткой языка является «xyzzy», даже если он знает, что данная метка неверна, это делается на всякий случай для того, чтобы узнать поддерживает ли программа чтения с экрана язык с подобной меткой. Даже если программа чтения с экрана одновременно поддерживает BCP 47 и другие синтаксисы для кодирования названий языков, и в этом другом кодировании синтаксис строки «xyzzy» является одним из способов обозначения белорусского языка, было бы неправильным для программы чтения с экрана начать обрабатывать текст как белорусский, потому что «xyzzy» в BCP 47 кодах не описывается как белорусский (в BCP 47 для обозначения белорусского языка используется код «be»).
Если полученное значение является пустой строкой, то это значение должно быть интерпретировано как неизвестный язык узла.
Агенты пользователей могут использовать языковую метку для определения правильной обработки или визуализации (например, в выборе соответствующих шрифтов или произношения, для выбора словаря, или для пользовательских интерфейсов управления формой, таких как выбор даты).
IDL атрибут должен вернуть содержимое атрибута lang не принадлежащего пространству имён.
3.2.5.4 Атрибут translate 
Атрибут является перечисляемым атрибутом, который используется для определения необходимости перевода значений атрибутов элементов и значений их дочерних Текстовых узлов в условиях, когда страница локализована.
Ключевыми словами атрибута являются: пустая строка, yes , и no . Пустая строка и ключевое слово yes указывают на состояние – yes. Ключевое слово no указывает на состояние – no. Кроме того, существует еще и третье состояние, состояние наследования, которое является отсутствующим значением, выполняемым по умолчанию (и недопустимое значение по умолчанию).
Каждый элемент (даже не HTML-элементы) имеет , который может находиться в состоянии поддержки перевода или в состоянии без поддержки перевода. Если атрибут translate HTML-элемента находится в состоянии yes, то режим перевода элемента находится в состоянии поддержки перевода; в противном случае, если translate атрибут элемента находится в состоянии no, то режим перевода элемента находится в состоянии без поддержки перевода. В противном случае, либо translate атрибут элемента наследует состояние, либо элемент не является HTML элементом и таким образом не имеет translate атрибут; в любом случае, режим перевода элемента находится в том же состоянии, что и его родительский элемент, если таковой имеется, или в состоянии поддержки перевода, если элемент является корневым элементом.
Когда элемент находится в состоянии , то элементы с атрибутами перевода и значения их дочерних Текстовых узлов должны быть переведены в условиях, когда страница локализована. Атрибуты элемента, которые не указаны в качестве атрибутов перевода не должны переводиться.
Когда элемент находится в состоянии , то значения атрибутов элементов (в том числе значения атрибутов перевода) и значения их дочерних Текстовых узлов должны быть оставлены, как есть в условиях, когда страница локализована, например, в виду того, что элемент содержит имя человека или название компьютерной программы.
Следующие атрибуты являются :

abbr в th элементах
alt в area , img и input элементах
content в meta элементах, если атрибут name указывает имя метаданных, значение которого, как известно, переводится
download в a и area элементах
label в optgroup , option , и track элементах
lang в HTML элементах; должно быть «переведено» на соответствующий язык, используемый в переводе
placeholder в input и textarea элементах
srcdoc в iframe элементах; должно быть проанализировано и обрабатываться рекурсивно
style в HTML элементах; должно быть проанализировано и обрабатываться рекурсивно (например, для значений «содержащихся» свойств)
title во всех HTML элементах
value в input элементах с атрибутом type в состоянии Button или в состоянии Reset Button on other types is excluded since we can’t predict if it interferes with server-side processing —>

IDL атрибут должен вернуть true, если режим перевода элемента находится в состоянии поддержки перевода и false в противном случае. При использовании, он должен задать атрибуту значение » yes «, если новое значение является true/правдой или в противном случае задать значение » no «.
В данном примере, после локализации страницы, все её содержимое за исключением образца вводимого текста и образца результата работы программы должно быть переведено:
     
Игра Пчелы представляет собой текстовую приключенческую игру на английском языке.
 
При запуске игры, первое, что вы должны сделать, это набрать translate=no>поесть мёд. Игра должна ответить:
 
translate=no>Ням ням! Это был очень хороший мёд!
  

3.2.5.5 The attribute (XML only)
The xml:base attribute is defined in XML Base. [XMLBASE]
The xml:base attribute may be used on HTML elements of XML documents. Authors must not use the xml:base attribute on HTML elements in HTML documents.
3.2.5.6 Атрибут
Атрибут dir указывает направление текста элемента. Атрибут представляет собой перечисляемый атрибут со следующими ключевыми словами и значениями:
Ключевое слово , которое является значением
Указывает, что содержимое элемента имеет явно обособленное направление текста слева направо.
Ключевое слово , которое является значением
Указывает, что содержимое элемента имеет явно обособленное направление текста справа налево.
Ключевое слово , которое является значением
Указывает, что содержимое элемента имеет явно обособленное направление текста, но это направление должно быть определено программно, используя содержимое элемента (как описано ниже).
Эвристически используемое данное состояние очень примитивно (оно просто смотрит на первый символ с сильной направленностью, аналогично тому, как в пункте определения уровня алгоритма двунаправленного вывода). Авторам настоятельно рекомендуется использовать это значение в качестве последнего средства, в случае, когда направление текста действительно неизвестно, и когда эвристика не может быть применена на стороне сервера. [BIDI]
Для textarea и pre элементов, эвристика применяется на уровне абзацев.
Этот атрибут не имеет недопустимого значения по умолчанию и не отсутствующего значения по умолчанию.
элемента (любого элемента, а не только элемента HTML) имеет одно из двух состояний — » или », и определяется в соответствии с первым соответствующим набором действий из следующего списка:
Если атрибут dir элемента имеет значение ltr Если элемент является корневым элементом и атрибут dir не имеет определенного состояния (т.е. он отсутствует или имеет недопустимое значение) Если элемент является input элементом, чей атрибут type находится в состоянии Номера телефона, и атрибут dir не имеет определенного состояния (т.е. он отсутствует или имеет недопустимое значение)
Направленность элемента принимает значение ‘ltr’.
Если атрибут dir элемента имеет значение rtl 
Направленность элемента принимает значение ‘rtl’. Если элемент является input элементом, чей атрибут type имеет значение Text, Search, Telephone, URL или E-mail и атрибут dir находиться в состоянии auto Если элемент является textarea элементом и атрибут dir находиться в состоянии auto 
Если значение элемента содержит символ с двунаправленным характером типа AL или R, и нигде до этого в значение элемента нет символа двунаправленного характера типа L, то направленность элемента определяется как ‘rtl’. [BIDI]
В противном случае, если значение элемента — не пустая строка, или если элемент является корневым элементом, направленность элемента принимает значение ‘ltr’.
В противном случае, направленность элемента наследуется от направленности родительского элемента.
Если атрибут dir элемента имеет значение auto Если элемент является bdi элементом и атрибут dir не имеет определенного состояния (т.е. он отсутствует или имеет недопустимое значение)
Находтся первый символ структуре дерева, который соответствует следующим критериям:

Символ из Текстового узла, который является потомком элемента, чья направленность в настоящее время определяется.
Символ, указывающий двунаправленный характер типа L, AL, или R. [BIDI]
Символ, не находящийся в Текстовом узле, имеющий родительский элемент, который является потомком элемента, чья направленность определена, либо:

Элемент bdi .
Элемент script .
Элемент style .
Элемент textarea .
Элемент с атрибутом dir в определённом состоянии.

Если такой символ найден и имеет двунаправленный характер типа AL или R, направленность элемента принимает значение ‘rtl’.
Если такой символ найден и имеет двунаправленный характер типа L, направленность элемента принимает значение ‘ltr’.
В противном случае, если элемент является пустым и не является корневым элементом, направленность элемента такая же, как и направленность родительского элемента.
В противном случае, направленность элемента принимает значение ‘ltr’.
Если элемент имеет родительский элемент и атрибут dir не имеет определенного состояния (т.е. он отсутствует или имеет недопустимое значение)
Направленность элемента наследуется от направленности родительского элемента.
Поскольку атрибут dir определяется только для HTML-элементов, он не может присутствовать в элементах из других пространств имён. Таким образом, элементы из других пространств имён всегда просто наследуют их направленность от родительского элемента, или, если они не имеют единственного значения по умолчанию — ‘ltr’.
HTML-элемента, который используется, когда значение этого атрибута будет принято на исполнение в некотором образе, определяется, как и в первом соответствующем наборе действий из следующего списка:
Если атрибут направленности является работоспособным атрибутом и dir атрибут элемента находиться в состоянии auto 
Нахождится первый символ (в логическом порядке) атрибута, который имеет двунаправленный характер типа L, AL, или R. [BIDI]
Если такой символ найден и имеет двунаправленный характер типа AL или R, направленность атрибут принимает значение ‘rtl’.
В противном случае, направленность атрибута принимает значение ‘ltr’.
В противном случае Атрибут направленности имеет значение соответствующее направленности элемента.
Следующие атрибуты являются :

abbr в th элементах
alt в area , img и input элементах
content в meta элементах, если атрибут name указывает имя метаданных, значение которого в первую очередь предназначено для человеческого понимания, а не для чтения машиной
label в optgroup , option и track элементах
placeholder в input и textarea элементах
title во всех HTML-элементах

Возвращает значение dir атрибутов html элемента, если таковые имеются.
Может быть установлено, » ltr «, » rtl «, либо » auto » для изменения значения dir атрибутов html элемента
Если html элемент отсутствует, то возвращается пустая строка, и игнорируются новые значения.
IDL атрибут в объекте Document должен вернуть содержимое dir атрибута html элемента, если таковой имеется, ограничиваясь только известными значениями. Если указанный элемент отсутствует, то атрибут должен вернуть пустую строку и не делать ни каких настроек.
Разработчикам настоятельно рекомендуется для указания направления текста использовать атрибут dir , а не прибегать к помощи CSS, потому что в этом случае их документы будут продолжать отображаться правильно, даже в отсутствии CSS (например, в интерпретации поисковых систем).
Это фрагмент разметки из чат сеанса.
Студент: Как пишется "Как тебя зовут?" по-арабски?
 
Учитель: ما اسمك؟
 
Студент: Спасибо.
 
Учитель: Данное слово пишется как "شكرًا".
 
Учитель: А вы знаете, как пишется "Пожалуйста"?
 
Студент: "من فضلك", правильно?
 Student : How do you write «What’s your name?» in Arabic?
 Teacher : ما اسمك؟
 Student : Thanks.
 Teacher : That’s written «شكرًا».
 Teacher : Do you know how to write «Please»?
 Student : «من فضلك», right?
При наличии подходящих стилей и выравнивания, выставленных по умолчанию стилей для элемента p , а именно выравнивание текста по начальному краю абзаца, в результате выравнивание может выглядеть следующим образом:

Как отмечалось ранее, значение auto не является панацеей. Последний абзац в этом примере отображается справа налево, так как он начинается с арабской вязи, которая располагает «правильно?» слева от арабского текста.
3.2.5.7 Атрибут
Каждый HTML элемент может иметь атрибут class .
Атрибут, если он указан, должен иметь значение, которое представляет собой набор разделённых пробелами лексем, представляющих различные классы, которым принадлежит элемент.
Классы, присваиваемые HTML элементу, только тогда являются набором, состоящим из всех классов, когда значение атрибута class разделено пробелами. (Повторения игнорируются.)
Присваиваемые элементу классы влияют на класс соответствующих CSS селекторов, метод getElementsByClassName() в DOM, и другие подобные функции.
Нет никаких дополнительных ограничений на использование авторами маркеров классов в атрибуте class , но при этом авторам рекомендуется использовать значения, описывающие характер содержимого, а не значения, которые описывают желаемое представление контента.
IDL атрибуты и , определенные в DOM спецификации, возвращают содержимое атрибута class . [DOM]
3.2.5.8 Атрибут
Все HTML элементы могут иметь атрибут style . Этот атрибут является атрибутом CSS стилей, определённых спецификацией CSS Синтаксиса Атрибута Стиля. [CSSATTR]
В агентах пользователей, поддерживающих CSS, значение атрибута должно быть принято во внимание в том числе, когда элементу задаётся данный атрибут или изменяется значение уже заданного атрибута , в соответствии с правилами, заданными для стилевых атрибутов CSS. [CSSATTR]
Документы, которые используют атрибуты style в своих элементах, должны быть понятными и пригодными, даже в случае удаления этих атрибутов.
В частности, с помощью атрибута style можно скрывать и показывать содержимое элемента, а так же передавать смысл который из-за несоответствия мог бы и не быть включён в документ. (Для скрытия и отображения содержимого элемента используйте атрибут hidden .)
Возвращает CSSStyleDeclaration объект для элементов с атрибутом style .
IDL атрибут определён в спецификации Объектной Модели CSS (CSSOM). [CSSOM]
В следующем примере, слова, которые относятся к цветам, размечены с помощью span элемента и атрибута style , чтобы придать данным словам соответствующие цвета в визуальных медиа.
Мой тренировочный костюм зелёного цвета, а мои глаза синего цвета.
3.2.5.9 с помощью атрибутов data-* 
является атрибутом вне пространства имён, имя которого начинается со строки «», сам он имеет, по крайней мере, один символ дефиса, является XML-совместимым, и не содержит прописных ASCII букв.
Все имена атрибутов HTML-элементов в HTML-документах получают автоматически ASCII-нижний регистр, поэтому ограничения на прописные ASCII буквы не влияет на подобные документы.
Атрибуты пользовательских данных предназначены для хранения пользовательских данных частной страницы или приложения, для которых больше нет соответствующих атрибутов или элементов.
Эти атрибуты не предназначены для использования программным обеспечением, которое не зависит от сайта, на котором используются данные атрибуты.
Например, на сайте о музыке могут быть прокомментированы элементы списка, указывающие треки в музыкальном альбоме с пользовательскими атрибутами данных, содержащими длину каждого трека. Эта информация затем может быть использована самим сайтом, чтобы позволить пользователю отсортировать список по длине дорожки, или чтобы отфильтровать список треков по заданной длине.
Однако, было бы неправильно, если бы пользователь использовал стороннее программное обеспечение, которое не связано с этим музыкальным сайтом, для поиска треков определенной длины по указанным данным.
Это потому, что эти атрибуты предназначены для использования собственными скриптами сайтов, и не является универсальным механизмом расширения публично используемых метаданных.
Каждый HTML-элемент может иметь любое количество атрибутов пользовательских данных, указывающих любое значение.
Возвращает объект DOMStringMap для элементов с атрибутами data-* .
Комбинированные имена преобразуются с изменением регистра. Например, data-foo-bar=»» становится element.dataset.fooBar .
IDL атрибут предоставляет удобные средства доступа для всех data-* атрибутов элемента. При указании, IDL атрибут dataset должен вернуть DOMStringMap объект, связанный следующими алгоритмами, которые показывают данные атрибуты на своём элементе:

Пусть списком будет пустой список пар имя-значение.
Для каждого содержащегося в элементе атрибута первые пять символов являются строкой » data- » чьи остальные символы (если таковые имеются) не являются любыми прописными ASCII буквами, в том порядке, в котором эти атрибуты, перечисляются в списке атрибутов элемента, добавляют пару имя-значение в список , чьё имя является именем атрибута без первых пяти символов и значением которого является значение атрибута.
Для каждого имени в списке с символом «-» (U+002D) в имени, за которым следует строчная ASCII буква, удаляется символ «-» (U+002D), а так же заменяется символ, который следовал за ним на такой же символ, преобразованный в ASCII символ верхнего регистра.
Возвращает список .


Пусть name будет именем переданным алгоритму.
Пусть value будет значением переданным алгоритму.
Если name содержит символ «-» (U+002D) сопровождаемый строчными ASCII буквами, выдаётся ошибка SyntaxError и отменяются следующие действия.
Перед каждой прописной ASCII буквой в name , вставляется символ «-» (U+002D) и эта буква заменяется на такую же преобразованную ASCII букву только нижнего регистра.
Строка data- вставляется в переднюю часть name .
Установить значение атрибута с именем name , к значению value , заменив все предыдущие значения, если атрибут уже существует. Если setAttribute() выдаст ошибку, устанавливая атрибут с именем name , то на это должно быть выдано то же исключение/ошибку.


Пусть name будет именем, передающимся в алгоритм. name contains a «-» (U+002D) character followed by a lowercase ASCII letter , throw a SyntaxError exception and abort these steps. —>
Перед каждой прописной ASCII буквой в name , вставляется символ «-» (U+002D) и эта буква заменяется на такую же преобразованную ASCII букву только нижнего регистра.
Строка data- вставляется в переднюю часть name .
Удаляется атрибут с именем name , если такой атрибут существует. В противном случае ничего не делается.

Этот алгоритм будет получать только вызванную WebIDL спецификацию для имён, которые даются ранее алгоритма для получения списка пар имя-значение. [WEBIDL]
Каждый раз должен возвращаться один и тот же объект.
Если бы на веб-странице необходимо было создать из элемента этой страницы космический корабль, например как часть какой-нибудь игры, то можно было бы использовать атрибут class наряду с атрибутами data-* :
x="30" data-y="10" data-z="90"> Огонь 
Обратите внимание, как в API название атрибута, написанное через дефис, преобразуется с изменением регистра некоторых символов.
Авторы должны настолько тщательно разработать подобные расширения, что бы в случае, когда атрибуты игнорируются и любые указываемые CSS перестают работать, страница всё еще была бы пригодна к использованию.
Агенты пользователей не должны обладать информацией о каком-либо выполнении этих атрибутов или значений. Спецификации, предназначенные для агентов пользователей не должны определять эти атрибуты имеющие любые смысловые значения.
JavaScript библиотеки могут использовать атрибуты пользовательских данных, так как они считаются частью страницы, на которой они используются. Авторам библиотек, которые используются многими другими авторами, предлагается включить своё название в имена атрибутов, чтобы снизить риск совпадений. Там где это имеет смысл, в библиотеке также рекомендуется сделать название, используемое в именах атрибутов настраиваемым, так чтобы библиотеки, авторы которых неосознанно выбрали то же название, могли бы использовать эти имена на одной странице, а так же, что бы несколько версий конкретной библиотеки, могли бы быть использованы на той же странице, даже если эти версии являются не совместимыми.
Например, библиотека называемая «DoQuery» может использовать имена атрибутов, такие как data-doquery-range , а библиотека называемая «jJo» может использовать имена атрибутов, такие как data-jjo-range . Также в библиотеке jJo может быть предусмотрен свой API, который устанавливает собственную приставку для использования (например, J.setDataPrefix(‘j2’) создаёт атрибуты, которые имеют название типа data-j2-range ).
Основы HTML
HTML (Hypertext Markup Language) — это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.
Что такое HTML на самом деле?
HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:
Моя кошка очень раздражена
Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:
p>Моя кошка очень раздраженаp> 
Анатомия HTML элемента
Давайте рассмотрим элемент абзаца более подробно.
 
Главными частями нашего элемента являются:

Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, «p»), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
Контент (Content): Это контент элемента, который в данном случае является просто текстом.
Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.

Элементы также могут иметь атрибуты, которые выглядят так:
 
Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
Атрибут всегда должен иметь:

Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
Имя атрибута, за которым следует знак равенства.
Значение атрибута, заключённое с двух сторон в кавычки.

Вложенные элементы
Вы также можете располагать элементы внутри других элементов — это называется вложением. Если мы хотим заявить, что наша кошка очень раздражена, мы можем заключить слово «очень» в элемент , который указывает, что слово должно быть сильно акцентированно:
p>Моя кошка strong>оченьstrong> раздражена.p> 
Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент , затем элемент , потом мы должны закрыть сначала элемент , затем . Приведённое ниже неверно:
p>Моя кошка strong>очень раздражена.p>strong> 
Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!
Пустые элементы
Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмём элемент , который уже имеется в нашем HTML:
img src="images/firefox-icon.png" alt="Моё тестовое изображение" /> 
Он содержит два атрибута, но не имеет закрывающего тега , и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.
Анатомия HTML документа
Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):
doctype html> html> head> meta charset="utf-8" /> title>Моя тестовая страницаtitle> head> body> img src="images/firefox-icon.png" alt="Моё тестовое изображение" /> body> html> 

— доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
— элемент . Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
— элемент . Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
— элемент . В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то ещё.
— этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
— элемент . Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.

Изображения
Давайте снова обратим наше внимание на элемент изображения:
img src="images/firefox-icon.png" alt="Mоё тестовое изображение" /> 
Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута src (source, источник), который содержит путь к нашему файлу изображения.
Мы также включили атрибут alt (alternative, альтернатива). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, по следующим причинам:

У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.
Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте src , сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:

 
Альтернативный текст — это «пояснительный текст». Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст «My test image» («Моё тестовое изображение») не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет «The Firefox logo: a flaming fox surrounding the Earth» («Логотип Firefox: огненный Лис вокруг Земли»).
Сейчас попробуйте придумать более подходящий альтернативный текст для вашего изображения.
Примечание: Узнайте больше о специальных возможностях.
Разметка текста
В этом разделе рассмотрим некоторые из основных HTML элементов, которые вы будете использовать для разметки текста.
Заголовки
Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков  (en-US)–  (en-US), хотя обычно вы будете использовать не более 3-4 :
h1>Мой главный заголовокh1> h2>Мой заголовок верхнего уровняh2> h3>Мой подзаголовокh3> h4>Мой под-подзаголовокh4> 
Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше элемента .
Абзацы
p>Это одиночный абзацp> 
Добавьте свой образец текста (вы создавали его в статье Каким должен быть ваш веб-сайт?) в один или несколько абзацев, расположенных прямо под элементом .
Списки
Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:

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

Каждый пункт внутри списков располагается внутри элемента (list item, элемент списка).
Например, если мы хотим включить часть следующего фрагмента абзаца в список:
p> Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе . p> 
Мы могли бы изменить разметку на эту:
p>Mozilla, мы являемся мировым сообществомp> ul> li>технологовli> li>мыслителейli> li>строителейli> ul> p>работающих вместе . p> 
Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.
Ссылки
Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — — a это сокращение от «anchor» («якорь»). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:

Выберите некоторый текст. Мы выбрали текст «Манифест Mozilla».
Оберните текст в элемент , например так:


a>Манифест Mozillaa> 
a href="">Манифест Mozillaa> 
a href="https://www.mozilla.org/ru/about/manifesto/details/" >Манифест Mozillaa > 
Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите https:// или http:// часть, называемую протоколом. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.
Примечание: href сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как hypertext reference («гипертекстовая ссылка»).
Теперь добавьте ссылку на вашу страницу, если вы ещё не сделали этого.
Заключение
Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете посмотреть её здесь):
 
Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на GitHub.
Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу Обучение HTML: руководства и уроки.
Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 2 дек. 2023 г. by MDN contributors.
Your blueprint for a better internet.


Похожие публикации:

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