Не морате да користите див ознаке сваки пут. Користите ове семантичке ХТМЛ ознаке да бисте своју веб локацију учинили структуриранијом и приступачнијом.
Пре увођења семантичког ХТМЛ-а, програмери су користили дивове за распоређивање садржаја. Див елементи сами по себи немају значење. Они само пружају начин за примену стилова и уређивање садржаја.
Реч семантички значи који се односе на значење. Семантички ХТМЛ елементи описују сврху њиховог садржаја. Они дају значење програмеру, кориснику, претраживачима и помоћним технологијама. Ево листе популарних семантичких ХТМЛ ознака које можете користити у свом следећем пројекту.
Шта су Дивови?
У ХТМЛ-у, елемент див (подела) је контејнер на нивоу блока. Користите див да бисте груписали или поделили ХТМЛ елементе у одељке на веб страници. Синтакса је као што је приказано у наставку:
<див>
див>
Предности коришћења семантичких ХТМЛ елемената у односу на Див
ХТМЛ5 је увео семантичке ХТМЛ елементе да би олакшао читање кода. Семантички елементи дају значење и структуру веб садржају.
Они чине ваш код разумљивим другим програмерима. Они такође олакшавају претраживачима да пронађу ваш садржај и усмере саобраћај на вашу веб локацију. Ево неких семантичких елемената које можете користити у свом ХТМЛ и ЦСС пројекти.
1.
Тхе таг дефинише одељак заглавља на документу. Обично садржи лого сајта, навигацију и наслов странице. То је одељак који се појављује на врху веб странице. Можете прилагодити заглавље према вашим потребама. Синтакса је следећа:
<тело><заглавље>
<х1> Здраво!х1>
<стр>Ја сам главастр>
заглавље>
тело>
2.
Тхе таг садржи навигационе везе за веб локацију. То могу бити менији, табеле садржаја или индекси. Обично се поставља унутар таг. Синтакса је следећа:
<заглавље><нав>
<ул>
<ли>Везе за моје веб страницели>
<ли><ахреф="#"> Кућаа>ли>
<ли ><ахреф="#"> О нама а>ли>
ул>
нав>
<х1>Горе наведено је навигациони део моје веб странице.х1>
заглавље>
У претраживачу ће изгледати овако:
Можете користити ЦСС моделе изгледа као нпр ЦСС флекбок да поравнате
3.
Тхе таг садржи главни садржај веб странице. Одваја садржај од заглавља, бочне траке и подножја. Главни представља доминантни садржај одељак.
<тело><заглавље>
<наслов> Чињенице о веб локацији наслов>
заглавље>
<главни>
<стр> Ова веб локација је кратка демонстрација како функционише главна ознака.стр>
<стр> Она обухвата део веб странице корисним садржајем.стр>
главни>
<фоотер>
<х3> Ово је подножје х3>
фоотер>
тело>
Изгледа овако:
4.
Користити таг за дефинисање самосталних секција у документу или веб локацији. На пример, можете их користити за структурирање постова на блогу, часописа или картица производа. Тхе елемент може обухватити друге елементе укључујући друге чланке, одељке и наслове. Приложени елементи треба да се односе на тему чланка.
<чланак>
<х1>Чудније од фикцијех1><чланак>
<х3>Уводх3>
<стр>Догађаји и особе описане у овој књизи су измишљене.стр>
чланак>
<чланак>
<х3>Прво поглављех3>
<стр> Дан је био ведар и сунце се смејало са небастр>
чланак>
чланак>
Изгледа овако:
5.
Тхе таг садржи садржај који се односи на главни садржај. Користите ову ознаку да направите бочне траке за цитате, коментаре или узвике. истиче информације које читаоцу могу недостајати. Издваја се од остатка садржаја.
хтмл><хтмл>
<стил>
тело{
бацкгроунд-цолор:#абдбе3;
}
на страну {
ширина: 30%;
паддинг-лево: 0.5рем;
маргин-лефт: 1рем;
флек: лево;
бок-схадов: инсет 5пк 0 5пк -5пк зелено;
фонт-стиле: италиц;
боја црвена;
}
у страну > п {
маргина: 0.5рем;
стил>
<тело>
<главни>
<х1> Веавер Бирдсх1>
<стр>Плоцеидае је породица малих птица врбарица. Многи од њих се називају ткалци, ткачи, зебе и бискупи.стр>
<на страну>
<стр>Краљевство: Животиња
Тип: Цхордатастр>на страну>
<стр>У најновијим класификацијама, Плоцеидае је клада, искључује неке птице које су историјски биле смештене у породицу. Неки од врабаца, али укључује монотипску потпородицу Амблиоспизинае.стр>
главни>
тело>
хтмл>
6.
Тхе елемент садржи део странице без специфичног семантичког елемента. Одељци могу имати наслов који представља садржај и обухвата друге ХТМЛ елементе. представља компоненте веб странице као што су поглавља у књизи или блогу.
хтмл><хтмл>
<тело>
<х1>Библијах1>
<одељак>
<х2>Уводх2>
<стр>Библија је збирка религиозних списа светих у хришћанству, јудаизму, самаританству. Библија је антологија – компилација текстова најразличитијих облика – првобитно написано на хебрејском, арамејском и грчком језику коине.стр>
одељак>
<одељак>
<х2>Прво поглавље: Постањех2>
<стр>Књига Постања је прва књига хебрејске Библије и хришћанског Старог завета. Његово хебрејско име је исто као и његова прва реч, Берешит. Постање је извештај о стварању света, раној историји човечанства, израелским прецима и пореклу јеврејског народастр>
одељак>тело>
хтмл>
Изгледа овако:
7.
Тхе елементи затварају самосталне илустрације попут слика или дијаграма. Ове илустрације упућују на садржај на главној страници. Бројке долазе са натписима наведеним у елемент. Тхе објашњава о чему је слика. Тхе
хтмл><хтмл>
<тело>
<главни>
<одељак>
<х1>Делови рачунарах1>
<стр> Постоји неколико делова који заједно чине рачунарстр>
<фигура>
<имгсрц="неки-урл.јпг"алт="компјутерски миш">
<фигцаптион>Ово је компјутерски мишфигцаптион>
фигура>
одељак>
главни>
тело>
хтмл>
Можете ићи даље и научити како да креирате слике које одговарају у ХТМЛ-у.
Тхе ХТМЛ елемент обухвата информације у доњем делу веб странице. То је супротно од елемент. Тхе може садржати информације о власнику странице. Ово укључује податке о ауторским правима или везе ка додатним информацијама на сајту.
хтмл><хтмл>
<тело>
<главни>
<одељак>
<х1>Делови рачунарах1>
<фигура>
<имгсрц="неки-урл.јпг"алт="компјутерски миш">
<фигцаптион>Ово је компјутерски мишфигцаптион>
фигура>
одељак>
главни>
<фоотер>
<стр> Произвођач ЦомпутерТецх © 2023стр>
фоотер>
тело>
хтмл>
Горњи код додаје подножје у Делови рачунара страницу као што је приказано на следећој слици.
Зашто користити семантичке ХТМЛ елементе?
Коришћење семантичких ХТМЛ елемената даје контекст коду. Свако ко гледа у код могао би га лако разумети. Ознаке олакшавају стилизовање елемената и сарадњу на пројектима.
Можете користити семантички ХТМЛ са фронтенд библиотекама и оквирима. Већина модерних веб претраживача преферира семантичке ХТМЛ елементе у односу на традиционалне елементе. Почните да користите семантички ХТМЛ и гледајте како ваш код изгледа модерно, читљиво и презентабилно.
