article და aside

რას ისწავლი

• რა არის <article> და როგორ შეამოწმო, ღირს თუ არა მისი გამოყენება
• რით განსხვავდება <article> <section>-ისგან
• რისთვისაა <aside>

article: დამოუკიდებელი შინაარსი

<article> ისეთი შინაარსის ნაწილია, რომელიც თავისთავად აზრიანია: შეგიძლია ის გვერდიდან ამოიღო, სხვა საიტზე ჩასვა ან ცალკე გააზიარო, და ის მაინც გასაგები დარჩება. მაგალითები:

• ბლოგის პოსტი ან ახალი ამბავი;
• ფორუმის შეტყობინება ან კომენტარი;
• პროდუქტის ბარათი მაღაზიაში;
• რეცეპტი, მიმოხილვა, თამაშის აღწერა.

<article>
  <header>
    <h2>ბიტმა ოლიმპიადა მოიგო</h2>
    <p>12 მაისი, 2026</p>
  </header>
  <p>ჩვენი სკოლის რობოტმა ბიტმა რობოტიკის ოლიმპიადაზე პირველი ადგილი დაიკავა…</p>
  <footer>
    <p>ავტორი: ნინო</p>
  </footer>
</article>

ტესტი მარტივია: თუ ეს ნაწილი RSS-ში, სოციალურ ქსელში ან სხვა საიტზე ცალკე გამოჩნდებოდა, ის ისევ აზრიანი იქნებოდა? კი → <article>.

article თუ section

ეს ორი ელემენტი ყველაზე ხშირად ირევა.

• <section> დიდი მთლიანის ნაწილია: „ვინ ვართ“ ნაწილი თავისთავად, ჩვენი გვერდის გარეშე, ნაკლებად აზრიანია.
• <article> სრული, დამოუკიდებელი ერთეულია: ახალი ამბავი თავისთავად სრულია.

ისინი ერთმანეთში შეიძლება ჩაიდგას. ახალი ამბების გვერდზე <section> „სპორტი“ შეიძლება რამდენიმე <article>-ს შეიცავდეს, თითო თითო ამბავს. გრძელ <article>-ს კი თავისი <section>-ები შეიძლება ჰქონდეს, მაგალითად „შესავალი“ და „დასკვნა“. კომენტარები სტატიის ქვეშ <article>-ებია, მთავარი <article>-ის შიგნით.

aside: გვერდითი შინაარსი

<aside> (განზე) შინაარსია, რომელიც მთავარ თემას უკავშირდება, მაგრამ მისი ნაწილი არ არის: მის გარეშე მთავარი ტექსტი მაინც სრული იქნება. მაგალითები:

• „იცოდით?“ ჩანართი სტატიის გვერდით;
• მსგავსი სტატიების სია;
• ავტორის მოკლე ბიოგრაფია;
• რეკლამა ან შეტყობინება.

<article>
  <h2>როგორ მუშაობს ვებგვერდი</h2>
  <p>როცა ბრაუზერში მისამართს წერ…</p>
  <aside>
    <h3>იცოდით?</h3>
    <p>პირველი ვებგვერდი 1991 წელს გამოქვეყნდა და დღესაც მუშაობს.</p>
  </aside>
  <p>…სერვერი პასუხად HTML-ს აგზავნის.</p>
</article>

ეკრანზე <aside> ჩვეულებრივ გვერდით სვეტში ან ფერად ჩარჩოში ჩანს. ეს CSS-ით კეთდება. HTML კი ამბობს: „ეს დამატებითი ინფორმაციაა, მთავარი ხაზის გარეთ“. ეკრანის წამკითხველის მომხმარებელს შეუძლია ის გამოტოვოს, ან პირიქით, პირდაპირ მასზე გადავიდეს.

ყველაფერი ერთად

ახლა ყველა სემანტიკური ელემენტი იცი: header, nav, main, section, article, aside, footer. მათი სწორად გამოყენება ერთ წესამდე დადის: ყოველ ნაწილს ის ელემენტი მიეცი, რომელიც ზუსტად ამბობს, რა არის ის. და თუ არცერთი არ გამოდგება, <div>.

სცადე თავად

გაუშვი. გვერდზე ორი სიახლეა და გვერდითი ჩანართი. დაამატე მესამე <article> შენი სიახლით.

ხშირი შეცდომები

• <article> ყველაფრისთვის. მხოლოდ დამოუკიდებელი, თავისთავად აზრიანი შინაარსისთვის.
• <aside> მთავარი შინაარსისთვის. თუ მის გარეშე ტექსტი გაუგებარი ხდება, ის გვერდითი არ არის.
• სემანტიკა დიზაინის მიხედვით. <aside> არ ნიშნავს „მარჯვენა სვეტს“: ის მნიშვნელობაა, სვეტი კი CSS.

<main>
  <article>
    <header>
      <h1>როგორ ავაწყე ჩემი პირველი საიტი</h1>
      <p>20 მაისი, 2026</p>
    </header>
    <p>ყველაფერი ერთი HTML ფაილით და ერთი სათაურით დაიწყო.</p>
    <aside>
      <h2>რჩევა</h2>
      <p>ყოველი ცვლილების შემდეგ შეინახე ფაილი და განაახლე გვერდი.</p>
    </aside>
    <p>ერთ კვირაში საიტს სამი გვერდი ჰქონდა.</p>
  </article>
</main>

მინი-ქვიზი

შეჯამება

• <article> დამოუკიდებელი შინაარსია: ახალი ამბავი, პოსტი, კომენტარი, პროდუქტი.
• <section> დიდი მთლიანის ნაწილია. article და section ერთმანეთში შეიძლება ჩაიდგას.
• <aside> გვერდითი, დამატებითი შინაარსია, რომლის გარეშეც მთავარი ტექსტი სრულია.
• ყოველ ნაწილს მიეცი ის ელემენტი, რომელიც მას ზუსტად აღწერს.