(X)HTML — структура и семантика кода

[Gargool]

Будет полезно учесть начинающим.. )

[kost]

Не будет. Обычно бывает все по-другому.

«Начинающий» все равно найдет статьи и учебники 1995 года, перепечатанные сотнями сайтов "В помащь наченащиму вэб-мастиру", и будет использовать font, b, i, frame, таблицы и т.п.

Вместо параграфов будут <br>, потому что "надо отступ поменьше", через те же <br> будут списки, потому что "bullet — некрасиво", а у заголовков h1, h2 "дурацкий шрифт и большие отступы".

В последне главе учебника для "начинающего вебмастера" будет написано, как с помощью CSS можно покрасить ссылки в другой цвет, что приведет в неописуемый восторг читателя.

До понимания таких статей будет долгий путь.

[CurlyBrace]

Многое из того что вы сказали справедливо, но это не повод опускать руки. Надеюсь, что новичок, прочитавший эту/подобную статью, а их, благо, стало появляться все больше, задастся вопросом "а как это красиво оформить?" и полезет читать статьи о CSS, а не перепишет код на font,b,i и тд..

[kost]

Хотелось бы, чтобы все было именно так. И чтобы все старые учебники неожиданно пропали.

В прошлом (2007) году видел у маленькой сестры "Учебник HTML", какое-то не очень старое издание, с традиционным: "Для удобства рекомендуем писать тэги большими буквами".

Посоветовал это не читать, и найти у меня на полке Зельдмана.

[CurlyBrace]

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

[kost]

Главное — найти правильный онлайн. Которого в русском интернете очень мало, к сожалению.

[CurlyBrace]

Мы работаем над этим )

[SWS]

поподробнее пожалуйста)

[CurlyBrace]

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

Для новичка даже этого будет достаточно.

[kostos]

То что вы делаете - это очень хорошо, вот только имя длинновато.

[CurlyBrace]

Спасибо. Планирую прикрутить короткий домен, кстати.

[bobrob]

CurlyBrace, В коде вашего сайта … пара косяков … первое, размер шрифта у ваз указан в пикселях и не масштабируется в IE6. Второе весь код javascript надо выносить в отдельный файл, почему , написано здесь - http://developer.mozilla.org/en/docs/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents

[CurlyBrace]

Ага, спасибо за то что зашли.

[xvoland]

мне кажется, что не отстают, а просто стоят ЗНАЧИТЕЛЬНО дороже книжечек 199* годов :) Вот, выбор на них и падает.

Вообще нужно пользовать on-line книжки и во всяких форумах тусить - больше толка ;)

[nfx]

первой книгой по HTML являлась "HTML 4.0 в подлиннике" А. Матросова, А. Сергеева и М. Чаунина... на то время очень полезной била, то все-таки спостя некоторое время пришлось переходить на более високий уровень.

[Tishka17]

/me уже задумался....

[KonstRuctor]

Абсолютно согласен! Именно так я все и делал, один в один! До сих пор работают два сайта, которые я сделал именно таким образом; не знаю, дойдут ли когда руки переделать..? На самом деле очень полезная статья для начинающих.

[vovanbo]

Вы все верно сказали. Но ведь никто не отменял процесса познания. Наверняка многие начинающие "веб-мастера" однажды столкнутся с разбором валидной темы для какой-нибудь CMS и, возможно пытаясь сделать также, ткнут на Firebug. Так или иначе, после этого в их размышлениях наверняка появится некоторое "новое видение" предмета обсуждения. Ведь без настоящего XHTML и хороший CSS не сделаешь. ;)

[poh]

Хм, мне повезло. Спасибо знакомому верстальщику. Мне сразу сказали какие книги читать. Теперь я не умею верстать таблицами(не путать с табличной информацией).
Видимо я новое поколение

[kost]

Искренне рад. Всем бы так.

[strashichkin]

если не секрет - какие книжки Вам посоветовали почитать?)

[Devgru]

читайте CSS Zen Garden (у нас перевели как «Философия CSS-дизайна») и смотрите на одноимённом сайте красивые примеры

[strashichkin]

угу, спасибо)
уже ниже ссылки дали, как раз изучаю..

[Devgru]

если хотите найти книгу, я её в сети видел пока только в одном месте — на торрентс.ру, там есть раздача с подборкой книг по дизайну, и там есть среди прочего «Философия…».

[strashichkin]

и ещё раз спасибо!)

[Alinaki]

Ну не знаю... Я начал сразу с CSS-верстки. Потому что так понятнее.

[den_rad]

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

[Alinaki]

На мой взгляд с таблицами тоже не все так однозначно.

[kostos]

А собственно, что вы имеете ввиду под "CSS версткой"? Верстку на дивах? Ну тогда и называйте вещи своими именами. CSS так же замечательно применяется и к таблицам

[CurlyBrace]

"CSS верстка" звучит гораздо логичнее чем "верстка на дивах". И горе тому разработчику, который верстает на дивах, ради дивов.

[kostos]

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

[CurlyBrace]

Наиболее корректный термин - CSS Semantic Coding. Так уж повелось. А таблицы не предназначены для верстки, ни с помощью CSS, ни без оной.

[bobrob]

а свойство float в CSS предназначено для обтекания ... а не для верстки.

[mente]

Тру порезчег изучает html по w3 документации :)

[Smerig]

Браво, маэстро! :)
именно так и будет наверняка.
Офф: а посмешил здорово!

[goland]

+1 Это точно!

[piloter]

А разве мы не именно так учились? :)

[kost]

Посмотрите, какой год на календаре.

[randoom]

Не то слово ... Возникло ощущение что кусочки под надписью "Неверно" писал я.
До боли родной код :)

[CurlyBrace]

Здорово, это повод задуматься ))

[Plohich]

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

[bezz]

Думаю, в данном случае вместо термина "семантика" нужно использовать термин "соответствие спецификации", т. к. именно это определяет как синтаксические так и семантические правила кода.

[AirWorker]

XHTML - классный формат, красивый и строгий.

Непонятно, зачем придумали HTML5, видимо назад в ужасное прошлое захотелось.

[CurlyBrace]

Тут все немного сложнее. И я не думаю что на данном этапе можно с уверенностью сказать что лучше, HTML5 или XHTML2.
По большому счету, пока один из них не выйдет из стадии черновика, тут и обсуждать нечего.

[kost_bebix]

Тяжело все время держать валидность со всякими IE6, да и WYSIWYG-редакторов хороших для XHTML пока нету.

[medvoodoo]

tinymce чем не устраивает? а если вы имеете в виду большие редакторы то quanta plus вам в помошь

[kost_bebix]

tinymce вроде подходит :-) Не юзал, поэтому пока говорить о нем не буду. Спасибо, в общем.

[TonyClifton]

Dreamweaver чем плох?

[kost_bebix]

Тем что к админке сайта не имеет никакого отношения (здесь Javascript-редакторы имеются в виду)

[TonyClifton]

А… :-)

[bolk]

А вы читали стандарт HTML5?

[vittore]

читал. понравилось. )

[kost_bebix]

К сожалению (или счастью :-), верстальщики с контентом дела практически не имеют. В основном народ вбивает контент в админке. Эту статью надо обращать к разработчикам WYSIWYG-редакторов, чтоб те делали кнопки не "B" а "STRONG" и так далее.

[CurlyBrace]

По этому поводу я написал вот эту статью.

[Alinaki]

Тег B никто не отменял. Он является рекомендованным тегом.

[kost_bebix]

Кстати да, здесь я не понял концепт w3c, если честно :-)

[CurlyBrace]

Элемент b - deprecated. И уж никак не рекомендованый.

[MTonly]

Видимо, человек случайно пропустил «не» и имел в виду, что элемент B (не тег!) не совсем отменён, а лишь не рекомендуется.

[Alinaki]

Теги, элементы... Блин. Пойду заново читать стандарты. Но никаких "не" я не пропускал.

[Alinaki]

Где-то писалась выдержка. Суть в том, что тег B - следующий по значимости для поисковиков после h6. Типа "Выделяйте основное на сайте заголовками h1-h6, а непосредственно в тексте используйте тег B". И вообще надо решить о каком формате говорим :) html4 или xhtml.

[MTonly]

В любом из них b является элементом представления, не несущим семантической нагрузки, в отличие от, например, strong.

[lifestar]

Не понял, что значит "семантической нагрузки"?
Вроде бы для поисковиков тег важнее, вот его и используют

[Junior]

Что важнее? Услышал звон - не знаю где он? Каждый тег в xhtml несет в себе смысл (семантика). strong - акцент/выделение текста (или усиление интонации, если используется голосово браузер). Тег B содержит только визуальный смысл - полужирный текст. Это и есть семантика.

[lifestar]

Позвольте, какой процент пользователей использует голосовой браузер? Абсолютное большинство смотрят сайта глызами, поэтому важным фактором на мой взгляд является именно визуальное восприятие

[MTonly]

важным фактором на мой взгляд является именно визуальное восприятие
Это проходит. Со временем и опытом. ;-)

[Junior]

Тут приводили в пример книгу "Философия CSS-дизайна". Она не зря так названа. Нужно осознать простейшую вещь, что html - это язык смысловой, а не визуальной разметки страницы. Слово "смысловой" я здесь заключил в тег strong не потому, чтобы он был полужирным, а потому, что если бы мы разговаривали вживую, я бы сделал на этом слове акцент.

[lifestar]

Дорогой мой, я это всё понимаю.
Но есть вещи, несовместимые полностью, а всего лишь частично.
Это творчество и коммерция.
В нашем случае под творчеством я понимаю "филосифию CSS", ибо с коммерческой точки зрения нет никакой разницы между strong и b

[CurlyBrace]

А вы уверены, что с коммерческой точки зрения нет разницы? Или поисковики раскрыли перед вами алгоритмы ранжирования?

[lifestar]

Не уверен конечно, это всё мои домыслы.
А как проверить? Давайте попробуем посмотреть на ТОП сайты.
№1 в России - vkontakte.ru по данным alexa.com: тегов *b* в несколько раз больше чем *strong*.
По данным top.mail.ru №1 в России конечно же mail.ru :) - *strong* ни одного, зато *b* встречается частенько.
Мир. Опять же по данным alexa.com №1 в мире сайт yahoo.com - здесь уже *strong* выигрывает у *b*
Что же, вынужден признать свою ошибку. Вы правы =)

[Junior]

Вы привели примеры ресурсов:
1. Большая доля трафика которых - непоисковый.
2. Успешность этих проектов связана не со strong, а с мощной рекламой и сервисами.
3. По теории больших чисел у ресурсов с такой нагрузкой совсем другие законы. Например, есть серьезные требования к совместимости со старыми браузерами.
4. Тенденция все же есть. Яндекс (у нас) и Yahoo (у них) внедряют лучшие практики. Уверен, они внедрили бы это и раньше, но см п.3.

[Junior]

1. Если нет разницы, зачем, извините, заведомо делать дерьмо?
2. Не следую рекомендация Вы даете конкурентам дополнительный козырь в борьбе за клиента. Уж куда как не коммерция.

[Junior]

Ох, опечатки. Сорри.
Правильно "не следуя рекомендациям".

[Alinaki]

Глянул спецификацию html 4.01. Про то, что b - deprecated там ни слова. u, strike - да.

[ELV1S]

Элемент cite хорош для выделения коротких цитат внутри текста, и является строчным элементом.

Для этого лучше подходит q. Cite всё же лучше использовать для указания источника.

Статья на тему: Quotations and citations: quoting text .

[anotherpit]

именно!

[snapper]

Как близко стрелочки голосования... Уже не в первый раз промахиваюсь и нечаянно заминусовал =(

[kuzmi4]

Спасибо.

[varyen]

Способ мышления лично мне привил CSS Zen Garden. Они выпустили печатную книжку, есть перевод на русский, рекомендую. :)

[4g3n7]

Ммм... Искренне надеюсь, что для новичков будет полезно :)

[dyakov]

Абсолютно согласен. Спасибо

[VVCh]

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

Да нового ничего нет в этой статье. Эта статья очередное напоминание о семантической верстке.
И чем больше их будет тем лучшее
вот, например, подобное Семантическая верстка

[CurlyBrace]

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

По-моему очевидно.

[VVCh]

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

[besisland]

В разделе о цитатах вы путаете cite с q.

cite — citation — ссылка на источник.
q — quotation — цитата (внутристрочная).
blockquote — quotation — цитата (блочная).

У последних двух в HTML 4 и XHTML 1.1 есть необязательный атрибут cite, который может содержать URI источника цитаты. В XHTML 2 этот атрибут предполагается у всех элементов.

Пример:

Уже в <cite>спецификации HTML 4.01</cite> объясняется разница между элементами <code>cite</code> и <code>q</code>: <q href="http...">CITE сontains a citation or a reference to other sources, Q and BLOCKQUOTe designate quoted text</q>.

[besisland]

Опечатка: q cite="...", разумеется.

[CurlyBrace]

Про атрибут я написал. По поводу q согласен, но я думаю что использовать элемент cite не будет ошибкой. Или все таки будет?

[besisland]

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

[dolotov]

> Структурированый код гораздо лучше читается поисковиками...

Это не так для всех популярных поисковиков мира.
Говорю это как человек, профессионально (и каждый день)ориентирующийся в этом вопросе.

[CurlyBrace]

Можете уточнить? И поподробнее?

[dolotov]

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

[CurlyBrace]

Что значит "вёрстка не имеет значительного влияния на качество индексируемости"?

Вы хотите сказать что заголовки не важны? Что не важно как "далеко" от начала кода находится контент? А как на счет фрэймов?

[dolotov]

Это значит то, что я написал. Я не утверждаю, что вёрстка вообще не влияет на качество индексируемости, да и разные случаи бывают. Глаз зацепился на слове "гораздо" в фразе: "Структурированый код гораздо лучше читается поисковиками"

Фреймы я не считаю вёрсткой страницы, а скорее пережитком прошлого или средством для веб-приложений непубличного пользования. Судя по сабжу, очевидно предполагалось аналогичное к ним отношение.
Про заголовки прокомментировать, к сожалению, не могу. "Я человек подневольный" :)

[CurlyBrace]

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

[edelweard]

Не нужно скромничать. Почему только к одному? Вы же сказали, что «это не так для всех популярных поисковиков мира». Видимо, вы имеете отношение ко всем ведущим участникам этого рынка. :)

[besisland]

То есть поисковикам всё равно, использовал ли я h1 или font+b?

[leshaogonkov]

Несемантичная статья о семантичной разметке?..)
Или это иллюстрация того как не надо верстать? :-)

[CurlyBrace]

Леша, достань доступ к ftp Хабра, мы его переверстаем, а потом поговорим о семантике статей )

[leshaogonkov]

форматировать свои статьи абзацами и заголовками можно без фтп

[CurlyBrace]

А, теперь я понял что ты имеешь в виду. Хоть я и не люблю стили Хабра для топиков, но исправил.

[leshaogonkov]

ну а кто их любит )

[MTonly]

и не лень ведь ;-)
— Автоформатирование полезно отключить.
— В HTML нет параграфов, но есть абзацы.
— DL — это всё же список определений.
Успехов.

[CurlyBrace]

:) Спасибо

[Piplun]

Человеки,ну помогите же собрату, огласите список актуальных книг и/или ресурсов на русском по XHTML CSS и JavaScript. Гугл увы здесь не поможет.

[lohmatyi]

http://webdev.lovata.com/2007/09/28/kogda-derevya-byli-bolshimi-ili-o-tom-s-chego-vse-nachinali-2/
только с кодировкой на ловате что-то случилось
http://www.gramond.com.ua/docs

[ega]

Источник неправильно указан.
Вот правильный: http://www.w3.org/TR/html401/

Как вы надоели с открытиями Америки. Прочитать спецификацию занимает один час, всё, после этого вы отличный верстальщик. А подобные статьи выдают только ваш непрофессионализм.

[CurlyBrace]

Зато подобные комментарии раскрывают вас как истинного профессионала. Буду знать к кому обращаться.

[Junior]

дин час, всё, после этого вы отличный верстальщик.

Не согласен. html-то фигня, но с блочной моделью возни хватает.

Как вы надоели с открытиями Америки.

Вот тут согласен. Статья совсем уж для новичков.

[tigrenok]

насколько я понимаю никто </b></p> никуда не отменял. во всяком случае валидатор (1) понимает следующие куски кода как вполне валидные:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> new document </title>
</head>

<body>
<p><b>test</b></p>
</body>
</html>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
</head>

<body>
<p><b>test</b></p>
</body>
</html>

[tigrenok]

PS: Я к тому, что использование b и i вместо strong и em - это _не неверно_!
Просто следует понимать и осознавать разницу...
Так как во многих случаях нужно именно сделать шрифт текста полужирным исключительно визульно.

[CurlyBrace]

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

Вы невнимательно читали может быть? HTML - язык разметки содержимого, а элемент b выделяет текст визуально.

Там же написано что валидация != семантика.

[tigrenok]

Я так и сказал... :)
нужно ... сделать ... исключительно визульно
простой пример - в gmail - в меню. все ссылки одинаково важно. :) но к примеру "Compose Mail" выделено полужирным. или там же - текущий раздел в меню выделен полужирным - это не есть stronger emphasis - это чисто визуальное украшение чтобы видно было где находишься.
да и в конце концов - их не просто так два разных сделано... ;)

[CurlyBrace]

Вы не поняли. Визуальное выделение надо делать с помощью CSS.
Еще раз - b - нежелательный к использованию элемент, по стандарту XHTML.

[tigrenok]

Не спора ради, а дабы выяснить истину. :)
В спецификации XHTML1 (http://www.w3.org/TR/xhtml1/#xhtml) сказано, что XHTML наследует HTML. В описании их отличий - о бэ и стронге ничего не говорится.
Это раз.
В спецификации HTML4 (http://www.w3.org/TR/1999/REC-html401-19991224/present/graphics.html#h-15.2.1) сказано "B: Renders as bold text style.". Ни о каких "нежелательно" речи не идет.
В спецификации также сказано: "STRONG: Indicates stronger emphasis."

Вывод: бэ (<b>) не есть элемент нежелательный, отмененный или же прочими методами ущемленный в правах. :)
Элемен бэ (<b>) - это элемент, который просто используется для ИНЫХ ЦЕЛЕЙ нежели элемент стронг (<strong>).
Ни больше и ни меньше.

ЗЫЖ В скобках привел ссылки, но вероятно они обрежутся... :(

[CurlyBrace]

Да, вы правы, там не написано что b это нежелательный элемент, но там написано, что он отвечает за presentation, соответственно не несет смысловой нагрузки.

[tigrenok]

верно. я так и сказал - "используется для ИНЫХ ЦЕЛЕЙ". Просто, имхо, не стоит путаться в терминологии и додумывать свои варианты, навроде "нежелательный элемент"... Вот разработчики браузеров трактуют как хотят и выдумывают - и что в итоге мы имеем. :)

Конечно, сказать начинающему мол - это неправильный тэг - можно, чтобы не использовал где не надо, но опять же - имхо, стоит растолковать разницу и объяснить где, что и как лучше использовать. Толку больше будет. Человек поймет - а дальше уже его дело. А так он почитает - а потом прочтёт, что тэг-то есть, и вполне валидный и не разбираясь дальше будет его использовать. Его - в смысле бэ. Хотя бы потому, что букв писать меньше надо (аж в 6 раз)). :)

Такое моё мнение. :)

[CurlyBrace]

Я не вижу смысла в использовании этого тэга, но и не говорю что использовать его нельзя. И валидность тут не причем.

Впрочем, мы друг друга поняли.

[MTonly]

В семантической вёрстке подразумевается, что за внешний вид отвечает CSS и любые HTML-элементы и атрибуты, отвечающие за представление, автоматически являются нежелательными на основе банальной головы на плечах. Семантика важнее формального соответствия стандарту («валидности»). Если текст полужирный по дизайну, но не семантически, его полужирность задаётся в CSS; отождествлять b и strong, разумеется не следует, иначе рождаются перлы вроде <strong><em>...<em></strong>, когда человеку просто хочется полужирного курсива.

[MTonly]

[<strong><em>...</em></strong>]

[tigrenok]

я об этом и говорю.
если мне к примеру хочется выделить в тексте слово - но не делать на нем "ударение" - а просто подсветить слегка другим цветом и полужирным - как-бы "на заметку" - то почему бы мне не написать <b>слово</b> и навесить на бэшку стиль цвета?
так я получу визуальное отделение, но по уровню слово будет той же важности, что и остальной текст...

[MTonly]

Вместо элемента представления b в таком случае следует использовать span, не несущий визуального смысла и предназначенный именно для применения стилей.

[tigrenok]

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

[MTonly]

Вы меня не слышите.

[tigrenok]

Не слышу. Только читаю. :)

[Junior]

Не волнуйся, зато другие тебе согласно головой кивают. По ту сторону монитора. :)

[tigrenok]

ЗЫЖ я к тому, что говорить о семантике в ключе - элемент нежелателен - есть неправильно.
Мы же не говорим о русском языке - элемент точка-с-запятой - нежелателен. так неправильно: "текст; текст", а так правильно: "текст, текст". правда ведь? мы сразу объясняем разницу и что для чего используется. ;)

[xvoland]

читайте RFC и будет всё пучком ;)

[NickTanz]

Все использую, за исключением установки абзаца ради 2 слов. Не вижу смысла, а вы видите?

[tigrenok]

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

[akmute]

У меня вопрос, является ли семантически верным разбивка страницы на большие блоки, такие как навигация, контент, баннеры и так далее?

[CurlyBrace]

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

[akmute]

Спасибо. А как на счет вложенных дивов? Например, внутри

будут

,

и т.д.

[CurlyBrace]

По-моему парсер скушал все самое интересное )

[akmute]

Да, прошу прощения за криворукость. Я имел в виду следующий код:

<div id="content">
<div id="news">
Новости
</div>
<div id="topics">
Статьи
</div>
</div>

Я знаю, что вложенные таблицы - плохо. А как на счет вложенных дивов?
И вообще, когда следует использовать div, а когда span?
Я Вам еще не надоел своими вопросами? =)

[CurlyBrace]

Важно осознавать для чего вы создаете отдельный/вложеный блок. Если это делается осмыслено, то никаких ограничений к этому нет. Естественно, что лишний код никому не нужен, но и аскетизм никчему.
Вам нужно подтянуть теорию. DIV - блочный элемент, SPAN - строчный. Дело не в самих дивах, а в блоках. H1-6, UL, P, DIV, FORM - основные из блочных элементов, каждый со своим предназначением.

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

Рад буду помочь, если есть еще вопросы - обращайтесь.

[akmute]

По поводу теории - тут Вы правы. Я сейчас только начинаю осваивать верстку (сейчас как раз верстаю свой первый макет). Я был бы Вам очень признателен, если б Вы подсказали что можно хорошего почитать про верстку...

[CurlyBrace]

Найдите “Каскадные таблицы стилей” Эрика Майера, “Философия CSS-дизайна” Дэйва Ши, “Вебдизайн по стандартам” Джеффри Зельдмана.

Ознакомьтесь со ВСЕМИ статьями, приведенными по ссылке.
Да и не только с ними, все сайты, присутствующие там, заслуживают пристального изучения.

[akmute]

и еще один вопрос (простите за назойливость).
Скажите, является ли семантически верным использование тега для добавления горизонтальной черты?

[xvoland]

Да, если мы говорим о семантике.

[xvoland]

Для бАлбесов, которые тут на минусы жмут: семасиология — наука о понимании определённых знаков, последовательностей символов и других условных обозначений;

Теперь прочтите вопрос! Минусаторы, блин!

[CurlyBrace]

нет, не является, так как это визуальное оформление.

[MTonly]

Я когда-то думал аналогично, но потом переосмыслил в озвученном чуть ниже разрезе.

[CurlyBrace]

Да, мне понравилось твое объяснение, Марат, звучит логично.

[VVCh]

Вы пишете план своего сочинения...
потом набрасываете текст, но предварительно, вы мысленно отчеркиваете план от контента? Не правда ли?

[VVCh]

Сам себе ;)
Семантика это не догма, а средство...

[MTonly]

Семантически hr означает разделитель и, в отсутствие формально более семантического эквивалента (в XHTML2 он, кстати, заменён на «более семантически звучащий» separator) вполне может употребляться для придания структуре документа дополнительного семантического смысла — например, структурного разделения между собой «шапки», блоков контента, меню и «подвала» страницы. Аналогично с элементом small — его можно рассматривать как семантическое понижение (в противоположность strong и em) важности заключённого в него текста.

[akmute]

Спасибо! Именно за для отделения шапки от контента я его и использую.

[consolamentor]

Статья хорошая, я как начинающий оценил. А не подскажете, как лучше сделать: не знаю какой тег лучше использовать для такого текста, например:
Бла-бла-бла, выполните следующее:
Пуск → Панель Управления → Сетевые Подключения → …
В какой тег лучше обернуть саму инструкцию?

[Devgru]

Блин, а ведь хороший вопрос.
Первыми на ум приходят code, kbd, samp, но это всё хоть и близко, но не «в яблочко». Я бы наверное оставил бы samp.

[consolamentor]

Из тех что назвали, я знал только code, который и подумал использовать :). Пойду почитаю про остальные два. Спасибо!
А можно еще один вопрос на ту же тему?
Есть у меня список, представляющий из себя пары (параметр-значение). Как я понимаю для него лучше использовать dl-dt-dd, но в css я еще хуже понимаю и как сделать, чтобы параметр и его значение отображались на одной строке не знаю. Не поможете? :)

[Devgru]

kbd — keyboard, то, что вводится с клавиатуры, samp — пример кода.
ещё, ели не ошибаюсь был элемент tt (teletype, значение имел примерно как kbd, но его кажется нет в xhtml 1)

пропишите
dl *{display:inline;margin:0;padding:0}
а далее танцуйте куда хотите и как хотите.

[Devgru]

хотя если в dt/dd есть html-элементы, то лучше бы «dl *» заменить на «dt,dd»

[consolamentor]

Премного благодарен, спасибо! :)

[Junior]

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

Ключ 1	Значение ключа 1
Ключ 2	Значение ключа 2

[consolamentor]

И правда… Спасибо, я подумаю над тем, что выбрать!

[Junior]

А что тут думать? Таблицы для того и придуманы, чтобы сводить данные. Прайс-листы, например. Это тоже пары ключ-значение: товар-стоимость.

[consolamentor]

Да, я уже подумал, выбрал таблицы и сделал =)

[bobrob]

Чем не нравится верстка на таблицах … так и не понял. Смотрю, на google, табличная верстка…
Смотрю на yandex…. Табличная верстка…. Смотрю на Artlebedev.ru … табличная верстка. Почему они на таблицах сделаны? А потому –что так быстрее, ефективнее и работает везде. А пока IE не поддерживает display: table-cell , например … нет смысла обсуждать другие варианты. Конечно можно и без таблиц- но теряется время и силы. А что поисковики индексируют лучше сайты без таблиц … это полный бред. Короче если думаете что вы круче верстальщиков вышеупомянутых сайтах, ищите всякие заковыретсые методы безтабличной верстки. Только потеряете само время.

[bobrob]

Хорошо, поставили мне минус, обясните почему ?

[bobrob]

Сами не знаете почему. Прочитали где-то что без таблиц круто. И давай писать и спорить. А на практическую сторону вопроса не посмотрели. Как я писал выше посмотрите на самые популярные сайты как они сделаны. И задумайтесь, кто круче, вы или верстальщики у Лебедева и google

[CurlyBrace]

Мне нравится наблюдать за тем, как вы сами с собой ругаетесь. Продолжайте, пожалуйста.

[bobrob]

Вы ошибки на вашем сайте исправили ?

[CurlyBrace]

Почему вас это волнует?

[bobrob]

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

[CurlyBrace]

А причем здесь мой сайт?

[bobrob]

Ну ваш сайт, криво сделан, сделан вами, значит вам не все понятно, вы пишете статьи , заблуждаете людей вашими догадками . И еще себе ети плюсики накачиваете. А мне просто ставите минусы без логичного обяснения. Вы просто не можете смирится что я прав. Вы мне один нормальный сайт покажите где используется красный цвет для шрифта 30% процента контента… читать не удобно глаза режет… Так что если вы профессионал будете аргументировать свои ответы.

[CurlyBrace]

Уважаемый  bobrob, а вы собственно кто такой? И кто давал вам право бросаться словами в подобном ключе?

Я не намерен обсуждать профессиональные вопросы с дилетантами, и тем более, что либо аргументировать. Всего хорошего.

З.Ы. Было бы забавно взглянуть на вашу страничку, если бы она у вас была...

[bobrob]

Ну вот опять , никаких аргументов. Это просто несерьезно…. Вы просто аргументироваться не можете. А про ваши профессиональные возможности говорит ваш сайт(дизайн, код , количество посетителей). А если у вас есть почтовой ящик на gmail.com, то вы пользуетесь моим кодом каждый раз когда проверяете почту.

[CurlyBrace]

Вы либо меня не понимаете, либо не слышите.

В том ключе общения, который навязываете вы, я с вами ничего обсуждать не собираюсь.

Не нравится сайт - интернет большой, найди лучше. Не нравится статья - не читайте.

Всего хорошего.

[rimmer333]

Чем вам не нравится лечение кровопусканием? Все дворяне лечились, царь лечился, а вас не устраивает? Прочитали где-то в газете, что таблетки круче.

[bobrob]

А вам какое дело?

[bobrob]

Аккордеонист, поставил минус… ха ха, может в следующий раза нотку поставит.

[rimmer333]

Вы как-то не вполне уравновешенны. У вас всё в порядке? Проблемы?

[bobrob]

А вам какое дело?

[uggallery]

Ваши аргументы как-то отдают нафталином, извините. Ваши примеры, уж очень избирательны. Умудряетесь не замечать огромное число популярных сайтов сделанных с соблюдением стандартов. Вы посмотрите не на главную страницу лебедевской студии, а в портфолио. Уж на что консервативная студия (традиции, наработки и т.д.) и у тех уже есть сайты сверстанные бестаблично, хотя и не в лучшем стиле. Постоянно появляются молодые студии, где сразу работают по стандартам. Все-таки полезнее ознакомиться с актуальной информацией, а не флудить офтопиком в комментах. Пока вы думаете, что веб-стандарты призваны всего лишь противостоять верстке на таблицах, вы так ничего и не поймете. Если действительно хотите понять - откройте глаза - информации полно. Переубеждать каждого "ветерана вертски" по-отдельности, подбирая индивидуальные аргументы - вот уж действительно трата времени. Практика показала низкую эффективность этого дела.

[bobrob]

Я говорю как практичнее. И даю примеры. И что вы имеете в виду по стандартам? Использовать float для верстки? Float предназначен для обтекания, вы хотите сказать что использовать свойства не по назначению это по стандартам? Кто вводит эти стандарты ? W3C и то дает рекомендации, а они то веб придумали. Пока не выйдет IE8 с улучшенной поддержкой CSS, например display: table-cell , таблицы можно использовать в большинстве случаев. Да полно информации, вы правы, только насколько ей можно верить? И откуда она берется? Всякие люди без дела придумывают сложные методы решать задачи которые уже давно решаются просто. Возьмите, любой макет и проверьте , если эго сделать на таблицах и потом без, где будет меньше кода, проблем кросбраузерности, затраты времени в целом. Говорить то про какие-то стандарты легко, а вы проверьте, и потом говорите.

[CurlyBrace]

То ли вы сами никогда не верстали, то ли вы просто тролль.

W3C придумали веб...

Учите матчасть.

таблицы можно использовать в большинстве случаев...

Дома тоже можно из одних окон строить...

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

Ага, типичный подход человека, не умеющего верстать.

Сделайте доброе дело, перейдите в какой-нибудь другой топик. Надоел ваш флуд.

[bobrob]

uggallery , Да и зашел я на вашу страничку… вы про стандарты мне говорите… используете Transitional, а W3C рекомендует strict… И вы мне про новою информацию говорите. Элемент hr – вы эго используете для отделения контента от отображения? И еще , вы свой сайт на большом мониторе посмотрите … фиксированная ширина=проблемы с юзабилити. И еще я посмеялся прочитав рубрику на вашем сайте, «CSS верстка» - бывает и вертска без CSS ???

[uggallery]

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

С Transitional и hr - повеселили от души. Подняли настроение на ночь глядя, спасибо.

Фиксированная ширина не противоречит стандартам и не является проблемой юзабилити для страницы, сделанной по-стандартам. Есть принципиальное отличие фиксированной страницы, сверстанной в CSS от с виду такой же страницы, сверстанной таблично. Отлично сделанная табличная «резина» всегда будет создавать больше проблем юзабилити, чем простенькая фиксированная страничка, сверстанная "бестаблично". Уверяю вас. Кстати, интересная тема для большого разговора. Но не здесь, не в этом топике, конечно.

Замечу, заодно, что у вас отлично получается замечать сучок в чужом глазу, при полной неспособности заметить бревно в своем. С чем вас и поздравляю :)

[bobrob]

«CSS верстка», по определению ?
Дайте ссылку пожалуйста . Интересно посмотреть на определение.

http://www.useit.com/ - посмотрите код. Проблемы с юзабилити? Фикс. ширина?? Осторожно, это всетаки сайт Якоба Нильсена. "тема для большого разговора" вы думаете Якоб Нильсен сделал свой сайт неправильно?

[bobrob]

Ну ? У кого бревно ? Где ссылка на определение ? Комментарии по useit.com ? Нечего сказать? Так я и думал. Вы лучше в философии попробуйте себя , а в веб-разработке важна практичность, и если делаете заявление аргументируйтесь фактами.

[bobrob]

А вы CurlyBrace , аргументируйтесь хоть раз, не нравятся мои комментарии, не читайте. А про ваши умения в верстке ваш сайт сам все говорит за вас … Встроенные в html стили … вот тут прочитайте почему не надо так делать … http://developer.mozilla.org/en/docs/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents .
Да и неразрывный пробел кто так вставляет (nbsp;) вы вообще про таблицу символов слышали???

Нашелся мне верстальщик…

[bobrob]

Ставьте минусы, потому что ничего другого вам не остается делать. Не привыкли что бы вам указывали ваши ошибки ? Вы лучше подумайте, исправьте и скажите спасибо. Человек учится всю жызнь.

[uggallery]

Могу только предположить, но думаю минусы вам ставят за то, что вы начали офтопик. Офтопик - это нарушение правил дискуссии, а модераторами тут выступают сами участники. Это система такая, насколько я понимаю. Так что, все закономерно.