Li li a href: css — How to make the HTML link activated by clicking on the ?

— HTML — Дока

1. Кратко
2. Пример
3. Как понять
4. Атрибуты
   1. value
   2. type
5. Подсказки
6. На практике
   1. Ольга Рунова советует

Кратко

<li> — отдельный элемент списка <ol>, <ul> или <menu>.

Пример

<ul>  <li>Пушкин</li>  <li>Есенин</li>  <li>Бунин</li></ul>
          <ul>
  <li>Пушкин</li>
  <li>Есенин</li>
  <li>Бунин</li>
</ul>

Как понять

<li> — сокращение от list item.

<li> нельзя использовать отдельно. Его родителем обязательно должен быть упорядоченный список <ol>, неупорядоченный список <ul> или <menu>.

Атрибуты

Можно установить номер пункта <li>, с которого начнётся нумерация списка (только для <ol>).

Значением value может быть любое целое положительное число:

<ol>  <li value="3">Белка</li>  <li>Лиса</li>  <li>Ёж</li></ol>
          <ol>
  <li value="3">Белка</li>
  <li>Лиса</li>
  <li>Ёж</li>
</ol>

С помощью атрибута type можно установить вид маркера. Значение будет зависеть от внешнего контейнера <ol> или <ul>.

<ul>  <li type="disc">Белка</li>  <li type="circle">Лиса</li>  <li type="square">Ёж</li></ul><ol>  <li type="A">Правила</li>  <li>Тесты</li>  <li>Ответы</li></ol>
           <ul>
  <li type="disc">Белка</li>
  <li type="circle">Лиса</li>
  <li type="square">Ёж</li>
</ul>
<ol>
  <li type="A">Правила</li>
  <li>Тесты</li>
  <li>Ответы</li>
</ol>

Для нумерованного списка <ol> атрибут type может иметь значения: «a», «i», «I».

👆 Для изменения стиля отображения маркера лучше все-таки использовать CSS, а именно list-style-type

Подсказки

💡 Внутрь тега <li> можно вкладывать разные элементы, например, изображения, другие списки, ссылки и т. д.

<ul>  <li>      <a href="#">Главная страница</a>  </li>  <li>      <a href="#">Корзина</a>  </li>  <li>      <a href="#">Отзывы</a>  </li></ul>
          <ul>
  <li>
      <a href="#">Главная страница</a>
  </li>
  <li>
      <a href="#">Корзина</a>
  </li>
  <li>
      <a href="#">Отзывы</a>
  </li>
</ul>
 

💡 <li> по умолчанию имеет блочные стили, поэтому пункты будут располагаться друг под другом. Это поведение легко меняется с помощью CSS.

На практике

Ольга Рунова советует

🛠️ Для тега <li> браузеры добавляют псевдоэлемент ::marker, который выводит маркер или цифру, в зависимости от типа списка. По умолчанию, в неупорядоченном списке <ul> это маркер в виде точки (disc), в упорядоченном списке <ol> — арабская цифра с точкой (decimal).

Чтобы стилизовать маркер, можно применить стили к ::marker, а CSS-свойство list-style-type поможет поменять тип маркера или убрать его вовсе (none).

Свойство list-style-position позволяет задать положение маркера относительно контента.

А для придания списку большей изюминки маркер можно заменить на картинку с помощью list-style-image.

👆 Чтобы свойства применились ко всем элементам <li> в списке, достаточно задать их внешнему контейнеру (<ul> или <ol>).

Если вы нашли ошибку, отправьте нам пулреквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

ctrl + alt + ←

→

ctrl + alt + →

— журнал «Доктайп»

• 25 января 2023

Справочник

Нейрокекс

Что делает тег

Тег <nav> используется для создания навигации на странице. Он помогает пользователю найти нужную информацию на сайте и является важным элементом с точки зрения доступности.

Синтаксис тега <nav>

<nav>
  <ul>
    <li><a href="#">Ссылка 1</a></li>
    <li><a href="#">Ссылка 2</a></li>
    <li><a href="#">Ссылка 3</a></li>
  </ul>
</nav>

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

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <nav> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Блок навигации:

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О компании</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Навигация между разделами страницы:

<nav>
  <ul>
    <li><a href="#section1">Раздел 1</a></li>
    <li><a href="#section2">Раздел 2</a></li>
    <li><a href="#section3">Раздел 3</a></li>
  </ul>
</nav>

Боковое меню:

<nav>
  <ul>
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li><a href="#">Пункт 3</a></li>
    <li><a href="#">Пункт 4</a></li>
  </ul>
</nav>

Навигация по тегам:

<nav>
  <ul>
    <li><a href="#tag1">HTML</a></li>
    <li><a href="#tag2">CSS</a></li>
    <li><a href="#tag3">JavaScript</a></li>
  </ul>
</nav>

Для чего использовать тег <nav>

• Для главного навигационного меню.
• Для вторичного навигационного меню, которое ссылается на страницы или разделы в определённой категории или теме.
• Для оглавления.

Атрибуты тега <nav>

Тег <nav> не имеет специфических атрибутов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения тега

Тег <nav> следует использовать только для создания раздела веб-страницы, содержащего навигационные ссылки. Он не должен использоваться как обёртка для не навигационного содержимого: рекламы или изображения.

Нюансы

• Если навигационное меню повторяется на нескольких страницах, тег <nav> должен использоваться только один раз для главного навигационного меню.
• Если навигационное меню содержит поле поиска, то это поле размещается вне тега <nav>.

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

Тег поддерживается всеми современными браузерами.

Актуальная информация — на сaniuse.

Альтернативные теги

Альтернативных тегов для тега <nav> не существует.

Чем заменить тег

Вместо тега <nav> можно использовать <div> или <ul> с соответствующими CSS-стилями.

Актуальность

Тег <nav> не устарел, можете использовать его в веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

Попробовать

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Справочник по HTML

Основные HTML-теги в 2023 году.

• 31 марта 2023

Глобальные атрибуты HTML

Список основных атрибутов, которые подойдут ко всему.

• 29 марта 2023

Как добавить раздел на страницу.

Синтаксис, примеры использования, основные атрибуты.

• 25 января 2023

Список описаний. Тег <dl>

Синтаксис, примеры использования, основные атрибуты.

• 25 января 2023

Пункт выпадающего списка. Тег <option>

Синтаксис, примеры использования, основные атрибуты.

• 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

• 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

• 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

• 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

• 25 января 2023

Как правильно добавить секцию на страницу. Тег <section>

Синтаксис, примеры использования, основные атрибуты.

• 25 января 2023

HTML-кодирование. Можете ли вы использовать в «ли» (список)?

спросил 8 лет, 3 месяца назад

Изменено 8 лет, 3 месяца назад

Просмотрено 15 тысяч раз

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

 
<голова>


 css" />

<тело>
<дел>
<дел>
     
 Информация|Бирмингем