CurlyBrace 30 янв 2008 в 16:05

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

4 мин

5.7K

Веб-разработка*

+53

186

Комментарии 186

Gargool 30 янв 2008 в 16:25

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

kost 30 янв 2008 в 17:11

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

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

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

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

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

+17

CurlyBrace 30 янв 2008 в 17:17

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

kost 30 янв 2008 в 18:06

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

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

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

CurlyBrace 30 янв 2008 в 18:09

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

kost 30 янв 2008 в 18:14

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

CurlyBrace 30 янв 2008 в 18:17

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

SWS 30 янв 2008 в 21:23

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

CurlyBrace 30 янв 2008 в 22:47

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

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

kostos 31 янв 2008 в 11:32

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

CurlyBrace 31 янв 2008 в 11:34

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

bobrob 1 фев 2008 в 16:42

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

CurlyBrace 1 фев 2008 в 23:27

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

xvoland 30 янв 2008 в 19:37

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

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

nfx 30 янв 2008 в 21:09

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

Tishka17 30 янв 2008 в 20:59

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

KonstRuctor 30 янв 2008 в 17:26

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

vovanbo 30 янв 2008 в 17:37

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

poh 30 янв 2008 в 17:54

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

kost 30 янв 2008 в 18:07

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

strashichkin 30 янв 2008 в 19:13

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

Devgru 30 янв 2008 в 19:24

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

strashichkin 30 янв 2008 в 19:27

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

Devgru 30 янв 2008 в 19:31

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

strashichkin 30 янв 2008 в 19:49

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

Alinaki 30 янв 2008 в 18:35

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

den_rad 31 янв 2008 в 01:11

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

Alinaki 31 янв 2008 в 03:42

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

kostos 31 янв 2008 в 11:44

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

CurlyBrace 31 янв 2008 в 11:51

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

kostos 31 янв 2008 в 12:23

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

CurlyBrace 31 янв 2008 в 12:25

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

bobrob 1 фев 2008 в 17:00

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

mente 30 янв 2008 в 20:46

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

Smerig 30 янв 2008 в 23:57

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

goland 31 янв 2008 в 02:39

+1 Это точно!

piloter 31 янв 2008 в 16:51

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

kost 31 янв 2008 в 16:53

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

randoom 30 янв 2008 в 17:13

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

CurlyBrace 30 янв 2008 в 17:17

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

Plohich 30 янв 2008 в 16:36

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

bezz 31 янв 2008 в 11:04

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

AirWorker 30 янв 2008 в 16:49

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

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

CurlyBrace 30 янв 2008 в 16:53

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

kost_bebix 30 янв 2008 в 17:07

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

medvoodoo 30 янв 2008 в 17:25

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

kost_bebix 30 янв 2008 в 17:45

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

TonyClifton 30 янв 2008 в 17:34

Dreamweaver чем плох?

kost_bebix 30 янв 2008 в 17:44

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

TonyClifton 30 янв 2008 в 18:17

А… :-)

bolk 30 янв 2008 в 17:48

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

vittore 30 янв 2008 в 18:38

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

kost_bebix 30 янв 2008 в 17:02

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

CurlyBrace 30 янв 2008 в 17:05

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

НЛО прилетело и опубликовало эту надпись здесь

Alinaki 30 янв 2008 в 18:36

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

kost_bebix 30 янв 2008 в 18:38

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

CurlyBrace 30 янв 2008 в 18:39

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

MTonly 30 янв 2008 в 18:51

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

Alinaki 30 янв 2008 в 18:52

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

Alinaki 30 янв 2008 в 18:51

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

MTonly 30 янв 2008 в 19:37

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

lifestar 30 янв 2008 в 20:35

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

Junior 30 янв 2008 в 20:47

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

lifestar 30 янв 2008 в 20:59

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

-3

MTonly 30 янв 2008 в 21:41

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

Junior 31 янв 2008 в 12:37

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

lifestar 31 янв 2008 в 13:49

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

-1

CurlyBrace 31 янв 2008 в 14:33

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

lifestar 31 янв 2008 в 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 31 янв 2008 в 23:23

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

Junior 31 янв 2008 в 23:16

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

Junior 31 янв 2008 в 23:18

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

Alinaki 30 янв 2008 в 19:03

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

НЛО прилетело и опубликовало эту надпись здесь

ELV1S 30 янв 2008 в 17:19

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

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

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

anotherpit 30 янв 2008 в 18:07

именно!

snapper 30 янв 2008 в 17:32

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

kuzmi4 30 янв 2008 в 17:36

Спасибо.

varyen 30 янв 2008 в 17:36

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

4g3n7 30 янв 2008 в 17:48

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

dyakov 30 янв 2008 в 18:13

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

VVCh 30 янв 2008 в 18:15

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

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

CurlyBrace 30 янв 2008 в 18:21

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

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

VVCh 31 янв 2008 в 00:03

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

besisland 30 янв 2008 в 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 30 янв 2008 в 18:23

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

CurlyBrace 30 янв 2008 в 18:24

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

besisland 30 янв 2008 в 23:09

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

dolotov 30 янв 2008 в 18:26

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

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

CurlyBrace 30 янв 2008 в 18:28

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

dolotov 30 янв 2008 в 18:33

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

-3

CurlyBrace 30 янв 2008 в 18:36

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

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

dolotov 30 янв 2008 в 18:47

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

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

-1

CurlyBrace 30 янв 2008 в 22:54

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

edelweard 30 янв 2008 в 18:48

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

besisland 30 янв 2008 в 23:11

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

НЛО прилетело и опубликовало эту надпись здесь

leshaogonkov 30 янв 2008 в 18:35

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

CurlyBrace 30 янв 2008 в 18:42

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

leshaogonkov 30 янв 2008 в 20:03

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

CurlyBrace 30 янв 2008 в 23:17

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

leshaogonkov 30 янв 2008 в 23:20

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

MTonly 30 янв 2008 в 18:46

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

CurlyBrace 30 янв 2008 в 22:57

:) Спасибо

Piplun 30 янв 2008 в 19:20

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

lohmatyi 30 янв 2008 в 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 30 янв 2008 в 19:36

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

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

-1

CurlyBrace 30 янв 2008 в 22:58

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

Junior 31 янв 2008 в 23:26

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

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

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

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

tigrenok 30 янв 2008 в 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 30 янв 2008 в 22:39

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

CurlyBrace 30 янв 2008 в 23:02

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

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

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

tigrenok 30 янв 2008 в 23:45

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

CurlyBrace 30 янв 2008 в 23:51

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

tigrenok 31 янв 2008 в 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 31 янв 2008 в 00:36

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

tigrenok 31 янв 2008 в 01:38

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

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

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

CurlyBrace 31 янв 2008 в 01:41

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

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

MTonly 31 янв 2008 в 02:24

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

MTonly 31 янв 2008 в 02:25

[...]

tigrenok 31 янв 2008 в 12:03

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

MTonly 31 янв 2008 в 14:31

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

tigrenok 31 янв 2008 в 14:55

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

MTonly 31 янв 2008 в 15:44

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

tigrenok 31 янв 2008 в 15:57

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

Junior 31 янв 2008 в 23:29

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

tigrenok 31 янв 2008 в 12:19

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

xvoland 30 янв 2008 в 19:51

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

NickTanz 30 янв 2008 в 19:54

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

tigrenok 30 янв 2008 в 22:44

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

akmute 31 янв 2008 в 00:04

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

CurlyBrace 31 янв 2008 в 01:21

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

akmute 31 янв 2008 в 09:41

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

будут

и т.д.

CurlyBrace 31 янв 2008 в 09:50

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

akmute 31 янв 2008 в 09:56

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



<div id="content">

 <div id="news">

 Новости

 </div>

 <div id="topics">

 Статьи

 </div>

</div>

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

CurlyBrace 31 янв 2008 в 10:30

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

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

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

akmute 31 янв 2008 в 10:33

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

CurlyBrace 31 янв 2008 в 11:13

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

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

akmute 31 янв 2008 в 00:26

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

xvoland 31 янв 2008 в 01:17

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

-1

xvoland 1 фев 2008 в 01:30

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

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

CurlyBrace 31 янв 2008 в 01:20

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

MTonly 31 янв 2008 в 02:36

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

CurlyBrace 31 янв 2008 в 09:13

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

VVCh 31 янв 2008 в 01:41

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

VVCh 31 янв 2008 в 01:43

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

MTonly 31 янв 2008 в 02:34

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

akmute 31 янв 2008 в 09:45

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

consolamentor 31 янв 2008 в 16:49

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

Devgru 31 янв 2008 в 17:46

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

consolamentor 31 янв 2008 в 18:40

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

Devgru 31 янв 2008 в 22:25

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

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

Devgru 31 янв 2008 в 22:26

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

consolamentor 31 янв 2008 в 23:27

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

Junior 31 янв 2008 в 23:40

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

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

consolamentor 1 фев 2008 в 12:40

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

Junior 3 фев 2008 в 20:07

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

consolamentor 3 фев 2008 в 21:01

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

bobrob 1 фев 2008 в 15:42

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

-1

bobrob 2 фев 2008 в 13:39

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

bobrob 5 фев 2008 в 17:04

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

-1

CurlyBrace 5 фев 2008 в 17:16

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

bobrob 5 фев 2008 в 18:05

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

-1

CurlyBrace 5 фев 2008 в 18:09

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

bobrob 5 фев 2008 в 18:17

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

-2

CurlyBrace 5 фев 2008 в 18:20

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

bobrob 5 фев 2008 в 21:14

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

-2

CurlyBrace 5 фев 2008 в 23:44

Уважаемый

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

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

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

bobrob 6 фев 2008 в 11:17

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

-1

CurlyBrace 6 фев 2008 в 11:31

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

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

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

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

rimmer333 6 фев 2008 в 09:26

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

bobrob 8 фев 2008 в 13:40

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

-1

bobrob 8 фев 2008 в 14:31

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

-2

rimmer333 8 фев 2008 в 14:57

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

bobrob 8 фев 2008 в 15:02

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

-1

uggallery 6 фев 2008 в 15:05

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

bobrob 6 фев 2008 в 23:09

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

-1

CurlyBrace 6 фев 2008 в 23:21

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

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

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

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

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

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

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

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

bobrob 6 фев 2008 в 23:28

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

-3

uggallery 7 фев 2008 в 14:40

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

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

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

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

bobrob 7 фев 2008 в 22:13

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

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

-2

bobrob 8 фев 2008 в 11:27

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

-1

bobrob 6 фев 2008 в 23:42

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

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

-3

bobrob 7 фев 2008 в 11:22

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

-2

uggallery 7 фев 2008 в 14:45

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

Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Показать лучшие за всё время

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

Комментарии 186

Публикации

Истории