Что такое семантика в html. Кодирование. Семантическая верстка — что это

Вайбер на компьютер 01.04.2019
Вайбер на компьютер

Целью тегов HTML является передача смысла документу. Не беспокойтесь о том, как ваша веб-страница выглядит. Сосредоточьтесь на значении каждого тега, который вы будете использовать.

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

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

Структурные элементы: организация страницы

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

Вот что типичная веб-страница может в себя включать:

  • в качестве первого элемента страницы, который может включать в себя логотип и слоган;
  • в качестве заголовка страницы;

  • в качестве основного содержимого страницы, вроде статьи блога;
  • в качестве последнего элемента страницы, расположенного внизу.

Текстовые элементы: определение контента

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

Вы, в основном, будете использовать:

  • Для абзацев;

    • для (неупорядоченных) списков;
      1. для (упорядоченных) списков;
      2. для отдельных пунктов списка;
      3. для цитат.

    Строчные элементы: различный текст

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

    Есть много строчных элементов, но вы обычно столкнётесь со следующими:

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

    Основной заголовок страницы

    Подзаголовок

    Какие-то всякие разные штуки и некоторые выделенные и даже важные слова.

    Другой абзац.

    • Один
    • Два
    • Три
    Однажды сказано

    Общие элементы

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

    Хотя эти элементы HTML на самом деле не несут какого-либо смысла , они пригодятся когда мы начнём использовать CSS.

    Не заморачивайтесь на семантике

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

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

    Структурные Текстовые Строчные












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

    Начнем с очевидного примера.

    Плохая семантика кода

    Заголовок статьи
    А автор
    Инко Гнито.

    Хорошая семантика кода

    Заголовок статьи

    Текст статьи, который кем-то написан. Инко Гнито - ее автор.

    Вне зависимости от того, считаете ли вы, что HTML5 готов к использованию или нет, наверняка использование тега

    в данном случаем будет более привлекательным, чем обычный
    с указанием класса. Название статьи становится заголовком, содержание становится параграфом, а выделенный жирным шрифтом текст становится тегом .

    Но не все так четко представляется тегами HTML5. Давайте рассмотрим набор имен классов и разберемся с тем, отвечают ли они требованиям семантики.

    Не семантический код. Это классический пример. Каждая рабочая среда CSS для модульной сетки использует такого типа имена классов для определения элементов сетки. Будет ли это "yui-b", "grid-4", или "spanHalf" - такие имена ближе к заданию разметки, чем к описанию содержания. Однако их использование в большинстве случаев неизбежно при работе с шаблонами модульных сеток.

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

    Если вы перешли к использованию HTML5, то лучше применять элемент

    в таких случаях. Замечание касается и всех остальных частей веб страницы (верхний колонтитул должен быть
    , боковая панель -

Рекомендуем почитать

Наверх