Semantiskā HTML špikeru lapa

Ir pieejami simtiem semantisko tagu, kas palīdz aprakstīt jūsu HTML dokumentu nozīmi. Tālāk ir redzams špikeris ar dažiem visbiežāk izmantotajiem semantiskajiem tagiem, ko noteikti izmantosiet veidojot tīmekļa vietnes izmantojot HTML programmēšanas valodu.

Sadalīšanas tagi

Izmantojiet tālāk norādītos tagus, lai sakārtotu HTML dokumentu strukturētās sadaļās.

<header> – Satura sadaļas vai tīmekļa lapas galvene. Tīmekļa lapas galvenē bieži ir ietverts vietnes zīmols vai logotips.

<nav> – Sadaļas vai tīmekļa lapas navigācijas saites.

<footer> – Satura sadaļas vai tīmekļa lapas kājene. Tīmekļa lapā tas bieži satur sekundāras saites, autortiesību paziņojumu, konfidencialitātes politikas un sīkfailu politikas saites.

<main> – Norāda sadaļas vai tīmekļa lapas galveno saturu.

<aside> – Sekundāra satura kopa, kas nav nepieciešama, lai saprastu galveno saturu.

<article> – Neatkarīgs, autonoms satura bloks, piemēram, emuāra ziņa vai produkts.

<section> – Atsevišķa dokumenta sadaļa, ko bieži izmanto pamattekstā un raksta elementos.

<details> – Sakļauta satura sadaļa, kuru var izvērst, ja lietotājs vēlas to skatīt.

<summary> – Norāda <details> elementa kopsavilkumu vai parakstu.

<h1><h2><h3><h4><h5><h6> – Virsraksti tīmekļa lapā. <h1> apzīmē vissvarīgāko virsrakstu, bet <h6> norāda vismazāk svarīgo.

Satura tagi

<blockquote> – Izmanto, lai aprakstītu citātu.

<dd> – Izmanto, lai definētu aprakstu iepriekšējam <dt> elementam.

<dl> – Izmanto, lai definētu aprakstu sarakstu.

<dt> – Izmanto, lai aprakstītu terminus <dl> elementos.

<figcaption> – Definē fotoattēla attēla parakstu.

<figure> – Fotoattēlam piemēro marķējumu.

<hr> – Pievieno horizontālu līniju vecākajam elementam.

<li> – Izmanto, lai definētu vienumu sarakstā.

<menu> – Semantiska alternatīva tagam <ul>.

<ol> – Definē sakārtotu sarakstu.

<p> – Definē rindkopu.

<pre> – Izmanto, lai attēlotu iepriekš formatētu tekstu. Parasti tiek renderēts tīmekļa pārlūkprogrammā, izmantojot monospace fontu.

<ul> – Nesakārtots saraksts

Iekļautie tagi

<a> – Enkura saite uz citu HTML dokumentu.

<abr> – Norāda, ka saturošais teksts ir saīsinājums vai akronīms.

<b> – Satur tekstu treknrakstā. Ja lieto, lai norādītu uz svarīgumu, tā vietā izmantojiet <strong>.

<br> – Rindas pārtraukums. Pārvieto nākamo tekstu uz jaunu rindiņu.

<cite> – Definē radošā darba nosaukumu (piemēram, grāmata, dzejolis, dziesma, filma, glezna vai skulptūra). Teksts elementā <cite> parasti tiek atveidots slīprakstā.

<code> – Norāda, ka saturošais teksts ir datora koda bloks.

<data> – Norāda mašīnlasāmus datus.

<em> – Uzsver saturošo tekstu.

<i> – Saturošais teksts tiek parādīts slīprakstā. Izmanto, lai norādītu idiotisku tekstu vai tehniskus terminus.

<mark> – Saturošais teksts ir jāatzīmē vai jāizceļ.

<q> – Saturošais teksts ir īss citāts.

<s> – Parāda saturošo tekstu ar pārsvītrojumu vai līniju.

<samp> – Saturošais teksts ir paraugs.

<small> – Izmanto, lai attēlotu nelielu tekstu, piemēram, autortiesību un juridisko tekstu.

<span> – Vispārīgs elements satura grupēšanai CSS stilam.

<strong> – Parāda saturošo tekstu treknrakstā. Izmanto, lai norādītu uz svarīgumu.

<sub> – Saturošais teksts ir apakšindeksa teksts, kas tiek parādīts ar pazeminātu bāzes līniju.

<sup> – Saturošais teksts ir virsraksta teksts, kas tiek parādīts ar paaugstinātu bāzes līniju.

<time> – Semantiskais tags, ko izmanto, lai parādītu gan datumus, gan laikus.

<u> – Parāda saturošo tekstu ar nepārtrauktu pasvītrojumu.

<var> – Saturošais teksts ir matemātiskās izteiksmes mainīgais.

Iegultais saturs un multivides atzīmes

<audio> – Izmanto audio iegulšanai tīmekļa lapās.

<canvas> – Izmanto 2D un 3D grafikas renderēšanai tīmekļa lapās.

<embed> – Tiek izmantots kā saturošs elements ārējam saturam, ko nodrošina ārēja lietojumprogramma, piemēram, multivides atskaņotājs vai spraudņa lietojumprogramma.

<iframe> – Izmanto, lai iegultu ligzdotu tīmekļa lapu.

<img> – Iegulst attēlu tīmekļa lapā.

<objekts> – Līdzīgi kā <embed>, taču saturu nodrošina tīmekļa pārlūkprogrammas spraudnis.

<attēls> – Elements, kas satur vienu <img> elementu un vienu vai vairākus <source> elementus, lai piedāvātu alternatīvus attēlus dažādiem displejiem/ierīcēm.

<video> – Iegulst video tīmekļa lapā.

<source> – Norāda multivides resursus <picture>, <audio> un <video> elementiem.

<svg> – Izmanto, lai tīmekļa lapā definētu mērogojamu vektorgrafiku.

Tabulas atzīmes

<table> – Definē tabulas elementu tabulas datu attēlošanai tīmekļa lapā.

<thead> – Atspoguļo tabulas galvenes saturu. Parasti satur vienu <tr> elementu.

<tbody> – Atspoguļo tabulas galveno saturu. Satur vienu vai vairākus <tr>elementus.

<tfoot> – Apzīmē tabulas kājenes saturu. Parasti satur vienu <tr> elementu.

<tr> – Apzīmē rindu tabulā. Satur vienu vai vairākus <td> elementus, ja tos izmanto <tbody> vai <tfoot>. Lietojot <thead>, satur vienu vai vairākus <th> elementus.

<td> – Apzīmē šūnu tabulā. Satur šūnas teksta saturu.

<th> – Definē tabulas galvenes šūnu. Satur galvenes teksta saturu.

<caption> – Definē tabulas elementa parakstu.

<colgroup> – Definē vienas vai vairāku kolonnu semantisko grupu tabulas formatēšanai.

<col> – Definē tabulas semantisko kolonnu.

Vienkāršas semantiskas HTML lapas struktūra:

<!DOCTYPE html>
<html>


<head>
    <title>Mājaslapas nosaukums</title>
    <link rel="stylesheet" href="styles.css"> <!-- pievienots CSS stilu fails, ja tāds nepieciešams-->
</head>


<body>
    <header>
        <!--- Logo un galvenes informācija -->
        <img src="logo.png">
    </header>
    <nav>
        <!--- Navigācija - Izvēlne --->
        <ul>
            <li><a href="index.html">Mājas</a></li>
            <li><a href="location.html">Par mums</a></li>
            <li><a href="blog.html">Kontakti</a></li>
        </ul>
    </nav>
    <main>
        <!--- Galvenā informācija --->
        <h1>Blogs</h1>
        <article>
            <h2>Virsraksta apakšvirsraksts</h2>
            <p>Šeit attēlots paragrāfa raksts, izvērsts virsraksta un apakšvirsraksta apraksts ar iztirzājošu informāciju</p>
        </article>
        <article>
            <h2>Otrais apakšvirsraksts</h2>
            <p>Otrā apakšvirsraksta izvērsts apraksts.</p>
         </article>


    </main>
    <footer>
        <!--- Kājene un sociālie linki -->
        <p>Copyright kas.id.lv / Kas?Blogs!</p>
    </footer>
</body>


</html>