HTML5 | Семантика

Опубликовано: 6 Января, 2022

HTML-теги подразделяются на два типа.

Семантический
Несемантический

Семантические элементы: семантические элементы имеют значимые имена, которые говорят о типе контента. Например, верхний колонтитул, нижний колонтитул, таблица и т. Д. HTML5 вводит множество семантических элементов, упомянутых ниже, которые упрощают написание и понимание кода для разработчика, а также инструктируют браузер, как с ними обращаться.

статья
в стороне
Детали
фигка
фигура
нижний колонтитул
заголовок
главный
отметка
навигация
раздел

Статья: содержит независимый контент, не требующий какого-либо другого контекста.
Пример: сообщение в блоге, статья в газете и т. Д.

 <!DOCTYPE html>
 < html >
   < head >
      < title >Article Tag</ title >
      < style >
         h1 {
         Color:#006400;
         font-size:50px;
         Text-align:left;
         }
         p {
         font-size:25px;
         text-align:left;
         margin-top:-40px;
         }
      </ style >
   </ head >
   < body >
      < article >
         < h1 >GeeksforGeeks</ h1 >
         < p >A Computer Science Portal for Geeks</ p >
      </ article >
   </ body >
 </ html > 

Выход:

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

 <!DOCTYPE html>
 < html >
   < head >
      < title >Aside Tag</ title >
      < style >
         h4 {
         Color:#006400;
         font-size:50px;
         Text-align:none;
         margin-bottom:0px;
         }
         p {
         font-size:25px;
         text-align:none;
         margin-top:0px;
         }
      </ style >
   </ head >
   < body >
      < p >GeeksforGeeks is a Computer Science Portal</ p >
      < aside >
         < h4 >GeeksForGeeks</ h4 >
         < p >GeeksforGeeks is a computer Science platform
            where you can learn good programming.
         </ p >
      </ aside >
   </ body >
 </ html > 

Выход:

Подробности и сводка: «подробности» определяют дополнительные сведения, которые пользователь может скрыть или просмотреть. «Сводка» определяет видимый заголовок для элемента «подробности».

 <!DOCTYPE html>
 < html >
   < head >
      < title >Detail and summary Tag</ title >
      < style >
         .GFG {
         Color:#006400;
         font-size:50px;
         Text-align:none;
         margin-bottom:0px;
         }
         p {
         font-size:25px;
         text-align:none;
         margin-top:0px;
         }
      </ style >
   </ head >
   < body >
      < details >
         < summary class = "GFG" >GeeksforGeeks</ summary >
         < p >GeeksforGeeks is a Computer Science portal
            where you can learn good programming.
         </ p >
      </ details >
   </ body >
 </ html > 

Выход:

Figure и Figcaption: они используются для добавления изображения на веб-страницу с небольшим описанием.

 <!DOCTYPE html>
 < html >
   < head >
      < title >Figcaption Tag</ title >
      < style >
         h2 {
         Color:#006400;
         font-size:50px;
         Text-align:none;
         margin-bottom:0px;
         }
         p {
         font-size:25px;
         text-align:none;
         margin-top:0px;
         }
      </ style >
   </ head >
   < body >
      < h2 >GeeksforGeeks</ h2 >
      < figure >
         < img src = "4.jpg" alt = "gfg" style = "width:20%" >
         < figcaption >GeeksforGeeks Logo</ figcaption >
      </ figure >
   </ body >
 </ html > 

Выход:

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

 <!DOCTYPE html>
 < html >
   < head >
      < title >Header Tag</ title >
      < style >
         h1, h3 {
         Color:#006400;
         Text-align:left;
         margin-bottom:0px;
         }
         p {
         font-size:25px;
         text-align:left;
         margin-top:0px;
         }
      </ style >
   </ head >
   < body >
      < article >
         < header >
            < h1 >GeeksforGeeks</ h1 >
            < h3 >GeeksforGeeks</ h3 >
            < p >A computer Science portal</ p >
         </ header >
      </ article >
   </ body >
 </ html > 

Выход:

Нижний колонтитул: нижний колонтитул, расположенный в нижней части любой статьи или документа, он может содержать контактную информацию, информацию об авторских правах и т. Д. На странице может быть несколько нижних колонтитулов.

 <!DOCTYPE html>
 < html >
   < head >
      < title >footer Tag</ title >
      < style >
         p {
         font-size:25px;
         text-align:left;
         margin-top:0px;
         }
      </ style >
   </ head >
   < body >
      < footer >
         < p >Posted by: GeeksforGeeks</ p >
         < p >Contact: < a href = " http://www.geeksforgeeks.org " >
            geeksforgeeks.org</ a >.
         </ p >
      </ footer >
   </ body >
 </ html > 

Выход:

Main: определяет основное содержание документа. Содержимое внутри основного тега должно быть уникальным.

 <!DOCTYPE html>
 < html >
   < head >
      < title >main Tag</ title >
      < style >
         h1 {
         color:#006400;
         }
         p {
         font-size:25px;
         text-align:none;
         margin-top:0px;
         }
      </ style >
   </ head >
   < body >
      < main >
         < h1 >Important Residences</ h1 >
         < p >A few of them are Rashtrapati Bhavan, White House etc</ p >
         < article >
            < h1 >Rashtrapati Bhavan</ h1 >
            < p >It is the home of the President of India.</ p >
         </ article >
         < article >
            < h1 >The White House</ h1 >
            < p >It is the home of the President of United
               States of America.
            </ p >
         </ article >
      </ main >
   </ body >
 </ html > 

Выход:

Раздел: страницу можно разделить на разделы, такие как «Введение», «Контактная информация», «Подробности» и т. Д., И каждый из этих разделов может находиться в отдельном теге раздела.

 <!DOCTYPE html>
 < html >
   < head >
      < title >section Tag</ title >
      < style >
         h1 {
         color:#006400;
         }
         p {
         font-size:25px;
         text-align:none;
         margin-top:0px;
         }
      </ style >
   </ head >
   < body >
      < section >
         < h1 >Data Structure</ h1 >
         < p >Data Structure is a data organization and
            storage format that enables efficient access
            and modification.
         </ p >
      </ section >
      < section >
         < h1 >Algorithm</ h1 >
         < p >A process or set of rules to be followed
            in calculations or other problem-solving
            operations, especially by a computer.
         </ p >
      </ section >
   </ body >
 </ html > 

Выход:

nav: используется для определения набора навигационных ссылок в виде панели навигации или меню навигации.

 <!DOCTYPE html>
 < html >
   < head >
      < title >nav Tag</ title >
      < style >
         h1 {
         color:#006400;
         }
      </ style >
   </ head >
   < body >
      < h1 >Navigation Bar</ h1 >
      < nav >
         < a href = "/home/" >Home</ a > |
         < a href = "/about-us/" >About Us</ a > |
         < a href = "/data-structure/" >Data Structure</ a > |
         < a href = "/operating-system/" от a > "/operating-system/" >Operating System</ >
      </ nav >
   </ body >
 </ html > 

Выход:

Отметка: используется для выделения текста.

 <!DOCTYPE html>
 < html >
   < head >
      < title >mark Tag</ title >
      < style >
         h1 {
         color:#006400;
         }
      </ style >
   </ head >
   < body >
      < h1 >mark tag</ h1 >
      < p >GeeksforGeeks is a < mark >Computer Science</ mark > portal</ p >
   </ body >
 </ html > 

Выход:

Несемантические элементы: такие теги, как div, span, относятся к несемантическим категориям, так как их имена ничего не говорят о том, какой контент присутствует внутри них.

div Это элемент уровня блока или подразделение раздела. Используется как контейнер.

 <!DOCTYPE html>
 < html >
   < head >
      < title >div Tag</ title >
      < style >
         .GFG {
         color:#006400;
         }
      </ style >
   </ head >
   < body >
      < h1 >div Tag</ h1 >
      < div class = "GFG" >
         < h1 >GeeksforGeeks</ h1 >
         < p >GeeksforGeeks is a Computer Science portal</ p >
      </ div >
   </ body >
 </ html > 

Выход:

span: это встроенный элемент, который не начинается с новой строки и занимает только необходимую ширину. Для получения дополнительной информации используйте https://www.geeksforgeeks.org/span-tag-html/.

Вопросы о Web технологиях HTML Web технологии CSS

HTML5 | Семантика

РЕКОМЕНДУЕМЫЕ СТАТЬИ