Claudia Chiriță . 2023/2024
<tag> conținut </tag>
tag de deschidere tag de închidere
elementele HTML trebuie să fie corect imbricate
<p><b> greșit imbricat </p></b>
<p><b> corect imbricat </b></p>
nume-atribut="valoare"
...
![o imagine](imagine.png)
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title> titlul documentului </title>
...
</head>
<body>
</body>
</html>
Web 3.0
“ Web pages are designed to be read by people, not machines. The semantic web is a vision of information that can be readily interpreted by machines, so machines can perform more of the tedious work involved in finding, combining, and acting upon information on the web. ”
“ Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation or look. ”
“ Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). ... Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose, as doing so prevents software from correctly processing the page. ”
<header>, <nav>, <main>, <article>
<section>, <aside>, <footer>
<header></header>
<section>
<article>
<figure>
<img>
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>
<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img>
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div>
<article> conținut articol </article>
<article> conținut articol </article>
<section> conținut secțiune </section>
<nav> elemente de navigare </nav>
<aside> conținut </aside>
<header> conținut </header>
<footer> conținut </footer>
<main> conținut </main>
<strong> text important, de atenționare </strong>
<em> text accentuat </em>
<small> comentarii adiționale </small>
elementele b (bold), i (italic) au devenit și ele semantice în HTML5
<b> cuvinte cheie </b>
<i> termeni științifici / cuvinte în altă limbă
/ text alternativ </i>
<p> reprezintă un paragraf (fragment de text ce evidențiază o idee)
<hr> reprezintă o pauză tematică între grupuri de paragrafe
<div> conținut </div>
<span> conținut </span>
<br> pentru întreruperea liniei
<ul> o listă în care ordinea elementelor (item-urilor)
nu are importanță
<li> folosit pentru a crea elementele unei liste
<ol> o listă în care ordinea elementelor este importantă
atribute specifice: type, start, reversed
<dl>, <dt>, <dd>
<a href="URL"> conținut </a>
<a href="#id-meniu"> legătură la meniu
...
<img src="adresa-imaginii" alt="text-explicativ">
<figure>
<img src="adresa-imaginii" alt="text-explicativ">
<figcaption> Figura 1. Descriere </figcaption>
</figure>
<audio src="URL-audio" controls> mesaj </audio>
<video src="URL-video" controls autoplay> mesaj </video>
<video src="URL-video" controls poster="URL-img"> mesaj </video>
<iframe src="URL" width="n1" height="n2"> text afișat
dacă website-ul nu poate fi inclus </iframe>
înglobarea unei pagini în interiorul paginii curente
se folosesc numai pentru reprezentarea datelor
NU pentru layoutul paginii
<table> conținutul tabelului, linie cu linie </table>
<caption> descrierea tabelului (opțională) </caption>
<tr> linie formată din celule </tr>
<td> celulă date </td>
<th> celulă header </th>
,=.
,=""""==.__.=" o".___
,=.==" ___/
,==.," , , \,===""
< ,==) \"'"=._.==) \
`=='' `" `"
întrebări?