Nem kell minden alkalommal div címkéket használnod. Használja ezeket a szemantikus HTML-címkéket, hogy webhelyét strukturáltabbá és hozzáférhetőbbé tegye.
A szemantikus HTML bevezetése előtt a fejlesztők diveket használtak a tartalom elrendezésére. A Div elemeknek önmagukban nincs jelentésük. Csak stílusok alkalmazására és tartalom elrendezésére adnak módot.
A szemantikus szó jelentése jelentéssel kapcsolatos. A szemantikus HTML-elemek tartalmuk célját írják le. Értelmet adnak a fejlesztőnek, a felhasználónak, a keresőmotoroknak és a kisegítő technológiáknak. Itt található a népszerű szemantikus HTML-címkék listája, amelyeket a következő projektjéhez használhat.
Mik azok a Divok?
A HTML-ben a div (division) elem egy blokk szintű tároló. A div karakterrel csoportosíthatja vagy oszthatja szakaszokra a HTML-elemeket egy weboldalon. A szintaxis a következő:
<div>
div>
A szemantikus HTML-elemek használatának előnyei a Div-ekkel szemben
A HTML5 szemantikus HTML-elemeket vezetett be, hogy megkönnyítse a kódolvasást. A szemantikai elemek jelentést és szerkezetet adnak a webtartalomnak.
Érthetővé teszik a kódot a többi fejlesztő számára. Ezenkívül megkönnyítik a keresőmotorok számára, hogy megtalálják az Ön tartalmát, és forgalmat irányítsanak webhelyére. Íme néhány szemantikai elem, amelyet felhasználhat HTML és CSS projektek.
1.
A címke határozza meg a fejléc szakaszt a dokumentumon. Általában tartalmazza a webhely logóját, a navigációt és az oldal címét. Ez az a rész, amely a weboldal tetején jelenik meg. A fejlécet igény szerint testreszabhatja. A szintaxis a következő:
<test><fejléc>
<h1> Szia!h1>
<p>fejléc vagyokp>
fejléc>
test>
2.
A címke tartalmazza a webhely navigációs hivatkozásait. Ezek lehetnek menük, tartalomjegyzékek vagy indexek. Általában a címke. A szintaxis a következő:
<fejléc><nav>
<ul>
<li>Weboldalaim linkjeili>
<li><ahref="#"> itthona>li>
<li ><ahref="#"> Rólunk a>li>
ul>
nav>
<h1>A fenti a weboldalam navigációs része.h1>
fejléc>
A böngészőben így fog kinézni:
Használhat CSS elrendezési modelleket, mint pl CSS flexbox igazítani a
3.
A címke tartalmazza a weboldal fő tartalmát. Elválasztja a tartalmat a fejléctől, az oldalsávtól és a lábléctől. A fő képviseli a domináns tartalmát szakasz.
<test><fejléc>
<cím> A weboldal tényei cím>
fejléc>
<fő->
<p> Ez a webhely egy rövid bemutató a fő címke működéséről.p>
<p> A weboldal részét hasznos tartalommal zárja körbe.p>
fő->
<lábléc>
<h3> Ez egy lábléc h3>
lábléc>
test>
Így néz ki:
4.
Használja a címke önálló szakaszok meghatározásához egy dokumentumban vagy webhelyen. Használhatja őket például blogbejegyzések, magazinok vagy termékkártyák felépítésére. A elem más elemeket is tartalmazhat, beleértve az egyéb cikkeket, szakaszokat és címsorokat. A mellékelt elemeknek kapcsolódniuk kell a cikk témájához.
<cikk>
<h1>Különösebb, mint a fikcióh1><cikk>
<h3>Bevezetésh3>
<p>A könyvben elbeszélt események és személyek fiktívek.p>
cikk>
<cikk>
<h3>Első fejezeth3>
<p> A nap fényes volt, és a nap mosolygott az égrőlp>
cikk>
cikk>
Így néz ki:
5.
A címke a fő tartalomhoz kapcsolódó tartalmat tartalmazza. Ezzel a címkével oldalsávokat hozhat létre idézetek, megjegyzések vagy felkiáltások számára. olyan információkat emel ki, amelyeket az olvasó esetleg figyelmen kívül hagy. Ez kiemelkedik a tartalom többi részéből.
html><html>
<stílus>
test{
background-color:#abdbe3;
}
félre {
szélesség: 30%;
padding-bal: 0,5rem;
margó-bal: 1rem;
flex: bal;
box-shadow: beszúrt 5px 0 5px -5px zöld;
betűstílus: dőlt;
piros szín;
}
félre > p {
margó: 0,5rem;
stílus>
<test>
<fő->
<h1> Takács madarakh1>
<p>A Ploceidae kis verébmadarak családja. Sokukat takácsoknak, takácsmadaraknak, takácspintyeknek és püspököknek hívják.p>
<félre>
<p>Királyság: Animalia
Törzs: Chordatap>félre>
<p>A legfrissebb besorolásokban a Ploceidae egy klád, amely kizár néhány olyan madarat, amelyeket történelmileg a családba helyeztek. Néhány vereb, de magában foglalja az Amblyospizinae monotípusos alcsaládját.p>
fő->
test>
html>
6.
A elem tartalmazza az oldal egy részét, amelynek nincs konkrét szemantikai eleme. A szakaszok tartalmazhatnak egy címsort a tartalom bemutatására és más HTML elemek bezárására. egy weboldal összetevőit képviseli, például egy könyv vagy blog fejezeteit.
html><html>
<test>
<h1>A Bibliah1>
<szakasz>
<h2>Bevezetésh2>
<p>A Biblia a kereszténységben, a judaizmusban és a szamaritánusságban szent vallási írások gyűjteménye. A Biblia egy antológia – változatos formájú szövegek összeállítása – eredetileg héberül, arámiul és koine görögül írták.p>
szakasz>
<szakasz>
<h2>Első fejezet: Genezish2>
<p>A Genezis könyve a héber Biblia és a keresztény Ószövetség első könyve. Héber neve megegyezik az első szavával, a Beresit. A Genezis a világ teremtéséről, az emberiség korai történetéről, valamint Izrael őseiről és a zsidó nép eredetéről számol be.p>
szakasz>test>
html>
Így néz ki:
7.
A az elemeket magában foglaló illusztrációk, például képek vagy diagramok. Ezek az illusztrációk a főoldal tartalmára hivatkoznak. Az ábrákhoz a következő feliratok tartoznak elem. A elmagyarázza, miről szól a kép. A
html><html>
<test>
<fő->
<szakasz>
<h1>A számítógép részeih1>
<p> Számos részből áll, amelyek együtt alkotják a számítógépetp>
<ábra>
<imgsrc="some-url.jpg"alt="számítógépes egér">
<képaláírás>Ez egy számítógépes egérképaláírás>
ábra>
szakasz>
fő->
test>
html>
Mehetsz tovább és tanulhatsz hogyan készítsünk reszponzív képeket HTML-ben.
A A HTML elem a weboldal alsó részén tartalmaz információkat. Ez ellentéte a elem. A információkat tartalmazhat az oldal tulajdonosáról. Ide tartoznak a szerzői jogi adatok vagy a webhely további információira mutató hivatkozások.
html><html>
<test>
<fő->
<szakasz>
<h1>A számítógép részeih1>
<ábra>
<imgsrc="some-url.jpg"alt="számítógépes egér">
<képaláírás>Ez egy számítógépes egérképaláírás>
ábra>
szakasz>
fő->
<lábléc>
<p> Gyártó: ComputerTech © 2023p>
lábléc>
test>
html>
A fenti kód láblécet ad hozzá a A számítógép részei oldalt a következő képen látható módon.
Miért használjunk szemantikus HTML elemeket?
A szemantikus HTML elemek használata kontextust ad a kódnak. Aki megnézi a kódot, könnyen megértheti. A címkék megkönnyítik az elemek stílusát és a projekteken való együttműködést.
A szemantikus HTML-t frontend könyvtárakkal és keretrendszerekkel használhatja. A legtöbb modern webböngésző a szemantikus HTML elemeket részesíti előnyben a hagyományos elemekkel szemben. Kezdje el használni a szemantikus HTML-t, és nézze meg, hogy kódja modernnek, olvashatónak és reprezentatívnak tűnik.
