Не е необходимо да използвате етикети div всеки път. Използвайте тези семантични HTML тагове, за да направите сайта си по-структуриран и достъпен.
Преди въвеждането на семантичния HTML разработчиците използваха div за подреждане на съдържание. Div елементите нямат значение сами по себе си. Те само предоставят начин за прилагане на стилове и подреждане на съдържание.
Думата семантичен означава отнасящи се до смисъла. Семантичните HTML елементи описват целта на тяхното съдържание. Те осигуряват значение за програмиста, потребителя, търсачките и помощните технологии. Ето списък с популярни семантични HTML тагове, които можете да използвате в следващия си проект.
Какво представляват Divs?
В HTML елементът div (division) е контейнер на ниво блок. Използвате div, за да групирате или разделяте HTML елементи на секции на уеб страница. Синтаксисът е както е показано по-долу:
<див>
див>
Предимства от използването на семантични HTML елементи пред Divs
HTML5 въведе семантични HTML елементи, за да улесни четенето на кода. Семантичните елементи осигуряват смисъл и структура на уеб съдържанието.
Те правят вашия код разбираем за други разработчици. Те също така улесняват търсачките да намират вашето съдържание и привличат трафик към вашия сайт. Ето някои семантични елементи, които можете да използвате във вашия HTML и CSS проекти.
1.
The дефинира заглавната секция на документ. Обикновено съдържа логото на сайта, навигацията и заглавието на страницата. Това е секцията, която се появява в горната част на уеб страница. Можете да персонализирате заглавката според вашите нужди. Синтаксисът е както следва:
<тяло><заглавка>
<h1> Здрасти!h1>
<стр>Аз съм заглавкастр>
заглавка>
тяло>
2.
The съдържа навигационните връзки за уебсайта. Това могат да бъдат менюта, таблици със съдържание или индекси. Обикновено се поставя в рамките на етикет. Синтаксисът е както следва:
<заглавка><нав>
<ул>
<ли>Моите връзки към уебсайтали>
<ли><аhref="#"> У домаа>ли>
<ли ><аhref="#"> За нас а>ли>
ул>
нав>
<h1>Горното е част от навигацията на моя уебсайт.h1>
заглавка>
В браузъра ще изглежда така:
Можете да използвате CSS модели на оформление като CSS flexbox за подравняване на
3.
The съдържа основното съдържание на уеб страницата. Той разделя съдържанието от горния колонтитул, страничната лента и долния колонтитул. Основното представлява доминиращото съдържание на раздел.
<тяло><заглавка>
<заглавие> Факти за уебсайта заглавие>
заглавка>
<основен>
<стр> Този уебсайт е кратка демонстрация на това как работи основният маркер.стр>
<стр> Той обхваща частта от уебсайта с полезно съдържание.стр>
основен>
<долен колонтитул>
<h3> Това е долен колонтитул h3>
долен колонтитул>
тяло>
Изглежда така:
4.
Използвай етикет за дефиниране на самостоятелни секции в документ или уебсайт. Например, можете да ги използвате, за да структурирате публикации в блогове, списания или продуктови карти. The може да включва други елементи, включително други статии, раздели и заглавия. Приложените елементи трябва да са свързани с темата на статията.
<статия>
<h1>Странно от измислицатаh1><статия>
<h3>Въведениеh3>
<стр>Събитията и лицата, разказани в тази книга, са измислени.стр>
статия>
<статия>
<h3>Глава първаh3>
<стр> Денят беше светъл и слънцето се усмихна от небетостр>
статия>
статия>
Изглежда така:
5.
The съдържа съдържанието, свързано с основното съдържание. Използвайте този етикет, за да създадете странични ленти за цитати, коментари или възгласи. подчертава информация, която читателят може да пропусне. Отличава се от останалото съдържание.
html><html>
<стил>
тяло{
цвят на фона:#abdbe3;
}
настрана {
ширина: 30%;
padding-left: 0.5rem;
поле-ляво: 1 rem;
flex: ляво;
box-shadow: вмъкване 5px 0 5px -5px зелено;
стил на шрифта: курсив;
цвят: червен;
}
настрани > p {
марж: 0.5re;
стил>
<тяло>
<основен>
<h1> Weaver Birdsh1>
<стр>Ploceidae е семейство дребни врабчоподобни птици. Много от които се наричат тъкачи, тъкачи, тъкачи и епископи.стр>
<настрана>
<стр>Кралство: Анималия
Тип: Хордовистр>настрана>
<стр>В най-новите класификации Ploceidae е клада, изключвайки някои птици, които исторически са били поставяни в семейството. Някои от врабчетата, но включва монотипното подсемейство Amblyospizinae.стр>
основен>
тяло>
html>
6.
The съдържа част от страницата без специфичен семантичен елемент. Секциите може да имат заглавие, което да представя съдържанието и да включва други HTML елементи. представлява компонентите на уеб страница като глави в книга или блог.
html><html>
<тяло>
<h1>Библиятаh1>
<раздел>
<h2>Въведениеh2>
<стр>Библията е колекция от религиозни писания, свещени в християнството, юдаизма, самаритянството. Библията е антология – компилация от текстове с различни форми – първоначално написан на иврит, арамейски и гръцки койне.стр>
раздел>
<раздел>
<h2>Първа глава: Битиеh2>
<стр>Книгата Битие е първата книга от еврейската Библия и християнския Стар завет. Еврейското му име е същото като първата му дума, Берешит. Битие е разказ за сътворението на света, ранната история на човечеството и за предците на Израел и произхода на еврейския народстр>
раздел>тяло>
html>
Изглежда така:
7.
The елементи затварят самостоятелни илюстрации като изображения или диаграми. Тези илюстрации препращат към съдържанието на главната страница. Цифрите идват с надписи, определени от елемент. The обяснява какво представлява изображението. The
html><html>
<тяло>
<основен>
<раздел>
<h1>Части на компютърh1>
<стр> Има няколко части, които работят заедно, за да съставят компютърстр>
<фигура>
<imgsrc="някои-url.jpg"алт="компютърна мишка">
<figcaption>Това е компютърна мишкаfigcaption>
фигура>
раздел>
основен>
тяло>
html>
Можете да отидете по-далеч и да научите как да създавате отзивчиви изображения в HTML.
The HTML елемент обхваща информация в долната част на уеб страницата. Това е обратното на елемент. The може да съдържа информация за собственика на страницата. Това включва данни за авторски права или връзки към допълнителна информация на сайта.
html><html>
<тяло>
<основен>
<раздел>
<h1>Части на компютърh1>
<фигура>
<imgsrc="някои-url.jpg"алт="компютърна мишка">
<figcaption>Това е компютърна мишкаfigcaption>
фигура>
раздел>
основен>
<долен колонтитул>
<стр> Произведено от ComputerTech © 2023стр>
долен колонтитул>
тяло>
html>
Горният код добавя долен колонтитул към Части на компютър страница, както е показано на следното изображение.
Защо да използвате семантични HTML елементи?
Използването на семантични HTML елементи дава контекст на кода. Всеки, който погледне кода, може лесно да го разбере. Етикетите улесняват стилизирането на елементи и сътрудничеството по проекти.
Можете да използвате семантичен HTML с предни библиотеки и рамки. Повечето съвременни уеб браузъри предпочитат семантичните HTML елементи пред традиционните елементи. Започнете да използвате семантичен HTML и гледайте как вашият код изглежда модерен, четим и представителен.
