0

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

7
  • 1
    Заливай rghost.ru - и ссылку потом сюда.
    – istem
    25 окт 2012 в 18:22
  • rghost.ru/41156344
    – Heidel
    25 окт 2012 в 18:33
  • В целом неплохо. Но для такого простенького дизайна слишком много дивов. Можно облегчить код, за счет написания дополнительных правил в стилях. Если тэг выполняет только одну функцию на странице то зачем ему лепить класс? Как например в случае H2? Если есть исключение где-нибудь, то его и прописать как класс. Почему есть стили внутри тэгов на странице? Лень было или торопимся куда-то?
    – zhenyab
    25 окт 2012 в 18:47
  • А какие дивы лишние, какие стоило бы убрать? Стили внутри тегов есть только у картинок вроде.
    – Heidel
    25 окт 2012 в 18:52
  • 1
    [здесь все - все подробно][1] [1]: w3schools.com/html/html5_intro.asp
    – Vfvtnjd
    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
    26 окт 2012 в 4:15
  • >BR - это тоже тэг и его тоже нужно закрывать И как его закрывают? так <br> </br> ??? Распространено только такое <br />
    – Artem
    26 окт 2012 в 6:47
  • @Shrek, этот элемент является закрытым в соотвествии с xml-спецификацией
    – stck
    26 окт 2012 в 6:49
  • "Одинарные" элементы закрываются слэшем <img /> <br /> и т.д. Даже если <div /> написать в таком формате, то это будет равносильно <div></div> и не вижу тут места для сарказма.
    – zhenyab
    26 окт 2012 в 8:36
  • @zhenyab, читайте "end tag: forbidden"
    – stck
    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>support@clinic.com<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
    26 окт 2012 в 5:40
  • @Deonis, наличие нескольких значений через пробел в классе подразумевают под собой использование кавычек) Я и не выбрасывал - просто это соответсвует референсу, автор сказал что хочет девственный html5, я подумал что будет важным) Вы думаете мне в кайф? Я по своим нуждам вообще верстаю xhtml старенький стриктовый. И да, утяжеляет. Я каноникализирую, так что каждый символ на счету:)
    – stck
    26 окт 2012 в 6:26
  • Соглашусь с @deonis что за бред? Что значит девственный html5?
    – Artem
    26 окт 2012 в 6:51
  • @Shrek, значит в соответсвии с референсом. А не в перемешку 2 референса 4 и 5
    – stck
    26 окт 2012 в 6:53
  • большое всем спасибо за ответы, вы мне очень помогли)
    – Heidel
    27 окт 2012 в 18:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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