Skip to main content

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

Версии​

  • 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сылки и форматирования текста.