помогите с семантикой!

olechic · June 5, 2012

http://pixs.ru/showimage/htmltaskpn_9324633_4961311.png подскажите, пожалуйста, какими тегами делать, очень важна семантика!!!!!!!!!!!!!!!

—-Доверьтесь тем кто знает свое время

—-Пресс-центр - теги для назвния статьи и даты

—-Наши координаты- теги для телефона и имейла

Edited June 5, 2012 by olechic

SelenIT · June 5, 2012

Если важна семантика — рекомендую обратить внимание на микроформаты/микроданные!!!!!!!!

Для контактной информации просто напрашивается микроформат hCard. Для "пресс-центра", может быть (чтобы сказать точнее — надо видеть реальные примеры), подойдет hCalendar.

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

Sensei · June 6, 2012

Вот набросал структуру

SelenIT, поправьте, если что не так.

<!DOCTYPE HTML>

<title></title>
<meta charset=utf-8>


<header>
	<h1>Деловое предприятие</h1>
	<nav>
		<ul>
			<li><a href="">О компании</a></li>
			<li><a href="">Услуги</a></li>
			<li><a href="">Пресс-центр</a></li>
			<li><a href="">Контактная информация</a></li>
		</ul>
	</nav>
	<p>Доверьтесь тем, кто знает свое дело</p>
</header>

<article>
	<section>
		<h2>Пресс-центр</h2>
		<article>
			<time datetime=2010-01-12>12 января 2010</time>
			<p>Вступает в силу новая редакция...</p>
		</article>

		<article>
			<time datetime=2010-01-12>12 января 2010</time>
			<p>Вступает в силу новая редакция...</p>
		</article>

		<article>
			<time datetime=2010-01-12>12 января 2010</time>
			<p>Вступает в силу новая редакция...</p>
		</article>
	</section>

	<section>
		<h2>Наши координаты</h2>
		<article>
			<div class="vcard">
				<div class="adr">
					<span class="locality">Минск</span>,
					<div class="street-address">пр-т Независимости</div>
					<div class="extended-address">дом 89, корпус 2, офис 15</div>
				</div>

				<div class="tel">
	   				<span class="type">Work</span> +1-650-289-4040
	  			</div>

				<div>Email: 
	   				<span class="email">info@mdrk.com</span>
	 			</div>
	 		</div>
		</article>
	</section>
</article>

<footer>

</footer>

Edited June 6, 2012 by Sensei

olechic · June 6, 2012

Вот набросал структуру

SelenIT, поправьте, если что не так.

<!DOCTYPE HTML>

<title></title>
<meta charset=utf-8>


<header>
	<h1>Деловое предприятие</h1>
	<nav>
		<ul>
			<li><a href="">О компании</a></li>
			<li><a href="">Услуги</a></li>
			<li><a href="">Пресс-центр</a></li>
			<li><a href="">Контактная информация</a></li>
		</ul>
	</nav>
	<p>Доверьтесь тем, кто знает свое дело</p>
</header>

<article>
	<section>
		<h2>Пресс-центр</h2>
		<article>
			<time datetime=2010-01-12>12 января 2010</time>
			<p>Вступает в силу новая редакция...</p>
		</article>

		<article>
			<time datetime=2010-01-12>12 января 2010</time>
			<p>Вступает в силу новая редакция...</p>
		</article>

		<article>
			<time datetime=2010-01-12>12 января 2010</time>
			<p>Вступает в силу новая редакция...</p>
		</article>
	</section>

	<section>
		<h2>Наши координаты</h2>
		<article>
			<div class="vcard">
				<div class="adr">
					<span class="locality">Минск</span>,
					<div class="street-address">пр-т Независимости</div>
					<div class="extended-address">дом 89, корпус 2, офис 15</div>
				</div>

				<div class="tel">
	   				<span class="type">Work</span> +1-650-289-4040
	  			</div>

				<div>Email: 
	   				<span class="email">info@mdrk.com</span>
	 			</div>
	 		</div>
		</article>
	</section>
</article>

<footer>

</footer>

огромное при огромное спасибо!!!!!!!!!!

cyklop77 · June 6, 2012

я бы в этом коде внешние article заменил на div...

Sensei · June 6, 2012

я бы в этом коде внешние article заменил на div...

А чем article не подходит для обертки? Если нужно четко обозначить, что именно с него начинается контентная часть, можно добавить атрибут role=main.

cyklop77 · June 6, 2012

я бы в этом коде внешние article заменил на div...
А чем article не подходит для обертки? Если нужно четко обозначить, что именно с него начинается контентная часть, можно добавить атрибут role=main.

индивидуально это всё конечно. но мне логически трудно представить вложенные article. всё таки каждый article это самодостаточная часть контента. на мой взгляд это всё равно что вложенные body

Edited June 6, 2012 by cyklop77

SelenIT · June 6, 2012

Меня смущает "безголовый" <article> в "наших координатах". Имхо, если считать "карточку" с координатами "самодостаточной единицей контента, пригодной для агрегации и т.п.", то логичнее внешний section заменить на article, а если нет — внутренний article вообще ни к селу ни к городу...

И в "карточке" всё-таки должен фигурировать fn с названием организации. Навскидку вижу два решения — либо продублировать его в "наших координатах" в виде спана с display: none, либо поставить class="vcard" внешнему контейнеру и использовать главный заголовок. Сам затрудняюсь выбрать, что лучше и что хуже, надеюсь, другие знатоки подскажут.

А чем article не подходит для обертки?

Тем, что подразумевает использование своего содержимого как целостной информационной единицы в другом контексте, напр. в RSS-агрегаторе. В комбинации "новости + контакты" я такой целостности не вижу.

вложенные article. всё таки каждый article это самодостаточная часть контента

Cами по себе вложенные article — не преступление. Напр. в древовидных комментах вполне может быть самодостаточная сущность "коммент с ответами на него", где каждый ответ — тоже самодостаточная (напр. для RSS-потока комментов) сущность следующего порядка (по крайней мере, именно так учит размечать древовидные комментарии сам великий и ужасный Й. Хиксон). Но главный критерий — именно осмысленность использования article как единой сущности, и в данном примере я ее действительно не наблюдаю...

olechic · June 6, 2012

а как RSS делать? и как делать в данном случе резиновую верстку от 960 до 1400 пикселей?

Edited June 6, 2012 by olechic

SelenIT · June 6, 2012

а как RSS делать?

Отдельно . Выше я упомянул его лишь для примера — как один из критериев уместности <article> вместо <section>.

как делать в данном случе резиновую верстку от 960 до 1400 пикселей?

Так же, как в любом другом: min-width/max-width для внешнего контейнера и т.д. Резиновость и т.п. — это CSS, семантика тут никаким боком.

Sign In

помогите с семантикой!

Question

olechic

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

Sensei

Link to comment

Share on other sites

olechic

Link to comment

Share on other sites

cyklop77

Link to comment

Share on other sites

Sensei

Link to comment

Share on other sites

cyklop77

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

olechic

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information