Если хотите хоть как-то отличаться от других HTML-щиков, изучите нераспространённые приёмы языка.

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

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

Мы решили сделать подборку интересных приёмов в HTML (кажется, каждый программист уже умеет в этот язык разметки), про которые не напишут в обычных учебниках и не расскажут в видеокурсах. Эти приёмы были отобраны вручную среди сотен других, посоветованных участниками Stack Overflow. Кстати, тем, кто ещё не знаком с этой платформой, советуем взять на вооружение. Здесь удобно находить ответы на стандартные и нестандартные вопросы, а если вы чего-то просто не понимаете, то вам помогут опытные пользователи, по крайней мере, на это стоит надеяться. Ну что, пора приступать к рассмотрению интересных HTML-приёмов!

1. Использование независимого от протокола абсолютного пути

Если браузер просматривает страницу в SSL через HTTPS, он работает с протоколом HTTPS, если же нет, то с HTTP.

Это предотвращает появление в Internet Explorer сообщения об ошибке «Эта страница содержит как защищённые, так и незащищенные элементы» и сохраняет все ваши запросы в рамках одного и того же протокола.

Предостережение: при использовании  или @import для таблицы стилей, 7-я и 8-я версия Internet Explorer загружают файл дважды. Тем не менее, в остальном всё отлично.

2. Связь с тего label

Тег label логически связывается с элементом формы, используя атрибут «for». Большинство браузеров превращают это в ссылку, которая активирует связанный элемент формы.

Fiscal Year

3. Свойства contentEditable

Это делает ячейки доступными для редактирования! Можете протестировать, если не верите.

4. Тег optgroup

Тег optgroup — это одна из функций, которая зачастую не используется, большинство даже не в курсе его существования.

Optgroup, как контейнер объединяет в группу теги. Этот тег выделяет варианты в выпадающем списке select в отдельную группу.

Пример работы:

Volvo
Saab
  
Mercedes
Audi
  

5. Тег base

Если вам нужно использовать маршрутизацию или перезаписывать URL, то можно воспользоваться тегом .

Допустим, вы располагаетесь на этом адресе —www.anypage.com/folder/subfolder/

Обычный анкор

Click here

указывает на www.anypage.com/folder/subfolder/test.html

Теперь, если добавить тег :

Click here

То анкор поведёт на www.anypage.com/test.html

6. Onerror

onerror — это JavaScript событие, которое будет запущено прямо перед отображением маленького красного крестика.

Это можно использовать для написания сценариев замены «битых» изображений каким-либо альтернативным контентом.

На первый взгляд это может показаться бесполезным, потому что нельзя знать заранее такие вещи, но, предположим, что вы используете изображение со стороннего ресурса, который вы не контролируете. Stack Overflow обслуживается gravatar.com, они его не контролируют, но если что, то у SO, будут проблемы.

7. Тег kbd

Элемент kbd может обозначать как набираемый текст, так и горячие клавиши. Многие заменяют его с помощью CSS.

Тег kbd используют для обозначения клавиш на клавиатуре. Например (да, выглядит страшновато):

Ctrl+Alt+Del

8. Теги, выделяющие текст

Тег blink

Должен использоваться для чего-либо крайне важного на сайте. Элементы под тегом будут мигать.

Тег marquee

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

9. Lowsrc

Это малоизвестно, но вы можете указать lowsrc для показа превью, пока загружается основное изображение из src:

Это будет полезно, если вы не уважаете чересстрочные изображения.

Однако ещё в 2000-м году это свойство использовалось для атаки на Hotmail.

10. Маркировка удалённых элементов

Для того, чтобы промаркировать удалённые элементы, можно использовать теги <del> и <ins>:

HTML sucks rocks!

Ещё несколько подборок 10 чего-то про HTML:

• 10 вопросов, на которые должен ответить каждый, кто знает HTML
• 10 способов проверить знания HTML/CSS

Источник: Обсуждение на Stack Overflow