- HTML Tag
- Syntax
- Example of the HTML tag:
- Result
- Example of the HTML tag in the HTML tag:
- Attributes
- How to style tag?
- Common properties to alter the visual weight/emphasis/size of text in tag:
- Coloring text in tag:
- Text layout styles for tag:
- Other properties worth looking at for tag:
- Browser support
- Следы невиданных зверей
- Браузеры
- См. также
- Как использовать секционные элементы HTML5
- Заключение
HTML Tag
The tag is one of the HTML5 elements. It is used to define an independent, self-contained content. An article should have its own meaning and be easily differentiated from the rest of the web page content.
In the case where the element is nested, the internal element represents an article that is related to the external element.
Multiple tags can be used in one HTML document.
Headers from to can be nested inside the tag. If the tag was not used before, then its placement is allowed.
The publication date and time of the tag can be described using a element with a datetime attribute.
Syntax
The
) tags.
Example of the HTML tag:
html> html> head> title>Title of the document title> head> body> article> h1>Title of the article h1> p>Text of the article p> article> body> html>Result
Example of the HTML tag in the HTML tag:
html> html> head> title>Title of the document title> head> body> section> h1>Articles about flowers h1> article> h2>Roses h2> p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration. p> article> article> h2>Lilies h2> p> Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants. p> article> section> body> html>Attributes
How to style tag?
Common properties to alter the visual weight/emphasis/size of text in tag:
- CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
- CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
- CSS font-size property sets the size of the font.
- CSS font-weight property defines whether the font should be bold or thick.
- CSS text-transform property controls text case and capitalization.
- CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.
Coloring text in tag:
- CSS color property describes the color of the text content and text decorations.
- CSS background-color property sets the background color of an element.
Text layout styles for tag:
- CSS text-indent property specifies the indentation of the first line in a text block.
- CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
- CSS white-space property specifies how white-space inside an element is handled.
- CSS word-break property specifies where the lines should be broken.
Other properties worth looking at for tag:
- CSS text-shadow property adds shadow to text.
- CSS text-align-last property sets the alignment of the last line of the text.
- CSS line-height property specifies the height of a line.
- CSS letter-spacing property defines the spaces between letters/characters in a text.
- CSS word-spacing property sets the spacing between words.
Browser support
Следы невиданных зверей
История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
Как использовать секционные элементы HTML5
Один славный малый Matt West c туманного альбиона, промышляющий фрилансом и предпринимательством, предложил нашему вниманию пост: «Как использовать секционные элементы HTML5».
Ниже приводится его перевод.
HTML5 предлагает набор секционных элементов, используя которые в своей разметке вы добавляете смысловую или семантическую нагрузку своим страницам, тем самым позволяя компьютерным программам лучше понимать их содержание.
Прочитав этот пост, вы научитесь применять секционные элементы на ваших веб-сайтах. Я постараюсь объяснить, в каких случаях лучше использовать тот или иной элемент и когда лучше прибегнуть к старому доброму
.
Давайте начнем.
Элемент main
Элемент должен содержать главный контент вашей вебстраницы. Причем, все содержимое должно быть уникально на странице и не должно отображаться где-либо еще на сайте.
Повторяющийся на нескольких страницах контент (логотип, окно поиска, ссылки в футере и т.д.) не следует помещать внутри элемента .
Ниже приводится пример представления главного содержимого страницы.
Журнал Rocking Stone Гитары
Величайшие гитары современности
Gibson SG
.
Fender Telecaster
.
Примечание: Мы использовали атрибут роли ARIA role=”main”, здесь он указывает на важность этого элемента тем программам, которые еще не поддерживают элемент (например, некоторые скринридеры).
Можно использовать только один элемент
на странице, который нельзя помещать внутри элементов , , , или .
Элемент article
Элемент должен содержать часть самодостаточной информации, которая может быть вырвана из контекста всей страницы без потери смысла. Это могут быть: новость, статья в блоге, комментарии пользователя.
Название статьи
Опубликовано: 13 февраля 2014
.
один в другой. Это будет означать, что вложенные элементы связаны с внешним элементом .
Название статьи
Опубликовано: 13 февраля 2014
.
.
.
Комментарии
Это была интересная статья
Как ты связываешь это с мировым превосходством?
.
Элемент aside
Элемент используется для выделения содержания, непосредственно связанного с окружающим контентом, но которое может рассматриваться и отдельно. Это могут быть боковые сноски (как в книгах), группы элементов , цифры или цитаты.
Компания Google покупает Nest
Опубликовано: 13 января 2014
.
.
, чтобы выделить информацию о компании Google в новостной статье. Эта информация может быть полезна читателю, но не связана напрямую с новостью.
Элемент header
Элемент используется для представления вводной части к статье или веб-странице. Обычно он содержит заглавие или какие-либо метаданные, относящиеся к данному контенту, например, дата публикации статьи или оглавление (внутри элемента ) для более длинного документа.
Элемент будет связан с ближайшим секционным элементом, обычно это прямой родитель в структуре страницы.
Компания Google покупает Nest
Опубликовано: 13 января 2014
содержит заголовок и дату публикации новостной статьи.
Элемент footer
Элемент используется для представления такой информации о разделе, как автор, авторские права, ссылки на связанные веб-страницы.
, элемент связан с ближайшим секционным элементом.
Элемент address
Элемент один из самых неправильно используемых элементов в HTML. Этот элемент предназначен не для разметки почтового адреса, а для представления контактной информации по статье или веб-странице. Это могут быть ссылки на сайт автора или его электронный адрес.
Контакты Matt West , который в свою очередь располагается внутри элемента .
Компания Google покупает Nest
Опубликовано: 13 января 2014
.
.
Заключение
В этом посте вы узнали как использовать секционные элементы HTML5 для разметки веб-страниц. Использование таких элементов имеет ряд преимуществ.
Одно из самых больших – это придание семантического значения определенным областям вашей веб-страницы, позволяющего компьютерным программам (скринридерам) идентифицировать ключевые элементы содержания и навигации.
Примечание: Пока еще не все скринридеры имеют поддержку семантических элементов. Чтобы обезопасить себя, вы можете продолжать использовать роли ARIA. Использование секционных элементов также помогает разработчикам больше задумываться о структуре своих веб-страниц.
Хотя выбор секционного элемента и очевиден, но он порождает важные вопросы о назначении и цели контента, а также, помогает понять, а относится ли вообще содержимое к этой странице?
Это пример того, как веб-стандарты помогают не только улучшить качество разметки, но и качество веб-страницы в целом.