HTML Симантик элемент /Semantic/
Semantic гэдэг нь Утга гэсэн үг юм.
Semantic элемент гэдэг нь тодорхой утга агуулдаг элементийг хэлэх бөгөөд хөгжүүлэгч болон Интернет хөтөч хоёр нэг ойлголттой болох зорилготой гэж ойлгож болно.
Semantic биш элементүүд. Жишээ нь: <div>, <span> гэх мэт байх өгөөд эдгээр элементүүдийг өргөн хүрээнд ашигладаг.
Semantic элементүүд. Жишээ нь: <form>, <table>, <footer> гэх мэт байх бөгөөд эдгээр элементүүдийн агуулга нь тодорхой байдаг.
Semantic элементийг HTML-д хэрэглэж сурцгаая
Маш олон вэб сайтууд HTML кодыг: <div id="nav"> <div class="header"> <div id="footer"> гэх мэт аргаар Header, Footer, Navigation-ыг шийдсэн байдаг.
HTML кодод Semantic элементүүдийг ашиглаж байхыг зөвлөж байна.
Симантик элементүүд
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML <section> элемент
Section элементийг <section>-д тодорхойлдог
<section> нь ихэвчилэн сэдэвчилсэн агуулгыг бүлэглэн харуулна.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h1>Монгол ардын үлгэр</h1>
<section>
<h2>Сүүлэн хүү</h2>
<p>Эрт урьд цагт эмгэн өвгөн хоёр амьдран сууж байжээ. Эмгэн нэг өдөр ямаагаа хариулж яваад тургиж орхижээ. Гэтэл нэг ямааныг...</p>
</section>
<section>
<h2>Цэцэн бүсгүйн үлгэр</h2>
<p>Эрт урьд цагт их цэцэн ухаантай бүсгүй байж гэнэ.Тэр жилийн нэг баян хүний тэнэг хүүтэй толгой холбосон юм байжээ.</p>
</section>
</body>
</html>
HTML <article> элемент
<article> элемент нь сайтын нийтлэл, мэдээний нийтлэл, блогийн нийтлэл, гэх мэт контентийг агуулдаг.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<article>
<h1>Сүүлэн хүү</h1>
<p>Эрт урьд цагт эмгэн өвгөн хоёр амьдран сууж байжээ. Эмгэн нэг өдөр ямаагаа хариулж яваад тургиж орхижээ. Гэтэл нэг ямааныг...</p>
</article>
</body>
</html>
HTML <header> элемент
<header> элементэд бичиг баримтын толгой хэсгийг, эсвэл зарим нэг хэсгийн толгойг тодорхойлно.
<header> элементэд бичиг баримтад олон ашиглаж болно.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<article>
<header>
<h1>Сүүлэн хүү</h1>
</header>
<p>Эрт урьд цагт эмгэн өвгөн хоёр амьдран сууж байжээ. Эмгэн нэг өдөр ямаагаа хариулж яваад тургиж орхижээ. Гэтэл нэг ямааныг...</p>
</article>
</body>
</html>
HTML <footer> элемент
<footer> элементэд сайтын зохиогч, зохиогчийн эрх, ашиглах нөхцөл, холбоо барих, ... гэх мэдээлэл агуулдаг
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<footer>
<p>Бидний тухай</p>
<p>Холбоо барих:<a href="mailto:someone@abcd.mn">
someone@abcd.mn</a> </p>
</footer>
</body>
</html>
HTML <nav> элемент
<nav> элементэд холбоосуудын байршлыг тодорхойлно.
Тэмдэглэл: Бичиг баримтын бүх холбоос <nav> элементэд байх ёсгүй. Холбоосуудын томоохон блокуудад зориулагдсан болно. Жишээ нь сайтын цэс.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<nav>
<a href="http://www.abcd.mn/course/11/">HTML</a> |
<a href="http://www.abcd.mn/course/30/">Python</a> |
<a href="http://www.abcd.mn/course/28/">Excel үндсэн түвшин</a> |
<a href="http://www.abcd.mn/course/29/">Excel Чухал функцүүд</a>
</nav>
</body>
</html>
HTML <aside> элемент
<aside> бичиг баримтын үндсэн агуулгатай шууд бус холбоотой байдаг. <aside> ихэвчлэн хажуу тал хажуугийн самбар хэлбэрээр байдаг.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<head>
<style>
aside {
width: 40%;
padding-left: .5rem;
margin-left: .5rem;
float: right;
box-shadow: inset 5px 0 5px -7px #e83f3f;
font-style: italic;
color: #e83f3f;
}
aside > p {
margin: .5rem;
}
</style>
</head>
<body>
<p>“Аялал хүнийг төлөв даруу болгодог. Учир нь аялагчид өөрийгөө энэ дэлхийд ямар өчүүхэн гэдгээ мэдэрсэн байдаг” хэмээх сайхан үгээр Хяргас нуурын Хэцүү хадыг зорьсон аяллын тэмдэглэлээ эхэлье.</p>
<aside>
<p>Хяргас нуур нь Увс аймагт байрлах, Их нууруудын хотгор дахь эрдэст нуур. Тус нуурыг 2000 онд байгалийн цогцолборт газар болгож авсан бөгөөд нийт 3,328 км² нутгийг хамрана. Хяргас нуураас гадна Айраг нуур нь тус хамгаалалтанд багтах ажээ.</p>
</aside>
<p>Бидний эхний зогсоол Завхан аймгийн Тосонцэнгэл сум. Энд хүрээд засмал зам дуусна. Та замдаа Солонготын даваан дээр зогсож хангай газрын байгалийн сайхныг бишрээрэй. Нөмрөг сумаас 90 км шороон замаар явсны дараа Завхан аймгийн Сонгино суманд хүрнэ. Цааш 150 км яваад Хяргас нуурын зүүн эрэг дээр очлоо. Хяргас нуурын Хэцүү хад руу явах зам элсэрхэг тул замдаа хэд хэдэн удаа машин маань сууж байж хүрсэн юм. Хэрэв жижиг тэргээр явж байгаа бол зогсохгүй яваарай. Учир нь сул элс ихтэй учир зогссон газраа суух магадлал өндөр юм билээ. Ингээд 50 км яваад бид зорьсон газар болох Хяргас нуурын Хэцүү Хадад ирлээ.</p>
</body>
</html>
HTML <figure> болон <figcaption> элемент
Зураг болон зургийн тайлбарыг <figure> элементэд бүлэглэж өгнө. Ингэсэнээр зураг, тайлбар, түүний агуулгыг нэг нэгж болгoно.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<head>
<style>
figure {
border: thin #c0c0c0 solid;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 80%;
margin: auto;
}
img {
max-width: 100%;
max-height: auto;
}
figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 3px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<img src="http://www.abcd.mn/static/img/ub/1986.jpg"
alt="1986 оны өвөл, Улаанбаатар хот, Туул голын хөвөө">
<figcaption>1986 оны өвөл, Улаанбаатар хот, Туул голын хөвөө</figcaption>
</figure>
</body>
</html>
Сэтгэгдэлүүд
