Как поймать льва в пустыне?

Html тег на главную страницу

Документ не должен иметь более одного элемента у которого не указан атрибут hidden .

Категории контента	Основной поток, явный контент.
Допустимое содержимое	Основной поток.
Пропуск тегов	Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
Допустимые родители	Те, в которых разрешается контент основного потока в качестве содержимого, но только если это иерархически корректный main элемент.
Допустимые ARIA-роли	Роль main применяется к по умолчанию, и роль presentation (en-US) также разрешена.
DOM-интерфейс	HTMLElement

Атрибуты

К этому элементу применимы только глобальные атрибуты.

Примечание

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

не вносит вклад в структуру документа; то есть, в отличие от таких элементов, как , заголовков, таких как (en-US) и т.п., не влияет на концепцию DOM структуры страницы. Он носит исключительно информативный характер.

Пример

main> h1>Яблокиh1> p>Яблоко - плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.p> article> h2>Сорт "Ред Делишес"h2> p>Эти ярко-красные яблоки являются одними из самых популярных в Соединённых Штатах.p> p>. p> p>. p> article> article> h2>Сорт "Гренни Смит";/h2> p>Эти сочные, зелёные яблоки являются одними из самых популярных в мире.p> p>. p> p>. p> article> main> 

Результат

Проблемы доступности

Ориентир

Элемент ведёт себя как роль-ориентир main (en-US) . Ориентиры могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент вместо объявления role=»main» , если не нужна поддержка старых браузеров.

Пропуск навигации

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

Добавление атрибута id в элемент позволяет ему становится целью для ссылки пропуска навигации.

body> a href="#main-content">Перейти к основному контентуa> main id="main-content"> main> body> 

Режим чтения

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

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

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

BCD tables only load in the browser

Элемент широко поддерживается. Для Internet Explorer 11 и ниже предлагается добавить роль ARIA «main» в элемент , чтобы обеспечит его доступность (программы для чтения с экрана, такие как JAWS, используемые совместно со старыми версиями Internet Explorer, смогут понять семантическое значение элемента после добавления атрибута role ).

Смотрите также

Found a content problem with this page?

This page was last modified on 17 июл. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

Главная страница

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

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

Первое значение 0.9em означает размер шрифта, второе после слэша интерлиньяж, а после пробела следует набор шрифтов, которые следует использовать на странице. Если первый идущий шрифт Arial не будет найден в операционной системе, браузер начнёт искать шрифт Helvetica. Если и он не обнаружится, будет выбран любой другой рубленый шрифт, или как их ещё называют, без засечек.

Блок с предупреждением

В этом блоке используется два изображения: одно для головы, второе для заголовка текста (рис. 6.12).

Рис. 6.12. Блок с предупреждением

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

Метод 1. Использование обтекания

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

Пример 6.18. Блок с предупреждением

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

В стилях для изображения головы ставится свойство float со значением left , а тексту заголовка и абзаца смещение левого края через margin-left . Для отмены обтекания к warning добавляется overflow со значением hidden .

section header < background: none; /* Убираем фон */ >.warning < overflow: hidden; /* Отменяем обтекание */ margin: 30px 0; /* Отступ сверху и снизу */ >.voodoohead < float: left; /* Обтекание справа */ >.warning H1, .warning P < margin: 0 0 0 70px; /* Отступы */ >

Метод 2. Фоновая картинка

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

section header < background: none; /* Убираем фон */ >.warning < overflow: hidden; /* Отменяем обтекание */ margin: 30px 0; /* Отступ сверху и снизу */ background: url(images/head.png) no-repeat; min-height: 92px; /* Минимальная высота */ >.warning H2, .warning P < margin: 0 0 0 70px; /* Отступы */ >

Также следует добавить свойство min-height , чтобы при уменьшении высоты блока фоновая картинка не обрезалась. Значение равно высоте изображения head.png.

Блок со ссылками

Каждый блок со ссылкой и её описанием обрамлён тегом , сама ссылка располагается внутри тега , который в свою очередь находится внутри . Такая логика может показаться странной — зачем нам , когда на странице он уже есть, и к чему столько тегов ? В HTML5 своя логика построения структуры документа, которая отличается от привычной схемы HTML4. В предыдущей версии HTML иерархия блоков строилась на основе тегов . . Соответственно, задавал заголовок страницы, и подзаголовки. Чтобы схема документа строилась правильно, на странице должен быть только один . Спецификация HTML5 устанавливает алгоритм генерации схемы документа, включающий в себя новые семантические теги. Этот алгоритм говорит, что теги и создают новый раздел. А в HTML5 каждый раздел может содержать собственный тег .

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

В стилях устанавливаем цвет ссылок через свойство color , цвет ссылок при наведении на них курсора мыши с помощью псевдокласса :hover и параметры заголовка .

a < color: #1b75bc; /* Цвет ссылок */ >a:hover < color: #d6562b; /* Цвет ссылок при наведении */ >a img < border: none; /* Прячем границу вокруг изображений-ссылок */ >section h1 < font-size: 1.5em; /* Размер текста */ font-weight: normal; /* Нормальное начертание */ margin-bottom: 0; /* Отступ снизу */ >

Теперь собираем вместе все наши разделы и получаем окончательный код главной страницы сайта (пример 6.19).

Пример 6.19. Главная страница

      
Читайте также:  Динамические свойства объекта php