Перейти к публикации

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


Рекомендованные сообщения

Всем привет.

 

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

 

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

Ссылка на сообщение
Поделиться на других сайтах
16 часов назад, alex32 сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах
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 и просто продублирован

Ссылка на сообщение
Поделиться на других сайтах

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

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

Ссылка на сообщение
Поделиться на других сайтах

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

Ссылка на сообщение
Поделиться на других сайтах
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>

 

 

Ссылка на сообщение
Поделиться на других сайтах

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

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

на

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

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

Ссылка на сообщение
Поделиться на других сайтах
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 

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

Ссылка на сообщение
Поделиться на других сайтах
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 была огромна.

Ссылка на сообщение
Поделиться на других сайтах
9 минут назад, celsoft сказал:

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

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

 

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

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

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

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

Ссылка на сообщение
Поделиться на других сайтах
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

Ссылка на сообщение
Поделиться на других сайтах
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; }

 

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

Ссылка на сообщение
Поделиться на других сайтах
26 минут назад, radrigo сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах

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

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

Ссылка на сообщение
Поделиться на других сайтах
4 часа назад, germanydletest сказал:

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

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

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

Ссылка на сообщение
Поделиться на других сайтах
12 минуты назад, radrigo сказал:

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

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

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...