10 HTML тэгов не использующих начинающие
Приветствую вас снова на своем маленько блоге!
Погодка подстать весенней, хотя на дворе еще как бы зима (зимний месяц). Но это не повод не писать в свой блог нужные для людей статьи.
Итак: сегодня я вам расскажу о десятке полезных тегов в HTML. Поехали!
Наверное каждый кто читает это знает что такое 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>,<p>,<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.
Получается что на этом все! Так же буду рад вашим комментариям, на которые постараюсь ответить. И чтобы быть в курсе новостей на блоге — подписывайтесь на обновления. До скорых встреч.
С вами был — ваш Юрич!
Спасибо. Рад что вам нравится
спасибо. очень хороший
и полезный сайт.
удачи и успеха вам.