Curiyayaasha Macnaha Leh ee HTML5

Casharkaan, waxaan baran doonaa curiyayaasha macnaha leh (semantic HTML5). Kuwani waxay u sheegaan biraawsarka iyo matoorada raadinta waxa qayb kasta oo bogga ah ka kooban tahay.

1. Waa maxay Semantic HTML?

Semantic HTML waa isticmaalka summadaha qeexaya macnaha qaybta, halkii laga isticmaali lahaa summadaha guud sida <div>.

Summad aan macne lahayn (non-semantic): <div> — kama sheego waxa ku jira. Summad macne leh (semantic): <nav>, <article>, <footer> — waxay si cad u sheegaan doorka qaybta.

2. Curiyayaasha Semantic ee ugu Muhiimsan

<body>
    <header>
        <h1>Magaca Mareegta</h1>
        <nav>
            <ul>
                <li><a href="/">Hoyga</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/blog">Blog</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>Qaybta Ku saabsan</h2>
            <p>Qoraalka qaybtan ku saabsan.</p>
        </section>

        <article>
            <h2>Maqaal: Barashada HTML</h2>
            <p>Qoraalka maqaalka...</p>
        </article>
    </main>

    <footer>
        <p>&copy; 2026 Magaca Mareegta</p>
    </footer>
</body>

Sharaxaadda:

<header>: Qaybta sare ee bogga — cinwaanka, logo-ga, navigation-ka.
<nav>: Navigation links — xiriirrada muhiimka ah ee bogga.
<main>: Nuxurka ugu muhiimsan ee bogga. Bog kasta waa inuu leeyahay hal <main> oo kaliya.
<section>: Qayb nuxur ah oo la xiriirta mawduuc gaar ah.
<article>: Nuxur madaxbannaan oo iskiis u taagnaan kara — sida maqaal, blog post, faallo.
<aside>: Nuxur dhinac ah — sidebar, xayeysiis, xiriirro dheeri ah.
<footer>: Qaybta hoose ee bogga — macluumaadka xiriirka, copyright, xiriirro.

3. Maxay tahay faa’iidada semantic HTML?

Accessibility: Dadka isticmaalaya screen readers waxay si fudud ugu dhex mari karaan qaybaha bogga.
SEO: Matoorada raadinta (sida Google) waxay fahmaan qaab-dhismeedka bogga si fiican.
Maintainability: Koodhku waa mid la fahmi karo — qof kasta oo akhriya koodhka wuu garan karaa doorka qayb kasta.

4. Marka la isticmaalo div-ka

<div> weli waa mid faa’iido leh — laakiin kaliya marka aysan jirin summad semantic oo ku habboon. Tusaale: qurxinta CSS-ga, ama kooxaynta curiyayaasha si loo qaabeeyo.

Layli (Practice)

Abuur bog HTML ah oo isticmaalaya: <header>, <nav>, <main>, <section>, <article>, <footer>.
Gel <nav> gudaha labo xiriir oo ah: “Hoyga” iyo “Blog”.
Gudaha <main>, ku dar labo <section> oo kala ah “About” iyo “Blog Posts”.
Ku dar hal <article> gudaha qaybta “Blog Posts”.

Sii wadashada: Casharka xigta (ugudambeynta), waxaan baran doonaa hab-dhaqanka ugu fiican iyo aasaaska helitaanka!