Элементҳои семантикии HTML чӣ гунаанд ва барои чӣ…

Элементҳои семантикӣ дар HTML рамзҳо (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>) мебошанд, ки мақсади маънавии мундариҷаро, ки онҳоро мепӯшонанд, тавсиф мекунанд, на танҳо намуди зоҳирии он.

Мақсади асосӣ:

Дастрасӣ: Ба технологияҳои ёрдамчи (масалан, хонандагони экран) кӯмак мекунанд, ки сохтор ва мундариҷаи саҳифаро фаҳманд, ва мундариҷаро барои корбарони дорои маҳдудиятҳо дастрас месозанд.
SEO (Беҳтарсозии ҷустуҷӯ): Саҳифаҳо бо рамзгузории семантикӣ беҳтар индексгузорӣ ва рейтинг мекунанд, зеро онҳо метавонанд мундариҷаи асосиро ва муносибати онро ба дархостҳо дақиқтар муайян кунанд.
Таҳия ва нигоҳдорӣ: Беҳтар кардани хондан ва нигоҳдории коди, сохтори саҳифаро барои дигар таҳиягарон (ва барои худатон дар оянда) фаҳмонда медиҳад.
Фаҳмиши беҳтари сохтор: Имкон медиҳад, ки блокҳои мантиқии саҳифаро (навигация, мундариҷаи асосӣ, поёни саҳифа ва ғайра) ба таври равшан ҷудо карда шаванд.

Масалан, рамзгузории ғайрисемантикӣ:

<div>
  <h2>Сарлавҳаи мақола</h2>
  <p>Мундариҷаи мақола...</p>
</div>
<div>
  <h3>Панели паҳлӯӣ</h3>
  <p>Маълумоти панели паҳлӯӣ...</p>
</div>

Масалан, рамзгузории семантикӣ:

<article>
  <h2>Сарлавҳаи мақола</h2>
  <p>Мундариҷаи мақола...</p>
</article>
<aside>
  <h3>Панели паҳлӯӣ</h3>
  <p>Маълумоти панели паҳлӯӣ...</p>
</aside>

Истифодаи элементҳои семантикӣ кӯмак мекунад, ки вебсайтҳо бештар сохторӣ, дастрас ва оптимизатсияшуда барои ҷустуҷӯҳо созанд.

Элементҳои семантикии HTML чӣ гунаанд ва барои чӣ лозиманд?