10 HTML тэгов не использующих начинающие

28-06-2010

Наверное каждый кто читает это знает что такое HTML. Сейчас я покажу 10 тегов которые чаще всго не используют начинающие верстальщики, веб мастера. Но на само деле они очень полезны и их надо использовать.

1.Комментарии <!>

Любая книга о программировании покажет вам что использование комментариев, описание кода то что он делает, очень важно и нужно. HTML это не программирование, но использовать комментарии также нужно, конечно когда вы пишете маленький код, страничку комментарии можно и не делать, но когда вы пишете что нибудь основательное с большим количеством HTML кода можно очень легко запутаться где что находится, вот тут то и комментарии приходят на помощь. Выглядят они примерно так:

 <!-- Начало навигации -->
	<ul>
		<li>элемент 1</li>
		<li>элемент 2</li>
	</ul>
<!-- Конец навигации -->
<!-- Начало контента -->
	<p>Контент</p>
	...

2. Элементы таблицы <thead>,<tbody> и <tfoot>

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

<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="Английские клубы">
		<option value="Челси">Челси</option>
		<option value="Арсенал">Арсенал</option>
	</optgroup>
	<optgroup label="Испанские клубы">
		<option value="Реал Мадрид">Реал Мадрид</option>
		<option value="Барселона">Барселона</option>
	</optgroup>
</select>

4. Заголовки <h1>,<h2>,<h3>,<h4>,<h5> и <h6>

Я знаю все используют теги заголовок. Но честно говоря я не помню когда я последний раз использовал <h3> или другие поменьше. Потому что я забываю о этих тегах и чаще использую отдельный <div> для стилизации текста. Не делайте того же каждый тег нужно использовать по предназначению.
5.<fieldset> и <legend>
Мне нравятся сайты в которых легко найти нужную информацию, в которых элементы логически отделены друг от друга. <fieldset> группирует элементы формы рисуя прямоугольник вокруг элементов, еще можно добавить подпись к группе элементов с помощью <legend>. Пример кода:

<form>
	<fieldset>
		<legend>Группа 1: </legend>
		<label>Имя: <input type="text" size="30" /></label>
		<label>Email: <input type="text" size="30" /></label>
		<label>Дата рождения: <input type="text" size="10" /></label>
	</fieldset>
</form>

6. <label>

Один из моих самых любимых HTML тегов. Label добавляет только функциональность к форме. <label> нужен для создания ярлыков для элементов формы. При использовании <label> текст лейбла становится кликабельным. При нажатии на текст лейбла элемент формы находящийся в этом же лейбле становится активным. Пример:




<form>
	<label>Имя: <input type="text" size="30" /></label>
	<label>Муж: <input type="radio" name="sex" /></label>
	<label>Жен: <input type="radio" name="sex" /></label>
</form>

7.<blockquote>

Если вы хотите выделить текст, выделить цитату, вы можете использовать тег <blockquote>. Пустое пространство по умолчанию вставляется перед и после элемента. Чаще его используют для выделения цитат, но как вы сами видели я его использую не совсем по предназначению, я им чаще всего выделяю заголовки и т.д. выглядит он у меня вот так:

Вот здесь должен быть текст

8. <cite>

В принципе то же самое что и blockquote но его используют для выделения списка литературы, и еще чего нибудь в этом роде.

9. <dl>

Наверное все знают что существует такой тег как <ul> для создания неупорядоченных списков, и еще такой <ol> для упорядоченных, но мало кто знает о таком теге как <dl> он нужен для создания списка определений, атрибутов у него не так много, но вообще полезная тож вещь.

10. ASCII

Как правило новички практически не используют ASCII, особенно он нужен при написании технических текстов в которых используются знаки которые не выводятся такие как <, > и т.д. вот ссылка на всю таблицу ASCII.

Блогер Xstroy6.29.2010 03:06
Хорошее напоминание. Действительно часть этих тегов теряется из виду, особенно если используешь редакторы, предлагающие в первую очередь стандартный набор тегов в виде иконок.
Alex6.29.2010 05:06
Ссылка на таблицу не работает
    admin6.29.2010 05:06
    сори вот http://www.w3schools.com/tags/ref_ascii.asp щя исправлю
Explo7.2.2010 10:07
основными пользуюсь и мне хватает. эти только экстренных систуациях
Pepper7.5.2010 05:07
Многие пункты относятся к так называемой "семантической верстке", когда теги успользуются по назначению - и это правильно. Буквально на днях про это писал. Вбейте термин в поиск или гляньте у меня на блоге. Кажется, мелочи. Но эти мелочи являются языком, на котором разговаривают поисковые системы. Если ты, читатель, называешь себя вебмастером, то в твоем дизайн должно быть очень мало тегов DIV, и много P, EM, STRONG и т.д. Не ставь на Тайоту колеса от Белаза. :)
kyoks9.27.2010 10:09
Ха, помню их еще, когда года 2 назад на юкозе сайт создавал - почти весь хтмл перечитал))
ОСТАВИТЬ КОММЕНТАРИЙ