HTML có nhiều thẻ và để nhớ hết các thẻ đó cũng cần một thời gian dài học hỏi và trải nghiệm cho những dự án thực tế. Nhưng đôi khi chuyện ta quên tên, hay đôi khi ta muốn tìm hiểu rõ hơn về công dụng về thẻ đó thì cũng phải nhờ anh Google tra cứu và tìm kiếm.
Vậy nên bài viết này chém về tổng hợp những thẻ hay dùng trong HTML với phong cách ghi chú lại ngắn gọn và có tính áp dụng thực tế
Bookmark nào
Bạn có thể Bookmark lại trang này để có gì sau này tham khảo nha
HTML5 cơ bản
Vài lưu ý thuật ngữ
- Đầu tiên là từ HTML là từ viết tắt các chữ cái đầu của cụm từ
Hyper Text Markup Language
. Nó giúp người dùng tạo và cấu trúc các thành phần trong trang web, ứng dụng. Phân chia đoạn văn
- HTML không phải là ngôn ngữ lập trình nên nó không tạo ra chức năng động được. Nó giống như Microsoft Word chỉ dùng bố cục và định dạng trang web.
- Khi làm việc với HTML thì ta sẽ dùng các cấu trúc đơn giản với thẻ (tags) và thuộc tính (attributes) để đánh dấu lên trang web
- HTML được sáng tạo bởi Tim Berners-Lee. Xuất bản lần đầu năm 1991 bao gồm 18 tags. Và cứ thế phát triển nhiều hơn về sau. Hiện tại thì HTML có hơn 140 tag theo trang Dev Mozilla trong đó thì có nhiều tag không còn được sử dụng.
HTML hoạt động sao?
Văn bản HTML là tập tin có phần mở rộng là .html
hoặc .htm
và có thể được mở bằng trình duyệt như Google Chrome, Firefox, Safari, Opera…
Thông thường một trang web sẽ có nhiều trang html
như
- Trang chủ
- Trang giới thiệu
- Trang dịch vụ hoặc sản phẩm cung cấp
- Trang liên hệ
Mỗi trang html
sẽ chứa nhiều tag khác nhau để bố cục, dánh dấu trang web lại và các tag thường có thẻ đóng/mở như <tag> nội dung ở giữa thẻ mở/đóng </tag>
. Cũng có nhiều thẻ không có thẻ đóng mà nó tự đóng ví dụ <img />
.
Hiện tại HTML đã được phát triển lên HTML5 và chúng ta sẽ đi tìm hiểu về nó nhé
HTML5 semantic tag
Cấu trúc trang cơ bản của một trang web theo chuẩn HTML5 với thẻ ngữ nghĩa (semantic tag). Dùng thẻ ngữ nghĩa sẽ giúp một phần tối ưu hóa bộ máy tìm kiếm (SEO - Search Engine Optimization)
Tìm hiểu thêm về tối ưu bộ máy tìm kiếm - SEO
Bạn nào muốn tìm hiểu thêm về SEO thì có thể đọc thêm bài
này nhé
Bên dưới đây là ví dụ một trang web được viết với chuẩn HTML5 dựa trên thẻ ngữ nghĩa semantic. Mời bạn tham khảo nhé
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<header>
<div id="logo">LOGO</div>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/link">Blog</a></li>
<li><a href="/link">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h2>HTML Cơ bản</h2>
<p>Nội dung chém gió ở đây</p>
</article>
<article>
<h2>HTML nâng cao</h2>
<p>Chém gió mạnh hơn nữa vào</p>
</article>
<section>Phần này là nhóm một số nội dung liên quan tới nhau</section>
<aside>Sidebar</aside>
<footer>
<p>© HTML CheatSheet</p>
<address>Email <a href="mailto:[email protected]">me</a></address>
</footer>
|
Hiển thị cho ví dụ HTML5 semantic
HTML Cơ bản
Nội dung chém gió ở đây
HTML nâng cao
Chém gió mạnh hơn nữa vào
Phần này là nhóm một số nội dung liên quan tới nhau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="https://doidev.com/" />
<title>HTML CheatSheet</title>
<meta name="description" content="HTML cheat sheet">
<meta name="keywords" content="html,cheatsheet" />
<meta property="fb:admins" content="fbadmin" />
<meta property="og:title" content="HTML CheatSheet" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://doidev.com/" />
<meta property="og:image" content="https://doidev.com/html-cheat-sheet/featured-image.png" />
<meta property="og:description" content="HTML cheat sheet" />
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="alternate" hreflang="en" href="https://doidev.com/en/" />
<link rel="stylesheet" href="/styles.css">
<script src="/script.js"></script>
</head>
|
Khởi tạo web
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>
<meta name="description" content="Khoảng giới hạn trong 155 ký tự">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="link to javascript file"></script>
<script src="script.js"></script>
</head>
<body>
<!-- Content -->
</body>
</html>
|
Open Graph
Dùng trong thẻ dùng để khai báo thông tin khi chia sẻ đường dẫn qua nền tảng xã hội (Facebook, Twitter…) thì đường dẫn sẽ hiển thị có hình ảnh, tiêu đề, mô tả và trang web
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!doctype html>
<html xmlns:og="http://ogp.me/ns#">
<head>
<title>Ví dụ</title>
<meta property="og:title" content="Cheat Sheet" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://doidev.com/" />
<meta property="og:image" content="https://doidev.com/demo.jpg" />
---
Có thể thiết lập thêm như bên dưới
---
<meta property="og:audio" content="https://doidev.com/track.mp3" />
<meta property="og:description" content="A brief description" />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="HTML CheatSheet" />
<meta property="og:video" content="https://doidev.com/video.swf" />
|
Cấu trúc
Tables(bảng)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<table><caption>Liên hệ</caption>
<thead>
<tr>
<th>Tên</th>
<th colspan="2">Số Điện thoại</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chém gió đời Dev</td>
<td>577854</td>
<td>577855</td>
</tr>
<tr>
<td>Chém gió Web Dev</td>
<td>577856</td>
<td>577857</td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td>Nhà</td>
<td>Cơ quan</td>
</tr>
</tfoot>
</table>
|
Hiển thị cho ví dụ Khởi tạo Trang web
Liên hệ
Tên |
Số Điện thoại |
Chém gió đời Dev |
577854 |
577855 |
Chém gió Web Dev |
577856 |
577857 |
|
Nhà |
Cơ quan |
Danh sách (list)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
1. Danh sách không có thứ tự
<ul>
<li>Sáng</li>
<li>Trưa</li>
<li>Chiều</li>
</ul>
2. Danh sách có thứ tự
<ol>
<li>Một vợ</li>
<li>Hai con</li>
<li>Ba lầu</li>
<li>Bốn bánh</li>
</ol>
3. Danh sách định nghĩa
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets </dd>
</dl>
|
Hiển thị cho ví dụ danh sách
- Danh sách không có thứ tự
2. Danh sách có thứ tự
- Một vợ
- Hai con
- Ba lầu
- Bốn bánh
3. Danh sách định nghĩa
- HTML
- Hypertext Markup Language
- CSS
- Cascading Style Sheets
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<form action="/action.php" method="post">
Name: <input name="name" type="text" /> <br />
Age: <input max="99" min="1" name="age" step="1" type="number" value="18" /> <br />
<select name="gender">
<option selected="selected" value="male">Male</option>
<option value="female">Female</option>
</select>
<br />
<input checked="checked" name="newsletter" type="radio" value="daily" /> Daily <input name="newsletter" type="radio" value="weekly" /> Weekly<br />
<textarea cols="20" name="comments" rows="5">Comment</textarea>
<br />
<label><input name="terms" type="checkbox" value="tandc" />Accept terms</label> <br />
<input type="submit" value="Submit" />
</form>
|
Hiển thị cho Form biểu mẫu
Bài này tới đây là hết rồi. Nó chỉ là một tóm tắt ngắn gọn và cơ bản về HTML5 thôi