Как исправить ошибки html5. Валидация?

Question

[Hello World]

Привет всем. Сделал давно сайт с макета, используя html5. Вот рабочий сайт
На днях решил вернуться к этому делу и доделать нормально сайт ради своего удовлетворения. Не спокойно на душе)
Теперь вопросы:
1. Правильно ли я использовал теги article(например, блок с текстом RAPPRESENT YOUR LIFE WITH A SIMPLE PHOTO)
2. Почему валидатор ругается на заголовки h1-h6? Не понимаю Валидатор. Подскажите, что не так. Переходил по ссылкам, исправлял - не получается избавиться от ошибок.
P/s: адаптив не делал, не надо говорить об этом.

Comments

[Никита Богомолов]

Не подскажешь где такие макеты можно для тренировки взять?

[Hello World]

В поиске в разделе "Новости" #psd@webdevcom написал и получил макеты

Answer 1

[Котик Антон]

Теги H1 вы точно не правильно используете. С точки зрения SEO, да в общем-то и семантики, H1 это главный заголовок верхнего уровня. В него можно было бы включит название сайта, может даже текст "YOUR LIFE , A PHOTO", для всего остального есть H2-H6. А вы в H1 оборачиваете всё, что выглядит как заголовок.

А валидатор всего-лишь выводит предупреждение, что H1 должен быть строго внутри body.
https://www.w3.org/wiki/HTML/Usage/Headings/h1only

Правильно ли я использовал теги article (например, блок с текстом RAPPRESENT YOUR LIFE WITH A SIMPLE PHOTO)?

Нет. Для этих блоков есть тег section. А article нужно использовать для контента: постов, статей, новостей, комментариев (для всего, у чего есть автор и дата публикации), но точно не для статического блока с информацией.

Comments

[Hello World]

Сейчас изменил на h2 и обернул в section. Ошибки также остались.

[Котик Антон]

Hello World: Оставляйте только внешние section, которые #sec-rappresent, #sec-design... внутри них все section меняете на div.

[Hello World]

27cm: а, не правильно понял перевод. Убрал, теперь остались ошибки в section c id

[Котик Антон]

Hello World:

Оставляйте только внешние section, которые #sec-rappresent, #sec-design... внутри них все section меняете на div.

Не все section внутри заменили на div.

[Котик Антон]

Hello World: Ещё у вас alt пустые.
https://validator.w3.org/nu/?showsource=yes&showim...

[Hello World]

27cm: спасибо за счет section. Ошибки пропали. На сче alt - я знаю. Не хотел заполнять. Очень странно, что в родительском section нельзя писать еще 1 section при h1.. И думал, что тег article подходит для моих новостей. Есть заголовок, есть тело, есть та же дата. Пример с блоком #sec-design

[Котик Антон]

Hello World: Просто у каждого section должен быть свой заголовок, а у вас было по одному заголовку h2 обёрнутого в пару section - вот валидатор и делает предупреждение.

[Hello World]

27cm: ясно. А в целом, как правильно такие блоки делать? Так как я сделал на текущий момент - правильно? (ошибок нет и т.д, не учитывая alt)