Học cách định dạng và hiển thị text trong HTML - từ tiêu đề đến đoạn văn
Thẻ văn bản (Text Tags) là những thẻ HTML được sử dụng để hiển thị và định dạng nội dung văn bản trên trang web. Chúng bao gồm tiêu đề, đoạn văn, danh sách, và các thẻ định dạng text.
Tạo tiêu đề với 6 cấp độ từ h1 đến h6
<h1> <h2> <h3> <h4> <h5> <h6>
Hiển thị đoạn văn bản và ngắt dòng
<p> <br> <hr>
Tạo danh sách có thứ tự và không thứ tự
<ul> <ol> <li> <dl>
Định dạng text: in đậm, in nghiêng, gạch chân...
<strong> <em> <u> <mark>
HTML cung cấp 6 cấp độ tiêu đề từ <h1> đến <h6>, trong đó <h1> là tiêu đề quan trọng nhất và <h6> là ít quan trọng nhất.
<h1>Tiêu đề cấp 1 - Quan trọng nhất</h1>
<h2>Tiêu đề cấp 2 - Phần chính</h2>
<h3>Tiêu đề cấp 3 - Tiểu mục</h3>
<h4>Tiêu đề cấp 4 - Chi tiết</h4>
<h5>Tiêu đề cấp 5 - Phụ</h5>
<h6>Tiêu đề cấp 6 - Ít quan trọng nhất</h6><p>Đây là một đoạn văn bản đầu tiên.</p>
<p>Đây là đoạn văn thứ hai. Mỗi thẻ p sẽ tự động tạo khoảng cách
với đoạn văn khác.</p>
<p>Trong HTML, dù bạn viết nhiều dòng như thế này,
hoặc có nhiều spaces như vậy,
browser vẫn chỉ hiển thị một dòng và một space.</p>Đây là một đoạn văn bản đầu tiên.
Đây là đoạn văn thứ hai. Mỗi thẻ p sẽ tự động tạo khoảng cách với đoạn văn khác.
Trong HTML, dù bạn viết nhiều dòng như thế này, hoặc có nhiều spaces như vậy, browser vẫn chỉ hiển thị một dòng và một space.
<p>Dòng thứ nhất<br>
Dòng thứ hai (có <br> phía trên)</p>
<p>Đoạn văn trước đường kẻ</p>
<hr>
<p>Đoạn văn sau đường kẻ</p>
<!-- Địa chỉ thường dùng br -->
<address>
Công ty ABC<br>
123 Đường XYZ<br>
Quận 1, TP.HCM<br>
Phone: 0123-456-789
</address>Dòng thứ nhất
Dòng thứ hai (có <br> phía trên)
Đoạn văn trước đường kẻ
Đoạn văn sau đường kẻ
Công ty ABC<!-- Danh sách mặc định (1, 2, 3...) -->
<ol>
<li>Học HTML</li>
<li>Học CSS</li>
<li>Học JavaScript</li>
</ol>
<!-- Danh sách chữ cái (a, b, c...) -->
<ol type="a">
<li>Frontend Development</li>
<li>Backend Development</li>
<li>DevOps</li>
</ol>
<!-- Bắt đầu từ số 5 -->
<ol start="5">
<li>Bước 5: Testing</li>
<li>Bước 6: Deployment</li>
<li>Bước 7: Maintenance</li>
</ol><!-- Danh sách bullet points -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Danh sách lồng nhau (nested) -->
<ul>
<li>Frontend Technologies
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript ES6+</li>
</ul>
</li>
<li>Backend Technologies
<ul>
<li>Node.js</li>
<li>Python</li>
<li>PHP</li>
</ul>
</li>
</ul><dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - Ngôn ngữ đánh dấu siêu văn bản</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - Ngôn ngữ định dạng giao diện</dd>
<dt>JavaScript</dt>
<dd>Ngôn ngữ lập trình cho web</dd>
<dd>Có thể chạy trên browser và server</dd>
</dl>Các thẻ định dạng giúp làm nổi bật, nhấn mạnh hoặc thay đổi giao diện của văn bản mà không thay đổi ý nghĩa cơ bản.
<!-- Text Emphasis -->
<p>Văn bản <strong>quan trọng</strong> và <em>nhấn mạnh</em></p>
<p>Văn bản <b>in đậm</b> và <i>in nghiêng</i></p>
<!-- Text Decoration -->
<p>Văn bản <u>gạch chân</u> và <s>gạch ngang</s></p>
<p>Văn bản <mark>được highlight</mark> quan trọng</p>
<!-- Special Formatting -->
<p>Công thức: H<sub>2</sub>O và E = mc<sup>2</sup></p>
<p>Đây là <small>chữ nhỏ</small> và <del>nội dung bị xóa</del></p>
<!-- Code và Quotes -->
<p>Sử dụng tag <code><p></code> để tạo đoạn văn</p>
<p><q>Đây là quote ngắn</q> trong câu</p>
<blockquote>
<p>Đây là một quote dài, thường được sử dụng để trích dẫn
từ nguồn khác hoặc làm nổi bật một ý quan trọng.</p>
<footer>— <cite>Tác giả nổi tiếng</cite></footer>
</blockquote>Văn bản quan trọng và nhấn mạnh
Văn bản in đậm và in nghiêng
Văn bản gạch chân và gạch ngang
Văn bản được highlight quan trọng
Công thức: H2O và E = mc2
Đây là chữ nhỏ và nội dung bị xóa
Sử dụng tag <p> để tạo đoạn văn
Đây là quote ngắn
trong câu
Đây là một quote dài, thường được sử dụng để trích dẫn từ nguồn khác hoặc làm nổi bật một ý quan trọng.
<strong>, <em> - có ý nghĩa<b>, <i> - chỉ giao diệnMục tiêu: Tạo một trang blog đơn giản sử dụng tất cả các thẻ văn bản đã học
Chào mừng bạn đến với blog cá nhân của tôi! Tôi chia sẻ kiến thức về lập trình web và những trải nghiệm học tập.
HTML là nền tảng quan trọng nhất trong web development. Khi bắt đầu học, tôi cảm thấy hơi khó khăn nhưng sau đó thấy rất thú vị!
"HTML không chỉ là code, mà là cách chúng ta cấu trúc thông tin trên web"
— Tim Berners-Lee
Ngày nay, HTML5 đã trở thành tiêu chuẩn. Để chạy một trang web, bạn chỉ cần <!DOCTYPE html> và bắt đầu code!
Một số công thức quan trọng: H2O (nước) và E = mc2 (Einstein)
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog của [Tên bạn]</title>
<style>
body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
h1 { color: #2d3748; border-bottom: 2px solid #667eea; }
h2 { color: #667eea; }
blockquote { border-left: 4px solid #667eea; padding-left: 15px; background: #f8f9fa; }
</style>
</head>
<body>
<!-- 1. HEADER - Tiêu đề blog và giới thiệu -->
<h1>Blog của [Thay tên bạn]</h1>
<p>[Viết giới thiệu về blog của bạn, sử dụng <strong> và <em>]</p>
<!-- 2. BÀI VIẾT 1: Học HTML -->
<h2>Học HTML cơ bản</h2>
<p>[Viết đoạn mở đầu với <strong> và <em>]</p>
<h3>5 bước học HTML:</h3>
<ol>
<li>[Bước 1]</li>
<li>[Bước 2]</li>
<li>[Bước 3]</li>
<li>[Bước 4]</li>
<li>[Bước 5]</li>
</ol>
<blockquote>
"[Viết một quote về HTML]"
<br><cite>— [Tác giả]</cite>
</blockquote>
<!-- 3. BÀI VIẾT 2: Công nghệ web -->
<h2>Công nghệ web hiện đại</h2>
<p>[Viết đoạn văn có <mark> và <code>]</p>
<h3>Frontend Technologies:</h3>
<ul>
<li><strong>HTML5</strong> - [Mô tả]</li>
<li><strong>CSS3</strong> - [Mô tả]</li>
<li><strong>JavaScript</strong> - [Mô tả]</li>
</ul>
<p>Công thức nước: H<sub>2</sub>O và E = mc<sup>2</sup></p>
<!-- 4. FOOTER - Thông tin liên hệ -->
<hr>
<footer>
<h3>Liên hệ:</h3>
<address>
Email: [email của bạn]<br>
Phone: [số điện thoại]<br>
Địa chỉ: [địa chỉ của bạn]
</address>
</footer>
</body>
</html>Mục tiêu: Xây dựng một CV trực tuyến chuyên nghiệp với đầy đủ các thẻ text
Junior Frontend Developer
TechStart Company | 06/2023 - 09/2023
10/2023 - hiện tại
HTML5 semantic tags và CSS Grid/FlexboxXây dựng portfolio cá nhân với HTML5, CSS3, và JavaScript. Website responsive, load time dưới 2s, score Lighthouse 95+.
Thiết kế và code landing page cho nhà hàng. Sử dụng CSS Grid cho layout, CSS animations cho UX, và tối ưu cho mobile-first.
"Code is like humor. When you have to explain it, it's bad."
— Cory House
Triết lý của tôi: Viết code sạch, dễ hiểu và maintain. Luôn học hỏi công nghệ mới và chia sẻ kiến thức với cộng đồng.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CV - [Tên của bạn]</title>
<style>
body { font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px; line-height: 1.6; }
header { text-align: center; border-bottom: 2px solid #667eea; padding-bottom: 20px; }
h1 { color: #2d3748; margin: 0; }
h2 { color: #667eea; border-bottom: 1px solid #ddd; padding-bottom: 5px; }
h3 { color: #333; margin-bottom: 5px; }
blockquote { border-left: 4px solid #667eea; padding-left: 15px; background: #f8f9fa; }
mark { background: #fff3cd; padding: 2px 4px; }
section { margin-bottom: 25px; }
</style>
</head>
<body>
<!-- 1. HEADER - Thông tin cá nhân chính -->
<header>
<h1>[Tên đầy đủ của bạn]</h1>
<p><em>[Chức danh mong muốn - ví dụ: Junior Frontend Developer]</em></p>
</header>
<!-- 2. THÔNG TIN LIÊN HỆ -->
<section>
<h2>📞 Thông tin liên hệ</h2>
<address>
📧 Email: [email@example.com]<br>
📱 Điện thoại: [0xxx-xxx-xxx]<br>
🏠 Địa chỉ: [địa chỉ của bạn]<br>
💼 LinkedIn: [linkedin.com/in/yourname]<br>
🌐 Portfolio: [www.yourwebsite.com]
</address>
</section>
<!-- 3. HỌC VẤN -->
<section>
<h2>🎓 Học vấn</h2>
<dl>
<dt><strong>[Tên trường đại học]</strong></dt>
<dd>
[Chuyên ngành]<br>
<small>[Năm bắt đầu] - [Năm kết thúc] | GPA: [điểm]/4.0</small>
</dd>
<dt><strong>[Khóa học/Chứng chỉ]</strong></dt>
<dd>
[Tên chứng chỉ]<br>
<small>[Năm]</small>
</dd>
</dl>
</section>
<!-- 4. KỸ NĂNG -->
<section>
<h2>💻 Kỹ năng</h2>
<h3>Programming Languages:</h3>
<ul>
<li><mark>HTML5/CSS3</mark> - <strong>Advanced</strong></li>
<li><mark>JavaScript</mark> - <strong>Intermediate</strong></li>
<li>[Ngôn ngữ khác] - <em>Basic</em></li>
</ul>
<h3>Tools & Technologies:</h3>
<ul>
<li>Git/GitHub - <strong>Intermediate</strong></li>
<li>VS Code - <strong>Advanced</strong></li>
<li>[Tool khác] - <em>Basic</em></li>
</ul>
</section>
<!-- 5. KINH NGHIỆM -->
<section>
<h2>💼 Kinh nghiệm</h2>
<h3>[Chức vụ]</h3>
<p><strong>[Tên công ty]</strong> | <em>[Thời gian làm việc]</em></p>
<ul>
<li>[Mô tả công việc 1 với <strong>số liệu</strong>]</li>
<li>[Mô tả công việc 2 với <mark>highlight</mark>]</li>
<li>[Mô tả công việc 3 với <em>technology</em>]</li>
</ul>
<h3>[Chức vụ khác]</h3>
<p><em>[Thời gian]</em></p>
<ul>
<li>[Thành tích 1]</li>
<li>[Thành tích 2]</li>
</ul>
</section>
<!-- 6. DỰ ÁN -->
<section>
<h2>🎯 Dự án nổi bật</h2>
<h3>[Tên dự án 1]</h3>
<p>[Mô tả dự án với <strong>công nghệ</strong> và <em>kết quả</em>]</p>
<h3>[Tên dự án 2]</h3>
<p>[Mô tả với <code>technical details</code> và thành tích]</p>
</section>
<!-- 7. QUOTE CÁ NHÂN -->
<blockquote>
<p>"[Quote yêu thích về lập trình/công việc]"</p>
<cite>— [Tác giả]</cite>
<br><br>
<p><strong>Triết lý của tôi:</strong> [Chia sẻ triết lý làm việc của bạn]</p>
</blockquote>
</body>
</html>Mục tiêu: Tạo menu nhà hàng với danh sách món ăn và thông tin chi tiết
Hương vị truyền thống Việt Nam
"Món ăn ngon nhất là món ăn được nấu bằng tình yêu và tâm huyết"
— Bà chủ nhà hàng
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu - [Tên nhà hàng]</title>
<style>
body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
header { text-align: center; margin-bottom: 30px; }
h1 { color: #d4332a; }
h2 { color: #d4332a; border-bottom: 2px solid #ddd; }
dt { font-weight: bold; color: #333; font-size: 1.1em; }
dd { margin: 5px 0 15px 20px; }
.price { color: #d4332a; font-weight: bold; }
blockquote { border-left: 4px solid #d4332a; padding: 15px; background: #fdf2f2; }
</style>
</head>
<body>
<!-- 1. HEADER -->
<header>
<h1>🍽️ [Tên nhà hàng của bạn]</h1>
<p><em>[Slogan hoặc mô tả nhà hàng]</em></p>
</header>
<!-- 2. MÓN KHAI VỊ -->
<section>
<h2>🥗 Món khai vị</h2>
<dl>
<dt>[Tên món 1]</dt>
<dd>
<em>[Tên tiếng Anh nếu có]</em><br>
[Mô tả món ăn với <strong>nguyên liệu chính</strong> và <mark>đặc biệt</mark>]<br>
<span class="price">Giá: [giá tiền]đ</span>
</dd>
<dt>[Tên món 2]</dt>
<dd>
[Mô tả món ăn]<br>
<small>[Ghi chú đặc biệt]</small><br>
<span class="price">Giá: [giá tiền]đ</span>
</dd>
</dl>
</section>
<!-- 3. MÓN CHÍNH -->
<section>
<h2>🍜 Món chính</h2>
<h3>Top món được yêu thích:</h3>
<ol>
<li>
<strong>[Tên món 1]</strong> - <mark>Best seller</mark><br>
<small>[Mô tả ngắn]</small><br>
<span class="price">[Giá]đ</span>
</li>
<li>
<strong>[Tên món 2]</strong><br>
<small>[Mô tả]</small><br>
<span class="price">[Giá]đ</span>
</li>
<li>
<strong>[Tên món 3]</strong><br>
<small>[Mô tả]</small><br>
<span class="price">[Giá]đ</span>
</li>
</ol>
<h3>Các món khác:</h3>
<ul>
<li><strong>[Tên món]</strong> - [Mô tả] - <em>[Giá]đ</em></li>
<li><strong>[Tên món]</strong> - [Mô tả] - <em>[Giá]đ</em></li>
<li><strong>[Tên món]</strong> - [Mô tả] - <em>[Giá]đ</em></li>
</ul>
</section>
<!-- 4. THỨC UỐNG -->
<section>
<h2>🧊 Thức uống</h2>
<ul>
<li><strong>[Tên đồ uống 1]</strong> - [Mô tả nếu có] - <em>[Giá]đ</em></li>
<li><strong>[Tên đồ uống 2]</strong> - <mark>Recommended</mark> - <em>[Giá]đ</em></li>
<li><strong>[Tên đồ uống 3]</strong> - <em>[Giá]đ</em></li>
</ul>
</section>
<hr>
<!-- 5. QUOTE -->
<blockquote>
<p>"[Quote về ẩm thực hoặc triết lý nhà hàng]"</p>
<cite>— [Người nói]</cite>
</blockquote>
<!-- 6. FOOTER - THÔNG TIN LIÊN HỆ -->
<footer>
<h3>📍 Thông tin liên hệ</h3>
<address>
🏠 Địa chỉ: [Địa chỉ nhà hàng]<br>
📞 Hotline: [Số điện thoại]<br>
🕒 Giờ mở cửa: [Giờ mở cửa]<br>
🌐 Website: <code>[website.com]</code>
</address>
</footer>
</body>
</html><p></p>Ngoài những thẻ cơ bản, HTML còn có một số thẻ văn bản nâng cao hữu ích:
<!-- Time và Date -->
<p>Sự kiện diễn ra vào <time datetime="2024-12-25">25/12/2024</time></p>
<p>Hẹn gặp bạn lúc <time datetime="14:30">2:30 chiều</time></p>
<!-- Keyboard và Variables -->
<p>Nhấn <kbd>Ctrl + S</kbd> để lưu file</p>
<p>Biến <var>x</var> = <var>y</var> + 5</p>
<!-- Sample Output -->
<p>Terminal hiển thị: <samp>Hello World!</samp></p>
<!-- Definition -->
<p><dfn>HTML</dfn> là viết tắt của HyperText Markup Language.</p>
<!-- Ruby Text (for Asian languages) -->
<p><ruby>漢字<rt>かんじ</rt></ruby> là chữ Hán trong tiếng Nhật</p>Sự kiện diễn ra vào
Hẹn gặp bạn lúc
Nhấn Ctrl + S để lưu file
Biến x = y + 5
Terminal hiển thị: Hello World!
HTML là viết tắt của HyperText Markup Language.
漢字 là chữ Hán trong tiếng Nhật
Tạo cấu trúc tiêu đề phân cấp, quan trọng cho SEO
Tổ chức nội dung thành đoạn văn rõ ràng
Tạo danh sách có thứ tự, không thứ tự, mô tả
strong, em, mark, code - định dạng có ý nghĩa
blockquote, cite, sub, sup, address
time, kbd, var, samp, dfn - cho nội dung chuyên sâu
Bạn đã nắm vững Text Tags! Trong Bài 3, chúng ta sẽ học về Links & Media Tags - cách tạo liên kết giữa các trang và nhúng hình ảnh, video, audio vào website.
Thực hành lại 3 bài tập để củng cố kiến thức
💡 Mẹo: Không cần làm hoàn hảo ngay lần đầu. Hãy thực hành nhiều lần để quen tay!