HTML теги

• Довідник HTML-тегів
• Перевірка мождивостей вкладання одного тега в іньший

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

тег-контейнер - призначений для основного контенту (вмісту) 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>

Для посилань

<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>

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

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

В атрибуті 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 - існує багато типів інпутів - для емаіл, для цифр або телефонів і т.д. Треба використовувати правильні типи
• required - робить поле обовязкове для заповнення
• maxlenght - вказує максимальну кількість символів
• value - вже заповнює цією інформацією інпути

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

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

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

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