Quay lại trang bài viết Đọc bản tiếng Anh

Đăng ngày 8 tháng 9, 2025 16 phút đọc

Hướng Dẫn Chi Tiết Về HTML Và CSS Cho Người Mới Bắt Đầu

Tài liệu tóm tắt chi tiết về HTML và CSS cơ bản, dành cho người mới bắt đầu và tra cứu nhanh.

HTML
CSS

Trong bài này

HTML và CSS là những thứ đầu tiên tôi học khi trở thành developer. Không phải framework, không phải library — chỉ là những viên gạch nền tảng của mọi trang web từng tồn tại.

Tôi cứ quay lại viết những bài hướng dẫn như thế này vì cùng một lý do: nền tảng không hết hạn. Framework đến rồi đi. React từng là mới. Tailwind từng là mới. Nhưng HTML và CSS là thứ tất cả mọi thứ cuối cùng đều compile xuống, và hiểu chúng sâu giúp mọi thứ khác dễ hơn.

Bài này vừa là tài liệu cá nhân, vừa là tài nguyên cho bạn bè và đồng nghiệp đang bắt đầu. Nội dung kỹ thuật tham khảo nhiều từ W3Schools — vẫn là một trong những tài liệu tham khảo tốt nhất cho chủ đề này.

Mở VS Code cùng với bài này. Đọc một phần, viết code, xem điều gì xảy ra. Đó là cách duy nhất để bất cứ thứ gì trong này thực sự ngấm vào.

1. HTML & CSS Là Gì?

HTML (HyperText Markup Language) định nghĩa cấu trúc của trang web — những phần tử nào tồn tại, thứ tự xuất hiện, ý nghĩa của chúng. HTML5 mang lại hỗ trợ native cho multimedia, semantic tags, form validation, audio và video.

CSS (Cascading Style Sheets) định nghĩa những phần tử đó trông như thế nào — màu sắc, font chữ, khoảng cách, layout, animation. CSS3 bổ sung flexbox, grid, transform và responsive design.

Cú pháp CSS: selector { property: value; }

Thứ tự ưu tiên cascade (cao đến thấp): inline → internal → external. Điểm specificity: inline (1000), ID (100), class (10), tag (1).

HTML cơ bản:

html

<!DOCTYPE html>
<html lang="vi">
  <head>
    <title>Trang Web</title>
  </head>
  <body>
    <h1>Xin Chào</h1>
    <p>Trang web cơ bản.</p>
  </body>
</html>

CSS cơ bản:

css

body {
  background-color: #e6f3ff;
  margin: 0;
  padding: 0;
}
h1 {
  color: navy;
  text-align: center;
  font-size: 2em;
}
p {
  font-size: 16px;
  line-height: 1.6;
}

2. Cấu Trúc HTML

Mỗi trang HTML đều theo cấu trúc chuẩn này:

html

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Mô tả trang web cho SEO" />
    <meta name="keywords" content="html, css, web" />
    <title>Tiêu Đề Trang</title>
  </head>
  <body>
    <header>Đầu trang</header>
    <main>Nội dung chính</main>
    <footer>Chân trang</footer>
  </body>
</html>

<!DOCTYPE html> — báo trình duyệt render theo standards mode, không phải quirks mode.
<html lang="vi"> — thẻ gốc. lang hỗ trợ SEO, công cụ accessibility và dịch tự động.
<head> — metadata: charset="UTF-8" hỗ trợ Unicode tiếng Việt, viewport cho responsive, description và keywords cho SEO.
<body> — mọi thứ hiển thị. Dùng semantic tags để cấu trúc nội dung có ý nghĩa.

3. Thẻ HTML Cơ Bản

3.1. Thẻ Semantic

Semantic tags cho trình duyệt (và công cụ tìm kiếm) biết một phần nội dung có nghĩa gì, không chỉ trông như thế nào.

<header> — đầu trang, thường là logo và navigation.
<nav> — liên kết điều hướng.
<main> — nội dung chính. Nên xuất hiện một lần mỗi trang.
<section> — phần nội dung theo chủ đề độc lập.
<article> — nội dung tự đứng được (như một bài blog).
<aside> — nội dung phụ, sidebar.
<footer> — chân trang, bản quyền, liên kết liên hệ.

html

<header>
  <h1>Logo Trang</h1>
  <nav>
    <a href="#home">Trang chủ</a>
    <a href="#about">Giới thiệu</a>
    <a href="#contact">Liên hệ</a>
  </nav>
</header>
<main>
  <section>
    <h2>Phần 1</h2>
    <p>Nội dung.</p>
  </section>
</main>
<footer>
  <p>Bản quyền © 2025</p>
</footer>

3.2. Thẻ Tiêu Đề (`<h1>` đến `<h6>`)

Sáu cấp độ tiêu đề, h1 quan trọng nhất và lớn nhất về mặt thị giác. Dùng <h1> một lần mỗi trang cho SEO — nó báo hiệu chủ đề chính của trang cho công cụ tìm kiếm. Dùng h2–h6 để tạo phân cấp trong nội dung.

3.3. Thẻ Đoạn Văn (`<p>`)

Phần tử block-level với margin trên và dưới mặc định. Dùng cho nội dung văn bản. Hỗ trợ inline content như link, in đậm, in nghiêng bên trong.

3.4. Định Dạng Văn Bản

<strong> — in đậm, nhấn mạnh ngữ nghĩa (screen reader đọc là quan trọng).
<em> — in nghiêng, nhấn mạnh cảm xúc.
<u> — gạch chân. Dùng ít — người dùng có thể nhầm với link.
<mark> — tô sáng, hữu ích cho kết quả tìm kiếm.
<sup> — chỉ số trên: x².
<sub> — chỉ số dưới: H₂O.
<del> — gạch ngang, chỉ nội dung đã xóa.
<ins> — gạch dưới, chỉ nội dung đã thêm.

html

<p>
  <strong>Đậm</strong>, <em>nghiêng</em>, <u>gạch chân</u>,
  <mark>tô sáng</mark>, x<sup>2</sup>, H<sub>2</sub>O,
  <del>đã xóa</del>, <ins>đã thêm</ins>.
</p>

3.5. Thẻ Liên Kết (`<a>`)

Tạo hyperlink. Có thể link đến URL, phần trang (#id), hoặc địa chỉ email.

html

<a href="https://www.google.com" target="_blank" title="Tìm kiếm">Google</a>
<a href="mailto:example@gmail.com">Gửi Email</a>
<a href="#section1">Nhảy đến Phần 1</a>

target="_blank" mở tab mới. title hiện tooltip khi hover.

3.6. Thẻ Hình Ảnh (`<img>`)

Tự đóng. Luôn thêm alt — được screen reader đọc và hiện ra khi ảnh không load được.

html

<img src="photo.jpg" alt="Biển xanh lúc hoàng hôn" width="300" height="200" loading="lazy" />

loading="lazy" trì hoãn tải ảnh cho đến khi gần viewport — cải thiện hiệu suất trang.

3.7. Thẻ Danh Sách

<ul> — danh sách không thứ tự (bullet points). Cho menu, danh sách tính năng, bất cứ thứ gì không có thứ tự quan trọng.
<ol> — danh sách có thứ tự (đánh số). Cho các bước, xếp hạng, trình tự.
<li> — phần tử danh sách, dùng trong cả hai.

Thuộc tính type trên <ol> thay đổi kiểu đánh số: 1, A, a, I, i.

3.8. Thẻ Table

Dành cho dữ liệu dạng bảng — không phải để làm layout.

<table> — container của bảng.
<tr> — hàng bảng.
<th> — ô tiêu đề (mặc định in đậm, căn giữa).
<td> — ô dữ liệu.
<thead>, <tbody>, <tfoot> — nhóm hàng có ngữ nghĩa.
colspan, rowspan — span nhiều cột hoặc hàng.

html

<table>
  <thead>
    <tr>
      <th scope="col">Tên</th>
      <th scope="col">Tuổi</th>
      <th scope="col">Điểm</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>An</td>
      <td>25</td>
      <td rowspan="2">90</td>
    </tr>
    <tr>
      <td>Bình</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Tổng</td>
      <td>180</td>
    </tr>
  </tfoot>
</table>

3.9. HTML Form

Form thu thập input người dùng và gửi đi.

Thẻ chính: <form>, <label>, <input>, <select>, <option>, <textarea>, <button>, <fieldset>, <legend>.

Input types: text, email, password, number, date, file, radio, checkbox, hidden, tel, url.

Thuộc tính validation: required, minlength/maxlength, pattern, min/max, accept.

html

<form action="/submit" method="post">
  <fieldset>
    <legend>Thông tin cá nhân</legend>
    <label for="name">Tên:</label>
    <input type="text" id="name" name="name" placeholder="Tên của bạn" required minlength="3" />
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />
  </fieldset>
  <button type="submit">Gửi</button>
  <button type="reset">Reset</button>
</form>

Luôn ghép <label> với <input> bằng for và id khớp nhau. Cải thiện accessibility và làm label có thể click được.

3.10. HTML Media

Audio:

html

<audio controls loop>
  <source src="song.mp3" type="audio/mpeg" />
  <source src="song.ogg" type="audio/ogg" />
  Trình duyệt không hỗ trợ audio.
</audio>

Video:

html

<video width="400" height="300" controls poster="thumbnail.jpg">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  Trình duyệt không hỗ trợ video.
</video>

Nhúng YouTube:

html

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

3.11. SVG

SVG là đồ họa vector dưới dạng markup — độc lập độ phân giải, scale đến bất kỳ kích thước nào mà không bị mờ.

Trong thực tế: copy SVG từ Figma, Illustrator, hoặc thư viện như Font Awesome, sau đó điều chỉnh màu sắc và kích thước theo nhu cầu. Hiểu cấu trúc giúp bạn thực hiện những thay đổi đó mà không làm hỏng gì.

Thẻ chính: <svg>, <circle>, <rect>, <line>, <polygon>, <path>, <text>, <g> (nhóm).

html

<svg width="200" height="200" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="80" stroke="blue" stroke-width="4" fill="yellow" />
  <rect x="20" y="20" width="160" height="160" fill="none" stroke="red" stroke-width="2" />
  <text x="100" y="105" font-size="20" text-anchor="middle" fill="black">SVG</text>
</svg>

4. CSS Cơ Bản

4.1. Cách Chèn CSS

Ba cách, theo thứ tự specificity:

Inline — trong thuộc tính style trực tiếp trên phần tử. Specificity cao nhất. Dùng cho override nhanh, không phải để style toàn bộ.

html

<p style="color: red; font-size: 18px;">Chữ đỏ</p>

Internal — trong block <style> trong <head>. Chỉ áp dụng cho trang hiện tại.

html

<style>
  p { color: blue; font-size: 16px; }
</style>

External — file .css riêng liên kết bằng <link>. Đây là cách bạn nên dùng cho bất kỳ project thực sự nào. Giữ markup sạch, cho phép browser cache, và làm style tái sử dụng được.

html

<link rel="stylesheet" href="styles.css" />

4.2. Màu Sắc

css

p {
  color: red;                        /* tên màu (~140 tên có sẵn) */
  color: #ff0000;                    /* hex */
  color: #f00;                       /* hex rút gọn */
  color: rgb(255, 0, 0);             /* rgb */
  color: rgba(255, 0, 0, 0.5);       /* rgb với độ trong suốt */
  color: hsl(0, 100%, 50%);          /* hue, saturation, lightness */
  color: hsla(0, 100%, 50%, 0.5);    /* hsl với độ trong suốt */
}

4.3. Thuộc Tính Văn Bản

css

p {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  text-align: justify;
  text-decoration: underline dotted red;
  text-transform: uppercase;
  line-height: 1.5;
  letter-spacing: 0.5px;
  word-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

font-weight nhận giá trị keyword (normal, bold) hoặc số từ 100 đến 900. font-size nhận px, em, rem, % hoặc vw.

4.4. Box Model

Mỗi phần tử là một hộp. Hộp có bốn lớp từ trong ra ngoài: content → padding → border → margin.

+---------------------------+
|         Margin            |
|  +---------------------+  |
|  |       Border        |  |
|  |  +---------------+  |  |
|  |  |    Padding    |  |  |
|  |  |  +---------+  |  |  |
|  |  |  | Content |  |  |  |
|  |  |  +---------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

Mặc định (box-sizing: content-box), width chỉ áp dụng cho content. Padding và border được cộng thêm vào, làm phần tử lớn hơn những gì bạn set.

Dùng box-sizing: border-box thay thế — width khi đó bao gồm cả padding và border. Trực quan hơn nhiều. Áp dụng toàn cục:

css

*, *::before, *::after {
  box-sizing: border-box;
}

css

div {
  width: 200px;
  padding: 15px;
  border: 5px solid black;
  margin: 20px auto;
  border-radius: 10px;
  box-sizing: border-box;
}

4.5. Layout

Kiểu display:

block — chiếm toàn bộ chiều rộng dòng, hỗ trợ tất cả thuộc tính box model. <div>, <p>, heading.
inline — chảy cùng với text, không có width/height, chỉ margin/padding ngang. <span>, <a>.
inline-block — chảy inline nhưng hỗ trợ width và height.
none — bị xóa hoàn toàn khỏi layout.
flex — layout một chiều (hàng hoặc cột).
grid — layout hai chiều (hàng và cột).

Flexbox:

css

.container {
  display: flex;
  justify-content: center;   /* căn chỉnh ngang */
  align-items: center;       /* căn chỉnh dọc */
  gap: 16px;
}

Grid:

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Position:

static — mặc định, theo luồng document.
relative — offset từ vị trí bình thường, giữ chỗ trong luồng.
absolute — được đặt vị trí tương đối với ancestor không phải static gần nhất, bị lấy ra khỏi luồng.
fixed — cố định với viewport, không cuộn theo.
sticky — relative cho đến khi đạt ngưỡng cuộn, sau đó fixed.

css

div {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 10;
}

4.6. Float

Float đẩy phần tử sang trái hoặc phải, cho phép nội dung khác quấn quanh nó. Chủ yếu dùng trong layout cũ — flexbox và grid xử lý điều này tốt hơn bây giờ.

css

img {
  float: left;
  margin: 0 15px 15px 0;
}
p {
  clear: both;
}

4.7. Responsive Design (Media Queries)

Media queries áp dụng style có điều kiện dựa trên kích thước màn hình hoặc đặc điểm thiết bị khác.

css

@media screen and (max-width: 576px) {
  body { font-size: 14px; }
  h1 { font-size: 1.5em; }
}

@media (min-width: 768px) and (max-width: 992px) {
  .container { flex-direction: column; }
}

@media print {
  body { color: black; background: white; }
}

Breakpoint thường dùng: 576px (mobile), 768px (tablet), 992px (desktop), 1200px (desktop lớn).

4.8. Pseudo-classes & Pseudo-elements

Pseudo-classes — target phần tử ở trạng thái cụ thể:

:hover — chuột đang trên phần tử
:active — đang được click
:focus — đang được focus (bàn phím hoặc click)
:first-child, :last-child, :nth-child(n) — vị trí trong parent
:checked — checkbox hoặc radio đã chọn
:disabled — input bị disable

css

a:hover { color: red; }
input:focus { border-color: blue; outline: none; }
li:nth-child(odd) { background: #f2f2f2; }

Pseudo-elements — style một phần của phần tử:

::before, ::after — chèn nội dung trước/sau phần tử
::first-letter — chữ cái đầu tiên của block
::first-line — dòng đầu tiên của block
::selection — text người dùng đang highlight

css

p::before {
  content: "★ ";
  color: gold;
}
p::first-letter {
  font-size: 2em;
  color: red;
}
::selection {
  background: yellow;
  color: black;
}

4.9. Vendor Prefixes

Một số thuộc tính CSS cần vendor prefix để hỗ trợ trình duyệt cũ:

-webkit- — Chrome, Safari, trình duyệt mobile hiện đại
-moz- — Firefox
-ms- — Internet Explorer, Edge cũ
-o- — Opera cũ

css

div {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

Trình duyệt hiện đại xử lý hầu hết thuộc tính không cần prefix. Dùng công cụ như Autoprefixer để xử lý điều này tự động trong production.

5. Kết

HTML cấu trúc nội dung. CSS làm nó trông ra thứ gì đó. Đó là toàn bộ mối quan hệ.

Mọi thứ khác bạn xây dựng trên web — React component, Vue template, server-rendered page — cuối cùng đều compile xuống HTML và CSS. Bạn hiểu nền tảng này càng sâu, bạn debug càng nhanh, viết code càng sạch, và phụ thuộc vào các giải pháp copy-paste không hiểu càng ít.

W3Schools vẫn là một trong những tài liệu tham khảo tốt nhất cho cả hai. Dùng nó cùng với bài này.

Mở VS Code. Viết các ví dụ. Xem cái gì bị vỡ. Đó là cách bạn thực sự học điều này.

Nếu bạn có câu hỏi hoặc có gì đó chưa rõ, hãy liên hệ qua phần contact trên portfolio của tôi.

Quay lại trang bài viết

1. HTML & CSS Là Gì?

2. Cấu Trúc HTML

3. Thẻ HTML Cơ Bản

3.1. Thẻ Semantic

3.2. Thẻ Tiêu Đề (<h1> đến <h6>)

3.3. Thẻ Đoạn Văn (<p>)

3.4. Định Dạng Văn Bản

3.5. Thẻ Liên Kết (<a>)

3.6. Thẻ Hình Ảnh (<img>)

3.7. Thẻ Danh Sách

3.8. Thẻ Table

3.9. HTML Form

3.10. HTML Media

3.11. SVG

4. CSS Cơ Bản

4.1. Cách Chèn CSS

4.2. Màu Sắc

4.3. Thuộc Tính Văn Bản

4.4. Box Model

4.5. Layout

4.6. Float

4.7. Responsive Design (Media Queries)

4.8. Pseudo-classes & Pseudo-elements

4.9. Vendor Prefixes

5. Kết

3.2. Thẻ Tiêu Đề (`<h1>` đến `<h6>`)

3.3. Thẻ Đoạn Văn (`<p>`)

3.5. Thẻ Liên Kết (`<a>`)

3.6. Thẻ Hình Ảnh (`<img>`)