Loạt bài Lộ trình Kỹ sư QA (Tester): Giới thiệu về HTML, CSS và JavaScript cho Kỹ sư QA

Chào mừng bạn trở lại với loạt bài “Roadmap Lộ trình học Kỹ sư QA (Tester) 2025“. Trên hành trình trở thành một Kỹ sư Đảm bảo Chất lượng (QA) chuyên nghiệp, việc hiểu rõ cách thức hoạt động của phần mềm, đặc biệt là các ứng dụng web, là vô cùng quan trọng. Mặc dù công việc chính của chúng ta là kiểm thử, việc có kiến thức nền tảng về các công nghệ được sử dụng để xây dựng sản phẩm sẽ giúp chúng ta thực hiện công việc hiệu quả hơn, phát hiện lỗi sâu sắc hơn và giao tiếp tốt hơn với đội ngũ phát triển.

Hôm nay, chúng ta sẽ cùng tìm hiểu về bộ ba công nghệ cốt lõi tạo nên hầu hết các trang web hiện đại: HTML, CSS và JavaScript. Đây là những kiến thức nền tảng mà mọi QA làm việc với sản phẩm web đều cần nắm vững, dù là kiểm thử thủ công hay tự động hóa.

HTML: Bộ Xương của Trang Web

HTML (HyperText Markup Language) không phải là một ngôn ngữ lập trình, mà là một ngôn ngữ đánh dấu. Vai trò chính của HTML là định nghĩa cấu trúc và nội dung của một trang web. Tưởng tượng trang web như một cơ thể, thì HTML chính là bộ xương, cung cấp cấu trúc sườn cho mọi thứ.

Trong HTML, nội dung được tổ chức bằng các “thẻ” (tags). Mỗi thẻ có một ý nghĩa riêng và thường bao gồm một thẻ mở (``) và một thẻ đóng (``), bao quanh nội dung. Ví dụ:

<h1>Đây là tiêu đề chính</h1>
<p>Đây là một đoạn văn bản.</p>
<a href="https://example.com">Đây là một liên kết</a>

Một cấu trúc HTML cơ bản nhất trông như thế này:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tiêu đề Trang</title>
</head>
<body>
    <!-- Nội dung trang web của bạn ở đây -->
    <h1>Xin chào!</h1>
    <p>Đây là nội dung chính.</p>
</body>
</html>

Đối với Kỹ sư QA, việc hiểu HTML giúp ích rất nhiều trong:

  • Xác định các phần tử trên trang: Biết được thẻ nào định nghĩa tiêu đề (`

    ` đến `

    `), đoạn văn bản (`

    `), danh sách (`

      `, `

        `, `

      1. `), bảng (`
        `, `

        `, `

        `), form (`

        `), trường nhập liệu (``, `