<h2 id="heading-demo-amp-short-video">Demo &amp; Short-Video</h2>
<p><a target="_blank" href="https://github.com/KhucHieuNghi/html-principle/tree/main/html-semantic">https://github.com/KhucHieuNghi/html-principle/tree/main/html-semantic</a></p>
<h2 id="heading-center-of-the-problem">Center of the problem</h2>
<blockquote>
<p>Với <strong>Headless</strong> cấu trúc tổ chức "Elements" với "web-application" <strong><mark>rắc rối</mark></strong> <mark> khi đọc hoặc tìm "Elements" nếu không có attributes</mark>( id, classname, data-*).</p>
<p><mark>Phân biệt Elements bằng attributes khó hơn thay vì sử dụng semantics</mark> (specifics tag name)</p>
</blockquote>
<h2 id="heading-pros">Pros</h2>
<ul>
<li><p>Mô tả ý nghĩa và cấu trúc của nội dung trên trang web.</p>
</li>
<li><p>Cải thiện SEO, Accessibility, Search engines ( <em>unverified news</em> )</p>
</li>
</ul>
<h2 id="heading-cons">Cons</h2>
<ul>
<li><p>Chưa quen khi triển khai Semantic HTML</p>
</li>
<li><p>Confuse loại semantic HTML khi triển khai hoặc tổ chức Element</p>
</li>
</ul>
<h2 id="heading-main-principle">Main Principle</h2>
<ul>
<li><p>Semantic HTML không quan trọng. Góc độ Engineer mang tính clean-code</p>
</li>
<li><p>Triển khai theo vùng từ cấp cha đến cấp con (hình dưới)</p>
</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1707306696937/5cd8f193-77dc-47fe-ab3b-d04724be1718.png" alt class="image--center mx-auto" /></p>
<h2 id="heading-implementation-levels">Implementation levels</h2>
<p>Level 1: Semantic HTML Cấp cha</p>
<p>Level 2: Semantic HTML đến các Cấp con</p>
<p>Level 3: Semantic HTML các tags đặc biệt</p>
<p>Level 4: Lập rules hoặc conventions cho quy tắc Semantic HTML</p>


## Demo & Short-Video

[https://github.com/KhucHieuNghi/html-principle/tree/main/html-semantic](https://github.com/KhucHieuNghi/html-principle/tree/main/html-semantic)

## Center of the problem

> Với **Headless** cấu trúc tổ chức "Elements" với "web-application" **<mark>rắc rối</mark>** <mark> khi đọc hoặc tìm "Elements" nếu không có attributes</mark>( id, classname, data-\*).
> 
> <mark>Phân biệt Elements bằng attributes khó hơn thay vì sử dụng semantics</mark> (specifics tag name)

## Pros

* Mô tả ý nghĩa và cấu trúc của nội dung trên trang web.
    
* Cải thiện SEO, Accessibility, Search engines ( *unverified news* )
    

## Cons

* Chưa quen khi triển khai Semantic HTML
    
* Confuse loại semantic HTML khi triển khai hoặc tổ chức Element
    

## Main Principle

* Semantic HTML không quan trọng. Góc độ Engineer mang tính clean-code
    
* Triển khai theo vùng từ cấp cha đến cấp con (hình dưới)
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1707306696937/5cd8f193-77dc-47fe-ab3b-d04724be1718.png align="center")

## Implementation levels

Level 1: Semantic HTML Cấp cha

Level 2: Semantic HTML đến các Cấp con

Level 3: Semantic HTML các tags đặc biệt

Level 4: Lập rules hoặc conventions cho quy tắc Semantic HTML

Semantic HTML cái thiện cấu trúc elements DOM trên website

HTML Semantic Principles

HTML5:  Principle Semantics

Demo &amp; Short-Video

Center of the problem

Pros

Cons

Main Principle

Implementation levels

Deppin Infinity Technical: Javascript, React, NodeJS

HTML5: Principle Semantics

Table of contents

Demo & Short-Video

Center of the problem

Pros

Cons

Main Principle

Implementation levels