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

Приветствую вас снова на своем маленько блоге!

Погодка подстать весенней, хотя на дворе еще как бы зима (зимний месяц). Но это не повод не писать в свой блог нужные для людей статьи.

Итак: сегодня я вам расскажу о десятке полезных тегов в HTML. Поехали!

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

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

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.

Получается что на этом все! Так же буду рад вашим комментариям, на которые постараюсь ответить. И чтобы быть в курсе новостей на блоге — подписывайтесь на обновления. До скорых встреч.

С вами был — ваш Юрич!

Вам понравилась статья?
плохохорошо (Пока оценок нет)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на ВордПресс более 5 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на вордресс, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!
2 комментария к статье "10 HTML тэгов не использующих начинающие"
  1. KolambaSr: 18.04.2016 в 01:18 - Ответить

    спасибо. очень хороший
    и полезный сайт.
    удачи и успеха вам.

  2. Юрич: 18.04.2016 в 08:57 - Ответить

    Спасибо. Рад что вам нравится