Jums nereikia kiekvieną kartą naudoti div žymų. Naudokite šias semantines HTML žymas, kad svetainė būtų struktūriškesnė ir prieinamesnė.
Prieš įvesdami semantinį HTML, kūrėjai naudojo div, kad sutvarkytų turinį. Div elementai patys savaime neturi reikšmės. Jie tik suteikia būdą pritaikyti stilius ir tvarkyti turinį.
Žodis semantinis reiškia susiję su prasme. Semantiniai HTML elementai apibūdina jų turinio paskirtį. Jie suteikia prasmę kūrėjui, vartotojui, paieškos sistemoms ir pagalbinėms technologijoms. Čia yra populiarių semantinių HTML žymų, kurias galite naudoti kitame projekte, sąrašas.
Kas yra Divai?
HTML kalboje div (division) elementas yra bloko lygio konteineris. Naudodami div galite grupuoti arba padalinti HTML elementus į tinklalapio dalis. Sintaksė yra tokia, kaip parodyta žemiau:
<div>
div>
Semantinių HTML elementų naudojimo pranašumai, palyginti su Divs
HTML5 pristatė semantinius HTML elementus, kad būtų lengviau skaityti kodą. Semantiniai elementai suteikia žiniatinklio turiniui prasmę ir struktūrą.
Jie padaro jūsų kodą suprantamą kitiems kūrėjams. Jie taip pat padeda paieškos sistemoms lengviau rasti jūsų turinį ir pritraukti srautą į jūsų svetainę. Štai keletas semantinių elementų, kuriuos galite naudoti savo HTML ir CSS projektai.
1.
The žyma apibrėžia dokumento antraštės skyrių. Paprastai jame yra svetainės logotipas, naršymas ir puslapio pavadinimas. Tai skiltis, kuri rodoma tinklalapio viršuje. Galite tinkinti antraštę pagal savo poreikius. Sintaksė yra tokia:
<kūnas><antraštę>
<h1> Sveiki!h1>
<p>Aš esu antraštėp>
antraštę>
kūnas>
2.
The žymoje yra svetainės naršymo nuorodos. Tai gali būti meniu, turinys arba rodyklės. Paprastai jis dedamas viduje žyma. Sintaksė yra tokia:
<antraštę><nav>
<ul>
<li>Mano svetainės nuorodosli>
<li><ahref="#"> Namaia>li>
<li ><ahref="#"> Apie mus a>li>
ul>
nav>
<h1>Aukščiau yra mano svetainės naršymo dalis.h1>
antraštę>
Naršyklėje tai atrodys taip:
Galite naudoti CSS išdėstymo modelius, pvz CSS flexbox suderinti
3.
The žymoje yra pagrindinis tinklalapio turinys. Jis atskiria turinį nuo antraštės, šoninės juostos ir poraštės. Pagrindinis reiškia dominuojantį turinį skyrius.
<kūnas><antraštę>
<titulą> Svetainės faktai titulą>
antraštę>
<pagrindinis>
<p> Šioje svetainėje trumpai parodoma, kaip veikia pagrindinė žyma.p>
<p> Ji apima svetainės dalį naudingu turiniu.p>
pagrindinis>
<poraštė>
<h3> Tai poraštė h3>
poraštė>
kūnas>
Tai atrodo taip:
4.
Naudoti žyma, kad apibrėžtumėte atskiras dalis dokumente ar svetainėje. Pavyzdžiui, galite juos naudoti tinklaraščio įrašams, žurnalams ar produktų kortelėms struktūrizuoti. The elementas gali apimti kitus elementus, įskaitant kitus straipsnius, skyrius ir antraštes. Pridedami elementai turi būti susiję su straipsnio tema.
<straipsnis>
<h1>Svetimas už grožinę literatūrąh1><straipsnis>
<h3>Įvadash3>
<p>Šioje knygoje pasakojami įvykiai ir asmenys yra fiktyvūs.p>
straipsnis>
<straipsnis>
<h3>Pirmas skyriush3>
<p> Diena buvo šviesi, o saulė šypsojosi iš dangausp>
straipsnis>
straipsnis>
Atrodo taip:
5.
The žymoje yra su pagrindiniu turiniu susijęs turinys. Naudokite šią žymą norėdami sukurti šonines juostas citatoms, komentarams ar šūksniams. išryškina informaciją, kurios skaitytojas gali praleisti. Jis išsiskiria iš viso turinio.
html><html>
<stilius>
kūnas{
fono spalva:#abdbe3;
}
aside {
plotis: 30%;
paminkštinimas kairėje: 0,5rem;
paraštė-kairė: 1rem;
lankstus: kairėje;
langelis-šešėlis: įdėtas 5px 0 5px -5px žalias;
šrifto stilius: kursyvas;
spalva: raudona;
}
aside > p {
paraštė: 0,5rem;
stilius>
<kūnas>
<pagrindinis>
<h1> Weaver paukščiaih1>
<p>Ploceidae – mažų lervų šeima. Daugelis jų vadinami audėjais, audėjais, kikiliais ir vyskupais.p>
<šalin>
<p>Karalystė: Animalia
Kilmė: Chordatap>šalin>
<p>Naujausiose klasifikacijose Ploceidae yra kladas, neįtraukiami kai kurie paukščiai, kurie istoriškai buvo priskirti šeimai. Kai kurie žvirbliai, bet apima monotipinį Amblyospizinae pošeimį.p>
pagrindinis>
kūnas>
html>
6.
The elemente yra puslapio dalis be konkretaus semantinio elemento. Skiltys gali turėti antraštę, skirtą pristatyti turinį ir įtraukti kitus HTML elementus. reiškia tinklalapio komponentus, pvz., knygos ar tinklaraščio skyrius.
html><html>
<kūnas>
<h1>Biblijah1>
<skyrius>
<h2>Įvadash2>
<p>Biblija yra religinių šventraščių rinkinys, šventas krikščionybėje, judaizme, samaritizme. Biblija yra antologija – įvairių formų tekstų rinkinys – iš pradžių parašyta hebrajų, aramėjų ir koine graikų kalbomis.p>
skyrius>
<skyrius>
<h2>Pirmas skyrius: Pradžios knygah2>
<p>Pradžios knyga yra pirmoji hebrajų Biblijos ir krikščionių Senojo Testamento knyga. Hebrajiškas jo pavadinimas yra toks pat kaip ir pirmasis žodis „Bereshit“. Pradžios knyga yra pasakojimas apie pasaulio sukūrimą, ankstyvąją žmonijos istoriją, Izraelio protėvius ir žydų tautos kilmę.p>
skyrius>kūnas>
html>
Atrodo taip:
7.
The elementas prideda savarankiškas iliustracijas, pvz., vaizdus ar diagramas. Šios iliustracijos nurodo pagrindinio puslapio turinį. Paveikslai pateikiami su antraštėmis, nurodytais elementas. The paaiškina, apie ką vaizdas. The
html><html>
<kūnas>
<pagrindinis>
<skyrius>
<h1>Kompiuterio dalysh1>
<p> Yra keletas dalių, kurios kartu sudaro kompiuterįp>
<figūra>
<imgsrc="some-url.jpg"alt="Kompiuterio pelė">
<paveikslo antraštė>Tai kompiuterio pelėpaveikslo antraštė>
figūra>
skyrius>
pagrindinis>
kūnas>
html>
Galite eiti toliau ir mokytis kaip sukurti reaguojančius vaizdus HTML.
The HTML elementas apima informaciją tinklalapio apačioje. Tai yra priešingybė elementas. The gali būti informacijos apie puslapio savininką. Tai apima autorių teisių duomenis arba nuorodas į papildomą svetainės informaciją.
html><html>
<kūnas>
<pagrindinis>
<skyrius>
<h1>Kompiuterio dalysh1>
<figūra>
<imgsrc="some-url.jpg"alt="Kompiuterio pelė">
<paveikslo antraštė>Tai kompiuterio pelėpaveikslo antraštė>
figūra>
skyrius>
pagrindinis>
<poraštė>
<p> Pagaminta ComputerTech © 2023p>
poraštė>
kūnas>
html>
Aukščiau pateiktas kodas prideda poraštę prie Kompiuterio dalys puslapį, kaip parodyta toliau pateiktame paveikslėlyje.
Kodėl verta naudoti semantinius HTML elementus?
Semantinių HTML elementų naudojimas suteikia kodui kontekstą. Kiekvienas, pažvelgęs į kodą, gali lengvai jį suprasti. Žymos palengvina elementų stilių ir bendradarbiavimą projektuose.
Semantinį HTML galite naudoti su frontend bibliotekomis ir sistemomis. Dauguma šiuolaikinių interneto naršyklių teikia pirmenybę semantiniams HTML elementams, o ne tradiciniams elementams. Pradėkite naudoti semantinį HTML ir žiūrėkite, kad jūsų kodas atrodytų šiuolaikiškas, skaitomas ir reprezentatyvus.
