HTML теги

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

Довідник HTML-тегів

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

header

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

main

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

footer

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

h1 (h2/h3)

<h1>features</h2>

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

<h1 hidden>features</h2>

p

Параграф

<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

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

<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

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

<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/dd + dt

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

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

address

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

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

br

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

<br />

button

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

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

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

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

nav

визначає розділ основної навігації з посиланнями на інші сторінки або окремі секції поточної сторінки. Тег <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>

section

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

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

span

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

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

style

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

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

id

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

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

hidden

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

<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

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

тобі просто потрібен загальний контейнер для оформлення;

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

form

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

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

action=«» з старого формату для php. Зараз треба стирати бо всим займаєтся JS

name — ім'я форми, що є унікальним на поточній веб-сторінці. Може містити символи англійського алфавіту в будь-якому регістрі, цифри, підкреслення та тире. Не можна використовувати пробіл. Використовується як на сервері, так і на клієнті при роботі з формою.

autocomplete — визначає, чи може браузер автоматично заповнювати значення всіх елементів форми. Має всього два значення off і on.

novalidate — атрибут-прапор, не має значення. Говорить браузеру не перевіряти валідність введених даних під час відправки форми. Якщо атрибут не вказано, виконується вбудована у браузер валідація.

input

форма вводу

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

name - повинен бути уникальним в рамках форми на котрій вони разташовані.

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

type - існує багато типів інпутів - для емаіл, для цифр або телефонів і т.д. Треба використовувати правильні типи

required - робить поле обовязкове для заповнення

maxlenght - вказує максимальну кількість символів

value - вже заповнює цією інформацією інпути

label

лейбел що звязєтя с інпутом. В інпуті додаємо 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>

placeholder

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

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

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

::placeholder

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

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

textarea

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

cols=«30» rows=«10» - вже краще видаляти

між >< ніколи нічого не ставити