radrigo 180 Опубликовано: 21 июня 2016 Рассказать Опубликовано: 21 июня 2016 Всем привет. Заметил одну вещь. Если в теге article присутствует h1 то валидатор показывает следующее предупреждение Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools). Меняю тег h1 на h2, или выношу за пределы тега article, предупреждение перестаёт показываться. Хотя на одном из блогов написано что заголовки внутри тега article обязательны Цитата режде всего обратите внимание на определение «самодостаточный компонент», это определение говорит о том, что в элементе article должен размещаться законченный контент. И что само собой разумеется в этом элементе страницы в обязательном порядке должны присутствовать теги заголовков, причём первый заголовок находящийся в нём будет участвовать в создании структуры страницы. Также приводятся примеры где внутри тега article используется h1 Помогите понять как всё таки будет правильно? Да и где тогда использовать h1 если не в заголовках полной новости? Заранее признателен всем за подсказку. Цитата Ссылка на сообщение Поделиться на других сайтах
alex32 942 Опубликовано: 22 июня 2016 Рассказать Опубликовано: 22 июня 2016 Наверное, где -то на страниуе еще один H1 стоит Цитата Ссылка на сообщение Поделиться на других сайтах
radrigo 180 Опубликовано: 22 июня 2016 Рассказать Опубликовано: 22 июня 2016 Автор 16 часов назад, alex32 сказал: Наверное, где -то на страниуе еще один H1 стоит В том-то и дело что тег h1 встречается только один раз Цитата Ссылка на сообщение Поделиться на других сайтах
germanydletest 455 Опубликовано: 22 июня 2016 Рассказать Опубликовано: 22 июня 2016 21 час назад, radrigo сказал: Хотя на одном из блогов написано на заборах тоже много чего пишут, тут надо смотреть сам код, вот вам пример разметки моего сайта, и данный код проходит валидацию на ура <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Пример</title> </head> <body> <article class="main-content"> <a href="#"> <figure> <img src="images/folder/files.png" width="274" height="180" alt="{title}"> <figcaption><h1>Заголовок</h1></figcaption> </figure> </a> <footer class="article-footer"><span class="article-footer-comments">189</span> <span class="article-footer-views">8956</span></footer> </article> <article class="main-content"> <a href="#"> <figure> <img src="images/folder/files.png" width="274" height="180" alt="{title}"> <figcaption><h1>Заголовок</h1></figcaption> </figure> </a> <footer class="article-footer"><span class="article-footer-comments">189</span> <span class="article-footer-views">8956</span></footer> </article> <article class="main-content"> <a href="#"> <figure> <img src="images/folder/files.png" width="274" height="180" alt="{title}"> <figcaption><h1>Заголовок</h1></figcaption> </figure> </a> <footer class="article-footer"><span class="article-footer-comments">189</span> <span class="article-footer-views">8956</span></footer> </article> </body> </html> Так что без кода можно долго гадать, что вы не так делаете P.S.: за пример взят shotstory и просто продублирован 1 Цитата Ссылка на сообщение Поделиться на других сайтах
radrigo 180 Опубликовано: 23 июня 2016 Рассказать Опубликовано: 23 июня 2016 Автор Данная ошибка показывает в полных новостях. Вот ссылка на сайт с тестовым шаблон где эта ошибка. Данный шаблон разрабатваю с использованием Bootstrap. Цитата Ссылка на сообщение Поделиться на других сайтах
germanydletest 455 Опубликовано: 23 июня 2016 Рассказать Опубликовано: 23 июня 2016 Не важно с помощью чего вы его разрабатываете, у вас в целом семантика вёрстки нарушена, поэтому он и ругается. 1 Цитата Ссылка на сообщение Поделиться на других сайтах
radrigo 180 Опубликовано: 23 июня 2016 Рассказать Опубликовано: 23 июня 2016 Автор 35 минут назад, germanydletest сказал: Не важно с помощью чего вы его разрабатываете, у вас в целом семантика вёрстки нарушена, поэтому он и ругается. Не можете подсказать где именно нарушено? Делал по примеру шаблона Default, только там заголовок новости в h2, если сделать h1 как у меня, то тоже показывает ошибку. это мой fullstory.tpl <article class="full_fon"> <h1 class="title">{title}</h1> <div class="full_dat ignore-select">[edit]<svg class="icon icon-edit"><use xlink:href="#icon-edit"></use></svg>[/edit][add-favorites]<svg class="icon icon-fav"><use xlink:href="#icon-fav"></use></svg>[/add-favorites][del-favorites]<svg class="icon red icon-fav"><use xlink:href="#icon-fav"></use></svg>[/del-favorites]{date=j F Y, H:i}</div> [xfgiven_foto] <div class="full_foto">[xfvalue_foto]</div> [/xfgiven_foto] <ul class="full_get ignore-select"> <li onclick="document.getElementById('idblock').className = 'classFirst';" class="fos01">Размер шрифта</li> <li onclick="document.getElementById('idblock').className = 'classSecond';" class="fos02">+</li> <li onclick="document.getElementById('idblock').className = 'classThird';" class="fos02">++</li> <li class="soctop"> <noindex><div class="ya-share2 nochvo" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter" data-size="s" data-counter="" data-image="{image-1}" data-title="{title}" data-url="{full-link}" data-description="{full-story limit='200'}"></div></noindex> </li> </ul> <div id="idblock" class="news classFirst">{full-story}</div> {poll} [xfgiven_video]<div class="news-video">[xfvalue_video]</div>[/xfgiven_video] [tags]<i class="full_tags ignore-select">Теги: {tags}</i>[/tags] <div class="full_inf ignore-select"><b>{views}</b> [declination={views}]просмот|р|ра|ров[/declination][comments] | <b>{comments-num}</b> [declination={comments-num}]комментари|й|я|ев[/declination][/comments][catlist=17,28] | Автор: <b>{author}</b>[/catlist]</div> [edit-date]<i class="editdate">Новость отредактирована {edit-date}<br> [edit-reason]Причина: {edit-reason}[/edit-reason]</i>[/edit-date] <div class="full_soc"><div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter" data-counter="" data-image="{image-1}" data-title="{title}" data-url="{full-link}" data-description="{full-story limit='200'}"></div>{rating}<span class="prosm">{vote-num}</span></div> </article> [not-catlist=16][related-news] <div class="ma_fon ignore-select"> <div class="cont_sh">Другие новости по теме</div> {related-news} </div> [/related-news][/not-catlist] <div class="ma_fon">{comments} {navigation} {addcomments}</div> <script type="text/javascript" src="/engine/classes/min/index.php?f={THEME}/js/share.js" charset="utf-8"></script> Цитата Ссылка на сообщение Поделиться на других сайтах
germanydletest 455 Опубликовано: 23 июня 2016 Рассказать Опубликовано: 23 июня 2016 Ошибка у вас не в fullstory, а раньше, у вас основной тег article завёрнут в тег section, если вы хотите использовать h1 внутри вашего article, то можете сменить <section class="ma_cont"> --- </section> на <main class="ma_cont"> </main> и тогда валидатор не будет ругаться на ваш h1 внутри article 1 Цитата Ссылка на сообщение Поделиться на других сайтах
radrigo 180 Опубликовано: 23 июня 2016 Рассказать Опубликовано: 23 июня 2016 Автор 39 минут назад, germanydletest сказал: Ошибка у вас не в fullstory, а раньше, у вас основной тег article завёрнут в тег section, если вы хотите использовать h1 внутри вашего article, то можете сменить <section class="ma_cont"> --- </section> на <main class="ma_cont"> </main> и тогда валидатор не будет ругаться на ваш h1 внутри article Спасибо. Пропали две ошибки в валидаторе=) Получается эта ошибка и в шаблонах которые идут вместе с движком по умолчанию. И ещё несколько вопросов Для каких целей в шаблонах кроме Default подключают скрипт svgxuse.min.js. Ясно что он для иконок svg, но для какой цели непонятно. И ещё. В статье на сайте http://htmlbook.ru/blog/element. рекомендуется использовать следующие скрипты для старых ie document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('main'); и т.п...... Либо использовать https://github.com/aFarkas/html5shiv Подскажите, конкретно какие скрипты они рекомендуют от туда подключать? Цитата Ссылка на сообщение Поделиться на других сайтах
celsoft 6 076 Опубликовано: 23 июня 2016 Рассказать Опубликовано: 23 июня 2016 25 минут назад, radrigo сказал: Получается эта ошибка и в шаблонах которые идут вместе с движком по умолчанию. Как это у вас получается, если в стандартных шаблонах нет h1? Вы их поставили туда сами, а не идет какая то ошибка в стандартных шаблонах, стандартные шаблоны используют h2. Это семантически разные теги. 25 минут назад, radrigo сказал: Для каких целей в шаблонах кроме Default подключают скрипт svgxuse.min.js. Ясно что он для иконок svg, но для какой цели непонятно. Для старых браузеров не поддерживающих нативно использование тега <use> с внешними ссылками. 30 минут назад, radrigo сказал: И ещё. В статье на сайте http://htmlbook.ru/blog/element. рекомендуется использовать следующие скрипты для старых ie Использовать HTML 5 на сайте и думать о IE 6-9 затея плохая. DLE не поддерживает эти браузеры уже более года. Ну добавите этот скрипт и что? ваша верстка CSS все равно развалится. т.к. вы используете неподдерживаемые этими браузерами свойства. Нужно верстку специально под эти браузеры делать, а легкое подключение каких то скрипт проблемы не решит. Так что мое личное мнение заниматься этим вообще не имеет никакого смысла, доля этих браузерах менее 1 процента, и то на предприятиях на каких то рабочих компьютерах, откуда по порталам не ходят и видео не смотрят, поэтому не тратьте впустую время. Это было актуально, когда HTML5 только появлялся и доля старого IE была огромна. 1 Цитата Ссылка на сообщение Поделиться на других сайтах
radrigo 180 Опубликовано: 23 июня 2016 Рассказать Опубликовано: 23 июня 2016 Автор 9 минут назад, celsoft сказал: Как это у вас получается, если в стандартных шаблонах нет h1? Вы их поставили туда сами, а не идет какая то ошибка в стандартных шаблонах, стандартные шаблоны используют h2. Это семантически разные теги. Один из примеров в шаблоне Default в статистических страницах. Именно поэтому я изначально начал так верстать свой шаблон 19 минут назад, celsoft сказал: Использовать HTML 5 на сайте и думать о IE 6-9 затея плохая. DLE не поддерживает эти браузеры уже более года. Ну добавите этот скрипт и что? ваша верстка CSS все равно развалится. т.к. вы используете неподдерживаемые этими браузерами свойства. Нужно верстку специально под эти браузеры делать, а легкое подключение каких то скрипт проблемы не решит. Так что мое личное мнение заниматься этим вообще не имеет никакого смысла, доля этих браузерах менее 1 процента, и то на предприятиях на каких то рабочих компьютерах, откуда по порталам не ходят и видео не смотрят, поэтому не тратьте впустую время. Это было актуально, когда HTML5 только появлялся и доля старого IE была огромна. С этим я согласен, просто больше любопытство=) Цитата Ссылка на сообщение Поделиться на других сайтах
germanydletest 455 Опубликовано: 23 июня 2016 Рассказать Опубликовано: 23 июня 2016 44 минуты назад, radrigo сказал: Подскажите, конкретно какие скрипты они рекомендуют от туда подключать? Берёте только html5shiv.js, закидываете его к себе в папку со всеми js скриптами и подключаете <!--[if lt IE 9]> <script type="text/javascript" src="{THEME}/js/html5shiv.js"></script> <![endif]--> но я бы рекомендовал подключать от гугла, а не с собственного сайта <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> скрипт тот же, но шансов того, что он есть в кеше браузера пользователя, гораздо больше, тем самым ускорится загрузка вашего сайта на IE 6-8 1 Цитата Ссылка на сообщение Поделиться на других сайтах
radrigo 180 Опубликовано: 23 июня 2016 Рассказать Опубликовано: 23 июня 2016 Автор 16 минут назад, germanydletest сказал: Берёте только html5shiv.js, закидываете его к себе в папку со всеми js скриптами и подключаете <!--[if lt IE 9]> <script type="text/javascript" src="{THEME}/js/html5shiv.js"></script> <![endif]--> но я бы рекомендовал подключать от гугла, а не с собственного сайта <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> скрипт тот же, но шансов того, что он есть в кеше браузера пользователя, гораздо больше, тем самым ускорится загрузка вашего сайта на IE 6-8 Спасибо=) Ещё вопрос. В стандартных шаблонах присутствуют такие стили и они идут практически друг за другом такой article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } и такой article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary { display: block; } Единственное их отличие это что в первом случае между элементами присутствуют пробелы, однако по мне так они выполняют одну и туже функцию. Или я ошибаюсь и это было сделано намеренно с какой-то целью? Цитата Ссылка на сообщение Поделиться на других сайтах
celsoft 6 076 Опубликовано: 23 июня 2016 Рассказать Опубликовано: 23 июня 2016 26 минут назад, radrigo сказал: Единственное их отличие это что в первом случае между элементами присутствуют пробелы, однако по мне так они выполняют одну и туже функцию. Или я ошибаюсь и это было сделано намеренно с какой-то целью? Это не более чем случайное дублирование. Цитата Ссылка на сообщение Поделиться на других сайтах
germanydletest 455 Опубликовано: 23 июня 2016 Рассказать Опубликовано: 23 июня 2016 Да, эти стили одинаковые, скорей всего верстальщик не совсем внимательный был. Единственное отличие, то что в первом варианте отсутствует тег summary, а во втором тег menu. Вообще для сброса стилей рекомендую использовать normalize.css 1 Цитата Ссылка на сообщение Поделиться на других сайтах
radrigo 180 Опубликовано: 23 июня 2016 Рассказать Опубликовано: 23 июня 2016 Автор 4 часа назад, germanydletest сказал: <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> скрипт тот же, но шансов того, что он есть в кеше браузера пользователя, гораздо больше, тем самым ускорится загрузка вашего сайта на IE 6-8 От гугла кстати не доступен Цитата Ссылка на сообщение Поделиться на других сайтах
germanydletest 455 Опубликовано: 23 июня 2016 Рассказать Опубликовано: 23 июня 2016 12 минуты назад, radrigo сказал: От гугла кстати не доступен ну да, уже 11 месяцев сняли с поддержки, даже не знал, так как не пользуюсь этим скриптом, на IE ниже 10 мне пофиг Цитата Ссылка на сообщение Поделиться на других сайтах
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.