0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как устроен HTML

Как устроен HTML

. Парный тег – это контейнер. Если начало и конец элемента совпадают, используют одиночные теги. Примеры одиночных тегов:
, .

  • Для парных тегов работает принцип вложенности: вложенный тег (потомок) должен целиком находиться внутри тега предка, наподобие матрешки. Ситуация типа недопустима!
  • У любой HTML-страницы есть основные теги, задающие структуру, «скелет» всего документа. Это , , . Если их нет в html-файле, браузер автоматически добавит недостающие элементы базовой разметки.
  • Теги HTML-документа выстраиваются в дерево зависимостей – Document Object Model, DOM. К положению элемента в DOM привязываются стили (CSS) и скрипты (JavaScript).
  • video

    Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.

    Для определения видео-источника используется либо атрибут src , либо тег source . Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа видео-контента используется атрибут type ).

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

    В настоящее время поддерживается три формата видео: MP4 , WebM и OGG .

    • autoplay — автовоспроизведение (блокируется большинством браузеров)
    • controls — панель управления
    • loop — определяет, что воспроизведение, после завершения, начнется сначала
    • muted — воспроизведение без звука (позволяет преодолеть блокировку autoplay )
    • preload — определяет, должен ли видео-контент загружаться после загрузки страницы. Возможные значения: auto , metadata , none . Значение none не позволит работать с видео с помощью JavaScript
    • src — путь к видеофайлу
    • poster — изображение, отображаемое при загрузке видео или до нажатия пользователем кнопки воспроизведения
    • width — ширина элемента в пикселях
    • height — высота элемента в пикселях
    Статья в тему:  Как легко сбросить забытый пароль в любой версии Windows

    DOM API предоставляет множество свойств, методов и событий для работы с элементами audio и video .

    Тег base определяет основной путь ( URL ) и/или цель ( target ) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:

    • href — основной путь
    • target — определяет значение по умолчанию атрибута target всех гиперссылок и форм на странице. Возможные значения: _blank , _parent , _self и _top

    Справочник HTML

    Здесь расположен справочник html тегов. Словарь содержит все основные команды, которые можно использовать для создания сайта и веб-документов.

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

    Тег html

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

    ИмяОписаниеЗначение свойства display
    корневой элемент html-документаblock

    Служебные

    Служебные теги предназначены для поисковых систем и браузеров. Браузеры по ним определяют тип документа и его интерпретацию. А поисковым системам важно для четкого сканирования документа и его ранжирования в выдаче.

    ИмяОписаниеЗначение свойства display
    комментарийnone
    объявление типа документаnone
    контейнер для метаданных html-документаnone
    заголовок / имя html-документаnone
    мета-данные веб-страницыnone
    подключает внешние таблицы стилейnone
    подключает сценарии к страницеnone
    подключает встраиваемые таблицы стилейnone
    базовый url-адрес, относительно которого вычисляются относительные адресаnone
    секция, не поддерживающая скриптblock

    HTML теги для текста

    Здесь расположены основные html теги для работы с текстом на странице. Как правило, это различные выделения, подчеркивания, вставка заголовков и так далее.

    Такие элементы делают текст наиболее приятным для восприятия. Обязательно используйте такие команды для форматирования текста.

    Теги таблицы html

    Здесь расположены html теги для создания таблиц. Такие элементы тоже рекомендую использовать на странице. Особенно в аналитических каких-то материалах. Так пользователи могут быстро сориентироваться в ваших данных.

    ИмяОписаниеЗначение свойства display
    html-таблицаtable
    строка таблицыtable-row
    заголовок столбца таблицыtable-cell
    ячейка таблицыtable-cell
    блок заголовков таблицыtable-header-group
    тело таблицыtable-row-group
    нижний колонтитул таблицыtable-footer-group
    подпись к таблицеtable-caption
    выбирает для форматирования столбцыtable-column
    контейнер для одного или несколькихtable-column-group

    Картинки

    Обязательно используйте тег картинки в html-документе. Тоже полезно при восприятии и усвоения информации. Еще полезно и в SEO. Можно получать трафик с поиска по картинкам. И стоит отметить, что материал без изображений очень плохо ранжируется в поиске.

    ИмяОписаниеЗначение свойства display
    html-изображенияinline
    активные области на карте-изображенииinline
    гиперссылка с текстом или активная область внутри карты-изображенияinline
    холст-контейнер для динамического отображения изображенийinline-block

    Списки

    Теги списка тоже рекомендую использовать. Очень полезно при каком-то перечислении или создании пошаговой инструкции. Информацию в списке старайтесь давать максимально коротко и понятно. То есть не делать длинных предложений.

    НазваниеОписаниеЗначение свойства display
    упорядоченный нумерованный списокblock
    маркированный списокblock
    элемент спискаlist-item
    контейнер для термина и его описанияblock
    задаёт терминblock
    расшифровывает терминblock

    Ссылки

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

    Если что-то сделаете не так, то вас перебросит на страницу с 404 ошибкой. Это плохо для юзабилити и продвижения сайта в целом. Также обращайте на количество линков. Ссылайтесь только тогда, когда это необходимо!

    НазваниеОписаниеЗначение свойства display
    гиперссылкаinline

    Встраиваемый контент

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

    Группировка контента

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

    Структура страницы

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

    Ссылка на основную публикацию
    Статьи c упоминанием слов:
    Adblock
    detector