Семантическая верстка хедера

[happyproff]

День добрый форумчане.

Сейчас пытаюсь семантически грамотно сверстать хедер страницы, содержащий название фирмы и ее контакты. Что я подразумеваю по "семантически грамотно"?

1. Разметка должна быть логичной, все элементы html должны использоваться по назначению, следственно не должно быть таблиц.
   
2. Контакты оформлены микроформатом hCard. Но это пока что не обязательно.
   
3. Название фирмы в тег h1.
   
4. Логически правильно весь хедер оформить в тег div. А отдельные его части, если потребуется в span.
   
5. Всё представление должно быть вынесено из html во внешний css файл. В html должна остаться только структура данных и сами данные.
   

Итак, имеем мы следующее:

html:

<div id="header">
	<h1><a href="localhost"><img src="/images/sitetitle.jpg" alt="Сайт фирмы" border="0"/></a></h1>
	<span id="contacts">
		Город, улица 0<br />
		firm@domain.com<br />
		тел. (000) 111-22-33
	</span>
</div>

css:

* {
	padding:0px;
	margin:0px;}

a {
	text-decoration:none;
	color:#333333;
}

#header {
	height:100px;
}

#home{
	width:300px;
	height:100px;
	margin-left:10px;
}

#home a {
	font-family:Verdana;
	font-size:24px;
	font-weight:normal;
}

#contacts {
	width:250px;
	height:100px;
	right:10px;
	text-align:right;
}

• Хедер резиновый
  
• заголовок - картинка, margin-left:10px
  
• контакты - текст, margin-right:10px
  
• вертикальное выравнивание контактов - нижний край хедера
  

[klierik]

по поводу заголовка... самому стало интересно.. следует ли его пихать в H1

а вот про контактную информацию (контакты в радиоприемнике )

я б сделал их списком, так как оно таковым является =)

[Guest Гость_Anton_*]

Не является.

Список чего это по вашему мнению?

Контактную информацию, на мой взгляд, лучше брать в тег <address>

Напимер, так:

<address>
<span class="address">Город, улица 0</span>
<span class="email">firm@domain.com</span>
<span class="phone">тел. (000) 111-22-33</span>
</address>

address span {
	display: block;
}

[klierik]

2Гость_Гость_Anton_*_*,

а какой смысл спану устанавливать блочное свойства, если можно просто использовать, <div>.

а списком он является потому, что состоит из последовательных элементов, общий смысл которых входит в область одного осмысленного представления информации, но при том же каждая строка несет в себе свой опеределенный смысл.

но в это в данном уникальном случае, так как визуальное представление информационного блока представлено построчно последовательно.

[Guest Гость_Anton_*]

А смысл в том, что блочный элемент нельзя использовать внутри <address>, а здесь желательно построчное представление.

Вы так и не ответили, список чего у нас приведен в этом фрагменте кода. Характерная особенность семантичного списка - однородность представленных в нем элементов, здесь же она просматривается недостаточно выраженно.

[Vlad]

Честно говоря, не понял, в чем цель вопроса, но если исходить из пункта 5, то border="0" следует убрать. Это уже оформление, и управлять им надо через стили. Вдобавок мне не нравится <br /> хотя бы потому, что он накладывает ограничения опять же на оформление. Сложно будет поменять расстояние между отдельными строками в адресе и выделить, если понадобится какую-нибудь часть. Например, телефон жирным в данном случае уже не сделаешь.

[happyproff]

Честно говоря, не понял, в чем цель вопроса, но если исходить из пункта 5, то border="0" следует убрать. Это уже оформление, и управлять им надо через стили. Вдобавок мне не нравится <br /> хотя бы потому, что он накладывает ограничения опять же на оформление. Сложно будет поменять расстояние между отдельными строками в адресе и выделить, если понадобится какую-нибудь часть. Например, телефон жирным в данном случае уже не сделаешь.

Полностью согласен с этим. Вообще весь адрес, я считаю, стоит оформить как vCard.

А суть вопроса в том, как оформить внутри одного дива(хедера) два элемента(img и span с адресом) так, как это выглядит на рисунке. Т.е. изображение в левой половине, адрес в правой и приклеен к нижней границе дива-хедера.

2Гость_Гость_Anton_*_*,

а какой смысл спану устанавливать блочное свойства, если можно просто использовать, <div>.

а списком он является потому, что состоит из последовательных элементов, общий смысл которых входит в область одного осмысленного представления информации, но при том же каждая строка несет в себе свой опеределенный смысл.

но в это в данном уникальном случае, так как визуальное представление информационного блока представлено построчно последовательно.

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

[Amigos]

страшная какая-то конструкция.

ИМХО

Для всего твоего хедера на самом деле хватило бы на 100% следующей конструкциией:

<h1><a href></a></h1>

<ul id="header">

<li>Город, улица 0</li>

<li>firm@domain.com</li>

<li>тел. (000) 111-22-33</li>

</ul>

либо так

<ul id="header">

<h1><a href></a></h1>

<li>Город, улица 0</li>

<li>firm@domain.com</li>

<li>тел. (000) 111-22-33</li>

</ul>

либо вообще вот так

<ul id="header">

<li><a href></a></li>

<li>Город, улица 0</li>

<li>firm@domain.com</li>

<li>тел. (000) 111-22-33</li>

</ul>

<h1>название лого сайта</h1>

H1 это не просто заголовок, а приоритет поиска определённого типа текста для поисковых машин, таким образом сомнительно пытаться засовывать картинку в H1 не несущей в себе на самом деле никакой конструктивной информации кроме ALt. Но если решать таким образом задачу H1 можно и <UL> тег к верху засунуть(это может конечно не так гламурнос точки зрения симантики, но ввариант ни чем не хуже любого другого если отбросить идею что в списках должен находитьяс список, только список и ничего кроме списка. На самом деле практика показывает что порой в списках может вполне помещается ещё одно целое дерево сайта. так как порой и для целого сайта нужен список сайтов+)),

либо добавить твой h1 (книзу) как в примере и в свойствах стиля сказать ему visibility: hidden; кажется так.

css не прилгаю, нет времени. или тогда не сейчас

Edited September 4, 2008 by Amigos

[rash]

Ну не список это... Вопрос-то был о семантичной верстке.

[Amigos]

....а что такое симантическая верстка, можешь сформулировать?!

Вот мнение - это хедер со списком информаций контаката в нём. чем не семантично? вполне.

(ну конечно инфу можно обозвать в теги адреса, и т.п. не сделалось лишь из не желания лишнего.)

Точно так же и другие варианты вполне хороши.

каждый этот вопрос понимает по своему, впрочем как и каждый обладает личным стилем верстать по своему. Не отнимишь не прибавишь! Но вот один из немаловажных критерий семантики это как не странно хорошая чтаемость кода(данных), понятность самой структуры, раз уж человек соизволил потрудитьяс и посмотреть код. Ещё раз повторю - логика и читаимость это неотьемлемое свойство симантики.

как вы думаете что читаемее

<div id="header"> <h1><a href="localhost"><img src="/images/sitetitle.jpg" alt="Сайт фирмы" border="0"/></a></h1> <span id="contacts"> Город, улица 0<br /> firm@domain.com<br /> тел. (000) 111-22-33 </span></div>

или это - вполне себе сипатично кстати.

<address>

<span class="address">Город, улица 0</span>

<span class="email">firm@domain.com</span>

<span class="phone">тел. (000) 111-22-33</span>

</address>

или это хотя тут я признаться хотел скорее показать что и так вполне возможно.

<ul id="header">

<li>Город, улица 0</li>

<li>firm@domain.com</li>

<li>тел. (000) 111-22-33</li>

</ul>

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

[rash]

Семантика - это использование разметки по ее прямому назначению (упрощенная формулировка by me).

То есть в принципе можно всю страницу оформить только с использованием конструкций типа <div class="h2">...</div> и <span class="strong">...</span>, только у нас уже есть элементы, в семантику которых заложено нужное значение.

На самом деле я тоже люблю списки. Но там, где они уместны. Здесь (сугубо на мой субъективный взгляд) данные не имеют структуры списка, поэтому использовать его здесь не следует. Конечно никто прямо этого не запрещает, но и преимуществ никаких использование списка здесь не даст.

Не хочу ввязываться в спор, дело вкуса, просто здесь мне это кажется уже злоупотреблением списками.

Спасибо за внимание.

[Amigos]

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

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

Такая идея. в своё время очень много статей перечитал, приемущественно не наших (у нас лишь интересная коференция весення прошла и вобщем было что подчеркнуть) в целом же мениня разделяют.

Спасибо что спасибо+)

кстати большой любитель списков 2.

Edited September 4, 2008 by Amigos

[Vlad]

С семантикой в HTML не очень хорошо дело обстоит, так что приходится искусственно ее вводить. В посте #3 мне кажется наиболее удачно это реализовано. Со стороны сразу же понятно, какой элемент за что отвечает.