Html list in list: Proper way to make HTML nested list?

Leave a Comment / Html / By /

Структура контента | Web Accessibility Initiative (WAI)

в Руководстве по структуре страницы

Обзор

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

Артикул

Элемент HTML5

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

Фрагмент кода
 <статья>
   
Классический космический медведь
 
  …

<статья>
   
Экстремальный космический медведь
 
  …

Секции

Элемент HTML5

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

Фрагмент кода
 <раздел>
   
Глава 2
 
  …

Пункты

Использовать элемент абзаца (

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

Списки

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

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

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

Ненумерованный список

Неупорядоченный список состоит из одного элемента

    и нескольких элементов списка (
  • ):

    Пример
    • Кукуруза
    • Помидоры
    • Фасоль
    • Лук
    • Чеснок
      • …
    Фрагмент кода
     
      
    
    • Кукуруза
      • 
    
    • Помидоры
      • 
    
    • Фасоль
      • 
    
    • Лук
      • 
    
    • Чеснок
      • 
    …

    Заказной список

    Упорядоченный список состоит из одного элемента

      и нескольких элементов списка (
    1. ):

      Пример
      1. Варить фасоль 45 минут.
      2. Овощи нарежьте мелкими кубиками.
      3. Обжарьте лук и чеснок.
      4. Деглазируйте помидорами.
      5. Добавьте кукурузу и бобы.
        6. …
      Фрагмент кода
       
        
    
      1. Варить фасоль 45 минут.
        2. 
    
      2. Нарежьте овощи мелкими кубиками.
        3. 
    
      3. Обжарьте лук и чеснок.
        4. 
    
      4. Дегласируйте, используя помидоры.
        5. 
    
      5. Добавьте кукурузу и бобы.
        6. 
    …

      Вложенные списки

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

      Пример
      1. Подготовить ингредиенты
        • Варить фасоль 45 минут.
        • Овощи нарежьте мелкими кубиками.
      2. Обжарьте лук и чеснок.
      3. Деглазируйте помидорами.
      4. Добавьте кукурузу и бобы.
        5. …
      Фрагмент кода
       
        
    
      1. 
        Подготовить ингредиенты
        <ул>
            
      2. Варить фасоль 45 минут.
        3. 
            
      3. Нарежьте овощи мелкими кубиками.
        4.
  • Обжарьте лук и чеснок.
  • Дегласируйте, используя помидоры.
  • Добавьте кукурузу и бобы.
    • …

    Списки описаний

    Список описаний состоит из одной или нескольких групп терминов и описаний. Каждая группа связывает один или несколько терминов (содержимое элементов

    ) с одним или несколькими описаниями (содержимое элементов
    ).

    Группировка начинается либо с первого элемента списка, либо всякий раз, когда элемент

    следует за элементом
    .

    Один термин, несколько описаний

    В следующем примере Джон и Люк указаны как авторы, а Фрэнк — как редактор.

    Пример
    Авторы
    Джон
    Люк
    Редактор
    Фрэнк
    Фрагмент кода
     
    
  
    Авторы
    
  
    Джон
    
  
    Люк
    
  
    Редактор
    
  
    Фрэнк
    Несколько терминов, одно описание

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

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

    В этом примере Джон и Люк являются авторами, а также редакторами:

    Пример
    Авторы
    Редакторы
    Джон
    Люк
    Фрагмент кода
     
    
  
    Авторы
    
  
    Редакторы
    
  
    Джон
    
  
    Люк

    Котировки

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

    Цитата

    Используйте элемент

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

    Пример

    Ниже приведен отрывок из История моей жизни Хелен Келлер

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

    Фрагмент кода
     
    Ниже приведен отрывок из Истории моей жизни Хелен Келлер
    
<цитата>
    
     
     
    Еще в дни, предшествовавшие приезду моего учителя, я ощупывал квадратные жесткие самшитовые изгороди и, ориентируясь на обоняние, находил первые фиалки и лилии. Туда же я после приступа гнева отправился утешиться и спрятать свое разгоряченное лицо в прохладных листьях и траве.

    Встроенная цитата

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

    Пример

    Хелен Келлер сказала: Жалость к себе — наш злейший враг, и если мы поддадимся ей, мы никогда не сможем сделать в мире ничего хорошего.

    Фрагмент кода
     
    Хелен Келлер сказала: Жалость к себе — наш злейший враг, и если мы поддадимся ей, мы никогда не сможем сделать в мире ничего хорошего.

    Фигурки

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

    Каждая фигура заключена в элемент

    и помечена с помощью вложенного элемента
    .

    Фрагмент кода
     
    Объем продаж нашего продукта SpaceBear был стабильным в течение первых трех кварталов, но в четвертом квартале он имел огромный успех, когда SuperBear был представлен как раз к сезону праздников. Подробнее см. рисунок G3.
    

    
    
    G3: объем продаж SpaceBear
    
    Диаграмма продаж SpaceBear, показывающая огромный успех в четвертом квартале
    Подробное описание
    Примечание

    • Примечание: На момент написания статьи атрибуты WAI-ARIA

      role="group" и aria-labeledby использовались для согласованного предоставления информации вспомогательным технологиям.

    • Примечание: Для получения дополнительной информации о том, как размечать диаграммы, см. сложные изображения.

    Изображения и иллюстрации

    Изображения и иллюстрации полезны для привлечения внимания многих пользователей. Они также могут разъяснять текст для людей с ограниченными возможностями чтения. Там, где используются изображения или иллюстрации, необходимо добавить соответствующий альтернативный текст. См. Учебник по изображениям, чтобы узнать, как использовать альтернативный текст.

    Столы

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

    Помогите улучшить эту страницу

    Пожалуйста, поделитесь своими идеями, предложениями или комментариями по электронной почте в общедоступном списке wai-eo-editors@w3. org или через GitHub.

    Электронная почта Fork & Edit на GitHubNew GitHub Issue

    Наверх

    Список HTML

    Опубликовано

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

    Списки двух типов

    1. Упорядоченные списки
    2. Неупорядоченные списки

    Содержание

    Упорядоченные списки

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

    • Нижний алфавит
    • Верхний алфавит
    • Нижний латинский
    • Верхний латинский

    Мы рассмотрим примеры каждого из них. Создайте HTML-страницу с именем example-ordered-list. html и добавьте следующий код.

     

    <голова>
        Пример упорядоченного списка
    
    <тело>
          
    Типы нумерованных списков
     
        
     По умолчанию 
    
    <ол>
        
  • Оранжевый
    • 
        
  • Манго
    • 
        
  • Банан
    • 
        
  • Яблоко
    • 
   
       
    Младшие буквы
    
    <ол тип="а">
        
  • Красный
    • 
        
  • Синий
    • 
        
  • Зеленый
    • 
        
  • Желтый
    • 
   
        
    Заглавные буквы
    
   <ол тип="А">
        
  • Еда
    • 
        
  • Дом
    • 
        
  • Вода
    • 
        
  • Электричество
    • 
        
  • Транспорт
    • 
  
        
    Нижний роман
    
  
      
        
    1. генеральный директор
      2. 
        
    2. Менеджер
      3. 
        
    3. Супервайзеры
      4. 
        
    4. Рабочие
      5. 
  
    
        
    Верхний роман
    
  
      
        
    1. Футбол
      2. 
        
    2. Крикет
      3. 
        
    3. Стрельба
      4. 
        
    4. Легкая атлетика
      5.

    Вывод

    Рисунок 1.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *