Codecourse

HTML-də iyerarxiya

HTML sənədi valideyn, qardaş, uşaq, əcdad və nəsilləri olan böyük "ailə ağacını" xatırladır.

Bu, HTML elementlərini bir-birinin içərisində yerləşdirmək imkanından irəli gəlir.

İç-içə yerləşdirmə

Gəlin sadə abzas yazaq və iki sətir elementi əlavə etməklə mətnin hissələrini bir-birindən fərqli edək.


<p><strong>Tim Berners Li</strong> deyib: 
<q>Biz şəbəkə bitərəfliyi uğrunda mübarizə aparmalıyıq</q>.</p>

Tim Berners Li deyib: "Biz şəbəkə bitərəfliyi uğrunda mübarizə aparmalıyıq".

Yuxarıdakı nümunədə:

<strong> elementinin qalın şriftlə göstərilməsi brauzerin başlanğıc ayar kimi davranışı ilə bağlıdır. Unutmayın ki, HTML elementləri görünüşə görə deyil, mənasına görə seçilməlidir.

Baxdığımız halda:

Qayda

İç-içə yerləşdirmə açılan və bağlanan teqlərin yerləşməsindən asılıdır.

HTML elementi açılan teq, bağlanan teq və onlar arasında olanlardan ibarət olduğuna görə, törəmə elementi baş elementdən əvvəl bağlanmalıdır.

<!-- Səhv koddur! :-( -->
<p>Bu HTML kodu düzgün deyil, çünki mən "strong" teqini burda açdım,
<strong> amma onu abzas teqindən sonra bağladım.</p></strong>

<strong> elementi <p> abzas teqindən sonra açıldığına görə </p> baş elementindən əvvəl bağlanmalıdır.

<!-- Bu, düz koddur. :-) -->
<p><strong>Bu, düzgün HTML koddur, çünki mən "strong" teqini açdım və düzgün
bağladım</strong>.</p>

Mürəkkəblik

Alt elementlər, həmçinin digər alt elementlərdən ibarət ola bilər və buna görə HTML sənədi daxilində daha mürəkkəb iyearxiya yazmaq olar:

<article>
  <h1>Məşhur sitatlar</h1>

  <p><strong>Tim Berners Li</strong> deyib: 
  <q>Biz şəbəkə bitərəfliyi uğrunda mübarizə aparmalıyıq</q>.</p>
   
  <p><strong>Bill Qeyts</strong>: 
  <q>Bugünkü informasiya cəmiyyətində əsas təbii sərvətlər ağıl, təcrübə və liderlikdir.</q>.</p>
 
</article>

Məşhur sitatlar

Tim Berners Li deyib: "Biz şəbəkə bitərəfliyi uğrunda mübarizə aparmalıyıq."

Bill Qeyts: "Bugünkü informasiya cəmiyyətində əsas təbii sərvətlər ağıl, təcrübə və liderlikdir."

Yuxarıdakı nümunədə:

Növbəti dərsi seçib keçid düyməsinə sıxın: