Casharkaan waxaan baranayaa laba unug oo aad muhiim u ah HTML-ka — <div> iyo <span>. Labaduba waxay u shaqeeyaan sidii weel ama sanduuq lagu kooxeeyo unugyo kale, laakiin waxay kala duwan yihiin hab-muuqaalkooda.
Unugga <div> — Block Container
Unugga <div> (Division) waa block-level element — wuxuu ku bilaabmaa xariiq cusub wuxuuna qaataa dhammaan ballaca unugga waalidka.
Waxaa loo adeegsadaa:
- Kooxaynta qaybaha weyn ee bogga
- Samaynta qaab-dhismeed (layout) CSS la isticmaalayo
- Maamulida unugyo badan iyaga oo mid ahaan la dhaqaaqayaa
<!DOCTYPE html>
<html>
<head>
<title>Div</title>
<style>
.sanduuq {
background-color: #f0f8ff;
border: 2px solid #0077cc;
padding: 20px;
margin: 10px;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="sanduuq">
<h2>Qaybta Koowaad</h2>
<p>Qoraalka qaybta koowaad.</p>
</div>
<div class="sanduuq">
<h2>Qaybta Labaad</h2>
<p>Qoraalka qaybta labaad.</p>
</div>
</body>
</html>Natiijada: Laba sanduuq oo kala-sooc maran dhexdooda, midkiiba wuxuu bilaabmaa xariiq cusub.
Unugga <span> — Inline Container
Unugga <span> waa inline element — ma bilaabanayso xariiq cusub. Wuxuu ku dhex jiraa xariiqda qoraalka.
Waxaa loo adeegsadaa:
- Midab ama qurxin u samaynta qayb yar oo qoraal ah
- Maamulidda eray ama xaraf gaar ah oo ku dhex jira tuduc
<!DOCTYPE html>
<html>
<head>
<title>Span</title>
<style>
.muhiim { color: red; font-weight: bold; }
.calaamad { background-color: yellow; }
.tiro { color: blue; font-family: monospace; }
</style>
</head>
<body>
<p>
HTML waa <span class="muhiim">lagama maarman</span> si aad u samayso website.
</p>
<p>
Cinwaanka bogga waa <span class="calaamad">title-ga</span> ee ku muuqda tab-ka.
</p>
<p>
Tirada unugyada HTML waxay dhaafaysaa <span class="tiro">140</span> unug.
</p>
</body>
</html>Natiijada: Qaybaha <span> ku jira waxay muuqdaan midabyo kala duwan laakiin waxay sii wataan isla xariiqda qoraalka.
Farqiga u Dhexeeya <div> iyo <span>
<div> | <span> | |
|---|---|---|
| Nooca | Block-level | Inline |
| Xariiq cusub | Haa ✓ | Maya ✗ |
| Ballaca caadiga ah | 100% (dhammaan) | Baahida nuxurka |
| Waxaa loo isticmaalo | Qaybaha weyn | Qaybo yar oo qoraal ah |
| CSS | Layout, qaab-dhismeed | Qurxinta qoraalka |
Tusaale: Qaab-dhismeedka Bogga
<!DOCTYPE html>
<html>
<head>
<title>Qaab-dhismeedka Div</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; }
#cinwaanka {
background: #0a0a0a;
color: white;
padding: 20px;
text-align: center;
}
#wax-ku-jira {
max-width: 800px;
margin: 20px auto;
padding: 0 20px;
}
#xagga-bidix {
float: left;
width: 60%;
padding-right: 20px;
}
#xagga-midig {
float: right;
width: 38%;
background: #f5f5f5;
padding: 15px;
border-radius: 8px;
}
#hoosta {
clear: both;
background: #333;
color: white;
text-align: center;
padding: 15px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="cinwaanka">
<h1>Websiteyda HTML</h1>
</div>
<div id="wax-ku-jira">
<div id="xagga-bidix">
<h2>Nuxurka Ugu Weyn</h2>
<p>
HTML waa luqadda <span style="color:#00d97e; font-weight:bold;">aasaasiga</span>
u ah dhismaha websiteyda.
Waxaad ku baran kartaa
<span style="text-decoration:underline;">maalin ku jirta</span>.
</p>
</div>
<div id="xagga-midig">
<h3>Xiriirrada Muhiimka</h3>
<ul>
<li><a href="#">Casharrada</a></li>
<li><a href="#">Tijaabooyin</a></li>
<li><a href="#">Xiriir</a></li>
</ul>
</div>
</div>
<div id="hoosta">
<p>© 2025 Websiteyda HTML</p>
</div>
</body>
</html>Goorta la Isticmaalo <div> iyo Goorta La’aanta
Shaxda qoraalka ka soo baxay bogga (PDF) ee HTML5:
Ha isticmaalin
<div>marka unugyo semantic ah ay jiraan
Bedel <div> ku | Goorta |
|---|---|
<header> | Cinwaanka bogga |
<nav> | Navigation-ka |
<main> | Nuxurka ugu weyn |
<section> | Qaybta nuxurka |
<article> | Maqaal, blog post |
<aside> | Sidebar |
<footer> | Hoosta bogga |
<div> | Kaliya marka mid kale uusan ku habboonayn |
Koobid
<div>— Block container, wuxuu bilaabmaa xariiq cusub, waxaa loo isticmaalo qaybaha weyn<span>— Inline container, ku dhex jira qoraalka, waxaa loo isticmaalo qurxinta qaybo yar- Labaduba ma leeyihiin muuqaal caadi ah — CSS ayaa u samaynaysa qurxinta
- Had iyo jeer dooro unugga semantic marka uu ku habboon yahay
Casharka xigta: Waxaan baranayaa Meta Tags iyo sida HTML-ku u xidho CSS iyo JavaScript.