HTML теги

це тег-контейнер, тобто він містить відкриваючий тег, контент та закриваючий тег. Хедер сторінки виділяє вступну частину всієї сторінки. Також хедер може використовуватися для виділення вступної частини складної секції або статті — такі приклади розглянемо пізніше у модулі.

main

тег-контейнер - призначений для основного контенту (вмісту) HTML-документа (веб-сторінки). Основний вміст сторінки – це унікальний контент, який не повторюється на інших сторінках сайту та безпосередньо відноситься до головної теми документа.

тег-контейнер - фінальна частина всієї сторінки. Часто містить копірайт, список посилань на соціальні мережі, контактну інформацію тощо. Зображення логотипів соцмереж має бути у форматі SVG.

<h1>features</h2>

Можна заховати / зроби невидимим

<h1 hidden>features</h2>

Параграф

<p>
    No blames, no empty promises, no people who are talking about things
    they don't know about. Our mission is to create a safe space for you to
    change.
</p>

Для посилань

href

текст - посилання на стрінку

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>

зображення - посилання на стрінку

<a href="https://www.pexels.com/photo/animals-sweet-cat-kitty-57416/">
  <img
    src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?w=640"
    alt="Рудий кіт"
    width="640"
  />
</a>

Посилання с логотипом і посиланням на головну сторінку сайту

<a href="/"> <img src="https://ac.goit.global/fullstack/html-css-v2/module-1/autocheck/b04pflogo.svg" alt="Planet Fatness logo" width="40" height="40"/> </a>

<a href="https://goo.gl/maps/qBnEfK5AingPLZgb9" target="_blank">
      <img src="https://ac.goit.global/fullstack/html-css-v2/module-1/autocheck/B031.jpg" alt="PF Power Zone. A modern gym equipped with treadmills." height="320">
    </a>

посилання на номер телефону (tel)

<a href="tel:+14251234563">+1(425) 123-45-63</a>

посилання на єлектронну пошту (mailto)

<a href="mailto:example@mail.pig">example@mail.pig</a></a>

посилання завантаження (download)

В атрибуті download можна не вказувати жодного значення. У цьому випадку ім’я файлу при завантаженні буде співпадати з ім’ям,вказаним в атрибуті href .

Значення атрибуту download визначає нове ім'я файлу після його завантаження. Обмежень на допустимі значення немає: браузер автоматично визначить правильне розширення файлу та додасть його до завантаженого файлу — .img, .pdf, .txt, .html тощо.

<a href="/шлях/до/cv.pdf" download="cat-resume">Завантажити резюме</a>

атрибут захисту від фішингу

щоб при переході на зовнішній сайт сайт-таргент не зміг отримати доступ до ресурсів нашого сайту

<a href="" target="_blank" rel="noopener noreferrer">Insta</a>

Несортований список

<ul>
    <li>
        No blames, no empty promises, no people who are talking about things
        they don't know about. Our mission is to create a safe space for you to
        change.
    </li>
</ul>

Сортований список

<ol>
    <li>
        No blames, no empty promises, no people who are talking about things
        they don't know about. Our mission is to create a safe space for you to
        change.
    </li>
</ol>

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

<dl>
  <dt>CMS</dt>
  <dd>Система управления контентом, которая применяется для создания сайтов.</dd>
  <dt>HTML</dt>
  <dd>Язык гипертекстовой разметки, являющийся основой создания вебресурсов.</dd>
 </dl>

Для записів адреси

<address>
mango@mail.pig
(111) 222-33-44
м. Київ,
Бульвар Лесі Українки, буд. 26,
4й поверх офіс 427
</address>

Примусовий переніс рядка

<br />

створює клікабельну кнопку – інтерактивний елемент, який стає повністю функціональним за допомогою мови програмування JavaScript. Стандартна кнопка

<button type="button">Request a callback</button>

Кнопка для відправки данних. Якщо потрібна відправка даних з форми - то обовязково повинна бути всередині тегу form. Тобто бути «на формі»

<button type="submit">send</button>

визначає розділ основної навігації з посиланнями на інші сторінки або окремі секції поточної сторінки. Тег <nav> використовується лише для основної навігації, а не для будь-якої групи посилань у документі.

    <nav>
      <ul>
        <!-- Посилання на зовнішне посилання -->
        <li><a href="https://www.edu.goit">Our Clubs</a></li>
        <!-- Посилання внутрішній якір по номеру id -->
        <li><a href="#team">PF Benefits</a></li>
      </ul>
    </nav>

Семантичний блок. Краще ніж div. Для групування розмітки розділу в загальний контейнер та підвищення семантики HTML-розмітки. Семантично він представляє великий розділ, що поєднує контент за вмістом, як наприклад, теги <header> або <footer>, але на відміну від них, менш специфічний у застосуванні. Тобто тег <section> поділяє вміст документа на розділи та підрозділи. Для секції бажана, але не обов'язкова наявність заголовка.

	<section>
		<h2>Features</h2>
		<p>Вміст секції Features</p>
	</section>

Рядковий єлемент. Можна вкладати еого будь куди. Тільки на ширину обїекту. Для тексту що не симатичний або по ному не будуть шукати або для виділення стидізації. Універсальний контейнер для дрібного текстового контенту, наприклад, окремих слів, частин слів або цілих фраз усередині текстового масиву. Не має жодного семантичного значення та використовується для додаткової стилізації.

<p>
  Тег <span class="accent">span</span> це універсальний контейнер для дрібного
  текстового контенту.
</p>

Додає опис стиля проямо у код html (Вбудовані стилі CSS)

<p style="color: tomato;">Цей текст буде червоним.</p>

Посилання-якір на котрий можна ссилатись при посиланнях або при привязуванні стилів CSS

<h1 id="title">Заголовок сторінки</h1>

параметр для тегів щоб сховати його від користувачів, наприклад назву

<h1 id="title">Заголовок сторінки</h1>

Але правильніше використовувати селектор. Описа классу для CSS

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

потім просто цю назву классу додаємо до потрібного тегу у HTML що треба сховати.

<h1 class="visually-hidden">Заголовок сторінки</h1>

Універсальний контейнер без семантичного значення. Використовується як блок-обгортка для групування та подальшої стилізації вмісту. Обирай тег div, якщо

тобі просто потрібен загальний контейнер для оформлення;
не виходить дати групі тегів окреме ім'я, що повністю описує вміст.

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

Для створення форм і т.д.

<form name="feedback_form" autocomplete="off" action="" novalidate>
   <button type="submit">Submit feedback</button>
</form>

action=«» з старого формату для php. Зараз треба стирати бо всим займаєтся JS
name — ім'я форми, що є унікальним на поточній веб-сторінці. Може містити символи англійського алфавіту в будь-якому регістрі, цифри, підкреслення та тире. Не можна використовувати пробіл. Використовується як на сервері, так і на клієнті при роботі з формою.
autocomplete — визначає, чи може браузер автоматично заповнювати значення всіх елементів форми. Має всього два значення off і on.
novalidate — атрибут-прапор, не має значення. Говорить браузеру не перевіряти валідність введених даних під час відправки форми. Якщо атрибут не вказано, виконується вбудована у браузер валідація.

форма вводу

<form>
<input type="text" name="user-name" class="modal-input" placeholder="enter name"/>
</form>

name - повинен бути уникальним в рамках форми на котрій вони разташовані.
placeholder - підказка що потрібно вводити в інпут.Щоб змінити стилі саме плейс-холдера - то у нього є всевдоєлемент для css .modal-input::placeholder
type - існує багато типів інпутів - для емаіл, для цифр або телефонів і т.д. Треба використовувати правильні типи

text
checkbox
radio

required - робить поле обовязкове для заповнення
maxlenght - вказує максимальну кількість символів
value - вже заповнює цією інформацією інпути
step=«0.5» - дає можливість вводити цифри з кроком

лейбел що звязєтя с інпутом. В інпуті додаємо id=«user-name»

<label for="user-name">name</label>
<input
id: "user-name" />

<form>
  <label for="username">Username</label>
  <input type="text" name="username" id="username" />
  <button type="submit">Submit feedback</button>
</form>

дозволяє відображати текст-підказку про дані, які необхідно ввести в поле. Текст-підказка відображається, коли елемент input пустий та зникає при введенні тексту від користувача.

Атрибут placeholder можна використовувати в будь-якому елементі форми, де є текстове введення. Текст-підказка не замінює гарний label, а доповнює його прикладом на зразок даних, які слід вводити.

<form>
  <label>
    Username
    <input type="text" name="username" placeholder="Jacob Mercer" />
  </label>
  <button type="submit">Submit feedback</button>
</form>

Для оформлення тексту підказки використовується псевдоелемент

input::placeholder {
	color: teal;
  font-weight: 700;
}

Змінити стилі тексту підказки при наведенні миші або фокусі поля введення можна селекторами стану.

input:hover::placeholder, 
input:focus::placeholder {
  color:orange;
}

застосовується залежно від видимості тексту-підказки та значення атрибута placeholder.

Він дозволяє налаштовувати властивості поля вводу під час відображення тексту-підказки. Слід пам’ятати, що як тільки користувач ввів хоча б один символ, підказка зникає. </code> Змінити стилі тексту підказки при наведенні миші або фокусі поля введення можна селекторами стану.

input {
  border: 1px solid orange;
}

input:placeholder-shown {
  border-color: blue;
}

Застосовується до елемента, щойно він сам або елементи всередині нього отримують фокус. Це дозволяє застосувати стилі на:

мітку форму окреме поле форми при взаємодії користувача з полями форми.

form:focus-within {
  border-color: blue;
}

textarea

<textarea name="" id="" cols="30" rows="10"></textarea>

cols=«30» rows=«10» - вже краще видаляти
між >< ніколи нічого не ставити

випадаюче меню (або, як його ще називають, комбобокс), що дозволяє вибрати одну з декількох опцій (варіантів відповідей).

<select name="size">
  <option value="xs">Extra Small</option>
  <option value="s">Small</option>
  <option value="m" selected>Medium</option>
  <option value="l">Large</option>
</select>

Групування опцій

<select name="month">
  <optgroup label="Summer">
    <option value="s6">June</option>
    <option value="s7">July</option>
    <option value="s8">August</option>
  </optgroup>

  <optgroup label="Autumn">
    <option value="s9">September</option>
    <option value="s10">October</option>
    <option value="s11">November</option>
  </optgroup>
</select>

Може використовуватися для стилізації вибраних елементів. Для цього потрібно використовувати селектор X + Y. Цей селектор вибирає тільки той елемент Y, який в HTML-розмітці слідує відразу ж за X.

<input type="checkbox" name="hobby" value="music" id="music" />
<label for="music">Music</label>
input[type="checkbox"]:checked + label {
  color: blue;
}

це контейнер для групування декількох пов'язаних елементів у формі, а вкладений legend виконує роль заголовка групи. Пов'язані радіокнопки та чек-бокси завжди повинні бути згруповані. Інші типи полів групуються за потребою.

<form>
  <fieldset>
    <legend>Заголовок групи</legend>
    <!-- Група інтерактивних елементів -->
  </fieldset>

  <fieldset>
    <legend>Заголовок групи</legend>
    !-- Група інтерактивних елементів -->
  </fieldset>

  <button type="submit">Submit</button>
</form>

HTML теги

Корисні посилання

header

main

footer

h1 (h2/h3)

p

а

href

текст - посилання на стрінку

зображення - посилання на стрінку

Посилання с логотипом і посиланням на головну сторінку сайту

посилання на номер телефону (tel)

посилання на єлектронну пошту (mailto)

посилання завантаження (download)

атрибут захисту від фішингу

ul + li

ol + li

dl/dd + dt

address

br

button

nav

section

span

style

id

hidden

div

Aria-label

form

input

label

placeholder

::placeholder

:placeholder-shown

:focus-within

textarea

select

Селектор X + Y

fieldset