Когда верстаешь (X)HTML, порой не знаешь или забываешь о многих фичах, которые стоит использовать. Перечислю те, о которых вечно забываю сам, а зря :)
1. тег <label>
Очень полезная вещь, сильно повышающая юзабельность сайта. Определяет собой метку для элемента формы, т.е. если кликнуть по ее содержимому, флажок (кнопка) поставится (уберется), курсор попадет в текстовое поле и т.д.
Единственный нужный параметр: for, содержащий в себе id элемента, к которому метка относится.
Пример:
2. теги <link>
Помимо ссылок на CSS-страницы, может содержать себе много чего интересного (кстати, я видел поддежку этого интересного лишь в опере (ну, может есть плагины firefox'a для этого) :( но использовать все равно стоило бы). Например, в атрибуте rel может стоять:
и т.д.
3. списки (<ul> — <li>)
Если у нас есть несколько однотипных сущностей на странице, например — ссылки в оглавлении, стоит оформить их в список. Даже если они у вас стоят горизонтально или по кругу — ставите в список и оформляете CSS'ом. Тогда ваша страница будет без стилей выглядеть не так убого.
4. стили и структура
HTML документ должен описывать только данные и ничего кроме данных, разве что ссылки на то, что показывает, как эти данные визуализировать. Т.е. на CSS и JS, вынесенные в отдельные фаилы.
Этот пункт говорит сразу о трех вещах: во-первых, весь CSS и JS надо выносить в отдельный фаил, во-вторых, все названия классов и id элементов необходимо давать лишь по типу содержимого, но никак не по стилю, а в-третьих, никогда не стоит верстать табличками (т.к. таблички — они для табличных данных), увлекаться <b> вместо <strong> и т.п., а так же всюду лепить div'ы и span'ы, где можно поставить список (см. п3), хедер (<h[1..]>) (от них, кстати, почему-то все бегают, хотя стоило бы их использовать для заголовков всегда, даже если потом придется в CSS (да-да, именно в CSS! никакого дизайна в html!) сделать текст невидимым и поставить туда картинку) или еще какой-нибудь «честный» элемент.
Чтобы было проще следовать этому правилу, поставте себе на firefox webdeveloper и жмите ctrl-shift-C (CSS → disable styles → all styles).
Да, и добавление от b2k: не стоит прописывать стили по id
5. мнемоники
Не стоит ставить в текст (tm), , ->, если есть , , →. Тем более не стоит использовать картинки.
Вот список.
6. strict
Всегда верстайте в strict! Это несложно, но интересно ;)
7. фреймы
Если вам нужен фрейм, которого в HTML нет (нет такого элемента в стандарте… ну почти ;), используйте не тег <frame>, а тег <object>.
8. работа и результат должны быть приятны
Если вы смотрите на сайт и код, и говорите себе: «ГоспАди, сколько ж хаков, оперный енот» или «О ужас, если сюда ченить вписать или это переставить все опять поедет :(», то сотрите это всё и напишите заново.
Когда я пишу красивый валидный код, я доволен собой. И это не оргазм после секаса с браузерами :)
9. код должен быть готов к анализу машиной
Вместо того, чтобы плодить API, можно делать страницу понятной для анализа при помощи всяких XML-парсеров и т.п.
P.S. Буду рад любым дополнениям, тут же внесу их сюда.
1. тег <label>
Очень полезная вещь, сильно повышающая юзабельность сайта. Определяет собой метку для элемента формы, т.е. если кликнуть по ее содержимому, флажок (кнопка) поставится (уберется), курсор попадет в текстовое поле и т.д.
Единственный нужный параметр: for, содержащий в себе id элемента, к которому метка относится.
Пример:
<label for='login'>Логин: </label><input id='login' />
2. теги <link>
Помимо ссылок на CSS-страницы, может содержать себе много чего интересного (кстати, я видел поддежку этого интересного лишь в опере (ну, может есть плагины firefox'a для этого) :( но использовать все равно стоило бы). Например, в атрибуте rel может стоять:
- 'alternate' — определяет документ в других версиях, например — в RSS (в какой — зависит от других аттрибутов).
- 'start', 'next', 'prev' — определяет другие документы из списка, если их много и у них есть порядок (как в бизнес-линче, например)
- 'сopyright' — адрес страницы с копирайтом, например у википедии там ссылка на GPL
и т.д.
3. списки (<ul> — <li>)
Если у нас есть несколько однотипных сущностей на странице, например — ссылки в оглавлении, стоит оформить их в список. Даже если они у вас стоят горизонтально или по кругу — ставите в список и оформляете CSS'ом. Тогда ваша страница будет без стилей выглядеть не так убого.
4. стили и структура
HTML документ должен описывать только данные и ничего кроме данных, разве что ссылки на то, что показывает, как эти данные визуализировать. Т.е. на CSS и JS, вынесенные в отдельные фаилы.
Этот пункт говорит сразу о трех вещах: во-первых, весь CSS и JS надо выносить в отдельный фаил, во-вторых, все названия классов и id элементов необходимо давать лишь по типу содержимого, но никак не по стилю, а в-третьих, никогда не стоит верстать табличками (т.к. таблички — они для табличных данных), увлекаться <b> вместо <strong> и т.п., а так же всюду лепить div'ы и span'ы, где можно поставить список (см. п3), хедер (<h[1..]>) (от них, кстати, почему-то все бегают, хотя стоило бы их использовать для заголовков всегда, даже если потом придется в CSS (да-да, именно в CSS! никакого дизайна в html!) сделать текст невидимым и поставить туда картинку) или еще какой-нибудь «честный» элемент.
Чтобы было проще следовать этому правилу, поставте себе на firefox webdeveloper и жмите ctrl-shift-C (CSS → disable styles → all styles).
Да, и добавление от b2k: не стоит прописывать стили по id
5. мнемоники
Не стоит ставить в текст (tm), , ->, если есть , , →. Тем более не стоит использовать картинки.
Вот список.
6. strict
Всегда верстайте в strict! Это несложно, но интересно ;)
7. фреймы
Если вам нужен фрейм, которого в HTML нет (нет такого элемента в стандарте… ну почти ;), используйте не тег <frame>, а тег <object>.
8. работа и результат должны быть приятны
Если вы смотрите на сайт и код, и говорите себе: «ГоспАди, сколько ж хаков, оперный енот» или «О ужас, если сюда ченить вписать или это переставить все опять поедет :(», то сотрите это всё и напишите заново.
Когда я пишу красивый валидный код, я доволен собой. И это не оргазм после секаса с браузерами :)
9. код должен быть готов к анализу машиной
Вместо того, чтобы плодить API, можно делать страницу понятной для анализа при помощи всяких XML-парсеров и т.п.
P.S. Буду рад любым дополнениям, тут же внесу их сюда.
