Форум Сайтостроение Веб-строительство

Укажите на ошибки в верстке html5

12
sweb27
На сайте с 08.10.2012
Offline
29
sweb27
1407

Здравствуйте, хочу освоить html5 попробовал свертать простой дизайн, вроде все получилось.

Подскажите, все ли правильно сделал? правильно ли использую теги html5 

<!DOCTYPE html>

<html lang="en">

<head>

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

<title>title<title>

<meta name="description" content="{$site_description}" />

<meta name="keywords" content="{$site_keywords}" />

<link rel="icon" href="{$THEME}/images/favicon.png" type="image/x-icon" />

<link rel="shortcut icon" href="{$THEME}/images/favicon.png" type="image/x-icon">

<link rel="stylesheet" type="text/css" href="{$THEME}/css/general.css" />

<script type="text/javascript" src="{$THEME}/js/jquery.js"></script>

<script type="text/javascript" src="{$THEME}/js/scripts.js"></script>

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

</head>

<body>

<!-- BEGIN HEADER -->

<section id="header-container">

  <header>

     <div id="left">

        <div id="logo"><a href="{site_url('')}"><img src="{$THEME}/images/logo.png" alt="тра-та-та" width="218" height="120"/></a></div>

        <hgroup>

          Текст под логосом

        </hgroup>

     </div>

 <address>

    Адресс

 </address>

   <div class="sp"></div>

  </header><!-- end header -->

</section><!-- end header container -->



<!-- BEGIN NAVIGATION -->

<nav>

  Гризонтальная навигация

</nav>

 <!-- END BEGIN NAVIGATION -->

  

<!-- begin container -->

<section id="main">

<!-- content -->

   <article id="content">Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент</article>

 <!-- End content --> 

<!-- START SIDEBAR -->

   <aside id="sidebar">

    <div class="box">

        <h4 class="title"><span>Услуги</span></h4>

        <div class="content">

           Вертикальное меню

        </div>

     </div>

   </aside>

<!-- END SIDEBAR -->

   <div class="sp"></div>

</section> <!-- end main -->

    

<!-- BEGIN FOOTER -->

<footer>

Подвал

</footer>

<!-- END FOOTER -->

</body>

</html>

s.p. в стилях добавил ещё :

article, aside, audio, canvas, command, datalist, details, figcaption, figure, footer, header, hgroup, keygen, mark, menu, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr {display:block;}

seodata
На сайте с 04.03.2013
Offline
72
seodata
#1

Все чистенько.

Один совет: лучше использовать не id, а class. Идентификаторы хороши для скриптов и логики форм. С классами верстка понятнее и проще, т.к. их можно комбинировать и перекрывать их.

А так - все норм.

Не могу разобраться в Помогите насторить 301 Redirect Команда злостных критиков разорвет
богоносец
На сайте с 30.01.2007
Offline
775
богоносец
#2

А кому вообще нужна правильность использования тегов html5?

Когда будет html8?

sweb27
На сайте с 08.10.2012
Offline
29
sweb27
#3
seodata:
Все чистенько.

Один совет: лучше использовать не id, а class. Идентификаторы хороши для скриптов и логики форм. С классами верстка понятнее и проще, т.к. их можно комбинировать и перекрывать их.

А так - все норм.

Спасибо на совет.

---------- Post added 14-03-2013 at 17:13 ----------

богоносец:
А кому вообще нужна правильность использования тегов html5?

Когда будет html8?

Когда будет html8?

Это вопрос? если да, то не там задаёте😂

Ayavryk
На сайте с 11.10.2003
Offline
209
Ayavryk
#4
seodata:
Один совет: лучше использовать не id, а class.

Если на странице элемент уникальный типа #logo то лучше id.

Можно сэкономить три байта и несколько милисекунд на парсинге :)

Топикстартеру:

Обратите внимание на http://validator.w3.org/ - этот инструмент позволит вам самостоятельно проверить ошибки HTML.

Тынгыр, мынгыр, комсомол (http://erum.ru). Ехари, ехари, (жалобно) аяврик. /народная тунгусская песня/
seodata
На сайте с 04.03.2013
Offline
72
seodata
#5
Ayavryk:
Можно сэкономить три байта и несколько милисекунд на парсинге :)

Это да ☝

[Удален]
#6
Ayavryk:
Можно сэкономить три байта

И ещё нескоко килокаллорий и износ клавиатуры... ))

eis
На сайте с 18.10.2008
Offline
473
eis
#7
sweb27:
<div class="sp"></div>

Вот так нельзя 🙅

- Здесь я покупаю вечные ссылки на свои сайты! (https://backlinkator.com) - сотни ссылок за копейки
BadBoy
На сайте с 31.01.2005
Offline
308
BadBoy
#8

а кому ваще эта валидность нужна?

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

всю жизнь делаю сайты с ошибками в валидности, и как-то на заработок не повлияло не разу :)

Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#9

Раз уж html5, то не

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

а

<meta charset="utf-8" />

И для у вас в коде элемент <section id="header-container"> ? Какую полезную нагрузку он несет?

<div id="logo"><a href="{site_url('')}"><img src="{$THEME}/images/logo.png" alt="тра-та-та" width="218" height="120"/></a></div>
- 

<a id="logo" href="{site_url('')}" title="как там у вас? Тра та та?">Text</a>
- ни к чему плодить лишние элементы, не несущие в себе смысловой нагрузки.

<div class="sp"></div> - зачем? Распорка? А без никак?

Ayavryk
На сайте с 11.10.2003
Offline
209
Ayavryk
#10
BadBoy:
не плевать ли?и как-то на заработок не повлияло не разу :)

Иногда влияет на карму. Иногда когда правишь чужие сайты хочется убить верстальщика у которого из-за кучи багов в верстке сложно поймать один из незакрытых тегов.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий