10 HTML-тегов, о которых часто забывают новички
Опубликовано 13.07.10 / Автор перевода: Иван Саломатин
Комментариев 0
Думаю, каждый, читающий эту статью, по крайней мере, имеет представление о том, что такое HTML. Я уверен, что не зависимо от уровня ваших навыков, очень полезно порой возвращаться, так сказать, к истокам, дабы почерпнуть немного знаний, которым мы, быть может, поначалу не уделили должного внимания.
С переходом к HTML 5 синтаксис языка HTML подвергся значительным изменениям, но теги, о которых в этой статье пойдёт речь, в HTML 5 сохранились.
1. <!- ->
В любой книге, посвящённой программированию, вы, наверняка, найдёте упоминание о том, что создавать описание своих действий крайне полезно. Для чего? Ну, по одной простой причине: тому, кто будет просматривать код страницы (или сценария), комментарии помогут понять, что где происходит, с чем взаимодействует и как обрабатывается. Порой этот «кто-то» – вы сами.
Для HTML-документа использование комментариев может показаться излишним… Тем не менее, с помощью комментариев можно легко и просто структурировать код страницы, ограничивая ими блоки HTML-элементов. Стартовая отметка в начале блока и завершающая в конце помогут существенно упростить визуальное чтение кода страницы.
<!-- Beginning of Nav -->
<ul>
<li>menu item 1</li>
<li>menu item 2</li>
</ul>
<!-- End of Nav -->
<!-- Beginning of Main Content -->
<p>This is the main content.</p>
...
2. Спец. теги таблиц: <thead>, <tbody>, <tfoot>
Вспоминая те времена, когда веб-программирование только начинало развиваться, первое, что всплывает в памяти – тег <table>. Я и сам им безбожно злоупотреблял. Корректное же использование этого тега предполагает применение его исключительно к табличным данным. Для <table> язык HTML, позволяет нам определить стилизацию заголовков столбцов, тела таблицы и табличного футера.
Каким бы скучным нам это не казалось, но правильное построение таблиц – это, по меньшей мере, правило хорошего тона (выходящее даже за рамки непосредственно веб-программирования). Содержимое каждого тега может быть с лёгкостью стилизовано посредством использования стандартных таблиц стилей (css).
| Item | Qty |
| Sum | 7 |
| #1 | 3 |
| #2 | 4 |
<thead> – оборачивает строку, содержащую заголовки столбцов таблицы.
<tfoot> – оборачивает стоку, содержащую итоговые значения столбцов. Обратите внимание: в HTML-разметке <tfoot> следует перед <tbody>, поскольку этот тег выполняется до того как будет обработано содержимое остальных строк таблицы.
<tbody> – оборачивает все прочие строки таблицы.
<table>
<thead>
<tr>
<td>Item</td>
<td>Qty</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>7</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>#1</td>
<td>3</td>
</tr>
<tr>
<td>#2</td>
<td>4</td>
</tr>
</tbody>
</table>
3. <optgroup>
Ниспадающий список – отличный способ представления значений, из которых пользователем должен производиться отбор. Этот элемент интуитивно понятен и прост в использовании. Вся прелесть тега <optgroup> заключается в том, что с его помощью мы можем создавать группы списков, формируя необходимые заголовки.
<select>
<optgroup label="Baseball Teams">
<option value="Detroit Tigers">Detroit Tigers</option>
<option value="Chicago Cubs">Chicago Cubs</option>
</optgroup>
<optgroup label="Football Teams">
<option value="Detroit Lions">Detroit Lions</option>
<option value="Chicago Bears">Chicago Bears</option>
</optgroup>
</select>
4. Заголовки: <h1>,<h2>,<h3>,<h4>,<h5> и <h6>
Знаю-знаю, заголовки используют все. Но, по правде говоря, я и сам не помню, когда я использовал такие заголовки как <h3> и менее. Я даже и не задумывался о том, чтобы их использовать, выстраивая многочисленные <div>-конструкции.
А ведь правильное использование тегов заголовков не только полезно с точки зрения SEO, но и значительно упрощает процедуру визуального чтения кода страниц!
Вывод такой: не добавляйте себе лишней работы – используйте теги заголовков везде, где это семантически оправдано.
5. <fieldset> и <legend>
Мне нравятся сайты, на которых очень легко искать нужную информацию с помощью логически сгруппированных элементов. Тег <fieldset> позволяет группировать элементы тега <form>, обхватывая их единой рамкой. Также, мы можем добавить описание группы посредством использования тега <legend> внутри <fieldset>.
<form>
<fieldset>
<legend>General Information: </legend>
<label>Name: <input type="text" size="30" /></label>
<label>Email: <input type="text" size="30" /></label>
<label>Date of birth: <input type="text" size="10" /></label>
</fieldset>
</form>
6. <label>
Пожалуй, мой любимый тег. :) Тег <label> ни как не влияет на стилизацию документа, но добавляет функциональность.
<label> используется в качестве подписи для input-элементов. Особенность тега заключается в том, что он сам по себе является кликабельным, и по клику на <label> связанный с ним элемент <input> становится активным. Это срабатывает как для текстовых полей, так и для радио-кнопок.
<form>
<label>Name: <input type="text" size="30" /></label>
<label>Male: <input type="radio" name="sex" /></label>
<label>Female: <input type="radio" name="sex" /></label>
</form>
7. <blockquote>
Если вам необходимо привести выдержки из какого-либо текста или высказывания, вы можете воспользоваться тегом <blockquote>. По-умолчанию к этому тегу со всех четырёх сторон добавляются внешние отступы (margin), дабы отделить содержимое тега от прочих элементов страницы.
Вот так выглядит тег <blockquote> на WEB-BRICKS.RU
8. <cite>
Строчный тег <cite> используется для обозначения автора цитируемого фрагмента. Этот тег вполне самостоятелен, но семантически правильно использовать его в связке с тегом <blockquote>.
<blockquote>
<p>"...this is some great quote." <cite>- someGreatPerson</cite>
</blockquote>
9. <dl>
Использование списков – отличный способ упорядочить информацию. Мы очень часто используем ненумерованные списки (<ul>), но крайне редко прибегаем к нумерованным спискам и спискам определений. Вероятно, новичков сбивает с толку ассоциирование <dl> исключительно со «списком определений», что это не совсем верно.
Благодаря значительно большей гибкости <dl>-списки могут быть использованы в очень многих случаях. Думаю, не стоит подробно останавливаться на <ul> и <ol>-списках, а вот структуру <dl>-списка предлагаю рассмотреть повнимательнее:
- This is list item #1
- This is the definition of list item #1.
- This is list item #2
- This is the definition of list item #2.
<dl>
<dt>This is list item #1</dt>
<dd>This is the definition of list item #1. </dd>
<dt>This is list item #2</dt>
<dd>This is the definition of list item #2. </dd>
</dl>
Здесь, вместо того, чтобы просто-напросто объявить следование списка (как в <ol> и <ul>) и обозначить элементы (<li>), нам следует использовать теги <dt> и <dd>. <dt> определяет элементы, а <dd> содержит описания этих элементов.
10. ' (и другие ASCII символы)
Для спец. символов в языке HTML следует использовать формат ASCII (англ. American Standard Code for Information Interchange). Конечно, это чуточку усложняет процесс вёрстки, но зато такой подход позволяет быть уверенным в корректности рендеринга спец. символов не зависимо от настроек локали и пользовательского ПО. Быть может, вам доводилось встречать на веб-страницах текст, похожий на вот этот: "I didn#%%!t use HTML to render the apostrophe"… Пример малость надуманный, но отлично демонстрирует значимость правильного использования спец. символов HTML.
На сайте w3schools.com есть замечательная страничка с перечнем спец. символов HTML в ASCII-формате. Я бы рекомендовал всем веб-мастерам периодически обращаться к ней, а наиболее употребляемые символы, как, например, апостроф ('), двойные кавычки ("), амперсанд (&), «at sign» (@) и др. – помнить наизусть.
Заключение
Конечно, в этой статье я привёл далеко не все теги, которые мы обычно незаслуженно оставляем без внимания… К таковым можно было бы отнести теги <var>, <sub>, <sup>, <kbd>, <dfn> и многие другие. Для более подробного ознакомления с разнообразными тегами рекомендую обратиться к замечательному ресурсу htmlbook.ru, содержащему простое и понятное описание всех HTML-тегов.
Добавь в закладки
или поделись с друзьями: