Carte de referință pentru etichete și atribute HTML cu exemple. Ce sunt etichetele și atributele HTML, validator W3C. Structura și regulile de scriere a etichetelor. Ce sunt etichetele HTML

HTML este un limbaj de marcare hipertext. Se bazează pe așa-numitele etichete. Etichetele sunt niște elemente wrapper care specifică formatul și proprietățile elementelor paginii web. Am compilat o referință actualizată a etichetelor HTML pentru dvs. pe o singură pagină.

Există mai mult de o sută de elemente de marcare în total. Fiecare are un număr de atribute și propria sa sintaxă. Referința pentru etichete HTML vă va ajuta să găsiți rapid elementul de care aveți nevoie.

Lista etichetelor HTML

Tabelul de mai jos prezintă o listă de etichete HTML5 cu o scurtă descriere în limba rusă.

Etichetă Scurtă descriere
Comentariu.
Definește tipul de document.
Link, hyperlink, ancora.
Definește textul ca o abreviere.
Informații de contact pentru autorul sau proprietarul documentului.
Definește o zonă pe o hartă imagine
Articol
Conținut deoparte (conținutul nu este conținutul principal al paginii)
Vă permite să inserați un fișier audio în curs de redare.
Text îngroșat.
Setează adresa URL de bază sau atributul țintă pentru legăturile relative din document.
O zonă în care scrierea textului poate lua o direcție diferită.
Setează direcția de scriere a textului. Spre deosebire de direcție, este indicată direcția fizică
Citat.
Specifică zona corpului documentului.

Rupere de linie.
Buton pe care se poate face clic.
Folosit pentru a desena grafice folosind scripturi
Semnătura de masă.
Notă de subsol la titlul materialului.
Folosit pentru a introduce codul computerului sub formă de text.
Specifică caracteristicile coloanelor din tabel.
Definește un grup de una sau mai multe coloane de tabel de format.
Folosit pentru a defini opțiuni predefinite din care să alegeți atunci când introduceți un câmp de text.
Definește descrierea unui termen dintr-o etichetă dintr-o listă de termeni.
Text care a fost eliminat în noua versiune a documentului.
Definește informații suplimentare pe care utilizatorul le poate vizualiza sau ascunde.
Indică faptul că conținutul este un termen.
Definește o casetă de dialog sau un element interactiv
Un element bloc este unul dintre elementele principale de aspect.
Definește o listă de definiții.
Numele termenului din lista de definiții.
text evidențiat pentru semnificație (de obicei text cu caractere cursive).
Recipient pentru aplicare externă
Un grup de elemente înrudite dintr-un formular.
Titlu pentru element
Definește un grup autonom de mai multe elemente (de exemplu, o imagine cu o legendă)
Subsol
Definește formularul de introducere a utilizatorului.
- Anteturi HTML de diferite niveluri: , , , , , .
Specifică zona de cap a documentului.
Bloc de antet
Linia orizontală este un divizor tematic.
Element rădăcină. Spune browserului că documentul dat este un document HTML.
Text cu caractere cursive.
Definește un cadru inline
Imagine, imagine.
Câmp de intrare, element de formular.
Text care a fost adăugat la noua versiune a documentului.
Text introdus de la tastatură sau numele butoanelor de la tastatură. De obicei, în font monospace.
Etichetă pentru câmpul de intrare. Conține de obicei eticheta câmpului.
Titlul elementului.
    		• Element de listă.
    Definește o legare de resurse externe (cel mai adesea o legare de foi de stil CSS).
    Conținutul principal
    Container pentru . Definește o hartă personalizată pe o imagine
    Textul selectat (de obicei folosind evidențierea fundalului).
    Container pentru o listă de elemente de meniu
    Definește elementele pe care utilizatorul le poate apela din meniul contextual
    Folosit pentru a defini metadatele documentului.
    Contor de valori într-un interval dat
    Container pentru elemente de navigație
    Conținut alternativ pentru utilizatorii care au scripturi dezactivate
    Definește un obiect încorporat
    Definește o listă numerotată.
    Definește un grup de opțiuni asociate într-o listă derulantă. Oferă numele grupului.
    Parametru (opțiune de alegere) din lista derulantă.
    Rezultatul calculelor.

    		Paragraf.
    Setează opțiuni pentru obiectele încorporate
    Container pentru mai multe imagini
    Text preformatat.
    Bara de progres
    Citat în text.
    Text alternativ dacă browserul nu acceptă .
    Adnotare pentru conținutul etichetei.
    Container pentru simboluri și decodarea acestora (în principal pentru simboluri din Asia de Est, hieroglife).
    Text tăiat.
    Text care este rezultatul unui program de calculator (de obicei în font monospațiu).
    Definește un script sau o conexiune de script dintr-o resursă externă.
    Capitol
    Definește o listă derulantă sau cu selecție multiplă.
    Text cu dimensiune mai mică a fontului.
    Definește o resursă pentru , și .
    Element în linie.
    Text evidențiat prin semnificație. Afișat de obicei cu caractere aldine.
    Definește un container pentru definirea stilurilor CSS pentru un document.
    Afișează textul ca indice.
    Titlu în interiorul etichetei.
    Afișează textul ca superscript.
    Definește un tabel.
    Definește o zonă de conținut într-un tabel.
    Celula din tabel .
    Câmp de introducere pe mai multe linii.
    Definește un grup de rânduri în partea de jos a unui tabel - subsol.

    Atributele sunt specificate în eticheta de început a elementului și constau dintr-un nume și o valoare, care sunt separate printr-un semn egal (=). De exemplu, în atribut href="http://www.site/" href este un nume și http://www.site/ sens.

    Etichetele HTML pot conține unul sau mai multe atribute. Atributele sunt adăugate unei etichete pentru a informa browserul cum ar trebui să fie afișată eticheta într-un document HTML.

    atributul titlului

    Luați în considerare următorul exemplu:

    Acest exemplu folosește eticheta, care este menită să reprezinte o abreviere sau un acronim. Un atribut suplimentar a fost adăugat etichetei de pornire a elementului. Acest atribut conține titlul elementului.

    Numele atributului titlului. În acest exemplu, i-am dat valoarea Limbajul de marcare hipertext.

    Atributul title poate fi utilizat (opțional) pe orice element HTML pentru a oferi informații suplimentare despre conținutul elementului.

    Atunci când utilizați atributul title, majoritatea browserelor își vor afișa valoarea ca un „tooltip” atunci când utilizatorul trece cu mouse-ul peste element.

    atribut alt

    Știți deja că imaginile sunt inserate în paginile Web folosind o singură etichetă. . Atributul alt este adăugat în interiorul tera și definește text alternativ pentru elementul fizic adăugat la pagina Web. Acest text se numește alt text deoarece poate apărea pe ecran ca alternativă la imaginea în sine.

    În exemplul următor, veți vedea cum gestionează browserul atributul alt atunci când apare o imagine „lipsă”. Dacă imaginea nu poate fi găsită sau din anumite motive nu se încarcă, se afișează în schimb valoarea atributului alt. Schimbați numele fișierului imagine din orange.jpg în pencil.jpg. Nu există de fapt un astfel de fișier, așa că veți ajunge cu o imagine „lipsă”.

    atributul href

    Puteți adăuga mai multe atribute unui element simultan.

    Iată un exemplu de adăugare a două atribute la un element (care este folosit pentru a crea un hyperlink către o altă pagină web).

    Exemplu HTML: Încercați tutorialele HTML pentru dvs

    Atributul href specifică locația paginii web la care duce linkul.

    De asemenea, folosim atributul title pentru a oferi îndrumare utilizatorului sub forma unui balon explicativ.

    Puteți specifica atribute numai în interiorul etichetelor de deschidere, iar dacă există mai multe atribute, atunci este plasat un spațiu între ele. În acest caz, nu puteți seta două atribute identice într-o etichetă, chiar dacă au sensuri diferite, adică duplicarea lor este interzisă. Atributele, cum ar fi etichetele, nu sunt sensibile la majuscule, ceea ce înseamnă că pot fi scrise cu litere mari sau mici. Valorile atributelor pot fi incluse între ghilimele duble (" ") sau simple (" ").

    Uneori este necesar să folosiți ghilimele. În acest exemplu, atributul titlu nu se va afișa corect, deoarece valoarea atributului conține spații:

    Singur sau ghilimele duble?

    Cel mai frecvent folosit ghilimele în HTML este „ghilimele duble”, dar puteți folosi și „ghilimele simple”. Uneori va trebui să utilizați ghilimele simple dacă există o parte din valoare care trebuie citată separat:

    HTML

    O poți face invers:

    HTML

    Atribute generale

    Mai jos este o listă cu câteva atribute care sunt standard pentru majoritatea elementelor HTML:

    Atribut Valoare Descriere
    aliniadreapta, stânga, centruAlinierea orizontală a etichetelor
    valinisus, mijloc, josAlinierea verticală a etichetelor într-un element HTML.
    fundalURLLocația imaginii de fundal
    idNume unicUn nume unic pentru utilizare cu foi de stil în cascadă.
    clasăregula de clasă sau stilul claseiClasifică un element pentru utilizare cu Foi de stil în cascadă.
    lăţimeValoare numericăDefinește lățimea tabelelor, imaginilor sau celulelor tabelului.
    înălţimeValoare numericăDetermină înălțimea tabelelor, imaginilor sau celulelor tabelului.
    titluText indicativTextul de afișat în balonul cu instrumente.

    Lista completă a tuturor atributelor pentru fiecare element HTML, listate în directorul nostru: Atribute HTML.

    Sarcini Prima sarcină finală

    Te-ai familiarizat cu etichetele necesare pentru a crea cea mai simplă pagină HTML, precum și cu atributele și valorile acestora, care sunt foarte importante pentru afișarea corectă a documentului, optimizarea și promovarea în motoarele de căutare.

    Este timpul să revizuiți ceea ce ați învățat și să finalizați sarcini simple:

    Indicator
    • Decide singur"

    Creați un sfat explicativ cu textul „Site bun” care apare atunci când treceți mouse-ul peste un paragraf, așa cum se arată în Fig. 1.

    Indicator

    Title="site bun">сайт - сайт для разработчиков.!}

    Dimensiunile imaginii
    • Decide singur"

    Redimensionați imaginea la 200 de pixeli lățime și 150 de pixeli înălțime.

    Dimensiunile imaginii

    Dimensiunile imaginii

    Etichetele HTML de bază sunt baza pe care este construit aproape orice site/blog. Din acest articol vei afla exact acele 20% din etichete de care vei avea mereu nevoie.

    Ca în orice limbă, și chiar și aici, se aplică regula Pareto 20/80 (20% din lucruri au 80% din importanță pentru realizarea rezultatul dorit), ceea ce înseamnă că este suficient să cunoști doar 20% din coduri pentru a-ți atinge cu încredere obiectivele în construirea site-ului.

    HTML nu este un limbaj de programare, deoarece este un limbaj de marcare hipertext, care vorbește de la sine, vă permite să marcați blocuri pe pagini pentru afișare corectă și să marcați textul pentru paginile web. De asemenea, este folosit pentru a crea link-uri de la o pagină a site-ului la alta. Toate linkurile de pe Internet sunt create folosind partea de hipertext cod html.

    - acesta este cel mai mult cel mai simplu limbaj! Dacă decideți să o studiați, atunci este important să înțelegeți de la bun început că nu există nicio dificultate în ea. Putem spune cu încredere că copiii au o perioadă mult mai dificilă la orele de informatică de la școală.

    Deci, să începem. Este mai bine să scrieți coduri în blocnotesul care este inclus programe standard sistem de operare Windows sau program gratuit„Notepad++”.

    Mai întâi, să definim ce este o etichetă. O etichetă este o celulă în sine limbaj html, din care este construită în general. Folosind etichete, browserele înțeleg cum să afișeze text și unde să insereze imagini. Etichetele sunt elementele de marcare în sine.

    Etichete HTML pentru a crea un cadru pentru site-ul web

    Etichetele pot fi asociate sau neîmperecheate. Cele pereche se deschid și se închid, adică cele de închidere conțin o bară oblică inversă „/”.

    Primul lucru care ar trebui să fie în oricare document html atunci când creați o pagină de blog, aceasta este: