10 не популярных, но полезных тегов html

Придется вернуться к самому началу. Я надеюсь, каждый кто это читает, понимает что такое HTML. И даже если вы очень далеко зашли в области веб дизайна, повторение основ всегда способствует увеличению знаний. Потому что мы, к сожалению, все очень быстро забываем.

Каждый тег ниже входит как в HTML 4.01, так и в нашумевший HTML5.

1. <!-- -->

Любая книга о программирование рассказывает, что всегда лучше описывать ваш код. Почему? Потому что это позволяет тем, кто читает ваш код, понимать, что происходит. Так же комментарии могут служить для разделения вашего кода  и сделать ваш код более организованным.

<!-- 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>, которое я использовал слишком часто. Если использовать теги таблицы правильно, то легко настроить отдельные стили для различных частей таблицы: заголовка, итоговых строк и основной части.

<thead> служит для обозначения заголовка таблицы.

В <tfoot> расположены итоговые строчки вашей таблицы. Указывать их обязательно нужно перед основной частью. Это делаться для того, что бы их загрузка была быстрее.

<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>

Выпадающее меню - идеальный способ размещения информации на выбор для пользователя. Он не только экономит место на экране, но и прост и знаком всем пользователям. Так же в нем можно создавать категории для ваших вариантов выбора.

<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>-<h6>

Конечно, заголoвками пользуются все. Но вспомните, когда вы использовали заголовок <h3> или ниже. Чаще используются <div> с разным форматированием текста. Суть пункта вот в чем: не забывайте использовать все заголовки.

5. <fieldset> и <legend>

Всем нравятся сайты, на которых нужную информацию находишь без проблем, когда все элементы на странице логически распределены. <fieldset> группа формируется внутри обведенного контура. Это очень удобно. Так же можно добавить к этой группе подпись с помощью <legend>. Смотрится практично.

<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> используется для определения метки обращения к элементу.

<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> подойдет вам идеально.

Это то, что Nettuts + используется для его цитаты стиля.

Метки: HTML, обзор

Рубрика: HTML