Mitu võib lehel olla?

Täpselt üks. HTML5 spetsifikatsioon lubab tehniliselt mitut , kui need on eraldatud ja vahel, kuid otsingumootorid töötavad endiselt kõige paremini üheainsa peamise pealkirjaga. Pane üks lehe kohta, sa ei saa eksida.

🔖 HTML-sildid algajatele: süntaks, rühmad, mõju SEO-le

Q: Kuidas erineb paarismärgend üksikmärgendist?

Paarismärgend ümbritseb sisu ja nõuab sulgemist: текст . Üksikmärgend lisab elemendi ilma sisuta: img, br, input. HTML5-s on sulgev kaldkriips ( ) valikuline, kuid lubatud. Reegel on lihtne: kui märgendite vahel on sisu, on märgend paaris; kui ei ole, on see üksik.

Q: Kuidas erineb -st ja -st?

ja on puhtalt visuaalsed: rasvane ja kursiiv. ja on semantilised: „see on oluline" ja „rõhk sellel". Otsingumootor ja ekraanilugeja arvestavad semantilisi märgendeid lehe analüüsimisel, samas kui visuaalseid ignoreeritakse. Kui rõhutad tähendust, kasuta ja ; kui puhtalt kujunduse jaoks, kasuta ja .

Q: Millised märgendid on SEO jaoks kõige olulisemad?

Viis kriitilist: (pealkiri otsingutulemustes), (kirjeldus), - (struktuur ja märksõnad), (sisemine ja välimine linkimine), (pildiotsing ja täiendav kontekst). Kui need viis on hästi tehtud, on tehnilise SEO vundament juba rajatud.

Iga veebileht, mille brauseris avad, näeb sisemuses välja nagu pidev tekstivoog. Kuid brauser muudab selle kuidagi pealkirjadeks, lõikudeks, piltideks, nuppudeks ja vormideks. Selle teisenduse saladus peitub HTML-märgendites.

Algajad kohtlevad märgendeid sageli nagu võlusõnu: kopeeri, kleebi, toimib. Aga nende loogikat mõistmata muutub iga muudatus oletamiseks. Üks puuduv sulgev märgend ja kujundus laguneb, samal ajal kui vorm lõpetab andmete saatmise.

Vaatame, kuidas HTML-märgendid sisemiselt töötavad, millised märgendirühmad on olemas ja miks need on otsingumootoritele optimeerimise jaoks kriitilise tähtsusega. Ilma uduta, koos näidete ja praktikale keskendumisega.

💡 Kiire ülevaade:

Märgend koosneb nurgelistes sulgudes olevast nimest ja valikulistest atribuutidest: brauser loeb neid ja otsustab, kuidas sisu kuvada
Paarismärgendid ümbritsevad sisu (avav + sulgev), üksikmärgendid lisavad lehele elemendi (pilt, reavahetus, metaandmed)
HTML5 semantilised märgendid, header, nav, main, article, section ja footer, kirjeldavad plokkide tähendust, mitte ainult nende välimust, mis on ligipääsetavuse ja SEO alus
Otsingumootorid analüüsivad pealkirjamärgendeid (h1-h6), lingimärgendeid (a), pildimärgendeid (img koos alt-iga) ja metamärgendeid, et mõista lehe struktuuri ja järjestada seda märksõnade järgi
Märgendite korrektne pesastamine on kriitiline: brauserid andestavad vigu, kuid valiidne HTML tagab korrektse kuvamise kõigis seadmetes

Mis on HTML-märgendid ja miks neid vaja on

HTML-märgend on märgenduselement, mis on ümbritsetud nurgeliste sulgudega < ja >. Brauser ei näita sulgusid endid kasutajale: see loeb märgendi nime ja otsustab, mida sisuga teha.

Võtame lihtsa näite: <p>Это абзац.</p>. Brauser näeb avavat <p>, saab aru „algas lõik", kuvab teksti ja jõuab sulgeva </p>-ni, lõik on lõppenud. Kõik nende vahel on lõigu sisu.

Märgendid lahendavad korraga kolme ülesannet. Esiteks kirjeldavad need dokumendi struktuuri: kus on pealkiri, kus navigatsioon, kus põhitekst. Teiseks juhivad need kuvamist: rasvane kiri, kursiiv, reavahetus. Kolmandaks põimivad need väliseid ressursse: pilte, videoid, skripte ja stiililehti.

HTML-märgendi anatoomia

Iga märgend koosneb kolmest osast: nimest, atribuutidest ja paarismärgendite puhul sisust avava ja sulgeva elemendi vahel.

Märgendi nimi kirjutatakse ladina tähtedega ja määrab selle funktsiooni: p lõigu jaoks, h1 pealkirja jaoks, a lingi jaoks. Tähesuurus ei loe (<P> ja <p> on samad), kuid standard soovitab väiketähti.

Atribuudid täpsustavad märgendi käitumist. Võtame <a href="https://example.com">: href atribuut ütleb brauserile, kuhu link viib. Ja <img src="photo.jpg" alt="Описание фото"> puhul määrab src atribuut failitee, samas kui alt pakub tekstilist alternatiivi. Atribuutide väärtused on jutumärkides ja atribuudid ise on eraldatud tühikutega.

Kõige olulisem reegel: paarismärgendid suletakse alati. Avasid <div>, sulge see </div>-ga. Üksikmärgendid: img, br, input, meta, link, hr, ei vaja sulgevat paari. Ja pesastamise järjekord: <p><strong>текст</strong></p> on õige, <p><strong>текст</p></strong> on vale (ristatud).

Peamised HTML-märgendite rühmad

HTML5 spetsifikatsioon sisaldab paljusid erinevaid märgendeid, kuid praktiliseks tööks piisab peamiste rühmade tundmisest. Need katavad 95% frontend-arendaja ülesannetest.

Dokumendi struktuuri märgendid

Iga HTML-leht algab skeletiga:

<html>, juurelement, ümbritseb kogu dokumenti
<head>, teenindussektsioon: kaardi pealkiri, metamärgendid, stiilide ja skriptide linkimine
<body>, lehe nähtav sisu
<title>, tekst brauseri kaardil (indekseeritakse otsingumootorite poolt)
<meta>, kodeering, lehe kirjeldus, viewport mobiilile

Kasutaja ei näe neid märgendeid otse, kuid ilma nendeta leht ei tööta: brauser ei saa kodeeringust aru, otsingumootor ei loe kirjeldust ja mobiilne kujundus laguneb.

HTML5 semantilised märgendid

Enne HTML5 kujundasid arendajad kõike <div>-ide ja klassidega. Otsingumootor nägi lehte kui pidevat <div>-ide voogu, kus menüü, kus artikkel, kus jalus, oli ebaselge. HTML5 lahendas selle semantiliste märgenditega:

<header>, saidi või sektsiooni päis (logo, menüü, otsing)
<nav>, navigatsiooniplokk (peamenüü, leivapururada)
<main>, lehe unikaalne sisu (ainult üks dokumendi kohta)
<article>, iseseisev sisuüksus (postitus, tootekaart, kommentaar)
<section>, temaatiline sisurühm oma pealkirjaga
<aside>, külgriba või täiendav sisu
<footer>, jalus: kontaktid, autoriõigus, saidikaart

Semantiline märgendus ei ole moe austamine. Ekraanilugejad (programmid pimedatele kasutajatele) toetuvad just <nav>-ile ja <main>-ile, jättes kordused vahele. Ja otsingumootorid ammutavad semantilistest plokkidest peamisi järjestussignaale.

Tekstisisu märgendid

HTML-i pealkirjade ja lõikude märgistuse näide

Põhikomplekt tekstiga töötamiseks:

Alates <h1> kuni <h6>: kuus pealkirjataset, peamisest alluvateni. Lehel täpselt üks <h1>, ülejäänud moodustavad hierarhia nagu raamatu sisukord
<p>, lõik, peamine tekstikonteiner
<strong> ja <em>, semantiline rõhutus: oluline ja rõhutatud (mitte lihtsalt rasvane ja kursiiv)
<blockquote>, tsitaat koos allikaga, mis on määratud cite atribuudi kaudu
<pre> ja <code>, eelvormindatud tekst ja koodifragment

Eraldi seisab <span>, reasisene konteiner ilma olemusliku tähenduseta. Seda kasutatakse sihipäraseks stiili rakendamiseks tekstifragmendile lõigu sees.

Lingi- ja meediamärgendid

<a href="URL">анкор</a>, kõige võimsam märgend internetis. Just lingid ühendavad lehed ühtseks veebiks. Atribuut target="_blank" avab lingi uuel kaardil, rel="nofollow" ütleb otsingumootorile, et see ei annaks kaalu edasi sihtlehele.

Piltide jaoks, <img src="путь" alt="описание">. Atribuut alt on kriitiline: ekraanilugejad ja otsingumootorid loevad seda. Ilma alt-ita pilti nende jaoks lihtsalt ei eksisteeri. Tehniliselt võib src viidata mis tahes avalikule URL-ile, kuid parem on salvestada pilte lokaalselt, mis on kiirem ja usaldusväärsem.

<video> ja <audio> põimivad meediat koos omamaiste juhtelementidega. Ja <figure> koos <figcaption>-iga rühmitab pildi koos allkirjaga, nii et otsingumootor mõistab, et need on seotud paar.

Loendi- ja tabelimärgendid

Loendeid on kolme tüüpi: <ul> (järjestamata), <ol> (järjestatud) ja <dl> (definitsiooniloend <dt>-termini ja <dd>-kirjelduse paaridega).

Tabelid ehitatakse üles kaskaadina: <table> → <tr> (rida) → <th> (veeru päis) või <td> (andmeväli). <caption> annab pealkirja kogu tabelile, <thead>/<tbody>/<tfoot> rühmitavad ridu loogiliselt. Ja jah, tabeleid kasutatakse endiselt andmete jaoks, ärge kujundage neid div-idega.

Vormimärgendid

<form> kogub sisestusväljad ja saadab need serverisse GET või POST meetodil. Vormi sees töötavad järgmised:

<input>, universaalne väli (tekst, parool, e-post, number, kuupäev, fail, tüüp määratakse type atribuudiga)
<textarea>, mitmerealine tekst
<select> koos <option>-iga, ripploend
<button>, saatmis- või lähtestamisnupp
<label>, tekstisilt, mis on seotud väljaga for atribuudi kaudu

Paar <label for="email"> koos <input id="email">-iga on ligipääsetavuse jaoks kohustuslik: sildile klõpsamine viib fookuse väljale.

Kuidas HTML-märgendid mõjutavad SEO-d

Otsingurobotid ei näe lehte silmadega. Nad loevad lähtekoodi ja märgendid saavad nende ainsaks koordinaatsüsteemiks.

Pealkirjamärgendid (h1-h6) moodustavad semantilise skeleti. Otsingumootor mõistab hierarhiat: <h1> määrab lehe peateema, <h2> toob esile peamised alateemad, <h3> avab detailid. Mida täpsemalt pealkirjad sisu kajastavad ja märksõnu sisaldavad, seda suurem on järjestumise tõenäosus.

<title> märgend (<head> sees) on see, mida kasutaja näeb otsingutulemustes. See ei ole h1, kuigi need sageli tähenduselt kattuvad. Hästi koostatud <title> sisaldab märksõna algusele lähemal ja on kirjutatud loomulikus keeles, klikitav pealkiri toob samadel positsioonidel rohkem klikke.

<meta name="description"> märgend moodustab otsingutulemustes pealkirja all oleva kirjelduse. See ei mõjuta otseselt järjestust, kuid hästi kirjutatud kirjeldus suurendab CTR-i ja käitumuslikud tegurid hakkavad seejärel positsiooni heaks tööle.

<a> märgend koos href atribuudiga on sisemise linkimise alus. Sisemised lingid jaotavad kaalu saidi lehtede vahel, välised annavad autoriteeti edasi. Lingi ankur (tekst <a> ja </a> vahel) vihjab otsingumootorile, millest sihtleht räägib.

Piltide alt atribuut on veel üks märksõnade allikas. Ilma alt-ita pildid ei osale pildiotsingus ega anna otsingumootorile lehe kohta täiendavat konteksti.

HTML5 semantilised märgendid aitavad robotil eraldada sisu navigatsioonist ja reklaamist. <main> ja <article> saavad indekseerimisel prioriteedi, samas kui <nav> ja <aside> mitte. See säästab roomamise eelarvet.

Video: HTML-märgendid nullist

Et teooriat praktikaga kinnistada, vaata seda ingliskeelset õppetundi, see demonstreerib visuaalselt, kuidas brauser HTML-märgendeid reaalajas töötleb:

⁉️🤔 Korduma kippuvad küsimused

Kuidas erineb paarismärgend üksikmärgendist?

Paarismärgend ümbritseb sisu ja nõuab sulgemist: <p>текст</p>. Üksikmärgend lisab elemendi ilma sisuta: img, br, input. HTML5-s on sulgev kaldkriips (<br />) valikuline, kuid lubatud. Reegel on lihtne: kui märgendite vahel on sisu, on märgend paaris; kui ei ole, on see üksik.

Mitu <h1> võib lehel olla?

Täpselt üks. HTML5 spetsifikatsioon lubab tehniliselt mitut <h1>, kui need on eraldatud <article> ja <section> vahel, kuid otsingumootorid töötavad endiselt kõige paremini üheainsa peamise pealkirjaga. Pane üks <h1> lehe kohta, sa ei saa eksida.

Mis juhtub, kui sa ei sulge märgendit?

Brauser püüab „arvata", kus sa kavatsesid selle sulgeda, ja ehitab DOM-puu ise. Kuid erinevad brauserid arvavad erinevalt: Chrome'is võib leht tunduda normaalne, samas kui Safaris või ekraanilugejas laguneb see koost. Seetõttu pole valiidne HTML koos korrektse märgendite sulgemisega pedantsus, vaid kindlustus üllatuste vastu.

Kuidas erineb <b> <strong>-st ja <i> <em>-st?

<b> ja <i> on puhtalt visuaalsed: rasvane ja kursiiv. <strong> ja <em> on semantilised: „see on oluline" ja „rõhk sellel". Otsingumootor ja ekraanilugeja arvestavad semantilisi märgendeid lehe analüüsimisel, samas kui visuaalseid ignoreeritakse. Kui rõhutad tähendust, kasuta <strong> ja <em>; kui puhtalt kujunduse jaoks, kasuta <b> ja <i>.

Kas alt on kohustuslik kirjutada kõikidele piltidele?

Tähenduslike piltide jaoks on see kohustuslik: see on nii ligipääsetavus kui ka SEO. Dekoratiivsete puhul (taustamuster, eraldaja) kasuta tühja alt="", et ekraanilugeja need vahele jätaks. Pilt ilma alt atribuudita üldse on jäme viga: HTML-validaator märgib selle ära.

Millised märgendid on SEO jaoks kõige olulisemad?

Viis kriitilist: <title> (pealkiri otsingutulemustes), <meta name="description"> (kirjeldus), <h1>-<h6> (struktuur ja märksõnad), <a> (sisemine ja välimine linkimine), <img alt="..."> (pildiotsing ja täiendav kontekst). Kui need viis on hästi tehtud, on tehnilise SEO vundament juba rajatud.

Mida HTML-märgendite kohta meeles pidada

HTML-märgendid ei ole maagia ega süntaks valitutele. See on reeglite süsteem, mis on arusaadav nii inimestele kui ka masinatele. Brauser muudab märgendid visuaalseks leheks, otsingumootor järjestussignaalideks, ekraanilugeja hääleks pimedale kasutajale. Sama märgendus teenindab kolme täiesti erinevat liidest.

Peamine, mida kaasa võtta: sulge paarismärgendid, säilita korrektne pesastamine, kasuta HTML5 semantilisi märgendeid anonüümsete <div>-ide asemel ja anna alati alt tähenduslikele piltidele. Need neli harjumust alguses säästavad hiljem tunde silumist.

Kui materjal oli kasulik, salvesta see järjehoidjatesse, tuled tagasi, kui on vaja enne kujundustööd süntaksit värskendada.

Kõik WordPressist, veebiarendusest — ja mitte ainult

🔖 Mis HTML-sildid on ja kuidas need töötavad