Jump to content
Sign in to follow this  
radrigo

Валидатор - article и h1

Recommended Posts

Всем привет.

 

Заметил одну вещь. Если в теге 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 если не в заголовках полной новости?

 

Заранее признателен всем за подсказку.

Share this post


Link to post
Share on other sites

Наверное, где -то на страниуе еще один H1 стоит
 

Share this post


Link to post
Share on other sites
16 часов назад, alex32 сказал:

Наверное, где -то на страниуе еще один H1 стоит
 

В том-то и дело что тег h1 встречается только один раз

Share this post


Link to post
Share on other sites
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>

qz6g5o9z.png

 

Так что без кода можно долго гадать, что вы не так делаете 

 

P.S.: за пример взят shotstory и просто продублирован

  • Upvote 1

Share this post


Link to post
Share on other sites

Данная ошибка показывает в полных новостях.

Вот ссылка на сайт с тестовым шаблон где эта ошибка. Данный шаблон разрабатваю с использованием Bootstrap.

Share this post


Link to post
Share on other sites

Не важно с помощью чего вы его разрабатываете, у вас в целом семантика вёрстки нарушена, поэтому он и ругается. 

  • Upvote 1

Share this post


Link to post
Share on other sites
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] &nbsp; | &nbsp; <b>{comments-num}</b> [declination={comments-num}]комментари|й|я|ев[/declination][/comments][catlist=17,28] &nbsp; | &nbsp; Автор: <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>

 

 

Share this post


Link to post
Share on other sites

Ошибка у вас не в fullstory, а раньше, у вас основной тег article завёрнут в тег section, если вы хотите использовать h1 внутри вашего article, то можете сменить 

<section class="ma_cont">
	---
</section>

на

<main class="ma_cont">
	
</main>

и тогда валидатор не будет ругаться на ваш h1 внутри article

  • Upvote 1

Share this post


Link to post
Share on other sites
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 

Подскажите, конкретно какие скрипты они рекомендуют от туда подключать?

Share this post


Link to post
Share on other sites
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 была огромна.

  • Upvote 1

Share this post


Link to post
Share on other sites
9 минут назад, celsoft сказал:

Как это у вас получается, если в стандартных шаблонах нет h1? Вы их поставили туда сами, а не идет какая то ошибка в стандартных шаблонах, стандартные шаблоны используют h2. Это семантически разные теги.

Один из примеров в шаблоне Default в статистических страницах.

 

Именно поэтому я изначально начал так верстать свой шаблон

19 минут назад, celsoft сказал:

Использовать HTML 5 на сайте и думать о IE 6-9 затея плохая. DLE не поддерживает эти браузеры уже более года. Ну добавите этот скрипт и что? ваша верстка CSS все равно развалится. т.к. вы используете неподдерживаемые этими браузерами свойства. Нужно верстку специально под эти браузеры делать, а легкое подключение каких то скрипт проблемы не решит. Так что мое личное мнение заниматься этим вообще не имеет никакого смысла, доля этих браузерах менее 1 процента, и то на предприятиях на каких то рабочих компьютерах, откуда по порталам не ходят и видео не смотрят, поэтому не тратьте впустую время. Это было актуально, когда HTML5 только появлялся и доля старого IE была огромна.

С этим я согласен, просто больше любопытство=)

Share this post


Link to post
Share on other sites
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

  • Upvote 1

Share this post


Link to post
Share on other sites
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; }

 

Единственное их отличие это что в первом случае между элементами присутствуют пробелы, однако по мне так они выполняют одну и туже функцию. Или я ошибаюсь и это было сделано намеренно с какой-то целью?

Share this post


Link to post
Share on other sites
26 минут назад, radrigo сказал:

Единственное их отличие это что в первом случае между элементами присутствуют пробелы, однако по мне так они выполняют одну и туже функцию. Или я ошибаюсь и это было сделано намеренно с какой-то целью?

Это не более чем случайное дублирование. 

Share this post


Link to post
Share on other sites

Да, эти стили одинаковые, скорей всего верстальщик не совсем внимательный был. Единственное отличие, то что в первом варианте отсутствует тег summary, а во втором тег menu. 

Вообще для сброса стилей рекомендую использовать normalize.css

  • Upvote 1

Share this post


Link to post
Share on other sites
4 часа назад, germanydletest сказал:

<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

скрипт тот же, но шансов того, что он есть в кеше браузера пользователя, гораздо больше, тем самым ускорится загрузка вашего сайта на IE 6-8

От гугла кстати не доступен

Share this post


Link to post
Share on other sites
12 минуты назад, radrigo сказал:

От гугла кстати не доступен

ну да, уже 11 месяцев сняли с поддержки, даже не знал, так как не пользуюсь этим скриптом, на IE ниже 10 мне пофиг

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...