CurlyBrace Jan 30 2008 at 16:05

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

4 min

5.8K

Website development*

+53

186

Comments 186

Gargool Jan 30 2008 at 16:25

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

kost Jan 30 2008 at 17:11

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

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

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

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

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

CurlyBrace Jan 30 2008 at 17:17

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

kost Jan 30 2008 at 18:06

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

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

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

CurlyBrace Jan 30 2008 at 18:09

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

kost Jan 30 2008 at 18:14

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

CurlyBrace Jan 30 2008 at 18:17

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

SWS Jan 30 2008 at 21:23

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

CurlyBrace Jan 30 2008 at 22:47

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

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

kostos Jan 31 2008 at 11:32

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

CurlyBrace Jan 31 2008 at 11:34

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

bobrob Feb 1 2008 at 16:42

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

CurlyBrace Feb 1 2008 at 23:27

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

xvoland Jan 30 2008 at 19:37

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

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

nfx Jan 30 2008 at 21:09

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

Tishka17 Jan 30 2008 at 20:59

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

KonstRuctor Jan 30 2008 at 17:26

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

vovanbo Jan 30 2008 at 17:37

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

poh Jan 30 2008 at 17:54

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

kost Jan 30 2008 at 18:07

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

strashichkin Jan 30 2008 at 19:13

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

Devgru Jan 30 2008 at 19:24

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

strashichkin Jan 30 2008 at 19:27

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

Devgru Jan 30 2008 at 19:31

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

strashichkin Jan 30 2008 at 19:49

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

Alinaki Jan 30 2008 at 18:35

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

den_rad Jan 31 2008 at 01:11

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

Alinaki Jan 31 2008 at 03:42

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

kostos Jan 31 2008 at 11:44

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

CurlyBrace Jan 31 2008 at 11:51

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

kostos Jan 31 2008 at 12:23

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

CurlyBrace Jan 31 2008 at 12:25

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

bobrob Feb 1 2008 at 17:00

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

mente Jan 30 2008 at 20:46

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

Smerig Jan 30 2008 at 23:57

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

goland Jan 31 2008 at 02:39

+1 Это точно!

piloter Jan 31 2008 at 16:51

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

kost Jan 31 2008 at 16:53

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

randoom Jan 30 2008 at 17:13

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

CurlyBrace Jan 30 2008 at 17:17

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

Plohich Jan 30 2008 at 16:36

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

bezz Jan 31 2008 at 11:04

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

AirWorker Jan 30 2008 at 16:49

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

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

CurlyBrace Jan 30 2008 at 16:53

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

kost_bebix Jan 30 2008 at 17:07

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

medvoodoo Jan 30 2008 at 17:25

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

kost_bebix Jan 30 2008 at 17:45

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

TonyClifton Jan 30 2008 at 17:34

Dreamweaver чем плох?

kost_bebix Jan 30 2008 at 17:44

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

TonyClifton Jan 30 2008 at 18:17

А… :-)

bolk Jan 30 2008 at 17:48

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

vittore Jan 30 2008 at 18:38

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

kost_bebix Jan 30 2008 at 17:02

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

CurlyBrace Jan 30 2008 at 17:05

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

UFO just landed and posted this here

Alinaki Jan 30 2008 at 18:36

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

kost_bebix Jan 30 2008 at 18:38

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

CurlyBrace Jan 30 2008 at 18:39

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

MTonly Jan 30 2008 at 18:51

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

Alinaki Jan 30 2008 at 18:52

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

Alinaki Jan 30 2008 at 18:51

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

MTonly Jan 30 2008 at 19:37

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

lifestar Jan 30 2008 at 20:35

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

Junior Jan 30 2008 at 20:47

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

lifestar Jan 30 2008 at 20:59

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

MTonly Jan 30 2008 at 21:41

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

Junior Jan 31 2008 at 12:37

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

lifestar Jan 31 2008 at 13:49

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

CurlyBrace Jan 31 2008 at 14:33

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

lifestar Jan 31 2008 at 15:03

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

Junior Jan 31 2008 at 23:23

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

Junior Jan 31 2008 at 23:16

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

Junior Jan 31 2008 at 23:18

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

Alinaki Jan 30 2008 at 19:03

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

UFO just landed and posted this here

ELV1S Jan 30 2008 at 17:19

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

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

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

anotherpit Jan 30 2008 at 18:07

именно!

snapper Jan 30 2008 at 17:32

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

kuzmi4 Jan 30 2008 at 17:36

Спасибо.

varyen Jan 30 2008 at 17:36

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

4g3n7 Jan 30 2008 at 17:48

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

dyakov Jan 30 2008 at 18:13

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

VVCh Jan 30 2008 at 18:15

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

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

CurlyBrace Jan 30 2008 at 18:21

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

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

VVCh Jan 31 2008 at 00:03

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

besisland Jan 30 2008 at 18:20

В разделе о цитатах вы путаете 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 Jan 30 2008 at 18:23

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

CurlyBrace Jan 30 2008 at 18:24

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

besisland Jan 30 2008 at 23:09

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

dolotov Jan 30 2008 at 18:26

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

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

CurlyBrace Jan 30 2008 at 18:28

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

dolotov Jan 30 2008 at 18:33

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

CurlyBrace Jan 30 2008 at 18:36

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

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

dolotov Jan 30 2008 at 18:47

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

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

CurlyBrace Jan 30 2008 at 22:54

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

edelweard Jan 30 2008 at 18:48

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

besisland Jan 30 2008 at 23:11

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

UFO just landed and posted this here

leshaogonkov Jan 30 2008 at 18:35

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

CurlyBrace Jan 30 2008 at 18:42

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

leshaogonkov Jan 30 2008 at 20:03

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

CurlyBrace Jan 30 2008 at 23:17

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

leshaogonkov Jan 30 2008 at 23:20

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

MTonly Jan 30 2008 at 18:46

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

CurlyBrace Jan 30 2008 at 22:57

:) Спасибо

Piplun Jan 30 2008 at 19:20

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

lohmatyi Jan 30 2008 at 22:04

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 Jan 30 2008 at 19:36

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

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

CurlyBrace Jan 30 2008 at 22:58

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

Junior Jan 31 2008 at 23:26

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

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

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

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

tigrenok Jan 30 2008 at 19:48

насколько я понимаю никто никуда не отменял. во всяком случае валидатор (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>
test
</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>
test
</body>
</html>

tigrenok Jan 30 2008 at 22:39

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

CurlyBrace Jan 30 2008 at 23:02

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

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

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

tigrenok Jan 30 2008 at 23:45

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

CurlyBrace Jan 30 2008 at 23:51

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

tigrenok Jan 31 2008 at 00:16

Не спора ради, а дабы выяснить истину. :)
В спецификации 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."

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

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

CurlyBrace Jan 31 2008 at 00:36

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

tigrenok Jan 31 2008 at 01:38

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

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

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

CurlyBrace Jan 31 2008 at 01:41

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

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

MTonly Jan 31 2008 at 02:24

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

MTonly Jan 31 2008 at 02:25

[...]

tigrenok Jan 31 2008 at 12:03

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

MTonly Jan 31 2008 at 14:31

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

tigrenok Jan 31 2008 at 14:55

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

MTonly Jan 31 2008 at 15:44

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

tigrenok Jan 31 2008 at 15:57

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

Junior Jan 31 2008 at 23:29

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

tigrenok Jan 31 2008 at 12:19

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

xvoland Jan 30 2008 at 19:51

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

NickTanz Jan 30 2008 at 19:54

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

tigrenok Jan 30 2008 at 22:44

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

akmute Jan 31 2008 at 00:04

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

CurlyBrace Jan 31 2008 at 01:21

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

akmute Jan 31 2008 at 09:41

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

будут

и т.д.

CurlyBrace Jan 31 2008 at 09:50

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

akmute Jan 31 2008 at 09:56

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



<div id="content">

 <div id="news">

 Новости

 </div>

 <div id="topics">

 Статьи

 </div>

</div>

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

CurlyBrace Jan 31 2008 at 10:30

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

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

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

akmute Jan 31 2008 at 10:33

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

CurlyBrace Jan 31 2008 at 11:13

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

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

akmute Jan 31 2008 at 00:26

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

xvoland Jan 31 2008 at 01:17

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

xvoland Feb 1 2008 at 01:30

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

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

CurlyBrace Jan 31 2008 at 01:20

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

MTonly Jan 31 2008 at 02:36

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

CurlyBrace Jan 31 2008 at 09:13

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

VVCh Jan 31 2008 at 01:41

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

VVCh Jan 31 2008 at 01:43

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

MTonly Jan 31 2008 at 02:34

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

akmute Jan 31 2008 at 09:45

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

consolamentor Jan 31 2008 at 16:49

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

Devgru Jan 31 2008 at 17:46

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

consolamentor Jan 31 2008 at 18:40

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

Devgru Jan 31 2008 at 22:25

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

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

Devgru Jan 31 2008 at 22:26

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

consolamentor Jan 31 2008 at 23:27

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

Junior Jan 31 2008 at 23:40

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

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

consolamentor Feb 1 2008 at 12:40

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

Junior Feb 3 2008 at 20:07

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

consolamentor Feb 3 2008 at 21:01

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

bobrob Feb 1 2008 at 15:42

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

bobrob Feb 2 2008 at 13:39

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

bobrob Feb 5 2008 at 17:04

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

CurlyBrace Feb 5 2008 at 17:16

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

bobrob Feb 5 2008 at 18:05

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

CurlyBrace Feb 5 2008 at 18:09

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

bobrob Feb 5 2008 at 18:17

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

CurlyBrace Feb 5 2008 at 18:20

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

bobrob Feb 5 2008 at 21:14

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

CurlyBrace Feb 5 2008 at 23:44

Уважаемый

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

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

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

bobrob Feb 6 2008 at 11:17

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

CurlyBrace Feb 6 2008 at 11:31

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

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

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

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

rimmer333 Feb 6 2008 at 09:26

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

bobrob Feb 8 2008 at 13:40

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

bobrob Feb 8 2008 at 14:31

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

rimmer333 Feb 8 2008 at 14:57

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

bobrob Feb 8 2008 at 15:02

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

uggallery Feb 6 2008 at 15:05

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

bobrob Feb 6 2008 at 23:09

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

CurlyBrace Feb 6 2008 at 23:21

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

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

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

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

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

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

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

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

bobrob Feb 6 2008 at 23:28

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

uggallery Feb 7 2008 at 14:40

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

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

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

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

bobrob Feb 7 2008 at 22:13

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

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

bobrob Feb 8 2008 at 11:27

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

bobrob Feb 6 2008 at 23:42

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

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

bobrob Feb 7 2008 at 11:22

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

uggallery Feb 7 2008 at 14:45

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