Проверьте правильная ли верстка html5

34

Mazletop

24 октября 2015, 05:05

1475

Всем привет, сделал набросок дизайна, очень хочу сделать правильную вверстку на html5, просьба гуру указать о ошибки и посоветовать и доводами..

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>MyNane</title>

        <meta name="description" content="description" />

        <meta name="keywords" content="keywords" />

        <meta name="generator" content="WebStudio" />

        

        <link rel="icon" href="favicon.ico" type="image/x-icon" />

        <link rel="SHORTCUT ICON" href="favicon.ico" />

        

        <link rel="stylesheet" type="text/css" href="style.css" />



        <script src="jquery.js"></script>

        <!--[if lt IE 9]

        <script type="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

        <![endif]-->

   </head>

<body>





<section class="top-wrap">

  <nav class="container">

    <ul class="share">

      <li><a title="Карта сайта" target="_blank" href="/sitemap"></a></li>

      <li><a title="RSS лента" target="_blank" href="/rss"></a></li>

   </ul>



   <ul class="top-menu">

     <li><a href="/" target="_self" title="Ещё ссылка">Ещё ссылка</a></li>

     <li><a href="/" target="_self" title="Контакты">Контакты</a></li>

   </ul>   

  </nav>

</section>







<header class="header">

  <a title="MyName" class="logo" href="/">

          <h1 class="baoyuan">MyName</h1>

          <p class="slogan">Slogan</p>

  </a>

  

  <div id="search">

    Форма плиска

  </div>



  <nav class="nav">

    <ul class="main-menu sf-menu">

      <li><a href="/"  title="Главная">Главная</a></li>

     <li><a href="/" title="Пункт меню">Пункт меню</a><li>

    </ul>

  </nav>

  

</header>









<!-- slider -->

<section class="slider">

  <h2>Заголовок h2</h2>

</section>

<!-- end slider -->







<main class="main">

  <section id="content">

    

    <article>

      <h2>О проекте</h2>

        <div id="detail">

           <p>

             Короткое описание о проекте

           </p>

        </div>

    </article>





<section>

      <h2 id="title">Заголовок h2</h2>

      

      <article>

        <header>

        <a title="Проект" href="/">

          <div class="wr">

            <img src="image.jpg" title="Проект" alt="Проект" />

          </div>

          <h3>Заголовок h3</h3>

          <p class="square">Инфо о проекте</p>

        </a>

        </header>

      </article>

  

  

      <article>

        <header>

        <a title="Проект" href="/">

          <div class="wr">

            <img src="image.jpg" title="Проект" alt="Проект" />

          </div>

          <h3>Заголовок h3</h3>

          <p class="square">Инфо о проекте</p>

        </a>

        </header>

      </article>



</section>









<section>

<h2 id="title">Заголовок h2</h2>







<article class="wrap-blog">

  <header><!-- вводный контент -->

    <h3><a href="/">Клееный брус</a></h3>

    <div class="wrap-m">

      <time>28-09-2015</time>

      <div class="coments">

        Раздел: <a href="/">Статьи</a>

                <a href="/">Комментариев: 0</a>

       </div><!-- end coments -->

     </div><!-- end wrap-m -->

</header>  <!-- Конец воодного контента -->

  

<p><img title="" alt="" dir="/" src="image.jpg" /></p>

<p>Описание</p> 

<div class="next"><a href="/">Читать дальше</a></div>

</article><!-- end wrap-blog-->









<article class="wrap-blog">

  <header><!-- вводный контент -->

    <h3><a href="/">Клееный брус</a></h3>

    <div class="wrap-m">

      <time>28-09-2015</time>

      <div class="coments">

        Раздел: <a href="/">Статьи</a>

                <a href="/">Комментариев: 0</a>

       </div><!-- end coments -->

     </div><!-- end wrap-m -->

</header>  <!-- Конец воодного контента -->

  

<p><img title="" alt="" dir="/" src="image.jpg" /></p>

<p>Описание</p> 

<div class="next"><a href="/">Читать дальше</a></div>

</article><!-- end wrap-blog-->

</section>



</section><!-- end content-->

   

   

   

    

    

<!-- START SIDEBAR -->

<section id="sidebar">

  <aside class="box col">

    <h4 class="title"><span>Навигация</span></h4>

    <nav>

      <ul>

        <li><a href="/" title="Сыылка 1">Сыылка 1</a></li>

        <li><a href="/" title="Сыылка 2">Сыылка 2</a></li>

      </ul>

    </nav>

</aside>

</section>

<!-- END SIDEBAR -->



</main>











     

  <footer>

Контакты и т.д.

</footer>

    

    </body>

</html>

Заранее спасибо.

83

oux

24 октября 2015, 05:13

#1

Все правильно, работайте смело. Что-то типа блога планируется?

M

34

Mazletop

24 октября 2015, 05:17

#2

oux:
Все правильно, работайте смело. Что-то типа блога планируется?

Ну что то вроде портала.. просо очень хочется сразу делать грамотно..

Спасибо за доброе слово.

M

376

Miracle

24 октября 2015, 05:18

#3

блок со контентом рекомендуют подымать как можно выше

отец сыночка, лапочки дочки и еще одного сыночка

Z

63

Zick

24 октября 2015, 05:29

#4

Не гуру, но могу посоветовать валидатор.

https://validator.w3.org/

Если смотреть с точки зрения семантичности, имхо, не всё верно. Например, вы используете section, nav в качестве обертки (div).

1

M

34

Mazletop

24 октября 2015, 05:36

#5

Miracle:
блок со контентом рекомендуют подымать как можно выше

Здравствуйте, это я знаю.. но, это главная страница только, да и куда выше, выше хедера что ли..

Про тег h1 тоже самое кстати, как можно выше.. но, нужно не забывать, что оно ведь ещё должно быть удобно для людей.

---------- Добавлено 24.10.2015 в 08:40 ----------

Zick:
Не гуру, но могу посоветовать валидатор.
https://validator.w3.org/

Если смотреть с точки зрения семантичности, имхо, не всё верно. Например, вы используете section, nav в качестве обертки (div).

validator.w3.org отличный сервис, но ещё не проверял им..

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

Вы как понимаю говорите в самом верхнем блоке где 2 вложеных меню?

Вопрос по перелинковке Как поступить с h1 Во дают... перепугали... :)

M

34

Mazletop

24 октября 2015, 08:09

#6

А знает кто, чего валидатор ругается на:

чтобы я ни делал..

94

Gerga

24 октября 2015, 08:22

#7

Mazletop:
<time datetime="28-09-2015" pubdate>28-09-2015</time>

Во-первых, формат даты неверен, нужно так: ГГГГ-ММ-ДД. Во-вторых, pubdate лишен тут.

<time datetime="2015-09-28">28-09-2015</time>

---------- Добавлено 24.10.2015 в 11:28 ----------

Mazletop:

По поводу обертки может вы и правы, но тогда чем лучше обернуть? просто в див?
Вы как понимаю говорите в самом верхнем блоке где 2 вложеных меню?

Да, просто в DIV. Для SECTION, как и для ARTICLE, нужно устанавливать заголовок.

---------- Добавлено 24.10.2015 в 11:42 ----------

Mazletop:

<a title="MyName" class="logo" href="/">
<h1 class="baoyuan">MyName</h1>
<p class="slogan">Slogan</p>
</a>

Это тоже не правильно. Нельзя в любой строчный элемент, которым является <a>, помещать блоковый элемент, которыми являются <h1> и <p>.

В общем, ваша структура не верна, к тому же вызывает в валидаторе 54 Errors, 14 warning(s), а это очень много для такого маленького куска кода...

1

Отложенная загрузка элементов страницы Поисковые запросы с дефисом SEO F.A.Q. - 215

M

34

Mazletop

24 октября 2015, 10:54

#8

Gerga:
Во-первых, формат даты неверен, нужно так: ГГГГ-ММ-ДД. Во-вторых, pubdate лишен тут.

<time datetime="2015-09-28">28-09-2015</time>

---------- Добавлено 24.10.2015 в 11:28 ----------

Да, просто в DIV. Для SECTION, как и для ARTICLE, нужно устанавливать заголовок.

---------- Добавлено 24.10.2015 в 11:42 ----------

Это тоже не правильно. Нельзя в любой строчный элемент, которым является <a>, помещать блоковый элемент, которыми являются <h1> и <p>.

В общем, ваша структура не верна, к тому же вызывает в валидаторе 54 Errors, 14 warning(s), а это очень много для такого маленького куска кода...

Очень ценные советы, спасибо..

Почти все ошибки исправил, осталось с <time> и каринки.. из основного.

А вот и само чудо моё: _baoyuan-osb.ру , выкинул обновления в нэт.

Что скажете?

94

Gerga

24 октября 2015, 13:21

#9

Mazletop:
А вот и само чудо моё: _baoyuan-osb.ру , выкинул обновления в нэт.
Что скажете?

Нужно переделывать.

Из того, что бросается в глаза:

1. Разгрузит область head;

2. Поместить скрипт для майл рейтинга в подвал;

3. pluso переместить в подвал;

4. Желательно убрать h4 в сайдбаре;

5. Убрать ссылку которая обременяет блочные элементы (на главной в "Последние добавленные проекты домов"). Поставить ссылку в h3, а для самого блока сделать переход по клике с помощью JS событие onclick;

6. На странице записи, из обязательного, поместить стили в отдельный файл. Слово "Теги:" не выводить, если тегов у записи нету;

7. Смотреть дальше....

Проверьте оптимизацию... 4 заголовка в <h1> Лучшие места для объявлений

79

Olldman

24 октября 2015, 18:07

#10

Можно добавить, что в элементе main следует размещать только основной контент, исключая в вашем случае сайдбар

Тренды маркетинга в 2024 году: мобильные продажи, углубленная аналитика и ИИ

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах