Меню html5: Верстка меню на html5 | Vaden Pro

Leave a Comment / Html / By /

Верстка меню на html5 | Vaden Pro

Вы здесь

Главная → Блог → HTML → Верстка меню на html5

Дата:1.02.15 в 13:44

Раздел: 

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

При использовании 4-го стандарта html оптимальным вариантом верстки меню для сайта был следующий:

<ul>
   <li><a href="#">Пункт меню 1</a></li>
   <li><a href="#">Пункт меню 2</a></li>
   <li><a href="#">Пункт меню 3</a></li>
</ul>

Ну а что? Все крайне логично и лаконично.

Тег ul согласно документации W3C следует использовать для разметки списков с перечислением чего-либо, а что такое меню, если не список ссылок на конкретные структурные части нашего ресурса?

Новый подход к верстке меню в html5

С выходом 5-го html мы узнали о существовании нового тега nav и что его тоже вроде как следует использовать для разметки меню и, не мудрствуя слишком много, из симбиоза старых и новых знаний получилась конструкция следующего содержания:

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

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

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

<nav>
   <a href="#"> Пункт меню 1</a>
   <a href="#"> Пункт меню 2</a>
   <a href="#"> Пункт меню 3</a>
</nav>

Среди преимуществ данного варианта разметки меню на html 5 мы можем выделить следующие:

  • Уменьшая количество кода на странице мы упрощаем ее обработку браузерам и поисковым роботам, что положительно сказывается на SEO сайта.
  • Меньше тегов – короче DOM структура документа, что тоже лишний плюс для обработки страницы различными приложениями.
  • Чем лаконичнее код, тем он чище и проще к восприятию.

Как сверстать вложенные меню в html5?

Вложенность меню с использованием новых стандартов хоть и будет выглядеть непривычно с первого взгляда, но зная предназначение тегов 5-го html данную структуру становится достаточно просто понять:

<nav>
   <section>
      <a href="#"> Пункт меню 1</a>
      <nav>
         <a href="#"> Подпункт меню 1</a>
         <a href="#"> Подпункт меню 2</a>
         <a href="#"> Подпункт меню 3</a>	
      </nav>
   </section>
   <a href="#"> Пункт меню 2</a>
   <a href="#"> Пункт меню 3</a>
</nav>

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

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

Подводя итоги

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

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

Оценок: 6 (средняя 3.2 из 5)

Оценка: 

Ключевые слова: 

Меню сайта

Понравилась статья? Расскажите о ней друзьям:

Еще интересное

html5 — как создать меню справа в шапке сайта

Вопрос задан

5 лет 4 месяца назад

Изменён 2 месяца назад

Просмотрен 2k раза

Как создать меню справа в шапке сайта, чтобы оно не выезжало за содержимое сайта?

*
{
    margin: 0;
    padding: 0;
}

body div {
    outline: 1px solid #000000;
}

#wrapper {
    width: 100%;
    height: 2300px;
    margin: 0 auto;
    outline: 1px solid #ff0000;
}
    
. container {
   width: 1200px;
   margin: 0 auto;
   text-align: center;
   left: 0;
   right: 0;
   position: absolute;	
}
    
#header {
    height: 600px;
    background:url(img/header.jpg) no-repeat;
    background-size: cover;
}
    
ul {
    text-align: center;
}
    
ul li {
    text-align: center;
    display: inline-block;
}
    
.float {
    float: right;
}
    
clear {
    clear: both;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div>
            <div>
                <div>
                    <nav>
                        <ul>
                            <li>11</li>
                            <li>1</li>
                            <li>11</li>
                            <li>11</li>
                        </ul>
                    </nav>
                </div>
            </div>
            <div></div>
            <div> 
                <p>
                    If you're involved in an internet marketing business, thenyou've probably already come face-to-face with your #1enemy - "Time Wasting".
 
 
 
                </p>
            </div> 
            <div></div>    
            <div></div> 
            <div></div>            
            <div></div>
        </div>
    </body>
</html>
  • html5
  • css3

8

Вот пример если понимаете flexBox

	.site{
		max-width: 1000px;
		margin: 0 auto;
		background-color: #3F3F3F;
		min-height: 100vh;
	}

	nav{
		width: 100%;
	}

	.menu{
		display: flex;
		justify-content: flex-end;
		background-color: pink;
		list-style: none;
	}
	.menu li{
		position: relative;
		padding: 10px;
	}
	article{
		padding: 0 20px;
	}
<div>
<nav>
	<ul>
		<li>пункт 1</li>
		<li>пункт 2</li>
		<li>пункт 3</li>
		<li>пункт 4</li>
		<li>пункт 5</li>
	</ul>
</nav>

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

</div>

Вот ваш код без flex, немного почистил

.container {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
  background-color: skyblue;
}

#header {
  background: url(img/header.jpg) no-repeat;
  background-size: cover;
  background-color: yellow;
}

ul {
  text-align: right;
}

ul li {
  padding: 5px 10px;
  display: inline-block;
}
<div>
  <div>
    <nav>
      <ul>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
      </ul>
    </nav>
  </div>
  <div>
    <p>
      If you're involved in an internet marketing business, thenyou've probably already come face-to-face with your #1enemy - "Time Wasting".
  
    </p>
  </div>
</div>

12

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

HTML: тег

В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом

, с синтаксисом и примерами.

Описание

Тег HTML

определяет неупорядоченный список меню в документе HTML. Этот тег также часто называют элементом.

Синтаксис

В HTML синтаксис тега

:

 
<тип меню="панель инструментов">
  
  • 
    <метка меню="Файл">
      
      
    
  
    • 
  
  • 
    <меню метка="Изменить">
      
      
    
  
    •

    Атрибуты

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

    :

    Атрибут Описание HTML-совместимость
    контекст Тип меню. Это может быть одно из следующих значений: контекст, панель инструментов, список HTML5
    этикетка Метка меню HTML5

    Примечание

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

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