Перейти к основному содержимому

Тэги и семантика

Версии​

  • HTML 2.0 (1993)
  • HTML 3.2 (январь 1997)
  • HTML 4.0 (декабрь 1997)
  • HTML 4.1 (декабрь 1999)
  • HTML 5.0 (декабрь 2012)

Справочники​

Синтаксис языка html​

  • HTML состоит из тэгов. Тэги это - "строительные блоки" web-страниц
  • Тэги бывают блочными и строчными
  • Тэги бывают парными, которые нужно закрывать <p>Text</p> и одиночными <hr />
  • Тэги могут имеют аттрибуты (class, id, style, hidden и т. д.)
  • Тэг может иметь вложенный контент, а может не иметь (зависит от того какой тэг)
  • Аттрибут может иметь одно свойство id="price", несколько свойств style="color: red; font-size: 16px;", либо не иметь свойств вообще hidden
<тэг атрибут="свойство свойство" атрибут="свойство" атрибут>
  <тэг атрибут="свойство" атрибут="свойство">
    Символы
  </тэг>
<тэг>

Структура html-файла​

  • html-файлы - это основные файлы, которые работают в браузерах. Используются для web-страниц, web-приложений, email-рассылок и даже для desktop-приложений.
  • Основное назначение html - разделение контента на блоки (создание структуры документа, семантическое описание контента).
  • html-файлы сайтов располаются на серверах, браузер делает на них запроc, скачивает их и производит парсинг html-кода, после чего пользователь может взаимодействовать с данным сайтом.
  • Структура html-файла работает по принципу "матрёшки", одни тэги вложены в другие, а те могут иметь свои вложенные (родители-дети, parents-children) и т.д. Научным языком эта структура называется DOM-tree (Document Object Model).
  • Загружаются сверху-вниз, слева направо.
index.html
<!-- Версия html (5-я версия) -->
<!DOCTYPE html>

<html lang="ru">
  <!-- Служебная (техническая) часть страницы -->
  <head>
    <title>Заголовок страницы во вкладке браузера</title>

    <!-- CSS внутри head -->
    <style>
      body {
        padding: 0;
      }
      .text {
        font-style: italic;
      }
    </style>

    <!-- JS внутри head -->
    <script>
      console.log('This text is loaded from head-tag');
    </script>
  </head>

  <!-- Контентная (видимая) часть страницы -->
  <body>
    <h1 class="title">Some title</h1>
    <p class="text text--bold">Some text</p>

    <!-- Инлайн стилизация через аттрибут style -->
    <span style="color: red; font-weight: bold;">Some string1</span>
    <br />
    <span style="color: green; font-weight: normal;">Some string2</span>

    <!-- Комментарии внутри html не будут отображаться в браузере -->
  </body>
</html>

Семантическое разделение контента​

agile

Разделение контента по смысловому значению (для лучшей индексации браузером).

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>

  <body>
    <header>
      <nav>NAVIGATION</nav>
    </header>

    <aside>ASIDE</aside>

    <main>
      <section>SECTION1</section>
      <section>SECTION2</section>
      <section>
        SECTION3

        <article>SOME ARTICLE</article>
      </section>
    </main>

    <footer>FOOTER</footer>
  </body>
</html>

Блочные тэги​

  • До и после блочного элемента существует перенос строки;
  • Блочным элементам можно задавать ширину, высоту, внутренние и внешние отступы (css);
  • Занимают всю доступную ширину по умолчанию;
  • Cетка страницы;
  • Блоки-контейнеры.

<div> - основной универсальный блочный тэг-контейнер.

<div>Занимаю всю ширину по умолчанию, и есть переносы строк</div>

К блочным тэгам также относятся: <html>, <body>, <section>, <main>, <nav>, <article>, <header>, <footer>, <aside>, <p>, <h1> - <h6> и др.

Строчные тэги​

<span> - основной универсальный строчный тэг.

<span>Я строка</span>

К строчным тэгам также относятся: <b>, <u>, <mark>, <i> и др.

  • До и после строчного элемента отсутствуют переносы строки;
  • Ширина и высота строчного элемента зависит только от его содержания (задать размеры с помощью CSS нельзя);
  • Можно задавать только горизонтальные отступы (css);
  • Cсылки и форматирования текста.

Глобальные атрибуты HTML​

Глобальные атрибуты — это атрибуты, которые можно использовать с любым HTML-элементом. Вот полный список:

Основные глобальные атрибуты​

accesskey — сочетание клавиш для активации элемента class — CSS-классы для стилизации contenteditable — разрешает редактирование содержимого data-* — пользовательские данные (например, data-id="123") dir — направление текста (ltr, rtl, auto) draggable — можно ли перетаскивать элемент (true, false, auto) hidden — скрывает элемент id — уникальный идентификатор lang — язык содержимого spellcheck — проверка орфографии (true, false) style — встроенные CSS-стили tabindex — порядок перехода по Tab title — всплывающая подсказка translate — переводить ли содержимое (yes, no)

Дополнительные атрибуты​

autocapitalize — автоматическая капитализация (для мобильных устройств) autofocus — автофокус при загрузке страницы enterkeyhint — подсказка для клавиши Enter inputmode — тип виртуальной клавиатуры is — кастомный элемент itemid, itemprop, itemref, itemscope, itemtype — микроразметка role — ARIA-роль для доступности slot — слот для Shadow DOM

ARIA-атрибуты (доступность):​

aria-* — атрибуты для улучшения доступности (например, aria-label, aria-describedby) Пример использования:

<div
  id="myDiv"
  class="container highlight"
  data-user-id="123"
  title="Информационный блок"
  style="color: blue;"
  tabindex="1"
  role="button"
  aria-label="Кнопка действия"
  contenteditable="true"
  spellcheck="true"
  lang="ru"
  dir="ltr"
  draggable="true"
  hidden="false"
  translate="no"
  accesskey="d"
>
  Контент
</div>