структура сайта

          WebSite
          >index.html 
          >style.css 
          >script.js

Семантика

Семантика - это когда, что то выглядит тем, чем является на самом деле.

W3C - консорциум всемирной паутины. На сайте есть валидатор html, туда можно вставить файл или код разметки.

блочный элемент - занимает всю ширину экрана

строчный элемент - подстраивается под контент

структура кода

          header - шапка
            >nav - навигация
          main
            >article - новость
              >section - секция
            >aside - сайтбар
          footer - подвал

accessibility(доступность) - работает, если на сайте семантические теги.

Теги

от h1 до h6 - заголовки. h1 - должен быть один на странице он самый важный.
hr - разделитель
p - параграф (красная строка - <p style="text-indent: 25px;">)
br - переход на следующую строчку
address - информация об авторе(может содержать другие теги)

<p></p>
<address></address> - привязали текст к автору

q - цитата
<q>
цитата
</q>
<address></address> - связываем цитату с автором

blockquote - большая цитата, можно не указывать автора, а использовать атрибут cite
<blockquote cite="ссылка на источник">
  <p>
    большая цитата
  </p>
</blockquote>
<p>это<cite>источник</cite></p>

cite - тег использующийся для выделения ссылки на источник в цитате.

<time>1989-01-26</time> - время

<time datetime="1989-01-26">My Birthday</time> - время внутри тега(служебный характер, для считывания даты, сама она не отображается).

<b>жирный</b>

<i>курсивный</i>

<tt>машинописный</tt>

<s>зачеркнутый</s>

<strong>жирный семантический</strong>

<em>курсивный семантический</em>

<code>"код"</code> - отображение для кусков кода

<pre>
  <code>"код"</code> - отображение для кусков кода
</pre>

<big>увеличение семантический</big>

<small>уменьшение семантический</small>

<del>зачеркивается семантический</del>

<ins>подчеркивается семантический</ins>

<sub>нижний индекс</sub>

<sup>верхний индекс</sup>

Списки

<ul>
  <li>маркированный список</li>
  <li>. --</li>
</ul>

<ol>
  <li>нумерованный список</li>
  <li>1 --</li>
</ol>

Атрибуты списков

style="list-style-type: none" - убирает маркер
style="list-style-type: disc" - маленький черный круг(по умолчанию)
style="list-style-type: circle" - пустой круг
style="list-style-type: square" - квадрат

type="A" - в алфавитном порядке заглавными буквами
type="a" - в алфавитном порядке строчными буквами
type="I" - римскими цифрами в верхнем реестре
type="i" - римскими цифрами в нижнем реестре

start="10" - число с которого начинается нумерованный список

reversed - нумерация списка в обратном порядке

любые списки можно вкладывать друг в друга - вложенные списки.

Список определений

<dl>
  <dt>термин</dt>
  <dd>определение</dd>
</dl>

дефолтные маркеры - которые мы создаем сами(не стандартные иконки).

Картинка

<img src="путь к картинке" alt="описание картинки, если она не высветилась">

<picture>
  <source media="(min-width: 1024px)" srcset="путь/600/600">
  <source media="(min-width: 768px)" srcset="путь/300/300">
  <source media="(min-width: 360px)" srcset="путь/100/100">
  <img src="путь/300/300" alt="описание">
</picture>

<figure> - картинка с описанием
  <img src="путь" alt="описание">
  <figcaption>подпись картинки</figcaption>
</figure>

<table>
  <caption>заголовок</caption>
  <thead> - одна или несколько строк, используется один раз
    <tr> - ряд
      <th>ячейка</th> - будет выделен жирным
      <th>ячейка</th>
    </tr>
  </thead>
  <tbody> - одна или несколько строк, используется сколько угодно(основной контент)
    <tr>
      <td>ячейка</td>
      <td>ячейка</td>
    </tr>
  </tbody>
  <tfoot> - одна или несколько строк, используется один раз
    <tr>
      <td>ячейка</td>
      <td>ячейка</td>
    </tr>
  </tfoot>
</table>

пустые ячейки нужно все равно рисовать или объединять, чтобы все не поплыло
атрибуты(чтобы не рисовать ячейки)
colspan="2" - объединяет ячейки по горизонтали
rowspan="2" - объединяет ячейки по вертикали

Ссылки и кнопки

<a href="путь">ссылка</a>

<a href="путь" download>ссылка</a> - ссылка на загрузку файла(может не работать, если в настройках браузера запрещена)
атрибут target="_blank" - открывает ссылку в новом окне.

<a href="tel:телефон">телефон</a> - при нажатии дозвон

<a href="mailto:емэил">емэил</a> - отправить письмо

<a href="skype:skype">skype</a> - позвонить в skype

ссылка якорь: <a href="#bottom">go to bottom</a>
<p id="bottom">сюда при нажатии</p>

кнопка, в отличии от ссылки не самостоятельный элемент, на неё вешается логика или она идет в составе формы.

<button type="submit">кнопка</button>
<button type="reset">кнопка</button> - идут в составе форм: submit отправляет форму, а reset ее очищает.

<button type="button" autofocus>кнопка</button> - с этим атрибутом при загрузке страницы, на кнопке будет стоять фокус, можно нажать на пробел для её активации.

<button type="button" disabled>кнопка</button> - блокирует нажатие на кнопку.

если ссылке не задавать путь, то можно через класс в css задать display(исчезновение или отображение) при нажатии(к примеру сверстать крестик формы)


<abbr title="HyperText Markup Language">HTML</abbr> - аббревиатура

<input list="list"> - текстовое поле привязанное к меню через id и list
<datalist id="list">
  <option value="front-end"></option>
  <option value="back-end"></option>
  <option value="full-stack"></option>
</datalist> - всплывающее меню выбора

<meter value="80" max="100" low="10" high="60">Полоса прогресса</meter> - полоса прогресса
value - прогресс заполнения
max и min - максимальное и минимальное значение
low и high - пределы высокого и низкого значения(влияют на закрашивание)
бывает ещё тег на оптимальное значение

<progress value="80" max="100"></progress> - другой вид полосы прогресса(её чаще используют, чтоб показать прогресс прогрузки со стороны семантики)

<noscript>Контейнер показывает содержимое, если в браузере отключен javascript или он вообще не поддерживается</noscript>

<mark>маркер выделяется цветом</mark>

<canvas id="example" width="200" height="200"></canvas> - холст для рисования

Структура HTML5

Теги делятся на теги расположения и теги содержания.

Формы

<form action="файл отвечающий за отправку формы" name="имя формы" autocomplete="on(авто подстановка предзаполненных данных)">
  <fieldset> - обводка по контуру
    <legend>название формы</legend>
    <label for="username">UserName</label> - создает метку элементу формы и подписывает его
    <input type="text" id="username"> - текстовое пле однострочное
    или так
    <label>"Password"<input type="password"></label>
    <textarea rows="10" cols="25"></textarea> - многострочное текстовое поле
    атрибуты: name - имя
    autofocus - автофокусировка
    disabled - отключает
    readonly - поле активно но данные изменить не получиться
    placeholder - текст заменитель
    maxlength - максимальное число вводимых символов
    required - обязательное заполнение

    <select> - выпадающий список
      <option value="back-end">back-end</option>
      <option value="front-end">front-end</option>
    </select>

    <select> - выпадающий список с лейблами
      <optgroup label="Speciality"></optgroup>
      <optgroup label="Derection"></optgroup>
    </select>

    атрибуты: multiple - позволяет выбрать несколько значений
    disabled - блокирует выбор объединенных опций
    label - добавляет лейбол для групп опций
    value - значение опции

  </fieldset>
</form>

inputs

<input type="text"> - позволяет вводить любые символы
<input type="number"> - позволяет вводить числовые значения
атрибуты: min - минимальное значение
max - максимальное значение
step - шаг
<input type="password"> - позволяет вводить пароль, не отображает символы
<input type="range"> - полоска ранжирования
<input type="date"> - дата с выпадающим календарем по умолчанию, тоже min и max
<input type="color"> - поле для выбора цвета
<input type="submit"> - кнопка отправки
<input type="reset"> - кнопка сброса
атрибут value надпись на кнопке

<input type="text" list="list"> - поле с выпадающим списком
<datalist id="list">

<input type="email"> - поле почты
<input type="url"> - поле для url
<input type="image" src="путь" alt="картинка"> - кнопка отправки в виде изображения
не все теги работают в различных браузерах, для проверки переходим на сайт can I use

<input type="tel"> - поле телефона
<input type="search"> - поле поиск
<input type="datetime-local"> - локальные(формат вашего компьютера) дата и время
<input type="month"> - месяц
<input type="time"> - дата
<input type="week"> - неделя
<input type="hidden" value="WebSite"> - для передачи скрытых от пользователя скрытых технических данных
<input type="file"> - хранение и передача пользовательских файлов
атрибут multiple позволяет выделять и отправлять несколько файлов

<input type="checkbox" value="option" checked> - чекбокс
<input type="radio" value="option" name="value" checked> - радио-кнопка
value - необязательный атрибут указывает на какой кнопке, таргет при загрузке страницы
name - должен быть у всех кнопок одинаковый
чтобы добавить подписи имен радио-кнопке и чекбоксу, нужно обернуть в label

Аудио и видео

поддержка браузеров для аудио и видео файлов разная, нужно проверять

<audio src="путь">
  надпись высветиться, если формат файла не поддерживается
</audio> - аудио

<video width="320" height="240">
  <source src="путь" type="video/ogg">
- конвертация аудио и видео файлов если их несколько   <source src="путь" type="video/mp4">
  надпись высветиться, если формат файла не поддерживается
</video> - видео

атрибуты: controls - помещает файл в нативный(встроенный) плэер.
loop - бесконечное воспроизведение.
autoplay - автоматическое воспроизведение.
muted - убирает по умолчанию звук файла, при загрузке страницы.
poster="путь" - адрес отображаемой картинки, пока видео недоступно.
preload - определяет, как конкретно аудио или видео файл будет загружен на страницу.
его значения: auto - видео грузится, автоматически и целиком, при загрузке страницы
metadata - само видео грузить не нужно, только служебную информацию(первый кадр, продолжительность, размер и тд.)
none - загрузка не требуется вообще.

Универсальные атрибуты

id - у одного элемента, только один уникальный id(лучше использовать для связи в javascript).
class - может быть несколько, прописывать через пробел, используется для CSS.
title - всплывающая подсказка, при наведении на тег.
style - CSS.
contenteditable="true" - позволяет редактировать текст, при обновлении страницы сбрасывается.
spellcheck="true" - проверка правописания.
hidden - скрывает содержимое элемента.
tabindex - для передвижения с помощью табуляции и установления по очередности табуляции.
dir="rtl" - направление текста в теге.
lang="en"