Capitol gratuit

Elemente de text și formatare

HTML oferă 6 niveluri de heading-uri, de la <h1> (cel mai important) la <h6> (cel mai puțin important): <h1>Titlu principal (unul singur...

Heading-uri (titluri)

HTML oferă 6 niveluri de heading-uri, de la <h1> (cel mai important) la <h6> (cel mai puțin important):

<h1>Titlu principal (unul singur per pagină)</h1>
<h2>Subtitlu - secțiune principală</h2>
<h3>Sub-secțiune</h3>
<h4>Sub-sub-secțiune</h4>
<h5>Nivel 5 (rar folosit)</h5>
<h6>Nivel 6 (foarte rar folosit)</h6>
Reguli importante pentru heading-uri:
  • Un singur <h1> per pagină (important pentru SEO)
  • Nu săriți niveluri (de la h2 la h4 fără h3)
  • Heading-urile definesc ierarhia conținutului, nu dimensiunea textului
  • Nu folosiți heading-uri doar pentru text mare - folosiți CSS

Paragrafe și text

<p>Acesta este un paragraf normal de text. Browser-ul adaugă automat
spațiu înainte și după paragraf.</p>

<p>Al doilea paragraf. Spațiile multiple    și
enter-urile din cod sunt ignorate de browser.</p>

<!-- Pre-formatat (păstrează spațiile și enter-urile) -->
<pre>
Acest text
păstrează   spațiile
și linia nouă
</pre>

Formatare text

TagEfectSens semantic
<strong>BoldImportanță puternică
<em>ItalicAccent, emfază
<mark>Evidențiat (galben)Text evidențiat, relevant
<small>Text micText secundar, disclaimer
<del>TăiatText șters/invalid
<ins>SubliniatText adăugat/inserat
<sub>H2OSubscript
<sup>x2Superscript
<code>CodCod inline
<abbr>AbreviereAbreviere cu explicație (title)
<blockquote>Citat blocCitat lung din altă sursă
<q>"Citat inline"Citat scurt, inline
<p>
<strong>GOAI</strong> oferă servicii de
<em>web development</em> și
<abbr title="Search Engine Optimization">SEO</abbr>.
</p>

<p>
Preț vechi: <del>199 RON</del>
Preț nou: <ins>149 RON</ins>
<small>(ofertă limitată)</small>
</p>

<blockquote cite="https://goai.ro">
<p>Tehnologia este cel mai bun instrument când este folosită
cu un scop clar.</p>
<footer>— Dorel Tănase, <cite>GOAI</cite></footer>
</blockquote>

Entități HTML

Caractere speciale care trebuie escape-uite în HTML:

CaracterEntitateDescriere
<&lt;Mai mic
>&gt;Mai mare
&&amp;Ampersand
"&quot;Ghilimele duble
 &nbsp;Spațiu care nu se rupe
©&copy;Copyright
€&euro;Euro
—&mdash;Em dash
Sfat: Folosiți <strong> și <em> în loc de <b> și <i>. Tag-urile semantice comunică semnificația conținutului, nu doar aspectul vizual, ceea ce ajută motoarele de căutare și cititorii de ecran.

Continuați cu restul cursului

Acesta este capitolul 3 din cele 14 ale cursului, cu 4 lecții din 60. Cumpărați cursul și parcurgeți tot conținutul în cont, cu progres salvat, test final și certificat.

Cumpărați cursul la 70 €