Element HTML

Un element HTML , în informatică , numit adesea etichetă HTML , indică o structură într-un document HTML și o metodă de sortare ierarhică a conținutului. Mai precis, este un element SGML care satisface cerințele unuia sau mai multor DTD HTML.

Descriere

Elementele pot reprezenta titluri , paragrafe , hyperlinkuri , liste , formulare , obiecte media încorporate și diverse alte structuri.

Elementele goale sunt închise prin adăugarea unui „/”, ca la închiderea etichetelor. Pentru compatibilitatea cu versiunile anterioare, este recomandat să puneți un spațiu în fața barei. ^[1]

Unele elemente, deși nu sunt conținute în niciun DTD oficial, sunt acceptate de unele browsere web și utilizate de paginile web . Astfel de elemente pot fi ignorate sau afișate necorespunzător de browserele care nu le acceptă.

Tipuri

Elementele HTML constau în general din patru părți:

o etichetă de deschidere care definește începutul unui element;
unul sau mai multe atribute ale acelui element cu valorile lor respective;
conținutul informațional care urmează să fie afișat;
o etichetă de închidere : este opțională pentru multe elemente, în foarte puține cazuri un „element gol” nu are conținut sau etichetă de închidere. Elementele XHTML trebuie întotdeauna închise.

Cuibărit

Multe elemente HTML pot fi „ imbricate ”. Cuibărirea este mai ușor de înțeles prin exemple:

<p>You<em>rock</em></p>

are un element <em> în interiorul unui element <p> . Situația se poate complica, de exemplu

<h1>Children that <em>do <span style="color:red">not</span> clean up</em> their rooms</h1>

Puteți adăuga elemente cât doriți, dar etichetele trebuie închise în ordinea inversă în care au fost deschise.

Gresit: <p>Lucy kissed <em>Jimmy</p></em>
Corect: <p>Lucy kissed <em>Jimmy</em></p>

Capacitatea de cuibărire este guvernată de unele reguli care definesc dacă un element este la nivel de bloc sau în linie .

Elemente ale structurii documentului

<html>...</html>: Delimitează un document HTML (în locul unui document XML sau altul). Aceste etichete sunt opționale în HTML, dar este posibil ca unele browsere și alte utilitare să nu recunoască documentul fără ele.

<head>...</head>: Delimitează secțiunea antet a documentului care conține informații despre pagină. Aceste etichete sunt opționale în HTML; dacă se omite existența antetului poate fi dedusă în alte moduri.

<body>...</body>: Delimitează corpul documentului care conține conținutul afișat pe pagină. Ca și etichetele <html> și <head> nu sunt necesare dacă documentul este în HTML.

Elemente la nivel de bloc și elemente în linie

Modelul de cutie este o cutie care împachetează fiecare element HTML ^[2] .

Un element la nivel de bloc începe de obicei pe o nouă linie, în timp ce un element în linie nu începe de obicei. Un element la nivel de bloc poate conține alte elemente atât la nivel de bloc, cât și de tip inline, în timp ce un element inline poate conține doar alte elemente de tip inline . Exemple de elemente la nivel de bloc sunt paragrafele, listele, tabelele, titlurile și containerul general <div> . Elementele de bloc sunt elemente cu un container dreptunghiular format din conținut, căptușeală, bordură și căptușeală exterioară (margine). Puteți specifica dimensiunea acestuia cu CSS . Elementele în linie (de exemplu STRONG, ITALIC și UNDERLINE ") nu creează blocuri, sunt afișate pe aceeași linie cu conținutul etichetei adiacente. Lățimea și înălțimea elementului" inline "depind numai de conținutul său, nu puteți specifica dimensiunea cu CSS.

Elemente antet în HTML 4.01

Același subiect în detaliu: metaetichete .

<title>...</title>: Indică titlul paginii. Acest element este necesar în fiecare document HTML și XHTML. Diferenți agenți de utilizatori și sisteme de operare afișează titlul în mod diferit. Browserele web îl afișează de obicei în bara de titlu atunci când fereastra este deschisă și în tava de sistem atunci când este minimizată. Poate fi numele implicit atunci când salvați pagina sau altceva. Spre deosebire de alte etichete, elementul titlu nu vă permite să conțineți alte etichete. Browserele vor afișa etichetele incluse așa cum sunt. De exemplu, <title>My <b>first</b> pagină web </title> va fi afișată ca „ Prima mea pagină web </b>, și nu ca„ Prima mea pagină web ”.

<meta>...</meta>: Acesta delimitează metadatele și poate fi utilizat pentru a specifica descrierea paginii, cuvintele cheie și un anumit formular <meta http-equiv="foo"> este utilizat pentru a specifica comenzile care trebuie trimise ca antet HTTP.

<link>

<link /> (în XTML)

Specificați orice tip de link pentru un document, cum ar fi linkurile anterioare și următoare sau versiunile alternative. Este mai frecvent să legați o foaie de stil externă la pagină, după cum urmează:

<link rel="stylesheet" type="text/css" href=" url ">

<base>

<base/> (în XTML)

Specifică valorile de bază pentru linkuri, cum ar fi țintă sau țintă.

<script>...</script>

Folosit pentru a include JavaScript sau alte scripturi în document.

<style>...</style>

Specificați o foaie de stil pentru documentul ^[1] , de obicei:

<style type="text/css">...</style>

cu date de stil sau referințe precum

/*<![CDATA[*/ @import " url "; @import " url "; /*]]>*/

Elementele corpului definite în HTML 4.01

Toate etichetele corpului nu sunt elemente la nivel de bloc și nu pot fi conținute într-un element în linie.

Titluri

de la <h1></h1> la <h6></h6>: Titluri (sau titluri) la diferite niveluri. Folosiți <h1> pentru nivelul maxim al antetului (secțiunea principală), <h2> pentru următorul nivel de mai jos (subsecțiune), <h3> pentru un nivel sub cel anterior și așa mai departe. Cel mai mic nivel al antetului este <h6> .

Majoritatea browserelor web vor afișa <h1> ca text mare cu un font diferit și <h6> ca text îngroșat, dar acest comportament poate fi modificat cu foi de stil în cascadă. Elementele antetului nu se pot utiliza numai pentru crearea de text mare sau îndrăzneț - descriu, de asemenea, structura și organizarea documentului. Unele programe le folosesc pentru a genera indicii și schițe.

Text structurat

Multe elemente HTML sunt concepute pentru a schimba structura sau semnificația textului. Unele sunt la nivel de bloc, dar cele mai multe sunt în linie și pot fi incluse în fluxul normal de text.

La nivel de bloc

<p>...</p>: Creați un paragraf. În HTML, eticheta de închidere nu este opțională.
<blockquote>...</blockquote>: Creează un citat, afișat convențional indentat, dar nu conceput pentru a indenta textul. Poate adăuga automat citate. Atributul cite poate furniza sursa și trebuie să fie un URL complet.
<pre>...</pre>: Creați text pre-formatat. Textul este afișat cu un font neproporționat exact așa cum a fost scris în fișier (vezi art . ASCII ). Cu CSS: {white-space: pre}
<address>...</address>: Folosit pentru a delimita informațiile despre adresă.

În linie

<em>...</em>
<strong>...</strong>: Accentul (afișat în mod curent cu caractere italice) și accentuarea puternică (afișat în mod obișnuit cu caractere aldine).
<q>...</q>: Un scurt citat. Poate fi afișat cu ghilimele. Citatele pot fi cuibărite. Atributul cite poate furniza sursa trebuie să fie o adresă URL completă.
<code>...</code>: O bucată de cod. Afișat în mod convențional într-un font monospațiat Esempio di codice.
<del>...</del>: Text șters. Afișat strikethrough: ~~Text șters.~~
<ins>...</ins>: Text introdus. Adesea folosit pentru a identifica textul care înlocuiește textul <del> . Afișat subliniat: Text introdus.

<cite>...</cite>: Citare. Referință la o citare a unei surse sau a unui element din text. ISCED a fost acceptat în HTML 2.0 ^[3] .
<dfn>...</dfn>
<samp>...</samp>
<kbd>...</kbd>
<var>...</var>: Definiție, eșantion de text, introducere tastatură, variabilă. Sunt similare cu <code> , dar pot avea un sens mai specific.
<sub>...</sub>
<sup>...</sup>: Crearea unui text sau _subscript ^Apice. Echivalent CSS: {vertical-align: sub} sau {vertical-align: super}

Liste

<dl>...</dl>

Creați o listă de descrieri, constând din perechi de termeni (sau nume) și descrierea (sau valoarea) acestora.

<dt>...</dt>: Creați un termen din lista de descrieri.
<dd>...</dd>: Creați o descriere a listei de descrieri.

<ol>...</ol>
<ul>...</ul>: Creați, respectiv, o listă ordonată (numerotată) sau nesortată (cu marcatori).

Pentru ul , atributul type poate fi utilizat pentru a specifica tipul de numerotare dar CSS oferă mai mult control: {list-style-type: foo} ^{[ Cum? ]} , care implicit este cel arab . Pentru ul , CSS poate fi utilizat pentru a defini marcatorul listei: {list-style-type: foo} . Markerul implicit este un punct înnegrit

<li>...</li>: Creați un element de listă în liste ordonate sau neordonate

<dir>...</dir> (depreciat): Delimitați lista de un folder. Dezafectat în favoarea <ul> .
<menu>...</menu> (depreciat): Creați o listă de meniu. Ar trebui să fie mai concis decât o listă <ul> , dar nu este bine acceptat. Dezafectat în favoarea <ul> .

Exemple de liste

Liste sortate

Pentru a crea o listă ordonată în HTML, utilizați un element ol care conține un element li , pentru fiecare dintre elementele din listă. De exemplu:

Cod HTML
<ol> <li> Ioan </li> <li> Luca </li> <li> Marco </li> <li> Giacomo </li> </ol>	Ioan Luca Marco Giacomo

Numerotarea implicită folosește sistemul arab, dar este, de asemenea, posibil să alegeți literele alfabetului latin modern sau numerotarea romană , atât majuscule, cât și minuscule. Pentru a seta tipul de numerotare, pur și simplu atribuiți primul termen al numerotării atributului de type al ol . De exemplu:

Cod cu `type` implicit (1)	Litere mici (a)	Literele majuscule (A)	Cifre romane minuscule (i)	Cifre romane majuscule (I)
<ol type = "1"> <li> Luca </li> <li> Marco </li> <li> Carlo </li> </ol>	Luca Marco Carlo	Luca Marco Carlo	Luca Marco Carlo	Luca Marco Carlo

Atributul start , pe de altă parte, vă permite să specificați punctul de plecare al numerotării, util, de exemplu, atunci când doriți să opriți temporar lista. Intr-adevar:

Cod HTML, cu `start` implicită (1)	Începeți de la 8	Începeți de la 26
<ol type = "a" start = "1"> <li> Luca </li> <li> Marco </li> <li> Carlo </li> </ol>	Luca Marco Carlo	Luca Marco Carlo

Liste neordonate

Listele neordonate (numite și liste cu marcatori) trebuie create cu un element ul care va conține, ca și pentru listele ordonate, un element li . Lista neordonată este implicită în stilul unei liste cu marcatori cu cercuri umplute. De exemplu:

Cod HTML
<ul> <li> Ioan </li> <li> Luca </li> <li> Marco </li> <li> Giacomo </li> </ul>	Ioan Luca Marco Giacomo

Atributul de type al lui ul poate face ca indicatoarele elementelor individuale să ia trei stiluri diferite: cu disc valoric se va crea o listă cu marcatori cu cercuri umplute ca fiind cea implicită, cu circle valoric cercurile vor fi de aceeași dimensiune, dar gol, și în cele din urmă cu square se va crea o listă cu marcatori cu pătrate mici umplute. Deoarece nu există un tip de ordine de interpretare, atributul start nu este furnizat.

Cod cu `type` implicit (disc)
<ul type = "disc"> <li> Luca </li> <li> Marco </li> <li> Carlo </li> </ul>	Luca Marco Carlo

Mese

<table>...</table>

Creați un tabel

<tr>...</tr>

Creați un rând într-un tabel

<th>...</th>: Creați o celulă de antet într-un rând; conținutul este de obicei afișat cu caractere aldine și centrat
<td>...</td>: Creați o celulă de date într-un tabel.

<colgroup>...</colgroup>: Specifică un grup de coloane într-un tabel.

<col> ( <col /> în XHTML) Specificați atributele pentru o coloană.

<caption>...</caption>: Specificați un titlu pentru întregul tabel.
<thead>...</thead>: Specifică antetul tabelului. Această secțiune poate fi repetată dacă tabelul este împărțit în mai multe pagini (în tipar sau alte tipuri posibile de tipărire).
<tbody>...</tbody>: Specifică partea principală a tabelului.
<tfoot>...</tfoot>: Specifică partea de jos a tabelului. La fel ca <thead> , Această secțiune poate fi repetată dacă tabelul este împărțit în mai multe pagini (în tipar sau alte tipuri posibile de tipărire).

Formulare

HTML poate defini doar formatul formularului , intrările utilizatorului sunt procesate de un limbaj de script pe partea de client sau pe server .

<form>...</form>

Creați un formular.

<select name="foo">...</select>

Creați un meniu listă din care utilizatorul poate alege un singur element. Poate fi afișat ca un meniu derulant.

<option>...</option>: Creați un element de meniu.

<input type="checkbox">: Creați o casetă de selectare.
<input type="radio">: Creați un buton radio; dacă mai multe butoane radio au același nume, utilizatorul poate selecta doar unul.
<input type="submit" value="NAME">: Creați un buton de trimitere.
<input type="image" border=0 name="NAME" src="name.gif">: Creați un buton de trimitere utilizând o imagine.
<input type="reset">: Creați un buton de resetare care resetează valorile modulului la valorile inițiale.
<input type="text">: Creați o casetă de text cu o singură linie. Dimensiunea setează lungimea cutiei. Maxlength setează numărul maxim de caractere care pot fi introduse (poate fi mai mare decât Size).
<textarea>...</textarea>: Creează o zonă de text multiliniu setată de atributele cols (coloane) și rows (rânduri). Textul dintre etichete va apărea în zona de text la încărcarea paginii.

Alte elemente

<span>...</span>: Creați o diviziune logică pe linie. Vă permite să atribuiți un id sau o clasă porțiunilor de text, care pot fi utilizate cu CSS.
<div>...</div>: Creați un nivel logic la nivel de bloc. Mai ales pentru utilizarea CSS.
<center>...</center> (depreciat): Creați și un bloc de text centrat. Dezafectat în favoarea <div> cu aliniere centrată definită în CSS.
<hr>
<hr /> (în XHTML): Introduceți o linie orizontală.
<object>...</object>: Include un obiect pe pagina de tipul specificat de type . Poate fi orice obiect MIME pe care browserul îl recunoaște, cum ar fi o pagină încorporată (consultați <iframe>), un plug-in precum Flash sau un fișier audio.
<param>...<param/> (în XHTML): Această etichetă apare numai în interiorul elementului object și setează parametri pentru obiect, cum ar fi lățimea, înălțimea sau adresa URL a conținutului.
<embed>...</embed> (neoficial): Invocă un manager de plug-in-uri pentru tipul specificat de type . Folosit pentru a include fișiere flash, fișiere audio. neoficial, <object> este de preferat.
<noembed>...</noembed> (neoficial): Specifică o alternativă dacă obiectul inclus nu poate fi afișat.
<applet>...</applet> (neoficial): Include un applet Java pe pagină. Neoficial, <object> este de preferat.

Formatare

Același subiect în detaliu: CSS .

<b>...</b> (depreciat): Folosiți bold . CSS echivalent: {font-weight: bold}
<i>...</i>: Folosiți cursiv . CSS echivalent: {font-style: italic}
<big>...</big>: Creați un text mai mare . CSS echivalent: {font-size: larger} .
<small>...</small>: Creați un text mai mic. Echivalent CSS: {font-size: smaller} small {font-size: smaller}
<s>...</s> și <strike>...</strike> (depreciat): Ștergeți textul: ștergeți . CSS echivalent: {text-decoration: line-through}
<tt>...</tt>: Utilizați un font de macchina da scrivere (fonturi non-proporționale cu dimensiune fixă). Echivalent CSS: {font-family: monospace}
<u>...</u> (depreciat): Folosiți un font subliniat . CSS echivalent: {text-decoration: underline}
<font [color= color ,] [size= size ,] [face= face ]>...</font> (învechit): Eticheta considerată învechită în favoarea CSS ^[4] , poate specifica culoarea textului prin atributul de color , tipul cu face și dimensiunea absolută sau relativă cu size

Exemple:

<font color="green">text</font> creează text verde .
<font color="#1f4099">text</font> creează text în culoare hexagonală # 1f4099 .
<font size="4">text</font> creează text de dimensiunea 4 . Dimensiunea variază de la 1 la 7. Dimensiunea standard este 2, cu excepția cazului în care este specificat în <<body> sau alte etichete.
<font size="+1">text</font> creează text cu o dimensiune mărită cu 1 comparativ cu dimensiunea standard. . <font size="-1">text</font> este opusul.
<face="Courier">text</font> afișează textul în fontul Courier .

CSS echivalent pentru atributele textului:

<font size="N"> potrivește cu {font-size: Ypx} (specificația HTML nu definește relația dintre dimensiunea „N” și dimensiunea pixelului „Y”).
<font color="red"> potrivește cu {color: red}
<font face="Courier"> potrivește cu {font-family: Courier}

Culori

Același subiect în detaliu: Culori web .

Culorile web sunt culori utilizate în afișarea paginilor web pe World Wide Web și în metodele de descriere și specificare a acelor culori. Culorile pot fi specificate ca un triplet RGB sau în format hexagonal (un triplet hexagonal ) sau, în unele cazuri, după numele lor comune în limba engleză. Un instrument de selectare a culorilor sau alt software grafic este adesea folosit pentru a genera valori de culoare. Un exemplu: #0099CC (un tip de albastru care poate fi #0099CC Pacific Blue ).

Legături și ancore

Același subiect în detaliu: Ancoră .

<a>...</a>: Creează un element care devine o ancoră , care poate fi atât sursa, cât și destinația unui hyperlink .; Cu atributul href setat la o adresă URL, ancora devine originea unui hyperlink către o altă resursă (sau către un alt punct de pe aceeași pagină);; Alternativ (și uneori în același timp), cu atributul name (sau id ), ancora devine ținta unui hyperlink dintr- o altă resursă, care, ca un marcaj, va derula pagina până la acel punct. Un URL poate indica acea destinație cu un identificator de fragment (adăugând un simbol „#” urmat de numele ancorei la sfârșitul URL-ului) în URL.; Fiecare element poate fi transformat într-o ancoră prin intermediul atributului id aceea nu este necesară utilizarea <a name="foo"> .; Mai mult, atributul title poate fi setat pentru a oferi o scurtă informație despre hyperlink.
<a href=" URL " title=" testo in aiuto "> Etichetta collegamento </a>: Când indicatorul este peste link, acesta se transformă de obicei într-o mână cu degetul arătător întins în multe browsere grafice, iar textul conținut în atributul title apare într-o casetă specială până când cursorul se mișcă.; Unele browsere afișează text alternativ în același mod, dar acest lucru este tehnic greșit.

Galerie de imagini

<img...>
<img... /> (în XHTML): Include o imagine cu atributul src , alt oferă text alternativ în cazul în care imaginea nu poate fi afișată. Alt este conceput ca text alternativ, deși unele browsere îl afișează ca un indiciu; atributul title este indiciu.

Variat

<br>

<br/> (în XHTML)

Specifică o întrerupere de linie.

Exemplu de formă a zonei pe o imagine. În partea de sus sunt indicate zonele care pot fi făcute clic de utilizator, în partea de jos ceea ce vede utilizatorul.

Exemplu de etichetă <map> pe o imagine. În partea de sus sunt indicate zonele care pot fi făcute clic de utilizator, în partea de jos ceea ce vede utilizatorul. Acesta din urmă le va observa doar atunci când se deplasează peste ele cu mouse-ul

<map>...</map>

Specifică o hartă din partea clientului, care sunt zone pe care utilizatorul poate face clic.

<area>

<area/> (în XHTML)

Specifică o zonă pe o hartă.

<blink>...</blink> (nestandard, puternic descurajat)

Text intermitent. Poate fi alternativ redat cu directiva de stil {text-decoration: blink}

<marquee>...</marquee> (puternic descurajat)

Etichetă învechită ^[5] , creează efectul de text scrolling. Nu are echivalent în directivele de stil. Atributele sunt:

behaviour : indică tipul de mișcare a textului, acesta poate asuma următoarele valori:

scroll : textul ajuns la final se repetă de la început într-un mod continuu;

slide : textul ajuns la sfârșit se oprește;

alternate : textul a ajuns la sfârșit ricoșează și se întoarce.

direction : indică direcția de mișcare, poate fi:

left : spre stânga;

right : spre dreapta;

up : în sus;

down : în jos.

loop : indică de câte ori trebuie să se repete mișcarea. Dacă nu este specificat, este egal cu infinitul.

scrollamount : indică viteza de mișcare. Numărul este exprimat în pixeli pe secundă.

Folosind JavaScript, este posibil să se obțină efectul blocării / repornirii defilării prin atributele evenimentului asociate cu onfocus onmouseover , onmouseout , onfocus și onblur apelând metodele this.stop() și this.start() .

: Include un comentariu. Aceasta este o etichetă SGML și nu se limitează la HTML, deci poate apărea oriunde în document, chiar înainte de DTD sau după </html> . Tot conținutul inserat între eticheta de deschidere  nu este afișat.

<hr>
<hr/> (în XHTML): Această etichetă este utilizată pentru a crea linii de separare. Este posibil să creați linii de diferite dimensiuni și culori datorită atributelor width (pentru lungime), height (pentru înălțime) și color , depreciată în favoarea utilizării unor directive de stil echivalente.

Exemple:

<hr width = "400" height = "10"> (depreciat) sau

<hr style="width: 400px; height: 10px;" /> (cu directivă stil) generează:

<hr width = "50%" height = "2"> (depreciat) sau

<hr style="width: 50%; height: 2px;" /> (cu directivă stil) generează:

<hr color = "red" width = "200" height = "2"> (depreciat) sau

<hr style="background-color: red; width: 200px; height: 2px;" /> (cu directivă stil) generează:

Cadru

Același subiect în detaliu: Iframe și Frameset .

Cadrele, în „cadre” italiene, vă permit să structurați documentul HTML în subdocumente pe care browserul le gestionează ca ferestre separate. De exemplu, un meniu de navigare poate fi întotdeauna menținut fix și vizibil într-un prim cadru poziționat pe marginea stângă a paginii, flancat de un al doilea cadru care cuprinde conținutul principal glisant. În frame Elementele trebuie să fie incluse în interiorul unui frameset element care înlocuiește body și documentul HTML în sine trebuie să fie declarat ca Frameset. Cu alte cuvinte, un element html poate conține un head și un body (în cazul documentelor stricte sau tranzitorii) sau, alternativ, un head și un frameset . ^[6] Cadrele fac parte din standardul HTML 4.0 Frameset, în timp ce în HTML5 au fost depreciate ^[7] ^[8] .

<frameset>...</frameset>: Delimitați setul de cadre. Aranjamentul cadrelor este dat de o listă separată prin virgulă în rows și atributele cols .

<frame>...</frame>: Include un singur cadru sau regiune în cadrul cadrului. În interior apare un alt document legat prin atributul src .

<noframes>...</noframes>: Conține un element normal al body cu copii care va apărea în browserul web care nu acceptă cadre
<iframe>...</iframe>: Un cadru special în linie , care poate fi introdus în interiorul unui body normal. Are multe atribute comune elementului img , dar încorporează un alt document HTML în loc de o imagine.

RDFa

RDFa (Resource Description Framework in Attributes) este o recomandare W3C care adaugă o serie de extensii la nivel de atribut la HTML, XHTML și diverse tipuri de documente bazate pe XML pentru a încorpora metadate bogate în documente web. Cartografierea modelului de date RDF permite utilizarea acestuia pentru a încorpora subiectul -expresii RDF-obiect în cadrul documentelor XHTML. De asemenea, permite extragerea modelelor RDF triplate de către agenții de utilizator conformi.

Comunitatea RDFa rulează un site web wiki pentru a găzdui instrumente, exemple și tutoriale ^[9] .

Esență

Esența RDFa este de a furniza un set de atribute care pot fi utilizate pentru a transporta metadatele într-un limbaj XML (de aici și „a” din RDFa).

Aceste atribute sunt:

despre: un URI sau CURIE care specifică resursa cu care se ocupă metadatele lor
rel și rev: specificând o relație și, respectiv, o relație inversă cu o altă resursă
src, href și resursă: specificând resursa partenerului
proprietate: specificarea unei proprietăți pentru conținutul unui element sau resursă partener
conţinut: atribut opțional care suprascrie conținutul elementului atunci când se utilizează atributul proprietate
tip de date: atribut opțional care specifică tipul de date al textului specificat pentru utilizare cu atributul proprietate
tip de: atribut opțional care specifică tipul (tipurile) RDF al subiectului sau resursei partenerului (resursa la care se referă metadatele).

Beneficii

Există cinci „principii de metadate interoperabile” îndeplinite de RDFa ^[10] .

Independența editorului: fiecare site își poate folosi propriile standarde
Reutilizarea datelor: datele nu sunt duplicate. Nu este nevoie de secțiuni XML și HTML separate pentru același conținut.
Autoconținere: HTML și RDF sunt separate
Modularitatea schemei: atributele sunt reutilizabile

În plus, RDFa poate beneficia de accesibilitatea web, deoarece sunt disponibile mai multe informații pentru tehnologia de asistență ^[11] .

Exemplu

 < div xmlns: dc = "http://purl.org/dc/elements/1.1/" 
   despre = "http://www.example.com/books/wikinomics" >
  În ultima sa carte
  < span property = "dc: title" > Wikinomics </ span > ,
   < span property = "dc: creator" > Don Tapscott </ span >
  explică schimbările profunde ale tehnologiei,
  demografie și afaceri.
  Cartea ar trebui publicată în
  < span property = "dc: date" content = "2006-10-01" > octombrie 2006 </ span > .
</ div >

HTML5

Același subiect în detaliu: HTML5 .

TAG ^[12]	DOMENIU DE APLICARE
Noi elemente structurale și semantice
Antet	Comparație între pagina de bază HTML4 și 5
Subsol
Secțiune
Nav
Articol (în cazul articolelor de pe pagina de pornire)
În afară (conținut legat de principal)
Hgroup	Grupați etichetele de antet
<figure> și <figcaption>	Subtitrări pentru conținut
Încorporare	Introduceți conținut interactiv sau multimedia
Rubin	Specificați adnotările Ruby
Wbr	Browserul poate insera o linie nouă
<comandă> și <meniu>	Acestea definesc bare de instrumente sau meniuri contextuale
<detalii> și <sumar>	Widget de informații pentru utilizatori
marcă	Parte a unui text marcat sau evidențiat de utilizator
Atributele <time> și pubdate și datetime	Ora de 24 de ore sau o dată din calendarul gregorian
Metru	Măsură scalară a unui interval cunoscut sau a unei valori fracționare
Progres	Starea finalizării unei sarcini
Imagine	Container pentru imagini
Microdate	Atributele semantice pot fi specificate pentru fiecare etichetă HTML
Atribute noi și tipuri de intrare pentru formulare
autofocus, substituent și formă	Autofocusul în acest caz este în roșu. Tipurile de intrare sunt echivalente cu spațiile care trebuie completate (în acest caz există „e-mail”). Substituentul este exemplul de text al fiecărui spațiu
Tipul de intrare: tel
Tipul de intrare: căutare
Tipul de intrare: URL
Tipul de introducere: e-mail
Tipul de intrare: număr
Tipul de intrare: interval
Tipul de intrare: culoare
Datalist	Completare automată pe un element de formular
Completare automată	Permite sau interzice browserului să completeze câmpurile a formularului automat
Minim maxim	Acestea definesc valoarea minimă și maximă permisă
Multiplu	Permite utilizatorului să introducă mai multe valori pentru aceeași intrare
Model	Verificați dacă valoarea introdusă respectă anumite reguli
Necesar	Este obligatorie completarea unui spațiu al formularului
Etapa	Acesta definește distanța dintre o valoare și următoarea
keygen	Generator de chei numerice într-un formular
ieșire	Returnează rezultatul unui calcul
API pentru aplicații web
Aplicații web offline (fișier „.manifest”)	După prima sesiune de navigare online, unele obiecte vor rămâne, de asemenea, accesibile în absența unei conexiuni de rețea.
API de baze de date indexate	Creați și manipulați o bază de date în browser
API WebStorage	De exemplu, le puteți menține deschise în același timp două conturi sociale sau de e-mail pe același browser și fiecare navigare pe primul va rezulta deconectarea celui de-al doilea și invers
API Web Workers	Acestea permit executarea unor bucăți de cod JavaScript fără a afecta performanța paginii web
API WebSocket	Acestea stabilesc și mențin o conexiune de date între browsere și server de la distanță pe care să trimiteți mesaje în ambele sensuri
Tragere și plasare	Glisați și fixați obiecte
API de geolocalizare	Geolocalizare
Multimedia
SVG și MathML	Imagini vectoriale și formule matematice
Canvas / WebGL	API-uri potrivite pentru desenarea liniilor, cercurilor, dreptunghiurilor, imaginilor și obiectelor 3D
Video	Inserați fișiere video (anterior fezabile numai cu Adobe Flash )
Audio	Introduceți fișiere audio
Elemente HTML4 depreciate

Haml

Haml (HTML Abstraction Markup Language) este un sistem de șabloane conceput pentru a evita scrierea codului inline într-un document web și pentru a face HTML mai curat. Haml oferă flexibilitatea de a avea un conținut HTML dinamic. Similar cu alte limbaje web, cum ar fi PHP, ASP, JSP și sisteme de șabloane precum eRuby, Haml încorporează, de asemenea, un anumit cod care rulează în timpul rulării și generează cod HTML pentru a oferi un conținut dinamic. Pentru a rula codul Haml, fișierele trebuie să aibă o extensie .haml. Aceste fișiere sunt similare cu fișierele .erb sau eRuby, care ajută și la încorporarea codului Ruby atunci când se dezvoltă o aplicație web ^[13] .

Exemplu

Haml folosește indentarea spațiului (două spații) pentru cuibărire și amploarea etichetei. Acesta acționează ca un înlocuitor pentru perechile de etichete open-end, făcându-l uscat și mai curat. Următorul exemplu compară sintaxa Haml și eRuby (Ruby încorporat), împreună cu ieșirea HTML.

Haml

ERB

HTML

 % div .categorie 
   % div .rețete 
       % h1 = rețetă. Nume 
       % h3 = rețetă. categorie 
   % div 
       % h4 = rețetă. Descriere

<div class = "category"> 
    <div class = "recipes"> 
        <h1> <% = rețetă. nume%> </ h1> 
        <h3> <% = rețetă. categoria%> </ h3> 
    </ div> 
    <div> 
        <h4> <% = rețetă. descriere%> </ h4> 
    <
</ div>

<div class = "category"> 
    <div class = "recipes"> 
        <h1> Cookie </ h1> 
        <h3> Desert </ h3> 
    </ div> 
    <div> 
        <h4> Pe bază de paste și zahăr. De obicei, are o formă circulară și are în jur de 400 de calorii. </ h4> 
    </ div> 
</ div>

Notă

^ ^a ^b Așa cum este recomandat de W3C Anexa C. Ghid de compatibilitate HTML
^ CSS Box Model , la www.w3schools.com . Adus la 31 ianuarie 2021 .
^ RFC 1866 - Hypertext Markup Language - 2.0
^ - HTML: Limbaj de marcare HyperText | MDN , la developer.mozilla.org . Adus la 4 februarie 2021 .
^ javascript - De ce este depreciat și care este cea mai bună alternativă? , pe Stack Overflow . Adus pe 5 februarie 2021 .
^ ( EN ) HTML 4.01 Specification, Frames , su www.w3.org , W3C, 24 dicembre 1999. URL consultato il 14 giugno 2014 .
^ - HTML: HyperText Markup Language | MDN , su developer.mozilla.org . URL consultato il 5 febbraio 2021 .
^ 3 Reasons You Might Not Want To Use Iframes , su www.ostraining.com . URL consultato il 5 febbraio 2021 .
^ RDFa / Tools , su rdfa.info .
^ Building Interoperable Web Metadata
^ RDFa – Implications for Accessibility – Standards Schmandards , su standards-schmandards.com .
^ HTML5: guida completa , su HTML.it . URL consultato il 29 gennaio 2021 .
^ Haml , su haml.info . URL consultato il 4 febbraio 2021 .

Voci correlate

Collegamenti esterni

Lista completa degli elementi per HTML 4.01: elementi e attributi
Tabella dei Caratteri Speciali HTML , su caratterispecialihtml.com .

Portale Internet : accedi alle voci di Wikipedia che trattano di internet

[:0-1] Așa cum este recomandat de W3C Anexa C. Ghid de compatibilitate HTML

[2] CSS Box Model , la www.w3schools.com . Adus la 31 ianuarie 2021 .

[3] RFC 1866 - Hypertext Markup Language - 2.0

[4] - HTML: Limbaj de marcare HyperText | MDN , la developer.mozilla.org . Adus la 4 februarie 2021 .

[5] vascript - De ce este depreciat și care este cea mai bună alternativă? , pe Stack Overflow . Adus pe 5 februarie 2021 .

[6] ( EN ) HTML 4.01 Specification, Frames , su www.w3.org , W3C, 24 dicembre 1999. URL consultato il 14 giugno 2014 .

[7] - HTML: HyperText Markup Language | MDN , su developer.mozilla.org . URL consultato il 5 febbraio 2021 .

[8] 3 Reasons You Might Not Want To Use Iframes , su www.ostraining.com . URL consultato il 5 febbraio 2021 .

[rdfa_wiki-9] RDFa / Tools , su rdfa.info .

[10] Building Interoperable Web Metadata

[11] RDFa – Implications for Accessibility – Standards Schmandards , su standards-schmandards.com .

[12] HTML5: guida completa , su HTML.it . URL consultato il 29 gennaio 2021 .

[13] Haml , su haml.info . URL consultato il 4 febbraio 2021 .

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]