HTML Là Gì? Tại Sao Lập Trình Web Phải Học?

HTML là nền tảng xây dựng của mọi trang web mà bạn xem trên internet hiện nay. Nó cung cấp cấu trúc và nội dung cơ bản cho trang web, giống như bộ khung xương của một ngôi nhà. Dù bạn dùng Chrome, Safari, Edge hay bất kỳ trình duyệt nào thì chúng đều có một nhiệm vụ chung là biến các tệp HTML, CSS và JavaScript thành một trang web hoàn chỉnh.

Trong bài viết này, chúng ta sẽ đi sâu vào HTML, tìm hiểu nó là gì, cách nó hoạt động và tại sao nó lại quan trọng đến vậy. Ngoài ra chúng ta sẽ cùng nhau đi vào các ví dụ thực tế để giúp bạn có thể nắm rõ hơn cách mà HTML giúp tạo ra cấu trúc và nội dung trang web nhé.

HTML CSS Javascript là gì?

Vì đây là bữa giới thiệu đầu tiên về bài học HTML nên mình muốn nói tổng quát trước về tại sao bạn thường nghe HTML, CSS và JavaScript sẽ hay được nói đến cùng nhau trong quá trình phát triển website. Bạn hãy tưởng tượng HTML như là cấu trúc xương của con người, CSS sẽ là giao diện bên ngoài của chúng ta và Javascript là bộ não điều khiển các chức năng của cơ thể.

• HTML: Cung cấp cấu trúc và nội dung cơ bản của trang web.
• CSS: Định nghĩa kiểu dáng và giao diện của trang web, bao gồm màu sắc, phông chữ, bố cục…
• JavaScript: Thêm tính năng động và tương tác cho trang web, cho phép người dùng tương tác với trang web và thực hiện các hành động khác nhau.

Mặc dù các trang web hiện nay thường sử dụng kết hợp HTML, CSS và JavaScript, nhưng bạn hoàn toàn có thể tạo một trang web cho riêng mình chỉ với HTML. Như trước đây thì các trang web đầu tiên trên thế giới được xây dựng chỉ bằng HTML.

HTML Là Gì?

HTML là viết tắt của Hypertext Markup Language. Nó là một ngôn ngữ đánh dấu (markup language) được sử dụng để tạo ra cấu trúc của một trang web. Nó không phải là một ngôn ngữ lập trình chuyên dụng như JavaScript hay Python, mà là một tập hợp các thẻ (tags) để xây dựng các thành phần khác nhau của trang web, chẳng hạn như tiêu đề, đoạn văn, hình ảnh, liên kết…

Để giúp bạn dễ hình dung thì chúng ta hãy cùng nhau đi vào phân tích các thành phần để biết tại sao nó lại có tên là Hypertext Markup Language nhé.

1. Hypertext (Siêu văn bản)

Hypertext là những đoạn văn bản có thể liên kết đến các tài liệu khác trên trang web. Các đoạn văn bản này được gọi là hyperlink (siêu liên kết). Chúng là nền tảng của cách một trang web HTML hoạt động.

Hãy xem trang web đầu tiên trên thế giới do Tim Berners-Lee tạo ra (ông cũng là người phát minh ra Internet). Bạn sẽ thấy nó chứa đầy các các liên kết màu xanh dương. Khi bạn nhấp vào một trong các liên kết này, nó sẽ đưa bạn đến một tệp HTML khác. Đây chính là cách hypertext hoạt động.

Ví dụ:

Bạn cũng nên chỉ xem qua cho biết thôi nhé! Đừng quá áp lực vì phải hiểu những thứ này sớm. Trong các bài viết tiếp theo thì mình sẽ chia sẻ chi tiết hơn về tính năng cũng như cách nó hoạt động nhé!

<a href="https://example.com">Đây là một siêu liên kết</a>

Trong ví dụ này:

• <a>: Thẻ tạo ra một siêu liên kết.
• href: Thuộc tính chỉ định địa chỉ URL mà liên kết sẽ dẫn đến.
• “https://example.com”: Địa chỉ URL của trang web bạn muốn liên kết đến.
• “Đây là một siêu liên kết”: Văn bản hiển thị cho người dùng để nhấp vào.

2. Markup Language (Ngôn ngữ đánh dấu)

Vậy “markup language” là gì? Để hiểu rõ hơn, hãy xem xét cách chúng ta sử dụng dấu trong ngôn ngữ viết. Hãy tưởng tượng bạn có một bài viết và bạn muốn đánh dấu các phần khác nhau của nó để làm nổi bật chúng. Bạn có thể sử dụng in đậm để làm nổi bật các ý chính, gạch chân các từ khóa quan trọng, hoặc sử dụng các ký hiệu đặc biệt để đánh dấu các đoạn văn khác nhau. HTML hoạt động tương tự như vậy, nhưng thay vì sử dụng bút và giấy, chúng ta sử dụng các thẻ HTML để đánh dấu và cấu trúc nội dung của trang web.

Trong những ngày đầu của Internet, chỉ có một vài thẻ HTML. Ngày nay, có rất nhiều thẻ, nhưng bạn chỉ cần sử dụng một số thẻ quan trọng nhất.

Thẻ HTML Là Gì?

Thẻ HTML là các từ khóa được bao quanh bởi dấu ngoặc nhọn (< và >). Chúng cho trình duyệt biết cách hiển thị nội dung. Hầu hết các thẻ HTML đều có thẻ mở và thẻ đóng.

• Thẻ mở: Bắt đầu một phần tử HTML (ví dụ: <h1>).
• Thẻ đóng: Kết thúc một phần tử HTML (ví dụ: </h1>).

Nội dung nằm giữa thẻ mở và thẻ đóng là nội dung của phần tử đó.

Sự Khác Biệt Giữa Tag và Element

Trong quá trình học HTML, bạn sẽ thường xuyên nghe đến hai khái niệm “tag” và “element”. Vậy chúng khác nhau như thế nào?

• Tag (thẻ): là các thành phần được bao quanh bởi dấu ngoặc nhọn (< và >). Chúng bao gồm thẻ mở và thẻ đóng.
• Element (phần tử): Element bao gồm toàn bộ cấu trúc, từ thẻ mở, nội dung bên trong và thẻ đóng.

Các Thẻ HTML Quan Trọng Bạn Cần Biết

Dưới đây là một số thẻ HTML quan trọng mà bạn nên xem sơ qua. Trong các bài viết tiếp theo thì mình sẽ hướng dẫn chi tiết từng thẻ này nhé. Ngoài ra nếu bạn muốn xem toàn bộ các thẻ HTML thì hãy truy cập ở MDN Web Doc.

• <!DOCTYPE html>: Khai báo loại tài liệu HTML.
• <!-- ... -->: Chú thích.
• <html>: Thẻ gốc của trang HTML.
• <head>: Chứa thông tin meta về trang web (không hiển thị trên trang).
• <title>: Xác định tiêu đề của trang web (hiển thị trên tab trình duyệt).
• <body>: Chứa nội dung chính của trang web (hiển thị trên trang).
• <h1> – <h6>: Tiêu đề các cấp độ.
• <p>: Đoạn văn bản.
• <a>: Liên kết (hyperlink).
• <img>: Hình ảnh.
• <ul>: Danh sách không có thứ tự.
• <ol>: Danh sách có thứ tự.
• <li>: Mục danh sách.
• <div>: Phần tử chứa (container).
• <span>: Phần tử nội tuyến (inline).
• <table>: Bảng.
• <tr>: Hàng trong bảng.
• <td>: Ô dữ liệu trong bảng.
• <form>: Biểu mẫu.
• <input>: Trường nhập liệu trong biểu mẫu.
• <button>: Nút bấm.
• <textarea>: Vùng nhập liệu văn bản lớn.
• <select>: Danh sách lựa chọn.
• <option>: Tùy chọn trong danh sách lựa chọn.
• <header>: Phần đầu trang.
• <nav>: Thanh điều hướng.
• <main>: Nội dung chính của trang.
• <footer>: Phần cuối trang.
• <article>: Một bài viết độc lập.
• <aside>: Nội dung phụ (sidebar).

Các Thực Hành Tốt Nhất Khi Viết HTML

• Sử dụng thụt lề: Thụt lề các phần tử con giúp mã HTML dễ đọc và dễ bảo trì hơn.
• Viết thường: Viết thường tên các phần tử và thuộc tính HTML (ví dụ: <p>, class).
• Đóng tất cả các thẻ: Đảm bảo đóng tất cả các thẻ mở (ví dụ: <p>...</p>).
• Kiểm tra tính hợp lệ: Sử dụng các công cụ kiểm tra HTML để đảm bảo mã của bạn hợp lệ và tuân thủ các tiêu chuẩn.

Công Cụ Hỗ Trợ Viết HTML

Có rất nhiều công cụ hỗ trợ bạn viết HTML:

• Trình soạn thảo văn bản: Visual Studio Code, Sublime Text, Atom (miễn phí và mạnh mẽ).
• IDE (Integrated Development Environment): WebStorm, Eclipse (cung cấp nhiều tính năng nâng cao).
• Công cụ viết HTML Online: CodePen, JSBin, jsFiddle.
• Công cụ kiểm tra HTML: W3C Markup Validation Service.

Kết Luận

Đừng lo lắng nếu bạn không thể nhớ hết tất cả các thẻ HTML ngay lập tức. Hãy bắt đầu với những thẻ cơ bản nhất và dần dần khám phá thêm khi bạn làm việc với các dự án thực tế. Hẹn bạn ở các bài viết tiếp theo nhé!