1. Overview

Nếu bạn là một lập trình viên Web, chắc chắn bạn không thể không biết HTML. HTML là ngôn ngữ đầu tiên và bắt buộc cần phải nắm rõ cấu trúc code để thiết kế và xây dựng website.

HTML và CSS là 2 ngôn ngữ độc lập nhau. HTML giúp bạn xây dựng khung xương giao diện của website. Về lý thuyết, giao diện website chỉ cần HTML là đủ. Vì nếu chỉ dùng code HTML giao diện sẽ xấu xí, vì thế ngôn ngữ CSS giúp bổ sung cho việc trang trí giao diện cho đẹp hơn.

Trong bài viết này chúng ta đi tìm hiểu một số khái niệm và cấu trúc HTML để hiểu rõ bản chất và định nghĩa trong ngôn ngữ HTML.

2. Giới thiệu

HTML là ngôn ngữ lập trình front-end. HTML viết tắt của Hyper Text Markup Language. HTML ra đời nhằm mục đích làm khung giao diện website hay cấu trúc của website từ năm 1989.

Code HTML sẽ được Trình duyệt dịch code HTML và hiển thị nội dung của nó lên cho người dùng xem. Như vậy, người dùng sẽ không thấy được source code, mà chỉ thấy nội dung. Hầu hết các trình duyệt đều hỗ trợ lập trinh viên xem code bằng phím F12.

HTML bao gồm nhiều phần tử (element) được định nghĩa sẵn bởi nhà phát triển. Mỗi phần từ gồm có thẻ (Tag) mở và thẻ đóng để kết thúc nội dung của thẻ đó.

HTML thì cực kỳ dễ học, dễ nhớ nhất trong số các ngôn ngữ lập trình. Tuy vậy, để dùng HTML làm được giao diện bố cục chuẩn SEO và đẹp lại là một vấn đề khác về tư duy thiết kế và kinh nghiệm front-end.

3. Cài đặt môi trường

Để code HTML cần cài đặt:

1.  Trình duyệt (chrome, safari, firefox, IE…)

2.  IDE để code: HTML có rất nhiều phần mềm để code, giúp chúng ta code nhanh hơn và gợi ý lệnh:

  1. Eclipse (nếu học Java có thể xài luôn)
  2. Visual Studio Code (Nhẹ, code js sau này luôn)
  3. Sublime text, dreamweaver, …v.v Notepad++ cũng được luôn

Một file hay 1 trang HTML được lưu dưới Định dạng file là .html hoặc .htm là được.

Để chạy và kiểm tra file HTML, chúng ta Mở bằng trình duyệt xem kết quả. Refresh lại trình duyệt sau mỗi lần thay đổi.

4. Cấu trúc thẻ (Tag)

Cấu trúc phần tử HTML sẽ bao gồm các thẻ mở và đóng tương xứng nhau. Thẻ đóng có thêm dấu / ở trước tên.

<tagname>nội dung hiển thị lên trình duyệt..</tagname>

Code HTML cũng không phân biệt chữ hoa/ chữ thường. Nhưng theo quy tắc chung khi code HTML, dùng chữ thường và code phải đóng mở thẻ cân xứng.

Code HTML sẽ không báo lỗi nếu code sai, hoặc thiếu thẻ đóng. Nhưng sau này, giao diện sẽ bị vỡ không theo ý muốn.

Tuy vậy HTML cũng có nhiều thẻ không có nội dung như <br> , <img> nên cũng không cần đóng thẻ này. Chúng ta sẽ làm và học dần.

5. Cấu trúc trang HTML

Một trang hay một file HTML có cấu trúc chuẩn như bên dưới. Dù thực tế, có thể nhiều lập trình viên làm ẩu không theo chuẩn. Nhưng Java Master khuyến khích các em code chuẩn như ý.

Cấu trúc HTML phân tích:

  • The <!DOCTYPE html> chỉ ra văn bản là trang HTML5 (phiên bản 5)
  • The <html> phần tử gốc của một trang HTML
  • The <head> phần tử head chứa thông tin về trang HTML
  • The <title> phần tử chỉ ra tiêu đề trang HTML đang diễn đạt.
  • The <body> phần tử chứa nội dung hiển thị cho người dùng xem.
  • The <h1> phần tử chỉ ra tiêu đề nội dung.
  • The <p> phần tử mô tả đoạn văn nội dung.

Như vậy cấu trúc chuẩn của 1 trang HTML bắt đầu bằng phiên bản HTML ví dụ: <!DOCTYPE html>

Thẻ đầu tiên là <html> và kết thúc </html> Bên trong phần tử <html> sẽ có 2 phần:

  1. head: Chứa các thông tin cho trình duyệt đọc, không hiển thị cho người dùng xem.
  2. body: Chứa thông tin hiển thị cho người dùng xem.

Bên trong một phần tử HTML, có thể chứa nhiều phần tử con bên trong.

6. Phiên bản

Hiện tại là phiên bản HTML5. Để nhận biết bằng câu khai báo ở đầu trang HTML <!DOCTYPE html>

HTML ra đời năm 1989. Trải qua các phiên bản 2,3,4. Đến năm 2012 thì phiên bản HTML5 được sử dụng rộng rãi và dần thay thế cho các trang web ngày nay.

Bảng lịch sử

YearVersion
1989Tim Berners-Lee invented www
1991Tim Berners-Lee invented HTML
1993Dave Raggett drafted HTML+
1995HTML Working Group defined HTML 2.0
1997W3C Recommendation: HTML 3.2
1999W3C Recommendation: HTML 4.01
2000W3C Recommendation: XHTML 1.0
2008WHATWG HTML5 First Public Draft
2012WHATWG HTML5 Living Standard
2014W3C Recommendation: HTML5
2016W3C Candidate Recommendation: HTML 5.1
2017W3C Recommendation: HTML5.1 2nd Edition
2017W3C Recommendation: HTML5.2