Навигация по html странице: Ссылки внутри страницы | htmlbook.ru

Панель навигации — Учебник CSS — Schoolsw3.com

---

❮ Назад Далее ❯

---

Демонстрация: панелей навигации

Вертикальная

• Главная
• Новости
• Контакты
• О Нас

Горизонтальная

• Главная
• Новости
• Контакты
• О Нас

• Главная
• Новости
• Контакты
• О Нас

---

Панель навигации

Наличие простой в использовании навигации важно для любого веб сайта.

С помощью CSS вы можете превратить скучные HTML меню в красивые навигационные панели

---

Панель навигации = список ссылок

Панель навигации нуждается в стандартном HTML в качестве основы.

В наших примерах мы построим панель навигации из стандартного HTML списка.

Панель навигации — это в основном список ссылок, поэтому использование элементов <ul> и естественно <li>:

Пример

<ul>
  <li><a href=»index. php»>Главная</a></li>
  <li><a href=»news.php»>Новости</a></li>
  <li><a href=»contact.php»>Контакты</a></li>
  <li><a href=»about.php»>О Нас</a></li>
</ul>

Попробуйте сами »

Теперь давайте удалим маркеры, поля и отступы из списка:

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Попробуйте сами »

Пример объяснение:

• list-style-type: none; — Убирает маркеры. В панели навигации не нужны маркеры для списка
• Установить margin: 0; и padding: 0; чтобы удалить настройки браузера по умолчанию

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

---

Вертикальная панель навигации

Чтобы создать вертикальную панель навигации, нужно задать стиль элемента <a> в списке, к дополнению коду выше:

Пример

li a {
    display: block;
    width: 70px;
}

Попробуйте сами »

Объяснение примера:

• display: block;
  — Отображение ссылок в виде элементов блока составляет область кликабельных ссылок (не только текст), и позволяет указать ширину (и отступы, поля, высота и т. д. какие вы хотите)
• width: 60px; — Элементы блока занимают всю ширину, доступную по умолчанию. Мы хотим задать ширину 60 пикселей

Вы также можете установить ширину <ul> и удалить ширину <a>, поскольку они будут занимать всю ширину, доступную при отображении в виде элементов блока. Это приведет к тому же результату, что и в предыдущем примере:

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 70px;
}

li a {
    display: block;
}

Попробуйте сами »

---

Пример вертикальной панели навигации

Создание базовой вертикальной панели навигации с серым цветом фона и изменение цвета фона ссылок при наведении курсора мыши на них:

• Главная
• Новости
• Контакты
• О Нас

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
    background-color: #555;
    color: white;
}

Попробуйте сами »

Активная и текущая ссылка навигации

Добавьте класс . active к текущей ссылке, чтобы пользователь знал, на какой странице он находится:

• Главная
• Новости
• Контакты
• О Нас

Пример

.active {
    background-color: #4CAF50;

    color: white;
}

Попробуйте сами »

Центральные ссылки и добавить границы

Добавить выравнивание text-align:center в <li> или <a>ссылки по центру.

Добавить свойство border в <ul>. Добавить границы вокруг навигации. Если Вы также хотите установить границы внутри панели, нужно добавить border-bottom во все элементы <li>, за исключением последнего:

• Главная
• Новости
• Контакты
• О Нас

Пример

ul {
    border: 1px solid #555;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

Попробуйте сами »

Фиксированная вертикальная навигация

Создать в полную в высоту, «фиксированную» боковую панель навигации:

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* Полная высота */
    position: fixed; /* Сделайте его придерживаться, даже на прокрутки */
    overflow: auto; /* Включить прокрутку, если sidenav имеет слишком много содержимого */
}

Попробуйте сами »

Примечание: Этот пример может работать неправильно на мобильных устройствах.

---

Горизонтальная панель навигации

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

Встроенные элементы списка

Одним из способов построения горизонтальной панели навигации является указание элементов <li> как встроенные, кроме того в «стандартные» в коде выше:

Пример

li {
    display: inline;

}

Попробуйте сами »

Объяснение примера:

• display: inline; — По умолчанию, элементы <li> — это элементы блока. Здесь мы удалим разрывы строк до и после каждого элемента списка, чтобы отобразить их на одной линии

Плавающие элементы списка

Другой способ создания горизонтальной навигации, плавают элементы <li> им нужно указать расположение для навигационных ссылок:

Пример

li {
    float: left;
}
a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
}

Попробуйте сами »

Объяснение примера:

• float: left; — Использовать поплавок, чтобы заставить элементы блока плавать рядом друг с другом
• display: block; — Отображение ссылок в виде элементов блока составляет всю область кликабельных ссылок (не только текст), позволяет нам указывать отступы (и высоту, ширину, поля и т.
  д. если вы хотите)
• padding: 8px; — Поскольку элементы блока занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, укажите некоторые дополнения, чтобы сделать их выглядеть красиво
• background-color: #dddddd; — Добавить серый фон цвета к каждому элементу

Совет: Добавить background-color: #dddddd; в <ul> для каждого элемента <a>, чтобы цвет фона был на всю ширину:

Пример

ul {
    background-color: #dddddd;
}

Попробуйте сами »

---

Примеры горизонтальной панели навигации

Создание базовой горизонтальной панели навигации с темным цветом фона и изменение цвета фона ссылок при наведении курсора мыши на них:

• Главная
• Новости
• Контакты
• О Нас

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Измените цвет ссылки на #111 (черный) при наведении */
li a:hover {
    background-color: #111;
}

Попробуйте сами »

Активная и текущая ссылка навигации

Добавьте класс . active к текущей ссылке, чтобы пользователь знал, на какой странице он находится:

• Главная
• Новости
• Контакты
• О Нас

Пример

.active {
    background-color: #4CAF50;

}

Попробуйте сами »

Выравнивание списка по правому краю

Выравнивание ссылок по правому краю путем перемещения элементов списка вправо float:right;:

• Главная
• Новости
• Контакты
• О Нас

Пример

<ul>
  <li><a href=»#home»>Главная</a></li>
  <li><a href=»#news»>Новости</a></li>
  <li><a href=»#contact»>Контакты</a></li>
  <li><a class=»active» href=»#about»>О Нас</a></li>
</ul>

Попробуйте сами »

Разделители границ списка

Добавить свойство border-right в <li> для создания разделителей ссылок:

• Главная
• Новости
• Контакты
• О Нас

Пример

/* Добавление серой правой границы ко всем элементам списка, кроме последнего (последний ребенок) */

li {
    border-right: 1px solid #bbb;
}

li:last-child {
    border-right: none;
}

Попробуйте сами »

Фиксированные горизонтальные панели навигации

Сделайте так, чтобы панель навигации оставалась вверху или внизу страницы, даже когда пользователь прокручивает страницу:

Фиксированная навигация сверху

ul {
    position: fixed;
    top: 0;
    width: 100%;
}

Попробуйте сами »

Фиксированная навигация снизу

ul {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Попробуйте сами »

Примечание: Фиксированная позиция может работать неправильно на мобильных устройствах.

Серая горизонтальная панель навигации

Пример серой горизонтальной панели навигации, с тонкой серой границей:

• Главная
• Новости
• Контакты
• О Нас

Пример

ul {
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;

}

li a {
    color: #666;
}

Попробуйте сами »

Липкая панель навигации

Использовать position: sticky; в <li>, чтобы создать липкую навигацию.

Липкий элемент переключается между относительным и фиксированным в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока заданное положение смещения не будет выполнено в видимом экране — тогда он «прилипает» на месте (например, position:fixed).

Пример

ul {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

Попробуйте сами »

Примечание: Internet Explorer, Edge 15 и более ранние версии не поддерживают фиксированное позиционирование. Safari требует префикс -webkit- (см. пример выше). Необходимо также указать по крайней мере одно из top, right, bottom или left для липкое позиционирование работы.

---

Еще примеры

Отзывчивая верхняя навигация

Как использовать медиа запросы CSS для создания адаптивной верхней навигации.

Попробуйте сами »

Отзывчивая боковая навигация

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

Попробуйте сами »

Выпадающий список навигации

Как добавить выпадающее меню в панели навигации.

Попробуйте сами »

---

❮ Назад Далее ❯

Средства навигации | Создание текстовой гиперссылки

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

Текстовые гиперссылки

Начнем с самых простых — текстовых гиперссылок, которые представляют собой фрагмент текста.

Создание гиперссылок

Создать текстовую гиперссылку очень просто. Достаточно найти в блочном элементе (например, абзаце) фрагмент текста, который нужно превратить в гиперссылку, и заключить его в парный тег <A>. Интернет-адрес целевой Web-страницы указывают в атрибуте HREF этого тега.

Гиперссылка (т. е. тег <A>) представляет собой встроенный элемент Web-страницы, т. е. это часть блочного элемента, например, абзаца:

Вот гиперссылка, которая указывает на Web-страницу page125.html, хранящуюся в папке pages, вложенной в корневую папку сайта, на сайте http://www.somesite.ru:

<A HREF=»http://www.somesite. ru/pages/page125.html»>Страница №125</A>

А эта гиперссылка указывает на архивный файл archive.zip, хранящийся в той же папке, что и Web-страница, которая в данный момент открыта в Web-обозревателе (текущая Web-страница):

<A HREF=»archive.zip»>Архив</A>

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

Пример:

<P><A HREF=»22.html»>Предыдущая страница</A>,
<A HREF=»24.html»>следующая страница</A>.</P>

Этот фрагмент HTML-кода создает абзац, содержащий сразу две гиперссылки, которые указывают на разные целевые Web-страницы.

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

Пример:

<A HREF=»http://www.somesite.ru/pages/page125.html»>Страница
<EM>№125</EM></A>

Тег <A> поддерживает необязательный атрибут TARGET. Он задает цель гиперссылки, указывающую, где будет открыта целевая Web-страница. Так, если атрибуту TARGET присвоить значение «_blank», целевая страница будет открыта в новом окне Web-обозревателя.

Например, если мы изменим код первого примера гиперссылки таким образом (исправления выделены полужирным шрифтом):

<A HREF=»http://www.somesite.ru/pages/page125.html» TARGET=»_blank»>
-Страница №125</A>

«Страница №125» будет открыта в новом окне Web-обозревателя.

Чтобы задать обычное поведение гиперссылки (когда целевая Web-страница открывается в том же окне Web-обозревателя), нужно присвоить атрибуту TARGET значение «_self» (это его значение по умолчанию) или вообще убрать данный атрибут из тега <A>.

Имеется также возможность создать гиперссылку, которая никуда не указывает («пустая» гиперссылка). Для этого достаточно задать в качестве значения атрибута HREF значок # («решетка»):

<A HREF=»#»>А я никуда не веду!</A>

При щелчке на такой гиперссылке ничего не произойдет.

НА ЗАМЕТКУ

«Пустыми» гиперссылками мы будем активно пользоваться в частях III и IV, когда начнем писать Web-сценарии.

Правила отображения гиперссылок Web-обозревателем:

— обычные гиперссылки выделяются синим цветом;

— гиперссылки, по которым посетитель уже «ходил» (посещенные гиперссылки), выводятся темно-красным цветом;

— гиперссылка, по которой посетитель в данный момент щелкает (активная гиперссылка), выводится ярко-красным цветом;

— текст любых гиперссылок подчеркивается;

— при помещении курсора мыши на гиперссылку Web-обозреватель меняет его форму на «указующий перст».

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

Интернет-адреса в WWW

Рассмотрим первый пример гиперссылки из предыдущего раздела. Ее интернет-адрес таков: http://www.somesite.ru/pages/page125. html. Он содержит и интернет-адрес Web-сервера, и путь файла, который нужно получить. Поэтому он называется полным. Полные интернет-адреса используют, если нужно создать гиперссылку, указывающую на файл, в составе другого Web-сайта.

Однако если гиперссылка указывает на файл, входящий в состав того же Web-сайта, что и файл текущей Web-страницы, предпочтительнее сокращенный интернет-адрес, содержащий только имя нужного файла (интернет-адрес Web-сервера и так известен Web-обозревателю).

Существуют два типа сокращенных интернет-адресов. Адреса первого типа задают путь к файлу, который нужно получить (целевому файлу), относительно корневой папки Web-сайта. Они содержат в своем начале символ / (слэш), который и говорит Web-серверу, что путь нужно отсчитывать относительно корневой папки.

НА ЗАМЕТКУ

О корневой папке сайта также было рассказано в главе 1. Вкратце: это особая папка, находящаяся на диске компьютера, на котором хранится Web-сайт и работает Web-сервер; в этой папке должны помещаться все файлы Web-сайта.

Например, интернет-адрес

/page3.html

указывает на файл page3.html, хранящийся в корневой папке Web-сайта.

А интернет-адрес

/articles/article1.html

указывает на файл article1.html, хранящийся в папке articles, вложенной в корневую папку Web-сайта.

Такие интернет-адреса называют абсолютными и используют, если нужно создать гиперссылку на файл, хранящийся в «глубине» Web-сайта (скажем, в другой папке, нежели файл текущей Web-страницы).

Сокращенные интернет-адреса второго типа задают путь к целевому файлу относи-тельно файла текущей Web-страницы. Они не содержат в начале символа слэша — и в этом их важное отличие от абсолютных интернет-адресов.

Рассмотрим несколько примеров подобных интернет-адресов.

Интернет-адрес

archive.zip

указывает на файл archive.zip, хранящийся в той же папке, что и файл текущей Web-страницы.

Интернет-адрес

chapter3/page1. html

указывает на Web-страницу page1.html, хранящуюся в папке chapter3, вложенной в папку, в которой хранится текущая Web-страница.

Следующий интернет-адрес

../contents.html

указывает на Web-страницу contents.html, хранящуюся в папке, в которую вложена папка, где хранится текущая Web-страница. (Обратим внимание на две точки в начале пути — так обозначается папка предыдущего уровня вложенности.)

Такие интернет-адреса называют относительными. Их применяют, если нужно создать гиперссылку на файл, хранящийся в той же папке, что и текущая Web-страница, одной из вложенных в нее папок или папке предыдущего уровня вложенности.

НА ЗАМЕТКУ

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

ВНИМАНИЕ!

В Web-страницах, которые не должны быть опубликованы на Web-серверах, а будут открываться с диска клиентских компьютеров, следует применять только относительные интернет-адреса. Дело в том, что файловая система компьютера не знает, какую папку считать корневой, поэтому не сможет правильно интерпретировать абсолютные интернет-адреса. (Разумеется, гиперссылки, ссылающиеся на другие Web-сайты, должны содержать полные интернет-адреса.)

Разобравшись с гиперссылками и интернет-адресами, свяжем, наконец, наши Web-странички в единый Web-сайт. Чтобы нам было удобнее, создадим в папке, где хранятся все файлы нашего Web-сайта, папку tags. В эту папку перенесем все Web-страницы, описывающие теги HTML (их у нас пока что четыре), и сопутствующие им файлы (их три: изображение, аудио- и видеоролик). Файл index.htm никуда из корневой папки перемещать не будем — ведь он хранит Web-страницу по умолчанию.

Откроем Web-страницу index.htm и найдем в ней HTML-код, формирующий список тегов. Создадим там гиперссылки, указывающие на соответствующие Web-страницы.

Вот HTML-код, создающий гиперссылку, указывающую на Web-страницу с описанием тега <AUDIO>:

<CODE><A HREF=»tags/t_audio. htm»>AUDIO</A></CODE>

Остальные гиперссылки создаются аналогично.

Перейдя на Web-страницу, описывающую какой-либо тег, посетитель должен иметь возможность вернуться назад — на главную Web-страницу. Конечно, это можно сделать, нажав кнопку возврата назад на панели инструментов Web-обозревателя или клавишу <Backspace> на клавиатуре. Но правила хорошего тона Web-дизайна требуют, чтобы на Web-странице присутствовала соответствующая текстовая гиперссылка.

Создадим такую гиперссылку на всех Web-страницах, описывающих теги. Поместим ее в самом конце каждой Web-страницы — обычно она находится именно там. Вот так выглядит формирующий ее HTML-код:

<P><A HREF=»../index.htm»>На главную Web-страницу</A></P>

Осталось на главной Web-странице создать  гиперссылку на Web-страницу Русской Википедии, которая содержит статью, посвященную языку HTML. Вставим ее в конец большой цитаты (листинг 6. 1).

Здесь мы указали для тега <A> атрибут TARGET со значением «_blank». И Web-страница с текстом статьи об HTML будет открываться в новом окне Web-обозревателя. Так что посетитель сможет «залезть» в Википедию, не покидая нашего Web-сайта.

Тег HTML »

В тегах HTML, Новый

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

Элемент

Списки наводят порядок на веб-страницах: вот HTML-код для их создания

Что делает

Элемент

Дисплей

Блок

Использование

Семантика | Structural

Содержание

• 1 Пример кода
• 2 Меню навигации по строительству
  • 2. 1 Подсказка для использования
  • 2,2. навигация> факты о фламинго &бык; Еда для фламинго &бык; Виды фламинго &бык; Среда обитания фламинго &бык; Свяжитесь с нами

    Построение навигационных меню

    В HTML 4 для кодирования горизонтального навигационного меню требовался код HTML и CSS. Список ссылок должен быть закодирован в элементе ul , а затем применен стиль для создания горизонтального макета.

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

    Советы по использованию

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

    Ссылки в nav могут быть закодированы в списке ul или просто закодированы как отдельные ссылки без элемента ul . Для полной обратной совместимости 9Рекомендуется вариант 0014 ul , чтобы список отображался корректно в старых браузерах.

    Подсказки по расположению

    Для ясности лучше использовать разделитель между ссылками. Это помогает сделать каждый элемент списка отличным от окружающих его элементов. В нашем примере кода мы использовали • для этой цели.

    Клэр Бродли

    Клэр — опытный технический писатель, редактор и энтузиаст HTML. Она пишет для HTML.com и управляет контент-агентством Red Robot Media.

    Browser Support for nav

    9	4	9	12	5	11

    Attributes of nav

    Имя атрибута	Значения	Примечания
    желоб

    Поиск HTML. com

    0 Поиск:0003
    • Использование тега HTML для создания встроенных фреймов: вот как
    • Тег HTML
    • Тег HTML Body: освойте самый важный элемент HTML сейчас
    • Элемент HTML P: вот код для определения текста абзаца
    • < мета> Тег HTML

    Навигация по странице

    Сводка

    Список страниц и индикаторы разрыва страницы позволяют пользователям в смешанной печатно-цифровой среде координировать свои действия. позиции.

    Методы

    • Включить список страниц, если публикация имеет эквивалент со статической разбивкой на страницы. [[WCAG-2.4.5]]
    • Определите места разрыва страницы в тексте. [[WCAG-1.3.1]]
    • Определите источник разрывов страниц в метаданных. [[WCAG-1.3.1]]

    Примеры

    Пример 1 — Список страниц (EPUB 3)

    Список страниц представляет собой простой упорядоченный список ссылок на места разрывов страниц. Он идентифицирован к epub:type значение атрибута список страниц .

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

    Атрибут роли ARIA (см. следующий пример) не требуется, если список страниц всегда скрыт от пользователей или навигационный документ EPUB не включается в корешок.

    Пример 2 — Список страниц (Интернет)

    Список страниц для использования в Интернете обычно определяется атрибутом роли . значение doc-pagelist . Атрибут aria-label используется для предоставления заголовок для навигационного элемента, но можно использовать и явный заголовок.

    Пример 3 — Список страниц (EPUB 2 и DAISY 3)

    Список страниц в публикациях EPUB 2 и DAISY 3 выражается с использованием пользовательской грамматики XML. называется NCX.

     
    
        …
        <список страниц>
            
                Страницы
            
            
                
                    <текст>752
                
                 xhtml#page752"/>
            
            
                
                    <текст>753
                
                
            
            …
        
     

    Пример 4 — Маркер разрыва страницы (встроенный)

    Пустой элемент span идентифицирует разрыв страницы внутри блочного элемента. Это определяется как разрыв страницы с помощью атрибута роли со значением doc-pagebreak . Атрибут aria-label обеспечивает объявленная стоимость.

     
    
       …
       <промежуток
           role="doc-разрыв страницы"
          
           ария-метка = "24"/>
       …
     

    Пример 5 — Маркер разрыва страницы (блок)

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

    (Обратите внимание, что aria-label в настоящее время требуется, даже если номер виден. Ожидается, что в будущей версии модуля DPUB-ARIA это будет исправлено, чтобы номер страницы автоматически получается из содержимого элемента, если метка не указана.)

     
    24
     

    Часто задаваемые вопросы

    Что делать, если порядок моей электронной книги не соответствует порядку печати эквивалент?

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

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

    Отражает ли номер страницы конечную или текущую страницу? начиная?

    Номер страницы всегда соответствует начальной странице.

    Должен ли маркер разрыва страницы размещаться в соответствии с позицией печати?

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

    Должен ли я включать номера страниц в качестве содержимого или пустых элементов?

    У каждого подхода есть свои плюсы и минусы.

    Если вы включаете номера страниц как текстовое содержимое в пределах span или div , страницы будут более легко доступны как для зрячих пользователей, так и для пользователей, использующих вспомогательные технологии. Этот метод использовался в предыдущих стандартах DAISY. Потенциальный недостаток, однако в том, что основные пользовательские агенты не будут предоставлять эквивалентную функциональность для отключения нежелательный контент, заставляющий пользователей слышать и просматривать номера страниц.

    Номера страниц в качестве пустых элементов — более традиционный подход с тегами привязки. выполнявшие эту функцию в прошлом. Использование атрибута aria-label для пустого Однако элемент ограничивает пользователей, которые будут иметь доступ к номеру страницы во время чтения.

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

    Должен ли я использовать атрибут aria-label или title для номера страницы?

    Использование aria-label рекомендуется, когда номер страницы не включен в виде текста content, но можно использовать оба атрибута. aria-label имеет более высокий приоритет, чем заголовок в вычислении доступного имени алгоритм.

    Куда вставить номер страницы, если разрыв страницы происходит в середине список?

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

    Очевидным решением является вставка номера страницы в самый последний элемент элемента которым заканчивается страница:

     
    …. 
    …
     

    или разместить его самым первым элементом в элементе списка, с которого начинается страница

     
    …
     … 
     

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

    Где разместить разрыв страницы, если слово переносится через дефис?

    Поместите маркер страницы после слова. Не оставляйте печатный перенос и вставляйте число в середине слова.

    Могу ли я использовать теги и для номеров страниц?

    Элемент a имеет два конкретных применения, определенных в HTML5: для ссылок, когда атрибут href присутствует, а для ссылок-заполнителей, когда он отсутствует (например, ссылка, которая может быть активной в другом контексте или после некоторого взаимодействия с пользователем). Как страница разрывы не являются ссылками и никогда не предназначены для активации в качестве ссылок, не рекомендуется используйте их для маркеров разрыва страницы.

    Пояснение

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

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

    Если цифровая публикация создается с помощью того же рабочего процесса, что и печатный документ, места разрывов страниц также должны быть сохраняется (хотя список страниц может быть создан без явных маркеров разрыва страницы, если есть некоторая привязка для ссылка для перехода). Места разрыва страницы можно добавить в разметку с помощью тегов span и div с атрибуту роли присвоено значение doc-pagebreak . Чтобы скрыть номер страницы от визуальный просмотр, Атрибут aria-label можно использовать для идентификации номера.

    Атрибут id должен быть прикреплен к каждому месту разрыва страницы, чтобы включить привязка к разрывам.

    Определение источника разбивки на страницы в метаданных публикации также важно, чтобы помочь пользователям определить удобство использования нумерации страниц (например, будет ли она соответствовать печатному изданию, используемому в классе).