Вступ до семантичних елементів HTML5

Наступна стаття надасть вам різні смислові елементи в html5. Почнемо з розуміння семантики. Semantics - це все про різні типи тегів, функціональність яких зображала б і виконувала ту саму функцію, що і для її імені. Функціональність тегу легко зрозуміти за його назвою; який знаходиться в зрозумілому для користувача імені / форматі. Більшість елементів у HTML - це, як правило, семантичні елементи.

Переваги семантичних елементів у HTML5

Перевагами смислових елементів є наступні:

  • Легке розуміння коду.
  • Технічне обслуговування може бути виконано швидко та належним чином.
  • Немає необхідності додавати будь-який опис спеціально для будь-якого тегу.

Різні семантичні елементи в HTML5

Давайте тепер перейдемо до смислових елементів HTML5.

1.

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

Код:



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA

Вихід:

2.

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

Код:


The section here is about:

Навчання та практика

Вихід:

3.

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

Код:



This is header #1



This is header #1



This is header #1

Перший

наступний …

Це заголовок №2


Другий

Вихід:

4.

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

Код:


Внутрішнє тіло та над тегом нижнього колонтитулу


Внутрішній тег нижнього колонтитулу.


Ще один тег нижнього колонтитулу

Умови застосовуються

Вихід:

5.

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

Код:


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2

Вихід:

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

6.

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

Код:


Як використовується тег убік

Всередині бік бирки


Вміст всередині тегу в сторону

Вихід:

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

7.

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

Код:





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

8.

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




This is description of the image attached.

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

9.

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

Код:



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying

Читання допоможе зрозуміти різні теми



Практикуючи


Вивчаючи, практикуватися - це обов'язкова річ, яку потрібно робити в навчанні

Вихід:

10.

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

Код:


У цьому цілому тексті, який я зараз пишу, я хочу відзначити цей текст

Вихід:

11.

Цей тег містить додаткові дані, що користувачі можуть приховати будь-які деталі за своїм бажанням. За допомогою цього тегу користувачі можуть відкривати / закривати будь-який необхідний їм вміст. Якщо ми хочемо, щоб цей тег розкривав його деталі на самому старті, тоді може бути використаний атрибут "відкрито".

Нижче наведено невеликий приклад того ж:

Код:



Це відображається?

Вихід:

Тепер, який би був результат, якби ми не використовували відкритий атрибут?



Це відображається?

Вихід 1:

Вихід 2:

12.

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

Код:



Have written this inside summary tag which is inside details tag

Цей текст підпадає лише під тегом деталей

Ці текстові дані записуються після заповнення тегу деталей

Вихід 1:

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

Вихід 2:

Цей тег може не відрізнятись

13.

Цей тег визначає дату / час у такому форматі, що користувачі можуть легко зрозуміти. Але слід зазначити, що цей тег може не дати нам змінити вихід у багатьох браузерах.

Код:


В даний час вночі 23:00.

Вихід:

14.

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



Дані, записані тут, відображаються у діалоговому вікні

Вихід:

15.

Цей тег дає прогрес певного завдання в графічному зображенні. Нам тут потрібно мати максимальну кількість, на яке має бути представлений прогрес. Цей тег в основному складається з двох атрибутів. Макс та значення - два атрибути. Макс представляє загальний підрахунок, який потрібно виконати, а значення дає нам відсотковий відсоток, який закінчено відносно максимального значення підрахунку. Приклад для цього наведено нижче:

Код:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

Вихід:

16.

Цей тег призначений для вимірювання. Це також можна використати для місця, яке займає запит або використання дискового простору. Є кілька атрибутів, які потрібно використовувати з цим тегом. Атрибути: max, min та value. На основі їх використання ми можемо точно визначити їх призначення та використання.

Код:


EDCUBA


EDCUBA


EDCUBA

Використання мітки Meter

У квартирі на 6 поверхів я проживаю на 2 поверсі:
2 з 6

Вихід:

17.

Це тег, який було введено для додавання відеофайлів на нашу HTML-сторінку. Поки цей тег не був введений, розробники використовували плагіни для введення відеофайлів у вміст сторінки HTL. Є кілька атрибутів, які можна використовувати разом з тегом. Автозагравання, попереднє завантаження, вимкнено деякі з них.

Код:







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

18.

Цей тег призначений для додавання аудіофайлів на нашу сторінку Html. Використання та тег джерела будуть такими ж, як у відеотегів. Як вправу спробуйте використати всі смислові елементи та створити веб-сторінку версії e HTML 5, щоб краще та швидше вчитися.

Висновок

У цій статті ми повинні побачити багато смислових елементів та їх використання в HTML5. Тут важливо відзначити, що багато з цих тегів підтримуються версіями Internet Explorer понад 9 та хромованими версіями більше 3. Отже, продовжуйте навчатися та практикуватися, щоб краще зрозуміти використання тегів у HTML 5.

Рекомендовані статті

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

  1. Топ-10 нових елементів HTML5
  2. Теги HTML5
  3. Веб-працівники HTML5
  4. Різний тип подій HTML