---
title: HTML бүтэцийн элемент болон техник
description: "> Вэбсайтууд агуулгыг олон баганад (сэтгүүл эсвэл сонин гэх мэт зүйлээр) харуулдаг. CSS Template ## Cities - [London](#) - [Paris](#) - [Tokyo](#) # London London is the capital city of England. It is the most populous city in the United…"
url: "https://apprentice.mn/docs/html-layout-elements-and-techniques/"
updated: "2021-07-07"
category: HTML
---

# HTML бүтэцийн элемент болон техник

> Вэбсайтууд агуулгыг олон баганад (сэтгүүл эсвэл сонин гэх мэт зүйлээр) харуулдаг.

     CSS Template

## Cities

- [London](#)
- [Paris](#)
- [Tokyo](#)

# London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer

## HTML Бүтэцийн элементүүд [#](https://apprentice.mn/docs/html-layout-elements-and-techniques/#2-toc-title)

HTML has several semantic elements that define the different parts of a web page:

| ![HTML5 Semantic Elements](https://www.w3schools.com/html/img_sem_elements.gif) | - `<header>` – Баримт бичиг эсвэл хэсгийн толгой хэсгийг тодорхойлно - `<nav>` – холбоосыг хаашаа явж байгааг тодорхойлно - `<section>` – Баримт бичгийн хэсгийг тодорхойлно - `<article>` – салангид агуулгыг тодорхойлно - `<aside>` – Агуулгын хажуу хэсэгийг тодорхойлно(хажуугийн самбар) - `<footer>` – Хуудасын доогуур хэсэгийг тодорхойлно - `<details>` – Хэрэглэгчийн хүсэлтээр нээж хаах боломжтой нэмэлт мэдээллийг тодорхойлдог - `<summary>` – `<details>` элементийн гарчгийг тодорхойлно |
| --- | --- |

##

CSS Framework

Хэрэв та өөрийн зохион байгуулалтыг(layout) хурдан үүсгэхийг хүсвэл CSS хүрээг ашиглаж болно

## CSS Float бүтэц

CSS `float` шинж чанарыг ашиглан вэб бүтцийг бүхэлд нь хийх нь түгээмэл байдаг. Хөвөгчийг сурахад хялбар байдаг-`float`ба `clear` шинж чанарууд хэрхэн ажилладагийг мэддэг байхад хийхэд амархан.

     CSS Template

## Cities

- [London](#)
- [Paris](#)
- [Tokyo](#)

# London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer

## CSS Flexbox бүтэц

Flexbox-ийг ашигласнаар хуудасны зохион байгуулалт нь янз бүрийн дэлгэцийн хэмжээ, дэлгэцийн янз бүрийн төхөөрөмжийг багтаасан байх үед элементүүд урьдчилан таамаглаж чаддаг.

     CSS Template

## Cities

- [London](#)
- [Paris](#)
- [Tokyo](#)

# London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer

## CSS сүлжээний бүтэц

CSS Grid Layout Module нь сүлжээнд суурилсан, мөр, баганатай байршлын системийг санал болгодог бөгөөд ингэснээр floats болон байршил ашиглахгүйгээр вэб хуудасны дизайн хийхэд хялбар болгодог.

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-layout-elements-and-techniques%2F&linkname=HTML%20%D0%B1%D2%AF%D1%82%D1%8D%D1%86%D0%B8%D0%B9%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%20%D0%B1%D0%BE%D0%BB%D0%BE%D0%BD%20%D1%82%D0%B5%D1%85%D0%BD%D0%B8%D0%BA](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-layout-elements-and-techniques%2F&linkname=HTML%20%D0%B1%D2%AF%D1%82%D1%8D%D1%86%D0%B8%D0%B9%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%20%D0%B1%D0%BE%D0%BB%D0%BE%D0%BD%20%D1%82%D0%B5%D1%85%D0%BD%D0%B8%D0%BA)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-layout-elements-and-techniques%2F&linkname=HTML%20%D0%B1%D2%AF%D1%82%D1%8D%D1%86%D0%B8%D0%B9%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%20%D0%B1%D0%BE%D0%BB%D0%BE%D0%BD%20%D1%82%D0%B5%D1%85%D0%BD%D0%B8%D0%BA](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-layout-elements-and-techniques%2F&linkname=HTML%20%D0%B1%D2%AF%D1%82%D1%8D%D1%86%D0%B8%D0%B9%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%20%D0%B1%D0%BE%D0%BB%D0%BE%D0%BD%20%D1%82%D0%B5%D1%85%D0%BD%D0%B8%D0%BA)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-layout-elements-and-techniques%2F&linkname=HTML%20%D0%B1%D2%AF%D1%82%D1%8D%D1%86%D0%B8%D0%B9%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%20%D0%B1%D0%BE%D0%BB%D0%BE%D0%BD%20%D1%82%D0%B5%D1%85%D0%BD%D0%B8%D0%BA](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-layout-elements-and-techniques%2F&linkname=HTML%20%D0%B1%D2%AF%D1%82%D1%8D%D1%86%D0%B8%D0%B9%D0%BD%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%20%D0%B1%D0%BE%D0%BB%D0%BE%D0%BD%20%D1%82%D0%B5%D1%85%D0%BD%D0%B8%D0%BA)[https://www.addtoany.com/share](https://www.addtoany.com/share)