- Семантик элемент гэж юу вэ?
- HTML дахь семантик элемент
- HTML <section> элемент #
- HTML <article> Элемент
- <article>-ийг <section>-д орох уу? эсвэл аль альндаа орох уу?
- HTML <header> элемент
- HTML <footer> Элемент
- HTML <nav> Элемент
- HTML <aside> элемент
- HTML <figure> болон<figcaption> элементүүд
- Semantic Elements in HTML
Семантик элемент= Утгатай элемент
Семантик элемент гэж юу вэ? #
Семантик элемент нь өөрийн утга санааг хөтөч болон хөгжүүлэгчдэд тодорхой тайлбарладаг.
Семантик биш элементийн жишээ: <div> болон<span> -Энэ 2 нь доторх агуулгын талаараа ямар ч тайлбар өгдөггүй
Семантик элементийн жишээ: <form>, <table>, болон<article> – Ямар агуулгатай гэдэгээ тодорхой тайлбалсан байна
Семантик гэх үг нь утга зүй гэсэн утга үг юм
HTML дахь семантик элемент #
Олон вэбсайтууд нь HTML код агуулдаг: <div id = “nav”> <div class = “header”> <div id = “footer”> заагч, толгой, хөлийг онцолдог.
HTML дээр вэб хуудасны өөр хэсгүүдийг тодорхойлоход ашиглаж болох семантик элементүүд байдаг.
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section> <article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article> Example 2 #
CSS-ийг ашиглаж <article> элементийг загварчлах:
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html> <article>-ийг <section>-д орох уу? эсвэл аль альндаа орох уу? #
<article> элемент нь бусдаас салангид хараат бус агуулгатай хэсэгийг тодорхойлно
<section> элемент нь бичиг баримтийг хэсэгчэлхэд хэрэглэгдэнэ
Та <section> элементүүдийг агуулсан<article> элементүүд, <section> элементийг агуулсан <article> элемент бүхий HTML хуудсуудыг байх болно.
HTML <header> элемент #
<header> элемент нь танилцуулга болон вэб сайт доторх хуудаснуудын хооронд шилжихэд хэрэглэгдэх холбоосуудыг илэрхийлдэг.
<header> элемент ерөнхийдөө доорх зүйлсийг агуулдаг:
- 1 эсвэл 1-ээс илүү гарчиг элемент байна (<h1> – <h6>)
- Лого эсвэл таних тэмдэг
- зохиогчийн мэдээлэл
Санамж: Нэг HTML баримт бичигт та 1-ээс илүү <header> элемент ашиглаж болно. Гэсэн хэдий ч <header> , <footer>, <address> эсвэл өөр<header> элементийн дотор оруулж болохгүй.
Жишээ #
<article> -ийн гарчиг:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article> HTML <footer> Элемент #
<footer> элемент нь бичиг баримтийн
<footer> элемент нь ихэвчлэн эдгээрийг агуулдаг
- зохиогчийн мэдээлэл
- зохиогчийн эрхийн тухай мэдээлэл
- холбогдох мэдээлэл
- газрын зураг
- дээд холбоосууд руу буцах
- холбогдох баримт бичиг
Та нэг баримт бичигт хэд хэдэн <footer>элементтэй байж болно.
Жишээ #
Хуудасны доод хэсэг:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer> HTML <nav> Элемент #
<nav> элемент нь вэб сайт доторх хуудаснуудын хооронд шилжихэд хэрэглэгдэх холбоосуудыг тодорхойлдог.
Санамж: that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.
баримт бичгийн бүх холбоосууд <nav> элемент дотор байх ёсгүй. <nav> элемент нь зөвхөн томоохон блок хэсэгүүдэд зориулагдсан холбоосуудын байх болно.
Навигац(Navigational) холбоосын бүрдэл:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav> <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside> CSS ашиглан <aside> элементийг загварчилах нь:
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
</body>
</html> HTML <figure> болон<figcaption> элементүүд #
<figure>тэмдэглэгээ нь чимэглэл, диаграм, зураг, кодын жагсаалт гэх мэт бие даасан агуулгыг тодорхойлдог.
<figcaption> тэмдэглэгээ нь <figure> элементийн нэршил юм. <figcaption> элементийг <figure> элементийн эхний эсвэл сүүлчийн хүүхэд болож байрлуулж болно .
<img> элемент нь бодит зураг / чимэглэлийг тодорхойлдог.
Жишээ #
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure> Semantic Elements in HTML #
Below is a list of some of the semantic elements in HTML.
| Tag | Description |
|---|---|
| <article> | салангид эсвэл тусдаа бие дуусан агуулгыг тодорхойлно |
| <aside> | Үндсэн агуулгаас гадна байх агуулгыг тодорхойлдог |
| <details> | Хэрэглэгчийн харж эсвэл нууж болох нэмэлт мэдээллийг тодорхойлдог |
| <figcaption> | <figure> элементийн тайлбарыг тодорхойлно |
| <figure> | Зураг чимэглэл, диаграмм, гэрэл зураг, кодын жагсаалт гэх мэт бие даасан агуулгыг тодорхойлно. |
| <footer> | Бичиг баримт эсвэл нэг хэсэг газарын доод хэсэгийг тохируулна |
| <header> | Бичиг баримт эсвэл нэг хэсэг газарын гарчигийг тодорхойлно |
| <main> | Specifies the main content of a document |
| <mark> | Тэмдэглэсэн эсвэл тодруулсан текстийг тодорхойлно |
| <nav> | Навигацийн холбоосыг тодорхойлдог |
| <section> | Баримт бичгийн нэг хэсгийг тодорхойлно |
| <summary> | <details> элементийн харагдах гарчгийг тодорхойлно |
| <time> | Огноо / цагийг тодорхойлдог |
