це тег-контейнер, тобто він містить відкриваючий тег, контент та закриваючий тег. Хедер сторінки виділяє вступну частину всієї сторінки. Також хедер може використовуватися для виділення вступної частини складної секції або статті — такі приклади розглянемо пізніше у модулі.
тег-контейнер - призначений для основного контенту (вмісту) 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>
форма вводу
<form> <input type="text" name="user-name" class="modal-input" placeholder="enter name"/> </form>
лейбел що звязєтя с інпутом. В інпуті додаємо 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 name="" id="" cols="30" rows="10"></textarea>
випадаюче меню (або, як його ще називають, комбобокс), що дозволяє вибрати одну з декількох опцій (варіантів відповідей).
<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>