Введение в семантические элементы HTML5

Следующая статья предоставит вам различные семантические элементы в html5. Давайте начнем с понимания семантики. Семантика - это все о различных типах тегов, функциональность которых будет отображаться и выполнять ту же функцию, что и в имени тега. Функциональность тега будет легко понятна по его названию; который находится в понятном для пользователя имени / формате. Большинство элементов в 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.

Этот тег предназначен для обеспечения общего содержания данных в разрезе. Зная об использовании тегов article и section, эти теги можно использовать внутри каждого тега. То есть тег раздела может быть использован внутри тега статьи и наоборот.

Код:


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.

Этот тег указывает, что мы собираемся прикрепить изображение. Этот тег можно использовать для указания источника изображения и отображения рисунка или изображения.

Код:





Как упоминалось выше, именно так мы можем определить тег figure. Внутри тега figure мы можем указать нашу команду изображения с тегом source. Внутри этого тега рисунка мы можем, в свою очередь, использовать тег заголовка рисунка.

8.

Этот тег используется для надписи под изображением. Его можно использовать внутри тега figure. Использование этого можно увидеть в следующем примере.




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.

Этот тег содержит дополнительные сведения, которые пользователи могут скрыть по своему желанию. С помощью этого тега пользователи могут открывать / закрывать любой контент, который им нужен. Если мы хотим, чтобы этот тег раскрывал свои детали в самом начале, то можно использовать атрибут «open».

Ниже приведен небольшой пример того же:

Код:

Это отображается?

Выход:

Теперь, что будет выход, если мы не будем использовать атрибут open?

Это отображается?

Выход 1:

Выход 2:

12.

Этот тег используется внутри тега подробностей. Под тегом details у нас может быть итоговый тег, который определяет всю сводку веб-страницы или HTML-документа. Здесь важно отметить, что итоговый тег является первым дочерним тегом, который должен находиться под тегом details. Давайте найдем небольшой пример ниже:

Код:



Have written this inside summary tag which is inside details tag

Этот текст только под тегом детали

Эти текстовые данные записываются после завершения тега детали

Выход 1:

В приведенном выше выводе мы выделили стрелку, так как мы получаем наш вывод 2, как только мы ее расширим.

Выход 2:

Этот тег может не давать никакой разницы

13.

Этот тег определяет дату / время в таком формате, который пользователи могут легко понять. Но следует отметить, что этот тег может не дать нам измененный вывод во многих браузерах.

Код:

В настоящее время в 23:00 ночи.

Выход:

14.

Как видно из названия, этот тег предназначен для записи любого содержимого в поле. Этот тег должен иметь атрибут open для отображения диалогового окна после выполнения исходного кода. Найдите пример ниже:

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

Выход:

15.

Этот тег отображает ход выполнения определенной задачи в графическом представлении. У нас здесь должно быть максимальное число, для которого должен быть представлен прогресс. Этот тег в основном состоит из двух атрибутов. Макс и значение являются двумя атрибутами. Макс представляет общее количество, которое должно быть завершено, а Значение дает нам процент счета, который завершен по отношению к максимальному значению счета. Пример для этого ниже:

Код:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

Выход:

16.

Этот тег для измерения. Это может быть использовано и для пространства, занятого запросом, или для использования дискового пространства. Есть несколько атрибутов, которые должны использоваться с этим тегом. Атрибутами являются max, min и value. Основываясь на их использовании, мы определенно можем определить их назначение и использование.

Код:


EDCUBA


EDCUBA


EDCUBA

Использование метра метки


В квартире 6 этажей, я живу на 2 этаже:
2 из 6

Выход:

17.

Это тег, который был добавлен для добавления видеофайлов на нашу HTML-страницу. До тех пор, пока этот тег не был введен, разработчики использовали плагины для введения видеофайлов в содержимое страницы HTL. Есть несколько атрибутов, которые можно использовать вместе с тегом. Autoplay, Preload, Mute являются одними из них.

Код:


Нам просто нужен тег источника, чтобы указать источник, из которого нам нужно загрузить видеоконтент на нашу страницу.

18.

Этот тег предназначен для добавления аудиофайлов на нашу HTML-страницу. Использование и тег источника будут такими же, как у тега видео. В качестве упражнения попробуйте использовать все семантические элементы и создайте веб-страницу электронной версии HTML 5, чтобы учиться лучше и быстрее.

Вывод

В этой статье мы увидим много семантических элементов и их использование в HTML5. Здесь важно отметить, что многие из этих тегов поддерживаются версиями Internet Explorer более 9 и версиями Chrome более 3. Итак, продолжайте изучать и практиковаться, чтобы лучше понять использование тегов в HTML 5.

Рекомендуемые статьи

Это руководство по семантическим элементам HTML5. Здесь мы обсуждаем введение и различные семантические элементы в HTML5 вместе с его реализацией кода. Вы также можете посмотреть следующую статью, чтобы узнать больше -

  1. Топ 10 новых элементов HTML5
  2. HTML5 тэги
  3. HTML5 Web Workers
  4. Другой тип событий HTML

Категория:

Разработка программного обеспечения