HTML5 Layouts and Semantic Web

HTML5 Layouts and Semantic Web

HTML5 хуваалт болон семантик веб

traditional html layout vs HTML5 layout

traditional html layout vs HTML5 layout

Өмнө нь веб хуудасны элементүүд (толгой, нийтлэл, доод хэсэг, хянах хэсэг гэх мэт хэсгүүд)-ийг бүлэглэж харуулахын тулд <div> элементийг ашиглаад тухайн <div> элементийнхээ үүргийг харуулахын тулд заавал class эсвэл id ашигладаг байсан.

VS

HTML5-д веб хуудасны хуваалтад ашиглах боломжтой шинэ элементүүдийг оруулсан. Тэдгээрийн нэр нь тухайн элемент дотроо юу агуулахыг тодорхойлсон байдаг. Тэдгээр элементүүдийг semantic tag гэж нэрлэдэг.

Headers & Footers

<header>

<header> нь ихэвчлэн вебсайтын нэр, лого болон бусад холбоосуудыг агуулдаг.

<footer>

<footer> нь вебсайтын copyright, дүрэм журам, болон нууцлалтай холбоотой мэдээлэл агуулдаг.

Navigaiton

<nav>

<nav> нь тухайн веб хуудас дотор шилжих боломжтой үндсэн хуудсуудын холбоосыг агуулдаг.

Articles

<article> нь вебсайтад контент, мэдээг агуулна.

Aside

<aside>

  1. <article>-ийн дотор байвал тухайн article-тай холбоотой товч мэдээлэл харуулна.
  2. <article>-ийн гадна байвал хайлтын хэсэг, вебсайт дээрх сүүлийн үеийн мэдээ, бусад хэсэг рүү очих холбоос гэх мэтээр ашиглагдана.

Sections

<section> элемент нь хоорондоо хамааралтай хэсэг мэдээллийг багцлахад хэрэглэгдэнэ.

Heading Groups

<hgroup> нь <h1>-ээс <h6> хүртэлх элементүүд нийлээд нэг гарчгийн үүрэг гүйцэтгэж буй үед тэдгээрийг багцлахад хэрэглэгдэнэ.

Figures

<figure> <figcaption>

Зураг, бичлэг, график, диаграм, текст дээр ашиглаж болно.

Sectioning elements

<div>

Дээрх олон шинэ элементүүд нэмэгдсэн ч <div> элемент маань веб хуудасны хуваалтад мэдээллүүдийг багцлахад чухал хэвээр байна.

Linking around block-level elements

HTML5 нь дотроо олон элемент агуулсан блок түвшний элементийг бүхэлд нь холбоос болгож ашиглах боломжтой болгосон.

Helping old browsers understand

Хуучин браузерууд HTML5-ийг танихгүй учраас тэдгээрийг inline элемент гэж үздэг. Тиймээс хуучин браузерт зориулж дараах хэсгийг HTML болон CSS-дээ нэмэлтээр оруулж өгөх хэрэгтэй.

HTML5 Layout

HTML5 Layout

Summary

  • HTML5 нь веб хуудасны тодорхой хэсгүүдэд зориулсан элементүүдтэй.
  • Шинэ элементүүдийн тусламжтай бидний код илүү цэгцтэй болно.
  • Хуучин браузерт HTML5-ийг таниулахын тулд шинэ элементүүдийг блок элемент гэдгийг заавал CSS дээр зааж өгөх хэрэгтэй.