Базовые теги HTML для оптимизаторов и владельцев интернет-проектов

17.01 06:28

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

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

Следующий этап оформления — задать стили с помощью CSS. Чтобы автоматизировать процессы добавления контента, используют язык JavaScript. Хостинг-провайдер HostFly.by подготовил подробную статью по основным тегам и их спользованию.

Зачем авторам контент-проектов изучать теги?

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

Знание языка разметки помогает уникализировать стандартные блоки и добавить функционал:

  • подключить сторонние ресурсы: хранилища, программы, социальные сети;

  • ввести дополнительные элементы на странице сайта: интерактивную графику, аудиофайл, всплывающее окно;

  • откорректировать код виджета;

  • привлечь внимание к отдельным частям контента: цене, акции, товару;

  • изменить размер встраиваемого видео и фотоизображения;

  • убрать вредоносный код из готового шаблона.

Разметку страницы начинают с базовых дескрипторов: типа, имени и тела документа, а также сценариев. Определяют структуру сайта: количество, содержание и способ взаимодействия разделов и вложений.

При помощи тегов размечают страницу, «заливают» текст, создают таблицы, формы и кнопки. В рабочую область встраивают элементы: аудио, видео, субтитры.

Как любая система, язык HTML основан на правилах. Различают метки для служебного пользования (meta, head, body) и воспринимаемые обычными людьми в виде:

  • заголовков разного уровня;

  • текста в рамке, укрупненного, другого цвета, с подчеркиванием;

  • оформления цитат;

  • таблиц, удобных при сравнении товаров или услуг;

  • списков.

С каких тегов начать изучение HTML?

Самые легко запоминаемые метки используют для форматирования текста. Стандартная запись на языке HTML: <имя дескриптора>.

Правила предписывают использовать парные (<b>содержимое</b>) и одиночные (<br>) теги. Если закрывающая метка отсутствует, ошибку легко исправить. Специальные программы и сервисы быстро находят недостающий элемент.

Иерархию заголовков задают с помощью тега <h>. Рядом указывают номер: от 1 до 6. Согласно правилам, на странице присутствует только один дескриптор <h1>. Не ограничено количество тегов нижнего уровня: от <h2> до <h6>.

Чтобы привлечь внимание к отдельным частям текста, используют метки для выделения, подчеркивания важности, изменения начертания (курсива), утолщения шрифта: <b>, <strong>, <i>, <em>, <mark>. Выделяют длинную цитату с помощью дескриптора <blockquote>.

Для добавления пустой строки используют <br>. Команды оформления списков: <ul>, <ol>, <li>. Если нужны ссылки, указывают символ <a>.

Чтобы структурировать страницу сайта, применяют элементы HTML:

  • <header> — обозначают размер и место шапки ресурса;

  • <div> — выделяют отдельный блок или фрагмент;

  • <nav>, <section> и <aside> — на странице создают навигацию, разделы и боковые панели (соответственно).

Для добавления изображения, используют тег <img>, аудиоконтента — <audio>, видео — <video>.