0

Учусь верстать, сделана верстка макета на html5. Может, кто-нибудь согласится посмотреть верстку и высказать замечания? Если найдется кто-нибудь желающий, могу выслать архивом на мыло или в скайпе.

7
  • 1
    Заливай rghost.ru - и ссылку потом сюда.
    – istem
    Commented 25 окт. 2012 в 18:22
  • rghost.ru/41156344
    – Heidel
    Commented 25 окт. 2012 в 18:33
  • В целом неплохо. Но для такого простенького дизайна слишком много дивов. Можно облегчить код, за счет написания дополнительных правил в стилях. Если тэг выполняет только одну функцию на странице то зачем ему лепить класс? Как например в случае H2? Если есть исключение где-нибудь, то его и прописать как класс. Почему есть стили внутри тэгов на странице? Лень было или торопимся куда-то?
    – zhenyab
    Commented 25 окт. 2012 в 18:47
  • А какие дивы лишние, какие стоило бы убрать? Стили внутри тегов есть только у картинок вроде.
    – Heidel
    Commented 25 окт. 2012 в 18:52
  • 1
    [здесь все - все подробно][1] [1]: w3schools.com/html/html5_intro.asp
    – Vfvtnjd
    Commented 26 окт. 2012 в 4:53

2 ответа 2

6

Ладно, сказал А буду молвить и Б :)

конструкция

<header>
    <div id="logo">

Если вынести элемент nav наружу, то див уже не нужен и можно прописать стили для тэга header

конструкция

<article>
    <div id="news-box">

тоже не нужен тут див. Далее в

<footer>
    <div id="copyright">

тоже див не нужен. Вставлять<div style="clear: both;"></div> в каждой свободной строчке пожалуй тоже не стоит. Уверен, их количество на странице можно значительно снизить.

<span class="company-name">COMPANY NAME</span>
<span class="slogan">short slogan goes here</span>

Здесь напрашивается какой-нибудь тэг из вида "H", span используется явно не по назначению.

BR - это тоже тэг и его тоже нужно закрывать. Таблица не используется для позиционирования объектов на странице. Таблица только для табличных данных.

Внутри IMG тэгов не прописывают высоту и ширину - есть стили для этого, если оригинальный размер должен быть изменен.

Хух, ну пока хватит.

8
  • 2
    @zhenyab, бр закрывать нужно в xhtml, но не в html.
    – stck
    Commented 26 окт. 2012 в 4:15
  • >BR - это тоже тэг и его тоже нужно закрывать И как его закрывают? так <br> </br> ??? Распространено только такое <br />
    – Artem
    Commented 26 окт. 2012 в 6:47
  • @Shrek, этот элемент является закрытым в соотвествии с xml-спецификацией
    – stck
    Commented 26 окт. 2012 в 6:49
  • "Одинарные" элементы закрываются слэшем <img /> <br /> и т.д. Даже если <div /> написать в таком формате, то это будет равносильно <div></div> и не вижу тут места для сарказма.
    – zhenyab
    Commented 26 окт. 2012 в 8:36
  • @zhenyab, читайте "end tag: forbidden"
    – stck
    Commented 26 окт. 2012 в 8:38
2

Ну теперь от убирания дивов ;) перейдём к убиранию аттрибутов.

<nav>
    <a href="/" class="menu" title="About Us">About Us</a>
    <a href="/" class="menu" title="Services">Services</a>
    <a href="/" class="menu" title="Partners">Partners</a>
    <a href="/" class="menu" title="Contact Us">Contact&nbsp;Us</a>
</nav>

Так писать правильно, но не корректно. Правильнее было бы идентифицировать ссылку не по её классу, а по родителю. По классам обычно идентифицируются элементы которые находятся врознь.

<nav id=menu>
    <a href="/" title="About Us">About Us</a>
    ...
</nav>

И стиль соответственно:

#menu > a{
.../*Ваш стиль .menu */
}

Если Вы начинаете что-то учить, с чего вы начнёте? Вот, и тут надо было начать с референса, потому как там Вам бы был предоставлен полный объём информации.


Идём далее. Никаких кавычек в аттрибутах.

<div class="news-date">12/01/2004</div>

Так делали Ваши деды. Нет нет и ещё раз нет. Первый шаг к дао:

<div class=news-date>12/01/2004</div>

Второй шаг к дао:

<time class=news_date>12/01/2004</time>

<img src="/images/photo2.jpg" title="Изображение" width="147" height="98">

Может стоило обойтись стилями? Чем писать размерность в каждой картинке?


<table>
    <tr>
        <td class="titl">E-mail Addresses:</td>
        <td>[email protected]<br>[email protected]<br>[email protected]<br></td>
    </tr>
</table>

...


Вместо

<div style="clear: both;"></div>

Используйте псевдо- :after и :before с указанным clear.


5
  • 4
    @stck, ну, с каквычками уж как-то совсем строго )) Утяжеляют страницу? Если целевой аудиторией будут те, у кого до сих пор dial-up - тогда да, это существенный аргумент. Но даже, если не брать это во внимание, то вот простейший пример: <!-- В "дедовском" варианте --> <span class="first second">text</span> <!-- В варианте продвинутых - это работать не будет --> <span class=first second>text</span> Что в итоге? Каша, в которой есть часть с кавычками, часть без них. И т.к. я тот самый "дед", то читать такой код, мне не в кайф. В общем, не спешите выбрасывать кавычки на свалку ;
    – Deonis
    Commented 26 окт. 2012 в 5:40
  • @Deonis, наличие нескольких значений через пробел в классе подразумевают под собой использование кавычек) Я и не выбрасывал - просто это соответсвует референсу, автор сказал что хочет девственный html5, я подумал что будет важным) Вы думаете мне в кайф? Я по своим нуждам вообще верстаю xhtml старенький стриктовый. И да, утяжеляет. Я каноникализирую, так что каждый символ на счету:)
    – stck
    Commented 26 окт. 2012 в 6:26
  • Соглашусь с @deonis что за бред? Что значит девственный html5?
    – Artem
    Commented 26 окт. 2012 в 6:51
  • @Shrek, значит в соответсвии с референсом. А не в перемешку 2 референса 4 и 5
    – stck
    Commented 26 окт. 2012 в 6:53
  • большое всем спасибо за ответы, вы мне очень помогли)
    – Heidel
    Commented 27 окт. 2012 в 18:55

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.