Një parim i rëndësishëm i lëvizjes së Standardeve Web që është përgjegjës për industrinë që kemi sot është ideja e përdorimit të elementeve HTML për atë që ata janë më tepër sesa mënyra se si ato mund të shfaqen në shfletues me parazgjedhje. Kjo njihet si përdorimi i HTML-së semantike.
Çka është HTML -ja semantike
HTML semantike ose markingu semantik është HTML që fut kuptimin në faqen e internetit dhe jo vetëm prezantimin. Për shembull, një etiketë
tregon se teksti i bashkëngjitur është një paragraf.
Kjo është edhe semantike dhe prezantuese, sepse njerëzit e dinë se çfarë paragrafësh janë dhe shfletuesit të dinë si t'i shfaqin ato.
Në anën e rrokullisjes të këtij ekuacioni, etiketat si dhe nuk janë semantikë, sepse ato përcaktojnë vetëm se si teksti duhet të duket (bold ose italik) dhe nuk ofrojnë ndonjë kuptim shtesë të markup.
Shembuj të etiketave HTML semantike përfshijnë etiketat header
përmes , , dhe . Ka shumë etiketa më shumë semantike të HTML që mund të përdoren kur ndërtoni një faqe interneti që përputhet me standardet.
Pse duhet të kujdeseni për semantikën
Dobia e të shkruarit të HTML-së semantike buron nga ajo që duhet të jetë qëllimi i çdo faqeje web-dëshira për të komunikuar. Duke shtuar etiketa semantike në dokumentin tuaj, ju jepni informacion shtesë në lidhje me atë dokument, i cili ndihmon në komunikim. Në mënyrë të veçantë, etiketat semantike i bëjnë të qartë shfletuesit se çfarë kuptimi ka një faqe dhe përmbajtja e saj.
Kjo qartësi komunikohet edhe me motorët e kërkimit, duke siguruar që faqet e duhura të dorëzohen për pyetjet e duhura.
HTML tags semantik japin informacion në lidhje me përmbajtjen e atyre tags që shkon përtej vetëm se si ata duken në një faqe. Teksti që është i mbyllur në tagun njihet menjëherë nga shfletuesi si një lloj gjuhe kodimi.
Në vend që të përpiqet të japë atë kod, shfletuesi e kupton se po e përdorni atë tekst si një shembull të kodit për qëllimet e një artikulli ose një udhezimi në internet të një lloji.
Përdorimi i etiketave semantike ju jep shumë grepa më shumë për dizajnimin e përmbajtjes suaj. Ndoshta sot preferoni që mostrat e kodit të shfaqen në stilin e parazgjedhur të shfletuesit, por nesër ju doni t'i telefononi ato me një ngjyrë gri të sfondit dhe më vonë dëshironi të përcaktoni familjen e saktë të fonteve ose fontin e fontit që do të përdorni për mostrat tuaja. Ju mund t'i bëni me lehtësi të gjitha këto gjëra duke përdorur shënimin semantik dhe aplikuar në mënyrë të zgjuar CSS.
Përdorni fjalët semantike në mënyrë korrekte
Kur doni të përdorni etiketa semantike për të përcjellë kuptimin dhe jo për qëllime prezantimi, duhet të jeni të kujdesshëm që të mos përdorni ato gabim thjesht për pronat e tyre të zakonshme të ekranit. Disa nga etiketat semantike më të keqpërdorura përfshijnë:
- blockquote - Disa njerëz përdorin tagun për tekstin indenting që nuk është citat. Kjo është për shkak se numrat e bllokuar janë të prera nga default. Nëse thjesht dëshironi të përfitoni nga fllucka, por teksti nuk është një blockquote, përdorni kufijtë CSS në vend.
- p - Disa redaktorë web përdorin
& nbsp; (një hapësirë pa thyerje që përmban një paragraf) për të shtuar hapësirë shtesë midis elementeve të faqes, në vend që të përcaktojnë paragrafët aktualë për tekstin e asaj faqeje. Ashtu si me shembullin e përmendur më lart, duhet të përdorni hapësirën e margjinës ose padding style për të shtuar hapësirë.
- ul - Ashtu si "blockquote", teksti i bashkëngjitur brenda një teksti të
tag që teksti në shumicën e shfletuesve. Ky është si HTML semantikisht i pasaktë dhe i pavlefshëm, pasi vetëm - tags janë të vlefshme brenda një tag
. Përsëri, përdorni marzhin ose stilin e mbushjes për të futur tekstin e indentit.
- h1-h6 - Etiketat kryesorë mund të përdoren për të bërë fontet më të mëdha dhe më të guximshme, por nëse teksti nuk është titull, nuk duhet të jetë brenda një etiketi të titullit. Përdorni vetitë CSS font-font dhe font-size nëse doni të ndryshoni madhësinë ose peshën e tekstit të caktuar në faqen tuaj.
Duke përdorur tags HTML që kanë kuptim, ju krijoni faqe që japin më shumë informacion se sa vetëm përreth gjithçka me
tags.
Cilësimet HTML janë semantikë?
Ndërsa pothuajse çdo tag HTML4 dhe të gjitha etiketat HTML5 kanë një kuptim semantik, disa etiketa janë kryesisht semantike në natyrë.
Për shembull, HTML5 ka ripërcaktuar kuptimin e etiketave dhe për të qenë semantik. Etiketa nuk përcjell rëndësi shtesë, por teksti që zakonisht jepet me shkronja të theksuara. Etiketa gjithashtu nuk përcjell rëndësi ose theks të veçantë, por më tepër përcakton tekstin që zakonisht jepet në italik.
HTML etiketime semantike
shkurtim akronim
Kuotim i gjatë përcaktim Adresa për autorin (at) e dokumentit citim Referenca e kodit Teksti teletype Ndarja logjike Kontejner i stilit gjenerik inline Tekst i fshirë Tekst i futur theks Theks i fortë
Titulli i nivelit të parë
Titulli i nivelit të dytë
Titulli i nivelit të tretë
Titulli i nivelit të katërt
Titulli i pestë i nivelit
Titulli i nivelit të gjashtë
Prishja tematike Tekst duhet të futet nga përdoruesi
Teksti i para-formatuar
Kuotim i shkurtër në linjë Prodhimi i mostrës Kaloje indeks i sipërm Teksti i ndryshueshëm ose përdoruesi i definuar
, dhe . Ka shumë etiketa më shumë semantike të HTML që mund të përdoren kur ndërtoni një faqe interneti që përputhet me standardet.
Pse duhet të kujdeseni për semantikën
Dobia e të shkruarit të HTML-së semantike buron nga ajo që duhet të jetë qëllimi i çdo faqeje web-dëshira për të komunikuar. Duke shtuar etiketa semantike në dokumentin tuaj, ju jepni informacion shtesë në lidhje me atë dokument, i cili ndihmon në komunikim. Në mënyrë të veçantë, etiketat semantike i bëjnë të qartë shfletuesit se çfarë kuptimi ka një faqe dhe përmbajtja e saj.
Kjo qartësi komunikohet edhe me motorët e kërkimit, duke siguruar që faqet e duhura të dorëzohen për pyetjet e duhura.
HTML tags semantik japin informacion në lidhje me përmbajtjen e atyre tags që shkon përtej vetëm se si ata duken në një faqe. Teksti që është i mbyllur në tagun njihet menjëherë nga shfletuesi si një lloj gjuhe kodimi.
Në vend që të përpiqet të japë atë kod, shfletuesi e kupton se po e përdorni atë tekst si një shembull të kodit për qëllimet e një artikulli ose një udhezimi në internet të një lloji.
Përdorimi i etiketave semantike ju jep shumë grepa më shumë për dizajnimin e përmbajtjes suaj. Ndoshta sot preferoni që mostrat e kodit të shfaqen në stilin e parazgjedhur të shfletuesit, por nesër ju doni t'i telefononi ato me një ngjyrë gri të sfondit dhe më vonë dëshironi të përcaktoni familjen e saktë të fonteve ose fontin e fontit që do të përdorni për mostrat tuaja. Ju mund t'i bëni me lehtësi të gjitha këto gjëra duke përdorur shënimin semantik dhe aplikuar në mënyrë të zgjuar CSS.
Përdorni fjalët semantike në mënyrë korrekte
Kur doni të përdorni etiketa semantike për të përcjellë kuptimin dhe jo për qëllime prezantimi, duhet të jeni të kujdesshëm që të mos përdorni ato gabim thjesht për pronat e tyre të zakonshme të ekranit. Disa nga etiketat semantike më të keqpërdorura përfshijnë:
- blockquote - Disa njerëz përdorin tagun për tekstin indenting që nuk është citat. Kjo është për shkak se numrat e bllokuar janë të prera nga default. Nëse thjesht dëshironi të përfitoni nga fllucka, por teksti nuk është një blockquote, përdorni kufijtë CSS në vend.
- p - Disa redaktorë web përdorin
& nbsp; (një hapësirë pa thyerje që përmban një paragraf) për të shtuar hapësirë shtesë midis elementeve të faqes, në vend që të përcaktojnë paragrafët aktualë për tekstin e asaj faqeje. Ashtu si me shembullin e përmendur më lart, duhet të përdorni hapësirën e margjinës ose padding style për të shtuar hapësirë.
- ul - Ashtu si "blockquote", teksti i bashkëngjitur brenda një teksti të
tag që teksti në shumicën e shfletuesve. Ky është si HTML semantikisht i pasaktë dhe i pavlefshëm, pasi vetëm - tags janë të vlefshme brenda një tag
. Përsëri, përdorni marzhin ose stilin e mbushjes për të futur tekstin e indentit.
- h1-h6 - Etiketat kryesorë mund të përdoren për të bërë fontet më të mëdha dhe më të guximshme, por nëse teksti nuk është titull, nuk duhet të jetë brenda një etiketi të titullit. Përdorni vetitë CSS font-font dhe font-size nëse doni të ndryshoni madhësinë ose peshën e tekstit të caktuar në faqen tuaj.
Duke përdorur tags HTML që kanë kuptim, ju krijoni faqe që japin më shumë informacion se sa vetëm përreth gjithçka me
tags.
Cilësimet HTML janë semantikë?
Ndërsa pothuajse çdo tag HTML4 dhe të gjitha etiketat HTML5 kanë një kuptim semantik, disa etiketa janë kryesisht semantike në natyrë.
Për shembull, HTML5 ka ripërcaktuar kuptimin e etiketave dhe për të qenë semantik. Etiketa nuk përcjell rëndësi shtesë, por teksti që zakonisht jepet me shkronja të theksuara. Etiketa gjithashtu nuk përcjell rëndësi ose theks të veçantë, por më tepër përcakton tekstin që zakonisht jepet në italik.
HTML etiketime semantike
shkurtim akronim
Kuotim i gjatë përcaktim Adresa për autorin (at) e dokumentit citim Referenca e kodit Teksti teletype Ndarja logjike Kontejner i stilit gjenerik inline Tekst i fshirë Tekst i futur theks Theks i fortë
Titulli i nivelit të parë
Titulli i nivelit të dytë
Titulli i nivelit të tretë
Titulli i nivelit të katërt
Titulli i pestë i nivelit
Titulli i nivelit të gjashtë
Prishja tematike Tekst duhet të futet nga përdoruesi
Teksti i para-formatuar
Kuotim i shkurtër në linjë Prodhimi i mostrës Kaloje indeks i sipërm Teksti i ndryshueshëm ose përdoruesi i definuar