Главная » Языки программирования

Main content html css

Содержание
  1. Элемент main
  2. История
  3. Спецификация W3C
  4. Подробности
  5. Приступим
  6. Использование элемента на сайте HTML5 Doctor
  7. Версия WHATWG
  8. Поддержка браузерами
  9. Выводы
  10. Материалы для дальнейшего чтения
  11. Most Popular Browsers
  12. Google Chrome
  13. Mozilla Firefox
  14. Microsoft Edge
  15. Definition and Usage
  16. Browser Support
  17. HTML Tag
  18. Syntax
  19. Example of the HTML tag:
  20. Result
  21. Attributes
  22. How to style tag?
  23. Common properties to alter the visual weight/emphasis/size of text in tag:
  24. Coloring text in tag:
  25. Text layout styles for tag:
  26. Other properties worth looking at for tag:
  27. Browser support

Элемент main

Элемент недавно был официально добавлен в спецификацию HTML W3C. Теперь, когда шумиха по этому поводу немного улеглась, настало время разобраться, где и когда имеет смысл его использовать. Итак, приступим.

История

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

Стив Фолкнер (Steve Faulkner), консультант по вопросам доступности материалов и один из редакторов проекта html5 doctor, потрудился собрать данные, примеры использования и пообщался с разработчиками. По словам Стива, он говорил:

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

«Предложение» было принято в ноябре 2012, и тег был добавлен в спецификацию HTML 5.1. Недавно он был добавлен еще и в спецификацию HTML5, что ни у кого не вызвало возражений. Давайте посмотрим, что спецификация говорит об элементе .

Читайте также:  Java with android studio

Спецификация W3C

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

Основное назначение элемента в том, чтобы привязать значение main атрибута role ARIA к определенному элементу HTML. Это поможет скринридерам и прочим вспомогательным технологиям определять, где начинается основное содержание документа. Спецификация W3C описывает следующим образом:

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

Так как элемент теперь является частью спецификации HTML, то элемент возвращает себе определение, которое было в спецификации HTML4.

Элемент body заключает в себе содержимое документа.

Подробности

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

Что касается спецификации, то если вы попытаетесь использовать больше одного элемента в документе, валидатор W3C выведет ошибку.

Кроме того, не может быть потомком элементов , , , , или .

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

Приступим

Так же, как и при появлении множества других новых элементов HTML5, не все браузеры распознают и содержат стили для него. Чтобы быть уверенным, что они есть, стоит добавить в CSS правило, которое сделает main блочным элементом.

Кроме того, для старых IE вам понадобится создать элемент c помощью JavaScript:

script>document.createElement('main'); script>

Естественно, если вы используете html5shiv, в него уже включен.

Использование элемента на сайте HTML5 Doctor

Самый простой способ использовать — заменить им , который вы, скорее всего, пометили id или class со значениями вроде main или content .

Так как это выглядит на практике? Ну, ниже представлена разметка HTML5 Doctor до имплементации .

body> header role="banner"> [. ] header> div id="content" class="group" role="main"> [. ] div> footer role="contentinfo"> [. ] footer> body>

И вот так она выглядит сейчас:

body> header role="banner"> [. ] header> main id="content" class="group" role="main"> [. ] main> footer role="contentinfo"> [. ] footer> body>

id=»content» мы в определенный момент тоже убрали.

Да, все действительно настолько просто. В самом худшем случае для имплементации не потребуется и пяти минут.

Версия WHATWG

Определение элемента , которое дает WHATWG, отличается от определения элемента по версии W3C тем, что WHATWG не наделяет его определенным значением. Это не более, чем элемент, который используется для применения стилей (что-то вроде нового ), и с точки зрения семантики представляет то, что содержит.

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

Мы рекомендуем использовать элемент согласно версии W3C, описанной выше.

Поддержка браузерами

Firefox 21, Chrome 26, и WebKit r140374 обеспечивают базовую поддержку элемента .

Они все по умолчанию присваивают элементу role=»main» ARIA, чтобы вспомогательные технологии могли без проблем распознать его.

Выводы

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

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

Материалы для дальнейшего чтения

Аватар

  • Sitepoint — Элемент main HTML5
  • MDN — main
  • Ян Делвин (Ian Devlin) — элемент main
  • Брюс Лоусон (Bruce Lawson) — Использование элемента main
  • Filament Group — элемент main
  • W3C — Примеры использования элемента main
  • Web Monkey — элемент main получает главную роль в html
  • Web Monkey — элемент main поможет html перейти к сути

Оригинальная статья: The main element Статью вычитывали: smolnikov, visitorFM, SilentImp

Кроме материалов, опубликованных под лицензией Creative Commons

Источник

Chrome, Firefox, and Edge are the most used browsers today.

Google Chrome

Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world’s most popular web browser today!

Mozilla Firefox

Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.

Microsoft Edge

Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.

More «Try it Yourself» examples below.

Definition and Usage

The tag specifies the main content of a document.

The content inside the element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

Note: There must not be more than one element in a document. The element must NOT be a descendant of an , , , , or element.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
26.0 12.0 21.0 7.0 16.0

Источник

HTML Tag

This element doesn’t affect the DOM’s concept of the page’s structure, unlike such elements as , , and others.

Assistive technology can use landmarks for quickly identifying and navigating to the document’s large sections. It is recommended to use the element and not to declare role=»main».

Assistive technology user can skip large sections of repeated content using “skipnav” technique. This allows the user to easily access a page’s main content. If you add an id attribute to the element, it will be the target of a skip navigation link.

Syntax

The

tag comes in pairs. The content is written between the opening (
) and closing (
) tags.

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> main> h1>Programming languages h1> p> Languages HTML and CSS are intended for site layout. p> article> h2>HTML h2> p> HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages. p> p>. p> p>. p> article> article> h2>CSS h2> p> CSS is a language of styles, defining the display of HTML documents. p> p>. p> article> main> body> html>

Result

main tag example

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

Источник

Оцените статью