Меню на HTML5

[Barsam]

Коллеги, здравствуйте.

Совсем недавно начал изучать HTML5, сейчас создал меню. Ниже маленький фрагмент кода.

Всё красиво, всё по макету, всё работает. Но я сомневаюсь, что моя реализация валидна.

Будьте так любезны, дайте советы, как сделать код валидным.

<nav>
   <ul>
      <li class="nav_img_left"><img src="img/nav_left_background.png"></li>   <!-- Закругление фона слева-->
      <li><a href="/about/">Главная</a></li>                                  <!-- Пункт меню --> 
      <li class="nav_border"><img src="img/nav_border.png"></li>              <!-- Перегородка между элементами меню --> 
      <li><a href="/service/">О себе</a></li>                                 <!-- Пункт меню --> 
      <li class="nav_border"><img src="img/nav_border.png"></li>              <!-- Перегородка между элементами меню --> 
      <li><a href="/clients/">Каталог</a></li>                                <!-- Пункт меню --> 
      <li class="nav_img_right"><img src="img/nav_right_background.png"></li> <!-- Закругление фона справа -->	
   </ul>
</nav>

[Viper]

Атрибут "alt" в теге <img> обязателен, так как <img> - контент-изображение, которое должно нести в себе информационный смысл. Все остальное(элементы дизайна) должно делаться средствами CSS - это если по "правильному") Но не стоит на этом фанатично зацикливаться ИМХО

[FEL]

Чтобы проверить код на валидность, нужно зайти на этот сайт http://validator.w3.org/

и ввести адрес страницы, либо загрузить страницу с компьютера своего

Мне удобней всего через Web Developer нажал 2 кнопки и вуаля смотрю свои ошибки

[Николя223]

Я не думаю, то что код не валиден.

Только тогда, когда все браузеры будут понимать html 5 - тогда уже можно будет говорить о валидности. А сейчас - даже и не парьтесь. (только не понимаю зачем вам он)

и написано здесь: Internet Explorer до версии 8.0 включительно игнорирует тег <nav>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору NAV.

[SelenIT]

Николя223, где была спрятана ваша анабиозная камера? Трюк с document.createElement('nav'), после которого IE8 (и даже IE6!) по волшебству начинает понимать и стилизовать этот элемент (и с остальными аналогично) известен как минимум с 2009-го. А 80% современных браузеров (FF4+, Хром 7+ и Опера 11.6+) не понимают никакого другого (X)HTML, кроме HTML5.

А по сабжу — формально всё валидно, но по сути, конечно, разделители между пунктами меню, а тем более закругления, никак не тянут на самостоятельные пункты списка. Обычные фоновые картинки для них — самое место.

[Николя223]

Да, если развивать дальше тему, то nav - это всего лишь СЕЛЕКТОР. т.е. в него можно вкладывать другие теги.

Вот здесь написанно, то что данный тег обрамляет <UL> <OL> но не заменяет их.

Так что всё правильно =)

Николя223, где была спрятана ваша анабиозная камера? Трюк с document.createElement('nav'), после которого IE8 (и даже IE6!) по волшебству начинает понимать и стилизовать этот элемент (и с остальными аналогично) известен как минимум с 2009-го. А 80% современных браузеров (FF4+, Хром 7+ и Опера 11.6+) не понимают никакого другого (X)HTML, кроме HTML5.

ну прикольно )) возьму на заметку )) только действительно не понимаю зачем он нужен ??

PS. анабиозная камера была спрятанна в надежном месте =)

[Viper]

Я не думаю, то что код не валиден.

An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

Только тогда, когда все браузеры будут понимать html 5 - тогда уже можно будет говорить о валидности.

и написано здесь: Internet Explorer до версии 8.0 включительно игнорирует тег <nav>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору NAV.

Несколько популярных мифов о HTML5: _http://habrahabr.ru/post/140155/

_http://code.google.com/p/html5shiv/

[SelenIT]

Селекторы — это в CSS. В HTML5 nav — это структурный элемент (раздел документа), содержащий ссылки на другие документы или разделы.

[SelenIT]

зачем он нужен ??

Имхо — затем, что легализует, документирует и приводит к общему знаменателю (не сразу, но постепенно) многие полезности, уже давно работающие в браузерах (canvas, autocomplete, contenteditable...) и поисковиках (микроданные). Ну и слека упрощает жизнь, позволяя не зацикливаться на неважных нюансах синтаксиса (с какого конца разбивать яй как закрывать эл-т BR — > или />), а сосредоточиться на функциональности проекта.

[Barsam]

Атрибут "alt" в теге <img> обязателен, так как <img> - контент-изображение, которое должно нести в себе информационный смысл. Все остальное(элементы дизайна) должно делаться средствами CSS - это если по "правильному") Но не стоит на этом фанатично зацикливаться ИМХО

Про alt знаю, спасибо, просто из кода повыкидывал всё лишнее, чтобы не мешало.

Чтобы проверить код на валидность, нужно зайти на этот сайт http://validator.w3.org/

и ввести адрес страницы, либо загрузить страницу с компьютера своего

Мне удобней всего через Web Developer нажал 2 кнопки и вуаля смотрю свои ошибки

Спасибо, весьма интересный ресурс, поизучаю.

Я не думаю, то что код не валиден.

Только тогда, когда все браузеры будут понимать html 5 - тогда уже можно будет говорить о валидности. А сейчас - даже и не парьтесь. (только не понимаю зачем вам он)

и написано здесь: Internet Explorer до версии 8.0 включительно игнорирует тег <nav>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору NAV.

Ниже написанный код помогает IE понимать nav.

	<!--[if IE]>
	<script>
		document.createElement('header');
		document.createElement('nav');
		document.createElement('section');
		document.createElement('article');
		document.createElement('aside');
		document.createElement('footer');
	</script>
	<![endif]-->

А по сабжу — формально всё валидно, но по сути, конечно, разделители между пунктами меню, а тем более закругления, никак не тянут на самостоятельные пункты списка. Обычные фоновые картинки для них — самое место.

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

nav {
width:100%;
height:38px;
background:#f9f4d6 url(img/nav_background.png) left top repeat-x;	
}
nav li {
height:38px;
float:left;
margin: 10px 18px auto 16px;

}
.nav_img_left{
height:38px;
float:left;
width:10px;
margin:0px 5px auto 0px;
}
.nav_img_right{
height:38px;
float:left;
width:10px;
margin:0px 0px auto 0px;
}
.nav_border{
height:38px;
float:left;
width:2px;
margin:0px 1px auto 0px;
}
nav a {
	text-decoration:none;
	color:#fff;
	font-size: 1.4em;
	line-height:1;
}
nav a:hover {
color:#6f0f35;
}
#nav_left_background {
	background: url(img/nav_left_background.png) left top no-repeat;
}

В общем, как бы переверстать, чтобы не пришлось "пихать" в список элементы дизайна. И ещё, сейчас только заметил, надо закрыть теги img.

Edited November 4, 2012 by Barsam

[npofopr]

Я конечно пьян, но я не понимаю. Вы хотите хтмл5, зачем вам тогда ие8? Зачем к каждому элементу свой класс? Есть же :first-childe, :last-childe. Для бордеров не понятно зачем свой класс. И... Вроде для хтмл5 есть свой валидатор. Да и нет щас никаких цифер же. Вроде. Главное не делать грубых ошибок.

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

[SelenIT]

Вы хотите хтмл5, зачем вам тогда ие8?

Один из принципов HTML5 — обратная совместимость с существующим зоопарком (изящная деградация и всё такое).

разрешается и не закрывать имг, как и бр.

Скорее, в HTML5 закрытость этих тегов не зависит от наличия в них концевого слеша.