Учусь верстать, сделана верстка макета на html5. Может, кто-нибудь согласится посмотреть верстку и высказать замечания? Если найдется кто-нибудь желающий, могу выслать архивом на мыло или в скайпе.
-
1Заливай rghost.ru - и ссылку потом сюда.– istemCommented 25 окт. 2012 в 18:22
-
rghost.ru/41156344– HeidelCommented 25 окт. 2012 в 18:33
-
В целом неплохо. Но для такого простенького дизайна слишком много дивов. Можно облегчить код, за счет написания дополнительных правил в стилях. Если тэг выполняет только одну функцию на странице то зачем ему лепить класс? Как например в случае H2? Если есть исключение где-нибудь, то его и прописать как класс. Почему есть стили внутри тэгов на странице? Лень было или торопимся куда-то?– zhenyabCommented 25 окт. 2012 в 18:47
-
А какие дивы лишние, какие стоило бы убрать? Стили внутри тегов есть только у картинок вроде.– HeidelCommented 25 окт. 2012 в 18:52
-
1[здесь все - все подробно][1] [1]: w3schools.com/html/html5_intro.asp– VfvtnjdCommented 26 окт. 2012 в 4:53
2 ответа
Ладно, сказал А буду молвить и Б :)
конструкция
<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 тэгов не прописывают высоту и ширину - есть стили для этого, если оригинальный размер должен быть изменен.
Хух, ну пока хватит.
-
2
-
>BR - это тоже тэг и его тоже нужно закрывать И как его закрывают? так <br> </br> ??? Распространено только такое <br />– ArtemCommented 26 окт. 2012 в 6:47
-
@Shrek, этот элемент является закрытым в соотвествии с xml-спецификацией– stckCommented 26 окт. 2012 в 6:49
-
"Одинарные" элементы закрываются слэшем <img /> <br /> и т.д. Даже если <div /> написать в таком формате, то это будет равносильно <div></div> и не вижу тут места для сарказма.– zhenyabCommented 26 окт. 2012 в 8:36
-
Ну теперь от убирания дивов ;) перейдём к убиранию аттрибутов.
<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 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
.
-
4@stck, ну, с каквычками уж как-то совсем строго )) Утяжеляют страницу? Если целевой аудиторией будут те, у кого до сих пор dial-up - тогда да, это существенный аргумент. Но даже, если не брать это во внимание, то вот простейший пример: <!-- В "дедовском" варианте --> <span class="first second">text</span> <!-- В варианте продвинутых - это работать не будет --> <span class=first second>text</span> Что в итоге? Каша, в которой есть часть с кавычками, часть без них. И т.к. я тот самый "дед", то читать такой код, мне не в кайф. В общем, не спешите выбрасывать кавычки на свалку ;– DeonisCommented 26 окт. 2012 в 5:40
-
@Deonis, наличие нескольких значений через пробел в классе подразумевают под собой использование кавычек) Я и не выбрасывал - просто это соответсвует референсу, автор сказал что хочет девственный html5, я подумал что будет важным) Вы думаете мне в кайф? Я по своим нуждам вообще верстаю xhtml старенький стриктовый. И да, утяжеляет. Я каноникализирую, так что каждый символ на счету:)– stckCommented 26 окт. 2012 в 6:26
-
Соглашусь с @deonis что за бред? Что значит девственный html5?– ArtemCommented 26 окт. 2012 в 6:51
-
@Shrek, значит в соответсвии с референсом. А не в перемешку 2 референса 4 и 5– stckCommented 26 окт. 2012 в 6:53
-