Въведение в 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.

Този маркер съдържа допълнителните подробности, които потребителите могат да скрият всякакви подробности по своето желание. Чрез този маркер потребителите могат да отварят / затварят всяко съдържание, от което се нуждаят. Ако искаме този маркер да разкрие своите подробности в самото начало, тогава може да се използва атрибут „отворен“.

По-долу е малък пример за същото:

Код:

Това показва ли се?

изход:

Сега какъв ще бъде изходът, ако не използваме атрибута open?

Това показва ли се?

Резултат 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

Използване на метър метър

В апартамент на 6 етажа живея на 2-ри етаж:
2 от 6

изход:

17.

Това е маркер, който е въведен за добавяне на видео файлове към нашата HTML страница. До въвеждането на този маркер, разработчиците са използвали приставки за въвеждане на видео файлове в съдържанието на HTL страница. Има няколко атрибута, които могат да се използват заедно с маркера. Autoplay, Preload, Muted са някои от тях.

Код:


Просто ни трябва източник, за да дадем източника, откъдето трябва да качим видеосъдържанието на нашата страница.

18.

Този маркер е за добавяне на аудио файлове в нашата Html страница. Използването и изходният маркер ще бъдат същите като тези на видео маркера. Като упражнение, опитайте да използвате всички семантични елементи и създайте уеб страница с версия 5 на HTML, за да научите по-добре и по-бързо.

заключение

В тази статия трябва да видим много семантични елементи и тяхното използване в HTML5. Едно важно нещо, което трябва да се отбележи тук, е, че много от тези маркери се поддържат от версии на Internet Explorer по-големи от 9 и хромирани версии над 3. Така че, продължете да се обучавате и практикувате, за да постигнете по-добро разбиране на използването на таговете в HTML 5.

Препоръчителни статии

Това е ръководство за HTML5 семантичните елементи. Тук обсъждаме въвеждането и различните семантични елементи в HTML5, заедно с реализацията му на код. Можете също да разгледате следната статия, за да научите повече -

  1. Топ 10 нови HTML5 елемента
  2. HTML5 тагове
  3. HTML5 Уеб работници
  4. Различен тип HTML събития

Категория:

Разработване на софтуер