Учимся использовать тег nav

Всем привет, друзья! Давно не было практики. На повестке дня тег nav. Эта статья будет небольшой, в отличие от предыдущей.

Устаревший материал

Устаревший материал

Дело в том, что в сети очень много туториала по HTML на основании старой, четвёртой версии. Когда писались эти туториалы, то поисковые системы еще не знали о теге nav и, следовательно, не умели с ним работать.

С переходом на версию HTML 5 мы получили несколько важных улучшений, одно из них — это тег nav. По сути, он ничем не отличается от тега списков ul, но для поисковиков носит совсем другое значение.

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

к оглавлению ↑

Визуальное отличие

Отличие

Касательно визуального отличия nav и ul. Отличие я заметил лишь в браузере Firefox Mozilla. И проявляется он со стороны тега nav, а именно в отсутствии маркера. Но маркеры мы всегда можем убрать через CSS.

Итак, что мы получаем сегодня:

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

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

к оглавлению ↑

Пример написания навигации для HTML:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>My first page</title>

<link href="style.css" rel="stylesheet">

</head>

<body>

<header>

<div>

<nav>

<li><a href="#">Home</a></li>

<li><a href="#">Catalog</a></li>

<li><a href="#">Contacts</a></li>

<li><a href="#">About as</a></li>

<li><a href="#">Gallery</a></li>

<li><a href="#">Map</a></li>

</nav>

</div>

</header>

</body>

</html>
к оглавлению ↑

Пример написания навигации для CSS:

body{

margin: 0;

}

li{

list-style-type: none;

}

ul{

padding: 0;

margin: 0;

}

header{

background:#009e00;

}

.header-wrap{

max-width: 1000px;

margin: auto;

}

header nav{

display: flex;

flex-wrap: wrap;

}

header nav a{

color: #fff;

padding:10px 15px;

display: block;

text-decoration: none;

font-size: 20px;

}

header nav a:hover{

background:#00ff0099;

}

Как видим в стилях я прописал list-style-type и задал значение none. Эта настройка позволяет избавиться от маркеров в списках.

На этом я завершаю статью. Надеюсь, пост оказался для вас полезен. Всегда следите за изменениями и не создавайте гавнокод. Всем мир!

Делитесь полезной информацией с друзьями:

Сергей

Привет! Моё имя Сергей, и я — автор этого блога. Рад, что вас заинтересовал мой проект. Не забывайте оставлять комментарии к статьям. По всем другим вопросам обращайтесь через контактную форму на странице "Контакты".

Читайте также:

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

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

Вверх