10 HTML тегов, которые не используют начинающие
Представляю Вашему вниманию вольный перевод статьи The 10 HTML Tags Beginners Aren’t Using
Давайте вернемся к основам. Любой, кто читает эту статью, в какой то мере знает, что такое HTML. Я верю, что какой бы опытный не был каждый из нас, обзор основ ведет к повышению уровня знаний. Так же это помогает оттачивать свои умения особенно в такой развивающейся сфере как Интернет.
Часть разговоров касается изменений, связанных с HTML 5. Каждый тег приведенный ниже поддерживается как HTML 4.01 так и HTML 5. Хотя некоторые из этих тегов уже широко используются, я хотел бы обратить внимание на то как мы их используем.
1. <!-- -->
В любой книге о программировании, которую вы читали, говорится, что хорошо, объяснять свои действия. Почему комментарии это хорошая идея? Резонный вопрос. Они помогают лучше понять происходящее в коде при взгляде на него.
В HTML комментарии могут показаться излишеством. Однако они могут использоваться для описания блоков, помочь в организации и структурировании вашего кода. Метки в начале и конце блока действительно помогают при разработке.
- menu item 1
- menu item 2
This is the main content.
...2. Оформление таблиц – <thead>, <tbody>, и <tfoot>
Когда я вспоминаю минувшие дни веб-разработки, первое что приходит на ум – таблицы. Я ими очень злоупотреблял. Когда таблицы используются правильно, только для табличных данных, можно задать стили для заголовка таблицы, содержания и нижней части.
Скучно, когда хорошо отформатированные таблицы не принося удовольствия (Разговоры вне веб-разработки). Почему бы нам не позаботится об этой простой задаче форматирования в великолепном дизайне? Потом каждый тег может быть оформлен в таблице стилей.
Для наглядности: все три тега применяются к строкам таблицы.
| Item | Qty |
| Sum | 7 |
| #1 | 3 |
| #2 | 4 |
<thead>
Обрамляет строки таблицы с помощью <thead></thead>.
<tfoot>
Обрамляет строки таблицы с помощью <tfoot></tfoot>. <tfoot> должны быть выше <tbody>. Это связана с тем, что нижние строки прорисовываются до остальных строк с данными.
<tbody>
Обрамляет строки таблицы с помощью <tbody></tbody>.
| Item | Qty |
| Sum | 7 |
| #1 | 3 |
| #2 | 4 |
3. <optgroup>
Выпадающие списки это отличный способ отображения данных для пользовательского выбора. Они позволяют скрыть реальный размер списка, а так же просты в использовании и знакомы пользователю. Отличная вещь <optgroup>, которая позволяет разбить данные списка на категории (если это нужно).
4. Заголовки – <h1>,<h2>,<h3>,<h4>,<h5>, и <h6>
Я знаю, что все используют тег заголовка. Но, если быть честным, я не помню когда последний раз использовал <h3> или ниже. У меня нет этому объяснения, да я и не думал об этом, поэтому обычно использую что то вроде оформленного текста в теге <div>.
5. <fieldset> и <legend>
Мне нравятся сайты, на которых можно легко найти информацию и которые имеют логически разделенные блоки. Я считаю, что это выглядит изящно. <fieldset> группирует элементы формы, рисуя во круг них рамку. Используя <legend> можно добавить надпись (заголовок).
6. <label>
Это, наверное, один из моих любимых HTML тегов. Тег label не оформляет элемент. Он добавляет функционал.
<label> используется для добавления метки к элементам ввода. В чем его большое преимущество? При использовании метки, кликнув на нее мышкой, становится активным соответствующее поле ввода. Это работает для полей ввода текста и радио кнопок.
7. <blockquote>
Если вы хотите привлечь внимание к высказыванию или предложению,то используйте тег <blockquote> По-умолчанию, будет вставлен белый промежуток до и после элемента. Отступ так же вставляется для отделения содержания цитаты от остального контента страницы.
Вот так оно выглядит.
8. <cite> (цитата)
Не утверждаю, что <cite> связано с <blockquote>, но это так, обычно я использую их в сочетании.
Используйте <cite> когда нужно привести цитату. Если вы выпускник колледжа, думайте, что это список сносок в конце страницы.
"Если ты рождён без крыльев, не мешай им расти." - Коко Шанель
"Если ты рождён без крыльев, не мешай им расти." - Коко Шанель
9. <dl> (список определений)
Использование списков это отличный способ подачи информации. Всем знаком <ul>, но как часто используются <ol> и <dl>? Возможно упоминание “списка определений” собьет с толку некоторых начинающих кодеров мыслью о том, что они могут его использовать только для вставки определений и терминов, на самом деле это не совсем так.
Типы списков
- Маркированный список (ul)
- Нумерованный список (ol)
- Список определений (dl)
Что они делают
- Маркированный список (ul): Маркирует список
- Нумерованный список (ol): Нумерует список
- Список определений (dl): Список с определениями элементов
Плюсы использования
- Последовательное оформление
- Просто создать
- Гибкость
Каждый тип списка выводит информацию в определенном виде. Думаю не надо описывать <ul> и <ol>, давайте рассмотрим повнимательнее устройство списка определений.
- Пункт #1
- Определение пункта #1
- Пункт #2
- Определение пункта #2
Здесь только задается тип списка (<ul> или <ol>) и его элементов (<li>), мы использовали <dt> и <dd>. <dt> определяет каждый пункт списка, а <dd> описание к нему.
10. '(и другие символы ASCII)
Кодирование с использованием ASCII или других символов. Это занимает больше работы, но гарантирует, что символы будут отображаться правильно в браузере. Вы когда-нибудь сталкивались с тем, что текст неправильно отображается на странице? Например вот так: "I didn#%%!t use HTML to render the apostrophe.(Я никогда не использую HTML для записи апострофа)"
Приведенный пример надуманный, но передает основную мысль.
The character-sets used in modern computers, HTML, and Internet are all based on ASCII (Все символы, используемые в современных компьютерах, HTML, Итернете основаны на ASCII). – w3schools.com
На w3schools.com есть хорошее описание HTML ASCII символов. Я советую каждому ознакомится и запомнить несколько часто используемых символов, например, апостроф, кавычка, амперсанда и @
Спасибо за внимание!