Semantic HTML và HTML Entities

1. Giới thiệu

Semantic HTML hay Semantic tag hay Semantic element là cách viết sử dụng các thẻ HTML mô tả rõ ràng ý nghĩa về cấu trúc của phần tử đó đối với các trình duyệt và lập trình viên.
Các phần tử non-semantic không có mô tả rõ ràng về nội dung bên trong phần tử


<div>

<span>

Các phần tử semantic đưa ra các mô tả rõ ràng về nội dung bên trong phần tử


<form>

<table>

<img>

2. Trình duyệt hỗ trợ

Các phần tử semantic trong HTML5 được hỗ trợ hầu hết bởi các trình duyệt hiện đại

3. Một vài semantic mới trong HTML5

Thẻ	Mô tả
<article>	Định nghĩa một bài báo
<aside>	Xác định nội dung nằm bên cạnh nội dung của trang
<details>	Xác định các chi tiết khác mà người dùng có thể xem hoặc ẩn
<figcaption>	Định nghĩa một chú thích cho thẻ <figure>
<figure>	Chỉ đánh dấu một ảnh trong tài liệu.
<footer>	Định nghĩa phần footer cho một tài liệu hoặc một đoạn
<header>	Định nghĩa một tiêu đề cho một tài liệu hoặc phần
<main>	Chỉ định các nội dung chính của một tài liệu
<mark>	Định nghĩa đánh dấu/làm nổi bật văn bản
<nav>	Định nghĩa liên kết điều hướng
<section>	Định nghĩa một phần trong một tài liệu
<summary>	Hiển thị tiêu đề cho phần tử <details>
<time>	Định nghĩa ngày/giờ

Vui lòng xem tiếp tại đây:
https://viblo.asia/p/semantic-html-va-mot-so-the-html-de-phan-chia-noi-dung-trang-ByEZk9k25Q0

HTML Entities được dùng để biểu diễn các ký tự đặc biệt hoặc các biểu tượng không có trên bàn phím vào trong HTML, JavaScript và CSS.
HTML Entities bao gồm cả thực thể số và chữ, chẳng hạn biểu tượng bản quyền © có kiểu viết dạng chữ là © còn kiểu viết dạng số là © Cả hai đều tương đương nhau, kiểu chữ thì dễ nhớ hơn nhưng kiểu số lại được các trình duyệt web hỗ trợ nhiều hơn.
Cần lưu ý là các HTML Entities bắt đầu bằng dấu & và kết thúc bằng dấu ; còn ở giữa sẽ là tên hoặc số, có phân biệt chữ hoa – thường.

1. Một vài mã kí tự hay sử dụng

Result	Description	Entity Name	Entity Number
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
"	double quotation mark	"	"
'	single quotation mark (apostrophe)	'	'
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
©	copyright	©	©
®	registered trademark	®	®

2. UTF-8 Currency Symbols

Char	Dec	Hex	Entity	Name
₠	₠	&#20A0;		euro-currency sign
₡	₡	&#20A1;		colon sign
₢	₢	&#20A2;		cruzeiro sign
₣	₣	&#20A3;		french franc sign
₤	₤	&#20A4;		lira sign
₥	₥	&#20A5;		mill sign
₦	₦	&#20A6;		naira sign
₧	₧	&#20A7;		peseta sign
₨	₨	&#20A8;		rupee sign
₩	₩	&#20A9;		won sign
₪	₪	&#20AA;		new sheqel sign
₫	₫	&#20AB;		dong sign
€	€	&#20AC;	€	euro sign
₭	₭	&#20AD;		kip sign
₮	₮	&#20AE;		tugrik sign
₯	₯	&#20AF;		drachma sign
₰	₰	&#20B0;		german penny symbol
₱	₱	&#20B1;		peso sign
₲	₲	&#20B2;		guarani sign
₳	₳	&#20B3;		austral sign
₴	₴	&#20B4;		hryvnia sign
₵	₵	&#20B5;		cedi sign
₶	₶	&#20B6;		livre tournois sign
₷	₷	&#20B7;		spesmilo sign
₸	₸	&#20B8;		tenge sign
₹	₹	&#20B9;		indian rupee sign
₺	₺	&#20BA;		turkish lira sign
₻	₻	&#20BB;		nordic mark sign
₼	₼	&#20BC;		manat sign
₽	₽	&#20BD;		ruble sign
₾	₾	&#20BE;		lari sign
₿	₿	&#20BF;		bitcoin sign

3. Smiley Emojis For Web

Char	Dec	Hex	Name
😀	😀	&#1F600;	grinning face
😁	😁	&#1F601;	grinning face with smiling eyes
😂	😂	&#1F602;	face with tears of joy
😃	😃	&#1F603;	smiling face with open mouth
😄	😄	&#1F604;	smiling face with open mouth and smiling eyes
😅	😅	&#1F605;	smiling face with open mouth and cold sweat
😆	😆	&#1F606;	smiling face with open mouth and tightly-closed eyes
😇	😇	&#1F607;	smiling face with halo
😈	😈	&#1F608;	smiling face with horns
😉	😉	&#1F609;	winking face
😊	😊	&#1F60A;	smiling face with smiling eyes
😋	😋	&#1F60B;	face savouring delicious food
😌	😌	&#1F60C;	relieved face
😍	😍	&#1F60D;	smiling face with heart-shaped eyes
😎	😎	&#1F60E;	smiling face with sunglasses
😏	😏	&#1F60F;	smiling face
😐	😐	&#1F610;	neutral face
😑	😑	&#1F611;	expressionless face
😒	😒	&#1F612;	unamused face
😓	😓	&#1F613;	face with cold sweat
😔	😔	&#1F614;	pensive face
😕	😕	&#1F615;	confused face
😖	😖	&#1F616;	confounded face
😗	😗	&#1F617;	kissing face
😘	😘	&#1F618;	face throwing a kiss
😙	😙	&#1F619;	kissing face width smiling eyes
😚	😚	&#1F61A;	kissing face width closed eyes
😛	😛	&#1F61B;	face with stuck-out tongue
😜	😜	&#1F61C;	face with stuck-out tongue and winking eye
😝	😝	&#1F61D;	face with stuck-out tongue and tightly-closed eyes
😞	😞	&#1F61E;	disappointed face
😟	😟	&#1F61F;	worried face
😠	😠	&#1F620;	angry face
😡	😡	&#1F621;	pouting face
😢	😢	&#1F622;	crying face
😣	😣	&#1F623;	persevering face
😤	😤	&#1F624;	face with look of triumph
😥	😥	&#1F625;	disappointed but relieved face
😦	😦	&#1F626;	frowning face with open mouth
😧	😧	&#1F627;	anguished face
😨	😨	&#1F628;	fearful face
😩	😩	&#1F629;	weary face
😪	😪	&#1F62A;	sleepy face
😫	😫	&#1F62B;	tired face
😬	😬	&#1F62C;	grimacing face
😭	😭	&#1F62D;	loudy crying face
😮	😮	&#1F62E;	face with open mouth
😯	😯	&#1F62F;	hushed face
😰	😰	&#1F630;	face with open mouth and cold sweat
😱	😱	&#1F631;	face screaming in fear
😲	😲	&#1F632;	astonished face
😳	😳	&#1F633;	flushed face
😴	😴	&#1F634;	sleeping face
😵	😵	&#1F635;	dizzy face
😶	😶	&#1F636;	face without mouth
😷	😷	&#1F637;	face with medical mask