Каждый, кто читает данный урок, наверняка знает, что такое HTML. Но
обзор основ помогает увеличить знания и отточить мастерство, особенно в
условиях постоянно развивающихся веб технологий.
Сейчас много
говорят об изменениях, которые принес HTML 5. Каждый тег, упомянутый в
данной статье поддерживается и в HTML 4.01 и в HTML 5. Хотя некоторые из
этих тегов широко используются, будет очень полезно пересмотреть
задействованные методы.
1. <!- ->
Каждая
книга о программировании содержит упоминание о том, что очень полезно
объяснять, что делает ваш код. Почему комментирование является хорошей
практикой? Это очень помогает тому, кто читает ваш код, разобраться в
сути происходящего.
Для HTML комментирование может казаться
пунктом, увеличивающим вес страницы. Однако комментарии могут быть
полезны для определения секций и для сохранения структуры и организации
кода страницы. Отметка начала и конца различных секций может реально
помочь при работе над проектом.
Code
<!-- Начало навигации -->
<ul>
<li>Пункт меню 1</li>
<li>Пункт меню 2</li>
</ul>
<!-- Конец навигации -->
<!-- Начало основного контента -->
<p>Это основной контент.</p>
...
2. Стили таблицы: <thead>, <tbody>, и <tfoot>
Чтобы сделать хороший дизайн таблиц, нужно использовать теги, указанные
в подзаголовке. Они все влияют на строки таблицы и можно легко задать
для них стили.
<thead>
Оборачиваем строки таблицы в <thead></thead>. Таким образом формируется заголовок таблицы.
<tfoot>
Обернув строки в <tfoot></tfoot> формируем итоговые строки
внизу таблицы. Строки <tfoot> должны определяться до строк
<tbody>, таким образом, итоговые строки выводятся на экран до
остальных строк таблицы.
<tbody>
Cтроки с данными оборачиваем в <tbody></tbody>.
Code
<table>
<thead>
<tr>
<td>Пунтк</td>
<td>Кол-во</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Сумма</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. <optgroups>
Выпадающий список является великолепным способом представить данные для
выбора пользователя. Они не только занимают мало места, но и знакомы
пользователям и легки в применении. Чудесным свойством <optgroup>
является возможность создавать категории (или подзаголовки) для
элементов списка.
Code
<select>
<optgroup label="Бейсбольные команды">
<option value="Detroit Tigers">Detroit Tigers</option>
<option value="Chicago Cubs">Chicago Cubs</option>
</optgroup>
<optgroup label="Футбольные команды">
<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>.
Не надо создавать себе дополнительной работы. Помните про теги заголовков.
5. <fieldset> и <legend>
Всем нравятся сайты, на которых легко найти нужную информацию среди
логически сгруппированных элементов. <fieldset> группирует вместе
элементы формы , рисуя вокруг них прямоугольную рамку. Также возможно
добавить название к такой секции с помощью <legend>.
Code
<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> используется для определения метки элемента ввод. Метка
сама воспринимает нажатия кнопки мыши, делая активным соответствующее
поле ввода. Такое свойство меток действует для текстовых полей и радио
кнопок.
7. <blockquote>
Если нужно придать
драматический эффект какому-нибудь выражению, то можно использовать
<blockquote>. По умолчанию до и после элемента будет вставлена
пустая строка. Также будет добавлен отступ для отделения содержащегося в
элементе текста от остального контента.
Пример использования тега <blockquote>
Code
<blockqoute>
Пример использования тега <blockquote>
</blockqoute>
8. <cite>
Нельзя сказать, что <cite> относится к <blockquote>, но обычно их используют вместе.
Вспомните о теге <cite>, когда вам нужно процитировать кого-нибудь.
Пример использования тега <blockquote> совместно с тегом <cite>. Данное предложение заключено в тег <cite>.
Code
<blockqoute>
Пример использования тега blockquote совместно с тегом cite.
<cite>Данное предложение заключено в тег <cite>.</cite>
</blockqoute>
9. <dl>
Использование списков дает великолепные возможности для организации
информации. Каждый знает о <ul>, но как часто вы используете
<ol> и <dl>? Вероятно название "список определений" может
смутить начинающего разработчика и заставить его думать, что такой
список можно использовать только для вставки определений и условий.
Однако такое положение не соответствует действительности.
Типы списков
Неупорядоченный список (ul)
Упорядоченный список (ol)
Список определений (dl)
Что они делают
Неупорядоченный список (ul): список с указателями точками
Упорядоченный список (ol): пронумерованный список
Список определений (dl): Список с определениями элементов
Причины использования списков
Последовательный стиль контента
Просто создать
Универсальны
Способ вывода информации каждым типом списка отличается от другого.
Наверняка не нужно останавливаться на <ul> и <ol>, но
структура списка определений требует дополнительных разъяснений.
10. '(и другие символы ASCII )
При использовании HTML нужно использовать коды ASCII, когда требуется
вставить какой-нибудь символ. Такое правило требует дополнительных
действий, но оно гарантирует, что все символы будут правильно выведены
на экран пользователя, и браузер не воспримет их как часть разметки. Вам
никогда не попадался какой-нибудь текст, который отображается
неправильно? Обычно проблемный текст создается с использованием кавычек,
апострофов, знаков больше-меньше и так далее. Таких символов на самом
деле не много, и стоит запомнить их коды ASCII.
© http://ruseller.com
Источник урока: net.tutsplus.com/tutorials/html-css-techniques/the-10-html-tags-beginners-arent-using/
