Тег предназначен для разработки заголовка к таблице и может размещаться только внутри контейнера
, причем сразу после открывающего тега. Такой заголовок представляет собой контент, по умолчанию отображаемый перед таблицей и описывающий ее содержание.
Синтаксис
Параметры
Закрывающий тег
Пример 1. Использование тега
ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Результат данного примера показан ни рис. 1.
Рис. 1. Вид заголовка таблицы в браузере Опера
Описание параметров тега
Параметр ALIGN
Описание
Параметр align определяет выравнивание заголовка относительно таблицы. Результат его действия зависит от используемого браузера и установленного значения.
Синтаксис
Аргументы
Значение по умолчанию
center — для браузера Internet Эксплорер; top — для других браузеров.
Аналог CSS (ЦСС)
Пример 2. Выравнивание заголовка
ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Результат данного примера показан ни рис. 2.
Рис. 2. Размещение заголовка под таблицей
Параметр VALIGN
Описание
Синтаксис
Аргументы
Значение по умолчанию
Пример 3. Заголовок внизу таблицы
ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
HTML: Хорошая основа для доступности
Большая часть содержимого интернета может быть сделана доступной просто благодаря использованию правильных HTML-элементов по назначению. В этой статье подробно рассмотрено как HTML может быть использован для обеспечения максимальной доступности.
Необходимые знания:
Базовая компьютерная грамотность, базовое понимание HTML (смотрите Введение в HTML), и понимания, что такое доступность.
Цель:
Познакомиться с тем, какие особенности HTML способствуют доступности, и как использовать их на ваших веб-страницах должным образом.
HTML и доступность
По мере изучения HTML: чтения статей, просмотра примеров и т.д., вы заметите одну общую тему — важность использования семантического HTML (иногда называемого POSH (Plain Old Semantic HTML), или «старый добрый семантический HTML»). Это означает использование HTML-элементов по назначению насколько это возможно.
Вы спросите, почему это так важно? В конце концов, можно использовать комбинацию CSS и JavaScript, чтобы заставить почти любой HTML-элемент вести себя так, как вы захотите. Например, кнопка для воспроизведения видео на вашем сайте может быть обозначена вот так:
Но, как вы увидите далее, в данном случае намного логичнее использовать правильный элемент:
Вёрстка с помощью семантического HTML не займёт больше времени, чем с помощью не семантического (плохого) HTML, если делать это последовательно с самого начала проекта, и это также имеет другие преимущества помимо доступности:
Давайте рассмотрим доступный HTML более детально.
Примечание: Желательно, чтобы у вас был установлен скринридер, чтобы вы могли тестировать примеры, приведённые ниже. Посмотрите наше Руководство по скринридерам для более подробной информации.
Хорошая семантика
Мы уже говорили о важности хорошей семантики, и почему нам стоит использовать HTML-элементы по назначению. Это нельзя игнорировать, поскольку это одно из основных мест, где ломается доступность из-за плохой семантики, если должным образом не уделять внимания.
В интернете люди делают очень странные вещи с HTML разметкой. Некоторые злоупотребляют HTML, используя устаревшие практики, которые не были полностью забыты, а некоторые просто не знают. В любом случае, вам стоит заменить по возможности плохой код, где бы вы его не увидели.
У вас не всегда есть возможность избавиться от плохой вёрстки: ваши страницы могут быть сгенерированы каким-нибудь фреймворком на стороне сервера, над которым у вас нет полного контроля, или на страницах есть сторонний контент (такой как рекламные баннеры), которые вы также не контролируете.
Цель не «всё или ничего», однако — каждое улучшение, которое вам под силу сделать, поможет обеспечить доступность.
Текстовый контент
Одно из самых лучших вспомогательных средств доступности для пользователя скринридера — хорошая структура заголовков, параграфов, список и т.д. Пример хорошей семантики может выглядеть так:
Мы подготовили версию с длинными текстом, чтобы вы попробовали со скринридером (смотрите good-semantics.html). Если вы попробуете поперемещаться, то увидите, как легко ориентироваться на странице:
Иногда люди используют презентационные элементы HTML и перенос строки, чтобы написать заголовки или параграфы:
Если вы попробуете полную версию с помощью скринридера (смотрите bad-semantics.html), вам не слишком это понравится: скринридеру нечего использовать как ориентир, поэтому вы не сможете получить содержание, а вся страница для скринридера — это один большой блок, поэтому он озвучит всё за один раз, без остановок.
Есть и другие проблемы, помимо доступности — сложнее стилизовать контент, используя CSS, или манипулировать им с помощью JavaScript, например, потому что там нет элементов, которые можно использовать как селекторы.
Использование понятного языка
Язык, который вы используете, также может влиять на доступность. В целом, лучше использовать понятный язык, который не слишком сложный, и который не использует ненужные жаргоны и сленг. Это помогает не только людям с когнитивными или другими нарушениями, но и читателям, для которых текст написан не на родном языке, молодым людям. на самом деле всем! Кроме этого, стоит избегать использование языка и символов, которые не могут быть чётко озвучено скринридером. Например:
Вёрстка
В старые недобрые времена, люди верстали с помощью HTML-таблиц: использовали различные табличные ячейки для размещения шапки, подвала, боковую панель, колонку с основным контентом и т.д. Это плохая идея, потому что скринридер, скорее всего, выдаст непонятную озвучку, особенно, если раскладка сложная и имеет много вложенных таблиц.
Посмотрите пример табличной вёрстки, открыв table-layout.html, которая выглядит примерно так:
Если вы попробуете поперемещаться с помощью скринридера, вероятно, он скажет вам, что перед вами таблица (хотя некоторые скринридеры могу различать табличную вёрстку от таблиц данных). После этого, скорее всего (в зависимости от того, какой скринридер вы используете), вам придётся переместиться в таблицу как в объект, посмотрев каждый элемент по отдельности, затем выйти из таблицы, чтобы продолжить перемещение по контенту.
Табличная вёрстка — пережиток прошлого, который имел смысл, когда поддержка CSS не была сильно распространена среди браузеров, но она создаёт путаницу среди пользователей скринридеров, и плоха по многим другим причинам (злоупотребление таблицами, пожалуй, требует больше разметки, делает дизайн менее гибким). Не делайте так!
Вы можете проверить эти утверждения, сравнив предыдущий опыт с более современной структурой веб-сайта, которая выглядит так:
Если вы попробуете нашу более современную структуру с помощью скринридера, вы увидите, что разметка больше не сбивает с толку скринридер. Она также более компактная с точки зрения размера кода, что означает, его легче поддерживать, а пользователям меньше скачивать (особенно для тех, у кого медленный интернет).
На что ещё стоит обратить внимание при вёрстке — это использование семантических HTML5 элементов, которые можно увидеть в примере выше (смотрите секционирование содержания): вы можно верстать, используя только вложенные
HTML-теги и атрибуты, о которых вы, возможно, не знали
Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.
address
Тег address определяет контактную информацию об авторе или владельце документа или статьи. Контактная информацию может включать в себя адрес электронной почты, адрес сайта, физический адрес, номер телефона, ссылки на аккаунты в социальных сетях и т.д.
audio
Тег audio используется для встраивания аудио-контента (музыка и др.) в веб-страницу.
video
Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.
Тег base определяет основной путь ( URL ) и/или цель ( target ) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:
blockquote и cite
Тег cite определяет название какой-либо работы (книги, стихотворения, песни, фильма, картины, скульптуры и т.д.). Он также может представлять из себя ссылку на источник цитаты.
Тег code используется для определения части компьютерного кода:
Для форматирования блока кода code часто используется совместно с тегом pre :
datalist
Тег datalist определяет список возможных вариантов для заполнения поля для ввода текста. Он позволяет реализовать «автозавершение» для элемента input : при установке фокуса на такое поле пользователь видит выпадающий список.
Свойство options объекта Datalist возвращает коллекцию всех элементов списка.
Внутри dd могут размещаться параграфы, изображения, ссылки, списки и т.д.
details
По умолчанию details находится в закрытом состоянии.
Внутри details могут размещаться любые теги.
Индикатором открытого состояния details является атрибут open (этот атрибут может использоваться в качестве CSS-селектора — details[open] или JavaScript-селектора — document.querySelector(‘[open]’) ).
dialog
Тег dialog определяет диалоговое окно. Он используется для создания «попапов» и модальных окон.
По умолчанию dialog находится в неактивном состоянии.
figure
Тег figure определяет обособленный (автономный) контент, такой как иллюстрации, диаграммы, фотографии, примеры кода и т.д.
Несмотря на то, что контент элемента figure формально относится к основному потоку (main flow), его позиция (местонахождение) не зависит от этого потока. Поэтому удаление элемента figure не должно влиять на поток документа.
meter
Тег meter определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, meter определяет меру чего-либо (gauge).
Этот тег не должен использоваться в качестве индикатора прогресса.
Так можно записать уровень заряда батареи вашего устройства в значение meter :
progress
Тег progress определяет процесс выполнения задачи.
Этот тег не должен использоваться для определения меры чего-либо.
Так можно реализовать десятисекундный таймер:
output
Тег output используется для представления результата вычислений.
picture
Тег picture предоставляет возможность использования нескольких источников для изображения (нескольких изображений).
Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.
template
Тег template используется в качестве контейнера для разметки, которая не отображается при загрузке страницы.
Этот тег предназначен для хранения разметки, которая используется часто, но в определенных случаях (по запросу).
Тег time определяет конкретное время (или дату и время).
Атрибут datetime используется для представления времени в машиночитаемом формате.
noscript
Другие теги в форме шпаргалок
Семантическое «секционирование» страницы
Стилизация текста
Форма
Поля для ввода данных
Пример валидации адреса электронной почты и пароля:
Таблица
Теги colgroup и col могут использоваться для стилизации определенных колонок таблицы целиком вместо стилизации каждой ячейки и строки по отдельности.
Послесловие
Наши виртуалки можно использовать для разработки веб-сайтов.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!
Свойство caption (Формы Майкрософт)
Описательный текст, появляющийся на объекте, чтобы определить или описать его.
Синтаксис
объект. Подпись [= Строка]
Синтаксис свойства Caption состоит из следующих частей:
Part
Описание
object
Обязательный. Допустимый объект.
String
Необязательное. Строковое выражение, оцениваемое как текст, отображаемый в качестве заголовка.
Параметры
Параметром по умолчанию для элемента управления является уникальное имя, основанное на типе элемента управления. Например, CommandButton1 — это заголовок по умолчанию для первой кнопки команды в форме.
Примечания
Этот текст идентифицирует или описывает объект, с которым он связан. Для кнопок и меток свойство Caption определяет текст, появляющийся в элементе управления. Для объектов Page и Tab это свойство определяет текст, появляющийся на вкладке.
Если заголовок элемента управления оказывается слишком длинным, заголовок усекается. Если заголовок формы оказывается слишком длинным для строки заголовка, заголовок отображается с многоточием.
Свойство ForeColor элемента управления определяет цвет текста заголовка.
Если у элемента управления есть свойства Caption и AutoSize, задание для свойства AutoSize значения True автоматически настраивает размер элемента управления так, чтобы в нем помещался весь заголовок.
См. также
Поддержка и обратная связь
Есть вопросы или отзывы, касающиеся Office VBA или этой статьи? Руководство по другим способам получения поддержки и отправки отзывов см. в статье Поддержка Office VBA и обратная связь.
The basic tag is written like this with the caption text inserted between the opening and closing tags.
The tag must be inserted immediately after the tag. A table should have no more than one caption.
Example
The following example shows the element in action. You can modify the code (on the left) and click «Refresh» to see your changes take effect (on the right).
Attributes
The tag accepts the following attributes. Try adding some to the above example to see how it affects the display/behavior of the element.
Attributes Specific to the Element
Global Attributes
The tag accepts the following global attributes. These attributes are standard across all HTML 5 tags.
Attribute
Description
accesskey
Specifies a shortcut key that can be used to access the element.
[Any string of characters. This string of characters specifies the key/s the user needs to use in order to access the element.]
autocapitalize
Specifies whether and how text input is automatically capitalized as it is entered/edited by the user.
Custom data attributes are intended to store custom data, state, annotations, and similar, private to the page or application, for which there are no more appropriate attributes or elements.
dir
Specifies the direction of the text.
Value
Description
ltr
Specifies that the text should read left to right.
rtl
Specifies that the text should read right to left.
auto
Specifies that the text direction should be determined programatically using the contents of the element.
draggable
Specifies whether the user is allowed to drag the element or not.
Value
Description
true
Specifies that the element is draggable.
false
Specifies that the element is not draggable.
auto
Uses the default behavior of the user agent/browser. This is the default value.
dropzone
Specifies what should happen when the user «drops» an element (i.e. after dragging it) onto the current element.
Must be an unordered set of unique space-separated tokens that are ASCII case-insensitive.
Value
Description
copy
Results in a copy of the dragged data. Default value.
move
Results in the data being moved to the new location.
link
Results in a link to the original data.
Any keyword with eight characters or more, beginning with the an ASCII case-insensitive match for the string » string: «
Specifies that items with the drag data item kind Plain Unicode string and the drag data item type string set to a value that matches the remainder of the keyword are accepted.
Any keyword with six characters or more, beginning with an ASCII case-insensitive match for the string » file: «
Allows you to specify which file types can be processed (i.e. copied, moved or linked) in this dropzone. Example: dropzone=»copy file:image/png file:image/gif file:image/jpeg»
Note that this attribute must not have more than one of the three feedback values (copy, move, and link) specified. If none are specified, the copy value is implied.
Indicates that the element is not yet, or is no longer, relevant. The browser/user agent does not display elements that have the hidden attribute present.
This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either hidden or hidden=»hidden» ).
For example, a block of text that has been marked with the inert attribute may not be searchable when the user attempts a browser text search (eg, commonly called «Find in page» or similar). The text may not be able to be targetted for user interaction events (such as mouseover etc), and the user may not be able to select the block of text.
This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either inert or inert=»inert» ).
The itemid attribute can only be present in elements that include both the itemscope and the itemtype attributes, as long as the itemtype attribute specifies a vocabulary that supports global identifiers for items, as defined by that vocabulary’s specification.
itemprop
Provides one or more properties to one or more «items».
Although the itemprop attribute is optional and can be used on any HTML element, if used it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, representing the names of the name-value pairs that it adds. The attribute’s value must have at least one token. According to the HTML5 specification, each token must be one of the following:
Also, Specifications that introduce defined property names that are not absolute URLs must ensure all such property names contain no U+002E FULL STOP characters (.), no U+003A COLON characters (:), and no space characters.
Used in conjunction with the itemscope attribute, the itemref attribute provides a list of additional elements to crawl to find the name-value pairs of the «item». Although the itemref attribute is optional, if specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, consisting of IDs of elements in the same home subtree. Also, the itemref can only be used on elements that also have the itemscope attribute present.
HTML5 elements that have the itemscope attribute create a name-value pair called an «item». Elements with an itemscope attribute may also have an itemtype attribute specified, to give the item types of the item.
This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either itemscope or itemscope=»itemscope» ).
The itemtype attribute must only be present in elements that include the itemscope attribute.
lang
Sets the language code to be used.
[Must be a valid RFC 3066 language code, or an empty string.]
spellcheck
Specifies whether the element should have its spelling checked.
Value
Description
[Empty string]
The element should have its spelling checked.
true
The element should have its spelling checked.
false
The element should not have its spelling checked.
If this attribute is missing, the element will use the default behavior, possibly based on the parent’s own spellcheck state.
Assigns a slot to an element: an element with a slot attribute is assigned to the slot created by the slot element whose name attribute’s value matches that slot attribute’s value — but only if that slot element finds itself in the shadow tree whose root’s host has the corresponding slot attribute value.
style
Specifies inline styles for the element. The value should be the style definition you wish to use.
tabindex
Helps determine the tabbing order (when the user ‘tabs’ through the elements on the page).
title
Specifies a title to associate with the element. Many browsers will display this when the cursor hovers over the element (similar to a «tool tip»).
[Any text to be displayed as a «tool tip».]
translate
Specifies whether the element’s attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.
The translate attribute is an enumerated attribute and may contain the following possible values:
If the translate attribute is provided, but its value is missing or is invalid, the element will inherit its value from its parent element.
Event Handler Content Attributes
An event handler content attribute is an attribute for a specific event handler.
The HTML specification includes the following event handler content attributes. Most can be used on all HTML elements, but there are exceptions, as outlined below.
Event Handlers for All HTML Elements & document & window Objects
The following table lists the event handlers supported by all HTML elements, as both event handler content attributes and event handler IDL attributes; and supported by all Document and Window objects, as event handler IDL attributes.
Attribute
Description
onblur
User has left the focus of the element.
onerror
Invoked when an error occurs while the Window object is being loaded. Also handler for script error notifications.
onfocus
Invoked when the focus is on the element.
onload
The element has loaded.
onresize
The viewport has been resized.
onscroll
scroll event handler. Invoked when the element’s scrollbar is being scrolled.
Attribute
Description
onafterprint
afterprint event handler
onbeforeprint
beforeprint event handler
onbeforeunload
beforeunload event handler
onhashchange
hashchange event handler. The hashchange event is fired when navigating to a session history entry whose URL differs from that of the previous one only in the fragment identifier.
onlanguagechange
languagechange event handler.
onmessage
message event handler.
onmessageerror
messageerror event handler.
onoffline
offline event handler.
ononline
online event handler.
onpagehide
pagehide event handler. The pagehide event is fired when traversing from a session history entry.
onpageshow
pageshow event handler. The pageshow event is fired when traversing to a session history entry.
onpopstate
popstate event handler. The popstate event is fired when navigating to a session history entry that represents a state object.
onrejectionhandled
rejectionhandled event handler.
onstorage
storage event handler.
onunhandledrejection
unhandledrejection event handler.
onunload
unload event handler.
The following are the event handlers supported by all HTML elements, as both event handler content attributes and event handler IDL attributes; and supported by all Document objects, as event handler IDL attributes:
Attribute
Description
oncut
cut event handler.
oncopy
copy event handler.
onpaste
paste event handler.
The following event handler is supported on Document objects as an event handler IDL attribute.
Internet Explorer
Netтscape
Опера
Safari
Mozilla Firefox
