Підручник з HTML

Примітка. Ви можете завантажити версію цієї книги у форматі PDF / ePub / Mobi, щоб читати її в автономному режимі.

Вступ

Ласкаво просимо! Я написав цю книгу, щоб допомогти вам швидко вивчити HTML та ознайомитись із передовими темами HTML.

HTML, скорочення для мови розмітки гіпертексту, є одним з найбільш фундаментальних будівельних блоків Інтернету.

HTML офіційно народився в 1993 році і з тих пір він перетворився на свій поточний стан, перейшовши від простих текстових документів до потужних веб-програм.

Цей посібник розрахований на величезну аудиторію.

По-перше, новачок. Я пояснюю HTML з нуля коротко, але всебічно, тому ви можете використовувати цю книгу, щоб вивчити HTML з основ.

Потім, професіонал. HTML часто вважають другорядним для вивчення. Це може бути само собою зрозумілим.

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

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

Ви можете зв’язатися зі мною у Twitter @flaviocopes.

Мій веб-сайт - flaviocopes.com.

Книжковий покажчик

  • Передмова
  • Основи HTML
  • Заголовок документа
  • Тіло документа
  • Теги, які взаємодіють з текстом
  • Посилання
  • Теги контейнера та структура сторінки HTML
  • Форми
  • Столи
  • Мультимедійні теги: аудіо та відео
  • фрейми
  • Зображення
  • Доступність

ПЕРЕДМОВА

HTML є основою дива під назвою Інтернет.

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

Моя перша книга HTML вийшла в 1997 році і називалася "Розв'язаний HTML". Великий, багато сторінок, довгий том.

Минуло більше 20 років, а HTML все ще залишається основою Інтернету, з мінімальними змінами від того часу.

Звичайно, ми отримали більше семантичних тегів, презентаційний HTML - це вже не річ, і CSS подбав про дизайн речей.

Успіх HTML базується на одному: простоті .

Це протистояло викраденню на XML-діалект за допомогою XHTML, коли врешті-решт люди зрозуміли, що все було занадто складно.

Це було зроблено через ще одну особливість, яку вона нам надає: прощення . Є деякі правила, правда, але після того, як ви їх вивчите, у вас буде велика свобода.

Браузери навчилися бути стійкими і намагатися завжди робити все можливе, коли аналізують та представляють HTML користувачам.

І вся веб-платформа зробила одне правильно: вона ніколи не порушувала зворотну сумісність. Досить неймовірно, ми можемо повернутися до документів HTML, написаних у 1991 році, і вони виглядають майже так само, як і тоді.

Ми навіть знаємо, якою була перша веб-сторінка. Це: //info.cern.ch/hypertext/WWW/TheProject.html

І ви можете побачити джерело сторінки завдяки ще одній великій властивості Інтернету та HTML: ми можемо перевірити HTML будь-якої веб-сторінки .

Не сприймайте це як належне. Я не знаю жодної іншої платформи, яка надає нам цю можливість.

Виняткові Інструменти для розробників, вбудовані в будь-який браузер, дозволяють нам перевіряти та брати натхнення з HTML, написаного будь-ким у світі.

Якщо ви не знайомі з HTML, ця книга має на меті допомогти вам розпочати роботу. Якщо ви досвідчений веб-розробник, ця книга покращить ваші знання.

Я так багато дізнався під час її написання, хоча я працюю з Інтернетом понад 20 років, і я впевнений, що ви теж знайдете щось нове.

Або ти знову вивчиш щось старе, що забув.

У будь-якому випадку, мета книги - бути вам корисною, і я сподіваюся, що це вдасться.

ОСНОВИ HTML

HTML - це стандарт, визначений WHATWG , скороченням від Робочої групи веб-технологій прикладних технологій веб, організації, сформованої людьми, що працюють у найпопулярнішому веб-браузері. Це означає, що це в основному контролюється Google, Mozilla, Apple та Microsoft.

У минулому організація, відповідальна за створення стандарту HTML, була W3C (World Wide Web Consortium).

Орган управління неофіційно перемістився з W3C на WHATWG, коли стало зрозуміло, що просування W3C до XHTML було поганою ідеєю.

Якщо ви ніколи не чули про XHTML, ось коротка історія. На початку 2000-х ми всі вважали, що майбутнє Інтернету - це XML (серйозно). Таким чином, HTML перейшов від мови створення на основі SGML до мови розмітки XML.

Це була велика зміна. Ми повинні були знати і поважати більше правил. Більш жорсткі правила.

Врешті-решт постачальники браузерів зрозуміли, що це не правильний шлях для Інтернету, і вони відсунулися назад, створивши те, що зараз відоме як HTML5.

W3C насправді не погодився відмовитись від контролю над HTML, і протягом багатьох років у нас було 2 конкуруючі стандарти, кожен з яких прагнув бути офіційним. Врешті-решт 28 травня 2019 року W3C офіційно оголосив, що "справжньою" версією HTML була версія, опублікована WHATWG.

Я згадав HTML5. Дозвольте пояснити цю маленьку історію. Я знаю, це дотепер заплутано, як і в багатьох речах у житті, коли бере участь багато акторів, але це також захоплює.

У нас була версія HTML 1 у 1993 році. Ось оригінал RFC.

HTML 2 послідував у 1995 році.

Ми отримали HTML 3 у січні 1997 р., А HTML 4 у грудні 1997 р.

Зайняті часи!

Пройшло більше 20 років, у нас була вся ця річ XHTML, і врешті-решт ми дійшли до цієї "речі" HTML5, яка насправді вже не є просто HTML .

HTML5 - це термін, який тепер визначає цілий набір технологій, що включає HTML, але додає багато API та стандартів, таких як WebGL, SVG та багато іншого.

Ключове, що тут слід зрозуміти, полягає в наступному: зараз немає такого поняття, як версія HTML. Це рівень життя. Як і CSS, який називається "3", але насправді це купа незалежних модулів, розроблених окремо. Як і JavaScript, де ми щороку маємо одне нове видання, але сьогодні важливим є лише те, які окремі функції реалізовані двигуном.

Так, ми називаємо це HTML5, але HTML4 - з 1997 року. Це довгий час для будь-чого, не кажучи вже про Інтернет.

Тут і живе стандарт зараз: //html.spec.whatwg.org/multipage.

HTML - це мова розмітки, яку ми використовуємо для структурування вмісту, який ми споживаємо в Інтернеті.

HTML подається в браузер по-різному.

  • Його може генерувати серверна програма, яка створює її залежно від запиту або даних сеансу, наприклад Rails або Laravel або Django.
  • Його може генерувати програма на стороні клієнта JavaScript, яка генерує HTML на льоту.
  • У найпростішому випадку його можна зберегти у файлі та подати браузеру веб-сервером.

Давайте зануримось у цей останній випадок. Хоча на практиці це, мабуть, найменш популярний спосіб генерації HTML, все ж важливо знати основні будівельні блоки.

За домовленістю, файл HTML зберігається з розширенням .htmlабо .htmрозширенням.

Усередині цього файлу ми організовуємо вміст за допомогою тегів .

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

Давайте зробимо кілька прикладів.

Цей фрагмент HTML створює абзац за допомогою pтегу:

A paragraph of text

Цей фрагмент HTML створює список елементів, використовуючи ulтег, що означає невпорядкований список , і liтеги, що означають елемент списку :

  • First item
  • Second item
  • Third item

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

Деякі з цих правил є вбудованими, наприклад, як відображається список або як посилання підкреслено синім кольором.

Деякі інші правила встановлюються вами за допомогою CSS.

HTML не є презентаційним. Це не стосується того, як все виглядає . Натомість це стосується того, що це означає .

Браузер визначає, як все виглядатиме, за допомогою директив, визначених тим, хто створює сторінку, мовою CSS.

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

Структура сторінки HTML

Давайте зробимо приклад належної HTML-сторінки.

Все починається з Декларації типу документа (вона ж doctype ), способу повідомити браузеру, що це HTML-сторінка, і яку версію HTML ми використовуємо.

Сучасний HTML використовує такий тип документа:

Тоді ми маємо htmlелемент, який має тег відкриття та закриття:

  ...  

Більшість тегів поставляються парами з відкриваючим та закриваючим тегом. Закриваючий тег пишеться так само, як відкривальний тег, але з /:

some content 

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

htmlПочатковий тег використовується на початку документа, відразу після оголошення типу документа.

Кінцевий htmlтег - це останнє, що присутнє в документі HTML.

Всередині htmlелемента ми маємо 2 елементи: headі body:

   ...   ...   

Всередині headми матимемо теги, необхідні для створення веб-сторінки, такі як заголовок, метадані, а також внутрішній або зовнішній CSS та JavaScript. Здебільшого речі, які безпосередньо не відображаються на сторінці, а лише допомагають браузеру (або таким ботам, як пошуковий бот Google) відображати її належним чином.

Всередині bodyми матимемо вміст сторінки. Відомий матеріал .

Теги проти елементів

Я згадав теги та елементи. Яка різниця?

Елементи мають початковий та закривальний теги. У цьому прикладі ми використовуємо pтеги запуску та закриття для створення pелемента:

A paragraph of text

Отже, елемент становить весь пакет :

  • стартовий тег
  • текстовий вміст (і, можливо, інші елементи)
  • закриваючий тег

Якщо елемент не має закриваючого тегу, він записується лише з початковим тегом, і він не може містити жодного текстового вмісту.

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

Атрибути

Початковий тег елемента може містити спеціальні фрагменти інформації, яку ми можемо вкласти, звані атрибутами .

Атрибути мають key="value"синтаксис:

A paragraph of text

Ви також можете використовувати одинарні лапки, але використання подвійних лапок у HTML є приємною умовою.

Їх може бути багато:

A paragraph of text

а деякі атрибути булеві, тобто вам потрібен лише ключ:

classІ idатрибути два з найбільш поширених ви знайдете б.

Вони мають особливе значення і корисні як у CSS, так і в JavaScript.

Різниця між ними полягає в тому, що an idє унікальним у контексті веб-сторінки; його не можна дублювати.

Навпаки, класи можуть з’являтися кілька разів на декількох елементах.

Плюс, an id- це лише одне значення. classможе містити кілька значень, розділених пробілом:

A paragraph of text

Типово застосовувати тире -для розділення слів у значенні класу, але це лише умовна умова.

Це лише два з можливих атрибутів, які ви можете мати. Деякі атрибути використовуються лише для одного тегу. Вони є вузькоспеціалізованими.

Інші атрибути можна використовувати більш загально. Ви щойно побачили idі class, але у нас є й інші, наприклад, styleякі можна використовувати для вставки вбудованих правил CSS до елемента.

Не враховує регістр

HTML не враховує регістр. Теги можна писати великими або малими літерами. У перші дні обмеження були нормою. Сьогодні мала літера - це норма. Це конвенція.

Зазвичай ви пишете так:

A paragraph of text

не так:

A paragraph of text

Пробіл

Досить важливо. У HTML, навіть якщо ви додаєте кілька пробілів у рядок, він згортається механізмом CSS браузера.

Наприклад, візуалізація цього абзацу:

A paragraph of text

те саме, що це:

A paragraph of text

і так само, як це:

A paragraph of text

> Використовуючи властивість CSS для пробілів, ви можете змінити поведінку речей. Ви можете знайти більше інформації про те, як CSS обробляє пробіли, у CSS Spec

Я зазвичай віддаю перевагу

A paragraph of text

або

A paragraph of text

Вкладені теги повинні мати відступ із 2 або 4 символами, залежно від ваших уподобань:

A paragraph of text

  • A list item

Примітка: ця функція "пробіли не актуальні" означає, що якщо ви хочете додати додатковий простір, це може звести вас з розуму. Я пропоную вам використовувати CSS, щоб за потреби звільнити більше місця.

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

ЗАГОЛОВКА ДОКУМЕНТУ

headТег містить спеціальні теги , які визначають властивості документа.

Це завжди пишеться перед bodyтегом, відразу після відкриваючого htmlтегу:

   ...  ...  

Ми ніколи не використовуємо атрибути для цього тегу. І ми не пишемо в ньому вмісту.

Це просто контейнер для інших тегів. Всередині нього ми можемо мати широкий вибір тегів, залежно від того, що вам потрібно зробити:

  • title
  • script
  • noscript
  • link
  • style
  • base
  • meta

titleтег

titleТег визначає заголовок сторінки. Заголовок відображається у браузері, і це особливо важливо, оскільки це один із ключових факторів оптимізації пошукової системи (SEO).

scriptтег

Цей тег використовується для додавання JavaScript на сторінку.

Ви можете включити його в рядку, використовуючи тег відкриття, код JavaScript, а потім тег закриття:

 ..some JS  

Або ви можете завантажити зовнішній файл JavaScript, використовуючи srcатрибут:

typeАтрибут за замовчуванням встановлюється на text/javascript, так що це зовсім необов'язково.

Існує щось досить важливе про цей тег.

Іноді цей тег використовується внизу сторінки, безпосередньо перед закриваючим тегом. Чому? З міркувань продуктивності.

Завантаження сценаріїв за замовчуванням блокує візуалізацію сторінки, доки сценарій не буде проаналізований та завантажений.

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

На мою думку, це зараз погана практика. Нехай scriptживе в headтезі.

У сучасному JavaScript у нас є альтернатива, яка є більш ефективною, ніж збереження сценарію внизу сторінки - deferатрибута. Це приклад завантаження file.jsфайлу щодо поточної URL-адреси:

Це сценарій, який запускає швидший шлях до сторінки із швидким завантаженням та швидким завантаженням JavaScript.

Примітка: asyncатрибут схожий, але на мій погляд гірший варіант ніж defer. Я описую, чому, більш докладно на сторінці //flaviocopes.com/javascript-async-defer/

noscriptтег

Цей тег використовується для виявлення випадків, коли сценарії відключені у браузері.

Примітка: користувачі можуть вимкнути сценарії JavaScript у налаштуваннях браузера. Або браузер може не підтримувати їх за замовчуванням.

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

Зараз ми говоримо про головку документа, тож давайте спочатку представимо це використання.

У цьому випадку noscriptтег може містити лише інші теги:

  • link теги
  • style теги
  • meta теги

змінити ресурси, що обслуговуються сторінкою, або metaінформацію, якщо сценарії відключені.

У цьому прикладі я встановив елемент із no-script-alertкласом для відображення, якщо сценарії відключені, як це було display: noneза замовчуванням:

   ...   .no-script-alert { display: block; }   ...  ...  

Давайте вирішимо інший випадок: якщо його помістити в тіло, він може містити вміст, такий як абзаци та інші теги, які відображаються в інтерфейсі користувача.

linkтег

linkТег використовується для установки зв'язків між документом та іншими ресурсами.

Він в основному використовується для зв’язування зовнішнього файлу CSS для завантаження.

Цей елемент не має закриваючого тегу.

Використання:

   ...  ...  ...  

mediaАтрибут дозволяє завантаження різних стилів в залежності від можливостей пристрою:

Ми також можемо посилатися на ресурси, крім таблиць стилів.

Наприклад, ми можемо пов’язати RSS-канал за допомогою

Або ми можемо пов’язати значок, використовуючи:

Цей тег був також використаний для утримання кількох сторінок, щоб вказати попередню і наступну сторінку , використовуючи rel="prev"і rel="next". Переважно для Google. Станом на 2019 рік Google оголосив, що більше не використовує цей тег, оскільки без нього може знайти правильну структуру сторінки.

styleтег

Цей тег можна використовувати для додавання стилів у документ, а не для завантаження зовнішньої таблиці стилів.

Використання:

 .some-css {}  

Як і у випадку з linkтегом, ви можете використовувати mediaатрибут, щоб використовувати цей CSS лише на вказаному носії:

 .some-css {}  

baseтег

Цей тег використовується для встановлення базової URL-адреси для всіх відносних URL-адрес, що містяться на сторінці.

   ...  ...  ...  

metaтег

Мета-теги виконують різноманітні завдання, і вони дуже, дуже важливі.

Спеціально для SEO.

meta елементи мають лише початковий тег.

Найосновнішим є descriptionметатег:

Це може використовуватись Google для створення опису сторінки на її сторінках результатів, якщо він виявить, що вона краще описує сторінку, ніж вміст на сторінці (не питайте мене, як).

charsetМета - тег використовується , щоб встановити кодування сторінки символів. utf-8в більшості випадків:

robotsМета - тег інструктує пошукові боти індексувати сторінку чи ні:

Або якщо вони повинні переходити за посиланнями чи ні:

Ви також можете встановити nofollow для окремих посилань. Це те, як ви можете встановити nofollowглобально.

Ви можете комбінувати їх:

Типовою поведінкою є index, follow.

Ви можете використовувати інші властивості, в тому числі nosnippet, noarchive, noimageindexі багатьох інших.

Ви також можете просто повідомити Google замість націлювання на всі пошукові системи:

А інші пошукові системи можуть також мати свій власний мета-тег.

Говорячи про це, ми можемо сказати Google вимкнути деякі функції. Це заважає функціям перекладу в результатах пошуку:

viewportМета - тег використовується , щоб повідомити браузеру , щоб встановити ширину сторінки на основі ширини пристрою.

Докладніше про цей тег.

Ще одним досить популярним метатегом є той http-equiv="refresh". Цей рядок говорить браузеру зачекати 3 секунди, а потім перенаправити на іншу сторінку:

Використання 0 замість 3 призведе до перенаправлення якомога швидше.

Це не повне посилання; Існують інші менш використовувані метатеги.

Після введення заголовка цього документа ми можемо почати занурюватися в тіло документа.

ОРГАН ДОКУМЕНТУ

Після закриваючого тегу head ми можемо мати лише одне в документі HTML: bodyелемент.

   ...   ...   

Як headі htmlтеги та , ми можемо мати лише один bodyтег на одній сторінці.

Усередині bodyтегу є всі теги, що визначають зміст сторінки.

Технічно початкові та кінцеві теги необов’язкові. Але я вважаю доброю практикою додавати їх. Просто для наочності.

У наступних главах ми визначимо різноманітність тегів, які можна використовувати всередині тіла сторінки.

Але перед цим ми повинні ввести різницю між блочними елементами та вбудованими елементами.

Блокові елементи проти вбудованих елементів

Візуальні елементи, визначені в тілі сторінки, загалом можна класифікувати на 2 категорії:

  • блокові елементи ( p, div, очолюючи елементи, списки і елементи списків, ...)
  • вбудовані елементи ( a, span, img, ...)

Яка різниця?

Блокові елементи, розташовані на сторінці, не дозволяють розміщувати інші елементи поруч з ними. Ліворуч або праворуч.

Вбудовані елементи замість цього можуть сидіти поруч з іншими вбудованими елементами.

Різниця також полягає у візуальних властивостях, які ми можемо редагувати за допомогою CSS. Ми можемо змінити ширину / висоту, поля, відступи та межі елементів блоку. Ми не можемо зробити це для вбудованих елементів.

Зверніть увагу, що за допомогою CSS ми можемо змінити значення за замовчуванням для кожного елемента, встановивши p, наприклад, тег як вбудований, або як spanелемент блоку.

Інша відмінність полягає в тому, що вбудовані елементи можуть міститися в блокових елементах. Зворотне не відповідає дійсності.

Деякі елементи блоків можуть містити інші елементи блоків, але це залежить. Наприклад, pтег не дозволяє таку опцію.

ТЕГИ, ЩО ВЗАЄМОДІЮЮТЬСЯ З ТЕКСТОМ

pтег

Цей тег визначає абзац тексту.

Some text

Це елемент блоку.

Всередині нього ми можемо додати будь-який вбудований елемент, який нам подобається, подобається spanабо a.

Ми не можемо додати елементи блоку.

Ми не можемо вкласти pелемент в інший.

За замовчуванням браузери стилюють абзац із полем зверху та внизу. 16pxу Chrome, але точне значення може відрізнятися в залежності від браузера.

Це спричиняє проміжки між двома абзацами поспіль, що повторює те, що ми думаємо про "абзац" у друкованому тексті.

spanтег

Це вбудований тег, який можна використовувати для створення розділу в абзаці, на який можна націлити за допомогою CSS:

A part of the text and here another part

brтег

Цей тег представляє розрив рядка. Це вбудований елемент і не потребує закриваючого тегу.

Ми використовуємо його для створення нового рядка всередині pтегу, не створюючи нового абзацу.

І порівняно зі створенням нового абзацу, він не додає додаткових інтервалів.

Some text

A new line

Теги заголовка

HTML надає нам 6 тегів заголовків. З найбільш важливо НЕ менш важливо, у нас є h1, h2, h3, h4, h5, h6.

Зазвичай сторінка буде мати один h1елемент, який є заголовком сторінки. Тоді у вас може бути один або кілька h2елементів залежно від вмісту сторінки.

Заголовки, особливо організація заголовків, також мають важливе значення для SEO, і пошукові системи використовують їх різними способами.

Браузер за замовчуванням зробить h1тег більшим і зменшить розмір елементів із збільшенням числа поблизу h:

Усі заголовки є блочними елементами. Вони не можуть містити інших елементів, лише текст.

strongтег

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

Браузери за замовчуванням роблять текст цього тегу жирним .

emтег

Цей тег використовується для позначення тексту всередині нього як підкресленого . Як і у випадку strong, це не візуальна підказка, а семантична підказка.

Браузери за замовчуванням роблять текст курсивом .

Цитати

blockquoteHTML тег корисний для вставки цитати в тексті.

Браузери за замовчуванням застосовують поле до blockquoteелемента. Chrome застосовує 40 пікселів лівого та правого полів та 10 пікселів верхнього та нижнього полів.

qHTML тег використовується для вбудованих цитат.

Горизонтальна лінія

Насправді не заснований на тексті, але hrтег часто використовується всередині сторінки. Це означає horizontal rule, і він додає горизонтальну лінію на сторінці.

Корисно для відокремлення розділів на сторінці.

Блоки коду

codeТег особливо корисний для перегляду коду, так як браузери дають йому моноширинний шрифт.

Це, як правило, єдине, що роблять браузери. Це CSS, застосований Chrome:

code { font-family: monospace; } 

Цей тег зазвичай загортається в preтег, оскільки codeелемент ігнорує пробіли та розриви рядків. Як pтег.

Chrome надає preтакий стиль за замовчуванням:

pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0px; } 

що запобігає руйнуванню пробілів і робить його блочним елементом.

Списки

У нас є 3 типи списків:

  • невпорядковані списки
  • упорядковані списки
  • списки визначень

Невпорядковані списки створюються за допомогою ulтегу. Кожен елемент у списку створюється з liтегом:

  • First
  • Second

Впорядковані списки подібні, тільки що зроблені з olтегом:

  1. First
  2. Second

Різниця між ними полягає в тому, що впорядковані списки мають номер перед кожним елементом:

Списки визначень дещо відрізняються. У вас є термін та його визначення:

Flavio
The name
Copes
The surname

Ось як зазвичай їх відображають браузери:

Треба сказати, що ви рідко бачите їх у дикій природі, точно не так, як ulі ol, але іноді вони можуть бути корисними.

Інші текстові теги

Існує ряд тегів з презентаційними цілями:

  • markтег
  • insтег
  • delтег
  • supтег
  • subтег
  • smallтег
  • iтег
  • bтег

Це приклад їх візуального візуалізації, який застосовується браузерами за замовчуванням:

Ви можете задатися питанням, чим bвідрізняється від strong? І iчим відрізняється від em?

Різниця полягає в семантичному значенні. Хоча bі iє прямим натяком на браузер, щоб зробити фрагмент тексту жирним або курсивом, strongі emнадати тексту особливе значення, і браузер повинен надати стиль. Що трапляється точно так само, як bі i, за замовчуванням. Хоча ви можете змінити це за допомогою CSS.

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

ПОСИЛАННЯ

Посилання визначаються за допомогою aтегу. Пункт призначення посилання встановлюється через його hrefатрибут.

Приклад:

click here 

Між початковим і завершальним тегами ми маємо текст посилання.

Наведений вище приклад є абсолютною URL-адресою. Посилання також працюють із відносними URL-адресами:

click here 

У цьому випадку при натисканні на посилання користувач переміщується до /testURL-адреси поточного джерела.

Будьте обережні з /персонажем. Якщо його не вказати, замість того, щоб починати з джерела, браузер просто додасть testрядок до поточної URL-адреси.

Наприклад, я на цій сторінці //flaviocopes.com/axios/і маю такі посилання:

  • /test після натискання призводить мене до //flaviocopes.com/test
  • test після натискання призводить мене до //flaviocopes.com/axios/test

Теги посилань можуть містити в собі інші речі, а не лише текст. Наприклад, зображення:

або будь-які інші елементи, крім інших тегів.

Якщо ви хочете відкрити посилання в новій вкладці, ви можете використовувати targetатрибут:

open in new tab 

ТЕГИ КОНТЕЙНЕРІВ І СТРУКТУРА СТОРІНК HTML

Теги контейнера

HTML надає набір тегів контейнерів. Ці теги можуть містити невизначений набір інших тегів.

Ми маємо:

  • article
  • section
  • div

і це може заплутати розуміння різниці між ними.

Давайте подивимося, коли використовувати кожен з них.

article

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

Наприклад, список дописів у блозі на домашній сторінці.

Або список посилань.

A blog post

Read more

Another blog post

Read more

Ми не обмежуємось списками: стаття може бути головним елементом на сторінці.

A blog post

Here is the content...

Всередині articleтегу ми повинні мати заголовок ( h1- h6) та

section

Представляє розділ документа. Кожен розділ має тег заголовка ( h1- h6), потім тіло розділу .

Приклад:

A section of the page

...

Корисно розбити довгу статтю на різні розділи .

Не слід використовувати як загальний елемент контейнера. divстворено для цього.

div

div є загальним елементом контейнера:

 ... 

Ви часто додаєте атрибут classабо idатрибут до цього елемента, щоб дозволити його стиль із використанням CSS.

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

Теги, пов’язані зі сторінкою

nav

Цей тег використовується для створення розмітки, що визначає навігацію сторінкою. До цього ми зазвичай додаємо ulабо olсписок:

  1. Home
  2. Blog

aside

asideТег використовується для додавання частини контенту , який пов'язаний з основним змістом.

Наприклад, поле, де можна додати цитату. Або бічну панель.

Приклад:

some text..

A quote..

other text...

Використання aside- це сигнал, що речі, які він містить, не є частиною регулярного потоку розділу, в який він живе.

header

headerТег представляє собою частину сторінки , яка є введенням. Наприклад, він може містити один або декілька тегів заголовка ( h1- h6), слоган статті, зображення.

Article title

...

main

mainТег є основну частину сторінки:

 ....  

....

footer

footerТег використовується для визначення колонтитула статті або колонтитула сторінки:

 ....  

Footer notes..

ФОРМИ

Форми - це спосіб взаємодії зі сторінкою або програмою, створеною за допомогою веб-технологій.

У вас є набір елементів керування, і коли ви надсилаєте форму, натисканням кнопки «подати» або програмою браузер надсилає дані на сервер.

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

Форма створюється за допомогою formтегу:

 ...  

За замовчуванням форми подаються за допомогою методу GET HTTP. Що має свої недоліки, і зазвичай ви хочете використовувати POST.

Ви можете встановити форму для використання POST при подачі за допомогою methodатрибута:

 ...  

Форма подається за допомогою GET або POST на ту саму URL-адресу, де вона знаходиться.

Отже, якщо форма знаходиться на //flaviocopes.com/contactsсторінці, натискання кнопки "надіслати" зробить запит на ту саму URL-адресу.

Що може призвести до того, що нічого не станеться.

Вам потрібно щось на стороні сервера для обробки запиту, і, як правило, ви "слухаєте" ці події подання форми за спеціальною URL-адресою.

Ви можете вказати URL за допомогою actionпараметра:

 ...  

Це призведе до того, що браузер надсилатиме дані форми за допомогою POST до /new-contactURL-адреси того самого джерела.

Якщо джерелом (протокол + домен + порт) є //flaviocopes.com(порт 80 є типовим), це означає, що дані форми будуть надіслані //flaviocopes.com/new-contact.

Я говорив про дані. Які дані?

Дані надаються користувачами через набір елементів управління, доступних на веб-платформі:

  • поля введення (однорядковий текст)
  • текстові області (багаторядковий текст)
  • позначте поля (виберіть один варіант зі спадного меню)
  • перемикачі (виберіть один варіант зі списку, який завжди видно)
  • прапорці (виберіть нуль, один або кілька варіантів)
  • завантаження файлів
  • і більше!

Давайте представимо кожен із них у наступному огляді полів форми.

inputтег

inputРодовище є одним з найбільш широко використовуваних елементів форми. Це також дуже універсальний елемент, і він може повністю змінити поведінку на основі typeатрибута.

Типовою поведінкою є однорядковий елемент керування введенням тексту:

Еквівалентно використанню:

Як і усім іншим полям, що слідують, вам потрібно дати цьому полю назву, щоб його вміст надсилався на сервер при поданні форми:

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

Електронна пошта

Використання type="email"перевіряє електронну пошту на стороні клієнта (у веб-переглядачі) для коректності (семантичної коректності, не гарантуючи наявність адреси електронної пошти) перед надсиланням.

Пароль

Завдяки використанню type="password"кожен введений ключ відображатиметься зірочкою (*) або крапкою, що корисно для полів, на яких розміщений пароль.

Числа

Ви можете запросити елемент введення приймати лише цифри:

Ви можете вказати мінімальне та максимальне прийняте значення:

stepАтрибут допомагає визначити кроки між різними значеннями. Наприклад, це приймає значення від 10 до 50, з кроком 5:

Приховане поле

Поля можна приховати від користувача. Вони все одно будуть відправлені на сервер після подання форми:

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

Його також можна просто використовувати для ідентифікації форми та її дії.

Встановлення значення за замовчуванням

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

Якщо ви встановите заповнювач, це значення з’явиться, якщо користувач очистить значення поля введення:

Відправити форму

type="submit"Поле кнопка, після того , як користувач натискає, представляє форму:

valueАтрибут встановлює текст на кнопці, яка , якщо НЕ вистачає шоу «Надіслати» текст:

Перевірка форми

Браузери забезпечують форми перевірки на стороні клієнта.

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

Давайте подивимося обидва варіанти.

Встановіть поля відповідно до вимог

requiredАтрибут допомагає вам з перевіркою. Якщо поле не встановлено, перевірка на стороні клієнта не вдається, і браузер не подає форму:

Застосовувати певний формат

Я описав type="email"поле вище. Він автоматично перевіряє адресу електронної пошти відповідно до формату, встановленого в специфікації.

У type="number"полі я згадав атрибут minand і maxдля обмеження значень, введених в інтервал.

Ви можете зробити більше.

Ви можете застосувати певний формат у будь-якому полі.

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

Я рекомендую прочитати мій Посібник із регулярних виразів на flaviocopes.com/javascript-regular-expressions/.

pattern = "//.*"

Інші поля

Завантаження файлів

Ви можете завантажити файли з локального комп’ютера та надіслати їх на сервер за допомогою type="file"елемента введення:

Ви можете вкласти кілька файлів:

Ви можете вказати один або кілька типів файлів, дозволених за допомогою acceptатрибута. Тут приймаються зображення:

Ви можете використовувати певний тип MIME, наприклад, application/jsonабо встановити розширення файлу типу .pdf. Або встановіть декілька розширень файлів, наприклад:

Кнопки

В type="button"поле введення можна використовувати , щоб додати додаткові кнопки в форму, які не є кнопки відправки:

Вони використовуються для програмного виконання чогось із використанням JavaScript.

Існує спеціальне поле, відтворене як кнопка, спеціальна дія якого полягає в тому, щоб очистити всю форму і повернути стан полів до початкового:

Перемикачі

Перемикачі використовуються для створення набору варіантів, один з яких натискається, а всі інші вимикаються.

Назва походить від старих автомобільних радіостанцій, які мали такий інтерфейс.

Ви визначаєте набір type="radio"входів, усі з однаковим nameатрибутом та різним valueатрибутом:

Після подання форми colorвластивість data матиме одне єдине значення.

Завжди перевірено один елемент. Перший елемент - це той, який перевірено за замовчуванням.

Ви можете встановити попередньо вибране значення за допомогою checkedатрибута. Ви можете використовувати його лише один раз для кожної групи радіовходів.

Прапорці

Подібно до радіоприймачів, але вони дозволяють вибрати кілька значень або взагалі не вказати.

Ви визначаєте набір type="checkbox"входів, усі з однаковим nameатрибутом та різним valueатрибутом:

Усі ці прапорці за замовчуванням будуть зняті. Використовуйте checkedатрибут, щоб увімкнути їх при завантаженні сторінки.

Оскільки це поле введення допускає декілька значень, при поданні форми значення (значення) буде надіслано на сервер як масив.

Дата і час

У нас є декілька типів введення для прийняття значень дати.

Поле type="date"введення дозволяє користувачеві вводити дату та відображає засіб вибору дати, якщо це необхідно:

Поле type="time"введення дозволяє користувачеві вводити час і показує підбір часу, якщо це необхідно:

Поле type="month"введення дозволяє користувачеві ввести місяць і рік:

Поле type="week"введення дозволяє користувачеві ввести тиждень і рік:

Усі ці поля дозволяють обмежити діапазон і крок між кожним значенням. Я рекомендую перевірити MDN, щоб дізнатись про детальну інформацію про їх використання.

type="datetime-local"Поле дозволяє вибрати дату і час.

Ось сторінка, щоб перевірити їх усі: //codepen.io/flaviocopes/pen/ZdWQPm

Підбір кольору

Ви можете дозволити користувачам вибрати колір за допомогою type="color"елемента:

Ви встановлюєте значення за замовчуванням, використовуючи valueатрибут:

Браузер подбає про те, щоб показати користувачеві підбір кольору.

Діапазон

Цей елемент введення показує елемент повзуна. Люди можуть використовувати його для переходу від початкового значення до кінцевого:

Ви можете надати необов’язковий крок:

Телефон

Поле type="tel"введення використовується для введення телефонного номера:

Основним пунктом продажу для використання telover textє мобільний телефон, де пристрій може вибрати показ цифрової клавіатури.

Вкажіть patternатрибут для додаткової перевірки:

URL

type="url"Поле використовується для введення URL.

Ви можете перевірити це за допомогою patternатрибута:

textareaтег

textareaЕлемент дозволяє користувачам вводити багаторядковий текст. Порівняно з input, для цього потрібен кінцевий тег:

Ви можете встановити розміри за допомогою CSS, а також за допомогою атрибутів rowsand cols:

Як і у випадку з іншими тегами форми, nameатрибут визначає ім'я в даних, що надсилаються на сервер:

selectтег

Цей тег використовується для створення випадаючого меню.

Користувач може вибрати один із доступних варіантів.

Кожен параметр створюється за допомогою optionтегу. Ви додаєте ім'я до вибраного та значення до кожного параметра:

 Red Yellow  

Ви можете встановити опцію вимкненою:

 Red Yellow  

Ви можете мати один порожній варіант:

 None Red Yellow  

Параметри можна згрупувати за допомогою optgroupтегу. Кожна група варіантів має labelатрибут:

  Red Yellow Blue   Green Pink   

СТОЛИ

У перші дні веб-таблиці були дуже важливою частиною побудови макетів.

Пізніше вони були замінені CSS та його можливостями макетування, і сьогодні ми маємо потужні інструменти, такі як CSS Flexbox та CSS Grid для побудови макетів. Столи тепер використовуються лише для, вгадайте, для побудови таблиць!

tableтег

Ви визначаєте таблицю за допомогою tableтегу:

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

Рядки

Рядок додається за допомогою trтегу, і це єдине, що ми можемо додати в tableелемент:

Це таблиця з 3 рядками.

Перший рядок може виконувати роль заголовка.

Заголовки стовпців

Заголовок таблиці містить назву стовпця, як правило, жирним шрифтом.

Подумайте про документ Excel / Google Sheets. Верхній A-B-C-D...заголовок.

Заголовок визначаємо за допомогою thтегу:

Column 1Column 2Column 3

Зміст таблиці

Зміст таблиці визначається за допомогою tdтегів, що знаходяться всередині інших trелементів:

Column 1Column 2Column 3
Row 1 Column 1Row 1 Column 2Row 1 Column 3
Row 2 Column 1Row 2 Column 2Row 2 Column 3

Ось як його відображають браузери, якщо ви не додаєте жодного стилю CSS:

Додавання цього CSS:

th, td { padding: 10px; border: 1px solid #333; } 

робить таблицю більш схожою на правильну таблицю:

Розмах стовпців і рядків

Рядок може вирішити охоплювати більше 2 або більше стовпців, використовуючи colspanатрибут:

Column 1Column 2Column 3
Row 1 Columns 1-2Row 1 Column 3
Row 2 Columns 1-3

Або він може охоплювати більше 2 або більше рядків, використовуючи rowspanатрибут:

Column 1Column 2Column 3
Rows 1-2 Columns 1-2Row 1 Column 3
Row 2 Column 3

Заголовки рядків

Перш ніж я пояснив, як ви можете мати заголовки стовпців, використовуючи thтег усередині першого trтегу таблиці.

Ви можете додати thтег як перший елемент всередині таблиці, trякий не є першим trу таблиці, щоб мати заголовки рядків:

Column 2Column 3
Row 1Col 2Col 3
Row 2Col 2Col 3

Більше тегів для упорядкування таблиці

Ви можете додати ще 3 теги в таблицю, щоб вона була більш організованою.

Це найкраще при використанні великих таблиць. І правильно визначити верхній і нижній колонтитули теж.

Ці теги є

  • thead
  • tbody
  • tfoot

Вони обертають trтеги, щоб чітко визначити різні розділи таблиці. Ось приклад:

Column 2Column 3
Row 1Col 2Col 3
Row 2Col 2Col 3
Footer of Col 1Footer of Col 2

Заголовок таблиці

У таблиці повинен бути captionтег, що описує його зміст. Цей тег слід поставити відразу після відкриваючого tableтегу:

 Dogs age 
DogAge
Roger7

МУЛЬТИМЕДІЙНІ ТЕГИ: AUDIOІVIDEO

У цьому розділі я хочу показати вам теги audioта video.

audioтег

Цей тег дозволяє вставляти аудіовміст на ваші HTML-сторінки.

Цей елемент може передавати аудіо, можливо, за допомогою мікрофона getUserMedia(), або може відтворювати джерело звуку, на яке ви посилаєтесь за допомогою srcатрибута:

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

Щоб показати вбудовані елементи керування, можна додати controlsатрибут:

Елементи керування можуть мати власну обшивку.

Ви можете вказати тип MIME аудіофайлу, використовуючи typeатрибут. Якщо не встановлено, браузер спробує автоматично визначити його:

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

Примітка: мобільні браузери не дозволяють автовідтворення

loopАтрибут перезавантажує аудіо відтворення в 0:00 , якщо встановлений; в іншому випадку, якщо його немає, звук зупиняється в кінці файлу:

Ви також можете відтворити звуковий файл, приглушений за допомогою mutedатрибута (не зовсім впевнений, у чому користь цього):

За допомогою JavaScript ви можете слухати різні події, що відбуваються з audioелементом, найосновнішими з яких є:

  • play коли файл почне відтворюватися
  • pause коли відтворення звуку було призупинено
  • playing коли звук відновлюється з паузи
  • ended коли звуковий файл досягнуто

videoтег

Цей тег дозволяє вставляти відеовміст на ваші HTML-сторінки.

Цей елемент може передавати відео, використовуючи веб-камеру через getUserMedia()або WebRTC , або він може відтворювати джерело відео, яке ви посилаєтесь за допомогою srcатрибута:

За замовчуванням браузер не відображає елементи керування для цього елемента, лише відео.

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

Щоб показати вбудовані елементи керування, можна додати controlsатрибут:

Елементи керування можуть мати власну обшивку.

Ви можете вказати тип MIME для відеофайлу, використовуючи typeатрибут. Якщо не встановлено, браузер спробує автоматично визначити його:

Відеофайл за замовчуванням не відтворюється автоматично. Додайте autoplayатрибут для автоматичного відтворення відео:

Деякі браузери також вимагають mutedатрибута для автоматичного відтворення. Відео автоматично відтворюється, лише якщо його вимкнено:

loopАтрибут перезавантажує відтворення відео в 0:00 , якщо множини; в іншому випадку, якщо його немає, відео зупиняється в кінці файлу:

Ви можете встановити зображення як зображення плаката:

Якщо його немає, браузер відобразить перший кадр відео, як тільки він стане доступним.

Ви можете встановити атрибути widthі, heightщоб встановити простір, який займе елемент, щоб браузер міг це врахувати, і він не змінив макет при остаточному завантаженні. Він приймає числове значення, виражене в пікселях.

За допомогою JavaScript ви можете слухати різні події, що відбуваються з videoелементом, найосновнішими з яких є:

  • play коли файл почне відтворюватися
  • pause коли відео було призупинено
  • playing коли відео продовжується з паузи
  • ended коли кінець відеофайлу досягнуто

РАМКИ

iframeТег дозволяє вставляти вміст з інших джерел (інші сайти) в нашій веб - сторінці.

Технічно iframe створює новий вкладений контекст перегляду. Це означає, що будь-що в iframe не заважає батьківській сторінці, і навпаки. JavaScript і CSS не "просочуються" до / з iframes.

Багато сайтів використовують фрейми для виконання різних речей. Можливо, ви знайомі з Codepen, Glitch чи іншими веб-сайтами, що дозволяють кодувати в одній частині сторінки, і результат ви бачите у полі. Це фрейм.

Ви створюєте один таким чином:

Ви також можете завантажити абсолютну URL-адресу:

Ви можете встановити набір параметрів ширини та висоти (або встановити їх за допомогою CSS), інакше iframe використовуватиме значення за замовчуванням, поле 300x150 пікселів:

Srcdoc

srcdocАтрибут дозволяє задати деякі вбудований HTML , щоб показати. Це альтернатива src, але недавня і не підтримується в Edge 18 і нижче, а також в IE:

Пісочниця

sandboxАтрибут дозволяє обмежити операції дозволених в фреймах.

Якщо ми це опустимо, все дозволено:

Якщо ми встановили значення "", ніщо не дозволяється:

Ми можемо вибрати, що дозволити, додавши параметри в sandboxатрибут. Ви можете дозволити кілька, додавши пробіл між ними. Ось неповний список варіантів, якими ви можете скористатися:

  • allow-forms: дозволити подавати форми
  • allow-modalsдозволяють відкривати модальні вікна, включаючи дзвінки alert()в JavaScript
  • allow-orientation-lock дозволяють заблокувати орієнтацію екрана
  • allow-popupsдозволити спливаючі вікна, використовуючи window.open()та target="_blank"посилання
  • allow-same-origin розглядати завантажуваний ресурс як одне і те саме
  • allow-scripts дозволяє завантаженому iframe запускати сценарії (але не створювати спливаючі вікна).
  • allow-top-navigation надає доступ до iframe до контексту перегляду верхнього рівня

Дозвольте

В даний час експериментальний і підтримується лише браузерами на основі Chromium, це майбутнє спільного використання ресурсів між батьківським вікном та iframe.

Це схоже на sandboxатрибут, але дозволяє нам дозволити певні функції, зокрема:

  • accelerometer надає доступ до інтерфейсу акселерометра Sensors API
  • ambient-light-sensor надає доступ до інтерфейсу API датчиків AmbientLightSensor
  • autoplay дозволяє автоматично відтворювати відео- та аудіофайли
  • camera дозволяє отримати доступ до камери за допомогою API getUserMedia
  • display-capture дозволяє отримати доступ до вмісту екрану за допомогою API getDisplayMedia
  • fullscreen дозволяє отримати доступ до повноекранного режиму
  • geolocation дозволяє отримати доступ до API геолокації
  • gyroscope надає доступ до інтерфейсу гіроскопа Sensors API
  • magnetometer надає доступ до інтерфейсу Sensors API Magnetometer
  • microphone надає доступ до мікрофона пристрою за допомогою API getUserMedia
  • midi дозволяє отримати доступ до Web MIDI API
  • payment надає доступ до API запиту на оплату
  • speaker надає доступ до відтворення звуку через динаміки пристрою
  • usb надає доступ до API WebUSB.
  • vibrate надає доступ до API вібрації
  • vr надає доступ до API WebVR

Реферал

Завантажуючи iframe, браузер надсилає йому важливу інформацію про те, хто завантажує його в Refererшапку (зверніть увагу на сингл r, помилку, з якою ми повинні жити).

Помилка написання джерела виникла в оригінальній пропозиції інформатика Філіпа Хеллам-Бейкера включити поле в специфікацію HTTP. Орфографічна помилка була зафіксована на момент включення її до документа про вимоги до коментарів RFC 1945

referrerpolicyАтрибут дозволяє нам встановити реферера для відправки в IFRAME при завантаженні його. Реферал - це заголовок HTTP, який повідомляє сторінці, хто його завантажує. Це допустимі значення:

  • no-referrer-when-downgrade це за замовчуванням і не відправляє реферала, коли поточна сторінка завантажується через HTTPS і iframe завантажується на протокол HTTP
  • no-referrer не надсилає заголовок реферала
  • origin реферал відправляється і містить лише джерело (порт, протокол, домен), а не джерело + шлях, який є типовим
  • origin-when-cross-originпри завантаженні з того самого джерела (порту, протоколу, домену) в iframe, реферал надсилається у повній формі (джерело + шлях). В іншому випадку надсилається лише походження
  • same-origin реферал надсилається лише при завантаженні з того самого джерела (порт, протокол, домен) у iframe
  • strict-originнадсилає джерело як реферал, якщо поточна сторінка завантажена через HTTPS, а iframe також завантажується на протокол HTTPS. Нічого не надсилає, якщо iframe завантажується через HTTP
  • strict-origin-when-cross-originнадсилає початок + шлях як напрямник, коли працює над тим самим початком. Відправляє джерело як напрямник, якщо поточна сторінка завантажена через HTTPS, а iframe також завантажується на протокол HTTPS. Нічого не надсилає, якщо iframe завантажується через HTTP
  • unsafe-url: відправляє вихідний шлях + шлях як напрямник навіть під час завантаження ресурсів з HTTP, а поточна сторінка завантажується через HTTPS

ОБРАЗИ

Зображення можна відображати за допомогою imgтегу.

Цей тег приймає srcатрибут, який ми використовуємо для встановлення джерела зображення:

Ми можемо використовувати широкий набір зображень. Найпоширеніші - PNG, JPEG, GIF, SVG та нещодавно WebP.

Стандарт HTML вимагає наявності altатрибута для опису зображення. Цим користуються зчитувачі з екрана, а також боти пошукової системи:

Ви можете встановити атрибути widthі, heightщоб встановити простір, який займе елемент, щоб браузер міг це врахувати, і він не змінює макет, коли він повністю завантажений. Він приймає числове значення, виражене в пікселях.

figureтег

figureТег часто використовується разом з imgтегом.

figure- це семантичний тег, який часто використовується, коли потрібно відобразити зображення з підписом. Ви використовуєте його так:

 A nice dog  

figcaptionТег обертає текст заголовка.

Адаптивні зображення з використанням srcset

srcsetАтрибут дозволяє встановити адаптивні зображення, браузер може використовувати в залежності від щільності пікселів або ширини вікна, в відповідно до ваших уподобань. Таким чином, він може завантажувати ресурси, необхідні для рендерінгу сторінки, без завантаження більшого зображення, наприклад, якщо це на мобільному пристрої.

Ось приклад, де ми даємо 4 додаткових зображення для 4 різних розмірів екрану:

У srcsetми використовуємо wміру для позначення ширини вікна.

Оскільки ми робимо це, нам також потрібно використовувати sizesатрибут:

У цьому прикладі (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxрядок в sizesатрибуті описує розмір зображення по відношенню до області перегляду, з кількома умовами, розділеними крапкою з комою.

Умова носія max-width: 500pxвстановлює розмір зображення відповідно до ширини області перегляду. Коротше кажучи, якщо розмір вікна <500px, це робить зображення на 100% від розміру вікна.

Якщо розмір вікна більший, але < 900px, це робить зображення на рівні 50% від розміру вікна.

А якщо навіть більше, це робить зображення на 800px.

vwОдиниця виміру може бути новою для вас, і в Коротше кажучи , ми можемо сказати , що 1 vwстановить 1% від ширини вікна, так що 100vwце 100% від ширини вікна.

Корисним веб-сайтом для створення srcsetта поступово зменшення зображень є //responsivebreakpoints.com/.

pictureтег

HTML також дає нам pictureтег, який виконує дуже подібну роботу srcset, і відмінності дуже тонкі.

Ви використовуєте, pictureколи замість того, щоб просто обслуговувати меншу версію файлу, ви повністю хочете змінити його. Або подайте інший формат зображення.

Найкращий варіант використання, який я знайшов, - це при обслуговуванні зображення WebP, який досі не підтримується широко. У pictureтегу ви вказуєте список зображень, і вони будуть використовуватися по порядку, тому в наступному прикладі браузери, що підтримують WebP, використовуватимуть перше зображення, а якщо ні, повернеться до JPG:

sourceТег визначає один (або більше) форматів зображень. imgТег є запасним варіантом в разі , якщо браузер дуже старий і не підтримує pictureтег.

У sourceтегу всередині pictureви можете додати mediaатрибут для встановлення медіа-запитів.

Приклад, що слідує за такими видами робіт, як у наведеному вище прикладі з srcset:

Але це не його варіант використання, оскільки, як бачите, це набагато детальніше.

pictureТег недавнє , але в даний час підтримується всіма основними браузерами , крім Opera Mini і IE (всі версії).

ДОСТУПНІСТЬ

Важливо, щоб ми розробляли наш HTML з урахуванням доступності.

Наявність доступного HTML означає, що люди з обмеженими можливостями можуть користуватися Інтернетом. Є абсолютно сліпі або слабозорі користувачі, люди з проблемами втрати слуху та безліччю інших різних інвалідностей.

На жаль, ця тема не набуває необхідного значення, і здається не такою крутою, як інші.

Що робити, якщо людина не може бачити вашу сторінку, але все одно хоче споживати її вміст? По-перше, як вони це роблять? Вони не можуть користуватися мишею, вони використовують щось, що називається зчитувач з екрана . Не потрібно цього уявляти. Ви можете спробувати зараз: Google надає безкоштовне розширення ChromeVox для Chrome. Доступність також повинна подбати про те, щоб інструменти могли легко вибирати елементи або переміщатися по сторінках.

Веб-сторінки та веб-програми не завжди будуються з доступністю як однією з перших цілей, і, можливо, версія 1 випускається недоступною, але можливо зробити веб-сторінку доступною вже по факту. Раніше краще, але ніколи не пізно.

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

Що це означає зробити HTML доступним? Дозвольте проілюструвати основні речі, над якими вам потрібно подумати.

Примітка: є кілька інших речей, про які слід подбати, що може йти в темі CSS, наприклад, кольори, контраст та шрифти. Або як зробити зображення SVG доступними. Я тут про них не кажу.

Використовуйте семантичний HTML

Семантичний HTML дуже важливий, і це одна з головних речей, про які потрібно подбати. Дозвольте проілюструвати кілька типових сценаріїв.

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

h1 h2 h3 h2 h2 h3 h4 

Використовуйте strongта emзамість bі i. Візуально вони виглядають однаково, але перші 2 мають більше значення, пов’язаного з ними. bі iє більше візуальними елементами.

Списки важливі. Зчитувач з екрана може виявити список і надати огляд, а потім дозволити користувачеві вибрати, потрапляти в список чи ні.

У таблиці повинен бути captionтег, що описує його зміст:

 Dogs age 
DogAge
Roger7

Використовуйте altатрибути для зображень

Усі зображення повинні мати altтег із описом вмісту зображення. Це не просто хороша практика, це вимагає стандарт HTML, і ваш HTML без нього не перевіряється.

Це також добре для пошукових систем, якщо це стимул для вас додати його.

Використовуйте roleатрибут

roleАтрибут дозволяє призначати певні ролі для різних елементів у вашій сторінці.

Ви можете призначити безліч різних ролей: доповнюючий, список, список, основний, навігація, регіон, вкладка, попередження, додаток, стаття, банер, кнопка, комірка, прапорець, інформація про вміст, діалогове вікно, документ, стрічка, малюнок, форма, сітка, gridcell, заголовок, img, список, рядок, група рядків, пошук, перемикач, таблиця, панель панелей, текстове поле, таймер.

Це багато, і для повної довідки кожного з них я даю вам це посилання MDN. Але вам не потрібно призначати роль кожному елементу сторінки. Зчитувачі з екрана в більшості випадків можуть робити висновки з тегу HTML. Наприклад , ви не повинні додати роль тег в семантичних тегів , таких як nav, button, form.

Візьмемо navприклад тегу. Ви можете використовувати його для визначення навігації сторінкою таким чином:

  • Home
  • Blog

Якщо вас змусили використовувати divтег замість nav, ви б використали navigationроль:

  • Home
  • Blog

Отже, тут ви отримали практичний приклад: roleвикористовується для присвоєння значущого значення, коли тег вже не передає значення.

Використовуйте tabindexатрибут

tabindexАтрибут дозволяє змінювати порядок , як натискання на клавішу Tab вибирає «селективні» елементи. За замовчуванням можна вибрати лише посилання та елементи форми за допомогою навігації за допомогою клавіші Tab (і їх не потрібно встановлювати tabindex).

Додавання tabindex="0"робить елемент доступним для вибору:

 ... 

Використання tabindex="-1"замість цього видаляє елемент із цієї навігації на основі вкладок, і це може бути дуже корисно.

Використовуйте ariaатрибути

ARIA - це абревіатура, що означає Доступні розширені Інтернет-програми та визначає семантику, яка може бути застосована до елементів.

aria-label

Цей атрибут використовується для додавання рядка для опису елемента.

Приклад:

...

Я використовую цей атрибут на бічній панелі мого блогу, де у мене є поле введення для пошуку без явної мітки, оскільки воно має атрибут placeholder.

aria-labelledby

Цей атрибут встановлює кореляцію між поточним елементом і тим, який його позначає.

Якщо ви знаєте, як inputелемент може бути пов’язаний з labelелементом, це схоже.

Ми передаємо ідентифікатор елемента, що описує поточний елемент.

Приклад:

The description of the product

...

aria-describedby

Цей атрибут дозволяє нам асоціювати елемент з іншим елементом, який служить описом.

Приклад:

Pay now Clicking the button will send you to our Stripe form! 

Використовуйте aria-hidden, щоб приховати вміст

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

Додавання "атрибуту скаже читачам з екрану ігнорувати цей елемент.

Де дізнатись більше

Це лише вступ до теми. Щоб дізнатись більше, я рекомендую такі ресурси:

  • //www.w3.org/TR/WCAG20/
  • //webaim.org
  • //developers.google.com/web/fundamentals/accessibility/

Ви дійшли до кінця Посібника з HTML.

Клацніть тут, щоб отримати PDF / ePub / Mobi версію цієї книги для читання в автономному режимі !