Tổng quan về HTML

Ngôn ngữ đánh dấu siêu văn bản, hay HTML, là ngôn ngữ đánh dấu chuẩn để mô tả cấu trúc của các tài liệu hiển thị trên web. HTML bao gồm một loạt các phần tử và thuộc tính được sử dụng để đánh dấu tất cả các thành phần của một tài liệu nhằm cấu trúc tài liệu một cách có ý nghĩa.

Tài liệu HTML về cơ bản là một cây gồm các nút, bao gồm các phần tử HTML và nút văn bản. Các phần tử HTML cung cấp ngữ nghĩa và định dạng cho tài liệu, bao gồm cả việc tạo đoạn văn, danh sách và bảng, hình ảnh được nhúng và các chế độ điều khiển biểu mẫu. Mỗi phần tử có thể được chỉ định nhiều thuộc tính. Nhiều phần tử có thể chứa nội dung, bao gồm cả các phần tử và văn bản khác. Các phần tử khác trống, trong đó thẻ và thuộc tính xác định chức năng của các phần tử đó.

Có nhiều danh mục phần tử, bao gồm siêu dữ liệu, mục, văn bản, ngữ nghĩa cùng dòng, biểu mẫu, tương tác, nội dung nghe nhìn, thành phần và tập lệnh. Chúng ta sẽ đề cập đến hầu hết những nguyên tắc này trong loạt video này. Nhưng trước tiên, phần tử là gì?

Các phần tử

HTML bao gồm một loạt các phần tử mà bạn sử dụng để bao bọc hoặc bao bọc những phần khác nhau của nội dung nhằm làm cho nội dung xuất hiện hoặc hoạt động theo một cách nhất định. Các phần tử HTML được mô tả bằng các thẻ, được viết bằng dấu ngoặc nhọn (< và >).

Tiêu đề trang là tiêu đề cấp 1 mà chúng ta sử dụng thẻ <h1>. Tiêu đề thực tế "Hội thảo máy học" là nội dung của phần tử của chúng tôi. Nội dung nằm giữa các thẻ mở và thẻ đóng. Toàn bộ mọi thứ – thẻ mở, thẻ đóng và nội dung – đều là phần tử.

Thẻ đóng giống thẻ mở, đứng sau dấu gạch chéo.

Phần tử và thẻ không giống hệt nhau, mặc dù nhiều người sử dụng các thuật ngữ này thay thế cho nhau. Tên thẻ là nội dung trong dấu ngoặc vuông. Thẻ này bao gồm các dấu ngoặc vuông. Trong trường hợp này là <h1>. "Phần tử" là các thẻ mở và đóng cũng như toàn bộ nội dung giữa các thẻ đó, kể cả các phần tử lồng nhau.

<p>This paragraph has some
  <strong><em>strongly emphasized</em></strong>
  content</p>

Phần tử đoạn này có các thành phần khác lồng trong đó. Khi lồng các phần tử, điều quan trọng là chúng được lồng đúng cách. Thẻ HTML phải được đóng theo thứ tự ngược với thứ tự mà thẻ đã được mở. Trong ví dụ trên, hãy lưu ý cách <em> được mở và đóng trong các thẻ mở và đóng <strong>, còn <strong> là cả mở và đóng trong các thẻ <p>.

Trình duyệt không hiển thị thẻ. Thẻ được dùng để diễn giải nội dung của trang.

HTML rất, rất dễ bỏ qua. Ví dụ: nếu chúng ta bỏ qua các thẻ đóng </li>, thì các thẻ đóng sẽ được ngụ ý.

<ul>
  <li>Blendan Smooth
  <li>Hoover Sukhdeep
  <li>Toasty McToastface
</ul>

Mặc dù việc không đóng <li> là hợp lệ, nhưng việc này không phải là phương pháp hay. </ul> đóng là bắt buộc. Nếu thẻ đóng của danh sách không có thứ tự bị bỏ qua, trình duyệt sẽ cố gắng xác định vị trí kết thúc của danh sách và các mục trong danh sách, nhưng bạn có thể không đồng ý với quyết định này.

Thông số kỹ thuật cho từng phần tử cho biết thẻ đóng có bắt buộc hay không. "Không có thẻ nào không thể bỏ qua" trong quy cách có nghĩa là bắt buộc phải có cả thẻ mở và thẻ đóng. Thông số kỹ thuật cung cấp danh sách tất cả các thẻ đóng bắt buộc.

Nếu <em> hoặc <strong> trong ví dụ trước đó chưa bị đóng, thì trình duyệt có thể đóng phần tử này cho bạn hoặc không. Việc không đóng <em> chỉ đơn giản là dẫn đến việc nội dung có thể được hiển thị khác với dự kiến. Nếu bạn bỏ qua </ul> và thẻ tiếp theo là thẻ đóng cho vùng chứa gốc của danh sách, thì bạn thật may mắn. Mặt khác, nếu đó là một thẻ mở <h1>, thì trình duyệt sẽ giả định tiêu đề đó là một phần của danh sách, bao gồm cả các kiểu kế thừa. Một số thẻ đóng bị bỏ qua sẽ gây ra vấn đề lớn hơn: không đóng một số thẻ, chẳng hạn như <script>, <style>, <template>, <textarea> và <title>, làm hỏng nội dung tiếp theo như trong ví dụ sau.

Việc một số nội dung vô tình được in nghiêng hoặc có tiêu đề thụt đầu dòng sẽ không phá huỷ doanh nghiệp của bạn. Việc hầu hết nội dung của bạn hiển thị không có kiểu trong vùng văn bản 200x300 vì bạn đã quên thêm </textarea> hoặc không hiển thị vì bạn quên đóng </style> sẽ khiến trang web không sử dụng được.

Trong một số trường hợp, trình duyệt sẽ bao gồm các phần tử ngay cả khi thẻ không có trong thẻ đánh dấu. Vì các phần tử có thể được ngụ ý nên một phần tử có thể tồn tại ngay cả khi thẻ không ngụ ý. Trình duyệt sẽ thêm <body></body> xung quanh nội dung và <tbody></tbody> xung quanh các hàng trong bảng, ngay cả khi bạn không thêm. Mặc dù việc bỏ qua thẻ là hợp lệ, nhưng bạn không nên làm như vậy. Ngoài ra, như đã đề cập, hãy đảm bảo chúng được lồng đúng cách. Chúng tôi sẽ cảm ơn bạn trong tương lai với vai trò là người duy trì mã đánh dấu và bất kỳ ai khác làm việc trên cơ sở mã của bạn.

Có hai loại phần tử: đã thay thế và không được thay thế.

Các thành phần không được thay thế

Đoạn, tiêu đề và danh sách được đánh dấu trong phần trước đều không được thay thế. Các phần tử không được thay thế có thẻ đóng và (đôi khi là không bắt buộc) bao quanh chúng và có thể bao gồm văn bản và các thẻ khác làm phần tử phụ. Các thẻ đóng này có thể biến một cụm từ hoặc hình ảnh thành một siêu liên kết, có thể biến một câu thành tiêu đề, có thể nhấn mạnh vào các từ, v.v.

Phần tử thay thế và để trống

Các phần tử được thay thế sẽ được thay thế bằng các đối tượng. Tiện ích giao diện người dùng đồ hoạ (UI) trong hầu hết các chế độ điều khiển biểu mẫu hoặc đường quét hay tệp hình ảnh có thể mở rộng trong trường hợp hầu hết hình ảnh. Được thay thế bằng các đối tượng, mỗi đối tượng có một giao diện mặc định. Tuỳ thuộc vào loại đối tượng và trình duyệt, các kiểu áp dụng sẽ bị giới hạn. Ví dụ: hầu hết các trình duyệt đều cho phép định kiểu hạn chế cho các tiện ích giao diện người dùng và các phần tử giả có liên quan. Trong trường hợp hình ảnh đường quét, chiều cao, chiều rộng, việc cắt và lọc dễ dàng được thực hiện bằng CSS, ngoại trừ CSS. Mặt khác, đồ hoạ vectơ có thể mở rộng, sử dụng ngôn ngữ đánh dấu dựa trên XML tương tự như HTML, thì hoàn toàn có thể mở rộng (trừ phi đồ hoạ đó chứa hình ảnh đường quét). Chúng cũng có đầy đủ các kiểu. Lưu ý rằng khả năng tạo kiểu cho SVG được nhúng từ CSS được liên kết với tệp HTML nhúng phụ thuộc vào cách thiết lập SVG.

Trong ví dụ này, hai phần tử bị thay thế <img> và <input> được thay thế bằng nội dung không phải văn bản: hình ảnh và đối tượng giao diện người dùng đồ hoạ tương ứng.

<input type="range">
<img src="switch.svg" alt="light switch">

Đầu ra của HTML ở trên:

Các phần tử được thay thế và các phần tử trống thường bị nhầm lẫn. Các phần tử trống đều là phần tử tự đóng và được biểu thị bằng một thẻ. Tức là không có thẻ đóng cho phần tử rỗng. Nếu muốn, bạn có thể bao gồm dấu gạch chéo ở cuối thẻ. Nhiều người sẽ thấy dấu gạch chéo này giúp dễ đọc hơn. Tiếp tục với ví dụ này, chúng tôi tự đóng thẻ bằng dấu gạch chéo:

<input type="range"/>
<img src="switch.svg" alt="light switch"/>

Dấu gạch chéo ở cuối là trường hợp cũ: đó là cách cho biết rằng phần tử đang tự đóng và sẽ không có thẻ đóng hoặc thẻ đóng phù hợp.

Phần tử trống không được chứa nội dung văn bản hoặc các phần tử lồng nhau. Các phần tử không có giá trị bao gồm <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track> và <wbr>, cùng các phần tử khác.

Hầu hết các phần tử được thay thế đều là các phần tử trống, nhưng không phải tất cả. Các phần tử video, picture, object và iframe được thay thế nhưng không trống. Tất cả đều có thể chứa các phần tử hoặc văn bản khác, vì vậy tất cả đều có thẻ đóng.

Hầu hết các phần tử khoảng trống đều được thay thế; nhưng xin nhắc lại, không phải tất cả, như chúng ta đã thấy với base, link, param và meta. Tại sao có một phần tử void (không được chứa bất kỳ nội dung nào) không được thay thế và do đó không hiển thị nội dung nào trên màn hình? Để cung cấp thông tin về nội dung này! Thông tin do các thuộc tính của phần tử cung cấp.

Thuộc tính

Bạn có thể nhận thấy các ví dụ <img> và <input> không chỉ có loại phần tử trong thẻ mở. Những bit bổ sung của cặp tên/giá trị được phân tách bằng dấu cách (mặc dù đôi khi việc thêm giá trị là không bắt buộc) được gọi là thuộc tính. Thuộc tính là thứ làm cho HTML trở nên vô cùng mạnh mẽ. Chúng ta sẽ đề cập đến hàng trăm thuộc tính và giá trị thuộc tính trong loạt bài này, nhưng ở đây chúng ta chỉ thảo luận về khái niệm chung và cách bổ sung các thuộc tính đó.

Thuộc tính cung cấp thông tin về phần tử. Thuộc tính này, giống như phần còn lại của thẻ mở, sẽ không xuất hiện trong nội dung, nhưng giúp xác định cách nội dung sẽ xuất hiện trước cả người dùng (công nghệ hỗ trợ và công cụ tìm kiếm) của bạn (công nghệ hỗ trợ và công cụ tìm kiếm).

Thuộc tính chỉ xuất hiện trong thẻ mở. Thẻ mở luôn bắt đầu bằng loại phần tử. Theo sau loại có thể có 0 hoặc nhiều thuộc tính và được phân tách bằng một hoặc nhiều dấu cách. Theo sau hầu hết tên thuộc tính đều có dấu bằng, coi đó là giá trị thuộc tính và được đặt vào trong dấu ngoặc kép mở và đóng.

Trong ví dụ này, chúng ta có một đường liên kết neo với hai thuộc tính. Hai thuộc tính này đã chuyển đổi nội dung "Đăng ký" thành đường liên kết neo nội bộ cuộn đến thuộc tính id="register" trong thẻ trình duyệt hiện tại khi người dùng nhấp, nhấn hoặc kích hoạt đường liên kết bằng bàn phím hoặc thiết bị khác.

Thuộc tính xác định hành vi, mối liên kết và chức năng của các phần tử. Chúng ta sẽ tìm hiểu thêm về các thuộc tính trong phần Thuộc tính của loạt bài này. Hiện tại, hãy lưu ý rằng một số thuộc tính là thuộc tính toàn cục, nghĩa là các thuộc tính này có thể xuất hiện trong thẻ mở của bất kỳ phần tử nào. Một số phần tử chỉ áp dụng cho một số phần tử chứ không phải tất cả, trong khi một số khác lại dành riêng cho một phần tử và chỉ liên quan đến một phần tử.

Hầu hết thuộc tính là cặp tên/giá trị. Các thuộc tính Boolean, có giá trị là true, false hoặc giống với tên của thuộc tính có thể chỉ được thêm vào dưới dạng thuộc tính: giá trị là không cần thiết.

<img src="switch.svg" alt="light switch" ismap />

Hình ảnh này có 3 thuộc tính: src, alt và ismap. Thuộc tính src dùng để cung cấp vị trí của thành phần hình ảnh SVG. Thuộc tính alt cung cấp văn bản thay thế để mô tả nội dung của hình ảnh. Thuộc tính ismap là Boolean và không yêu cầu giá trị. Bài viết này chỉ nhằm giải thích về các thuộc tính. Chúng ta sẽ trình bày chi tiết hơn về các thuộc tính này trong phần hình ảnh.

Tuy không phải lúc nào cũng bắt buộc phải trích dẫn các thuộc tính, nhưng đôi khi thì bạn cần dùng dấu ngoặc kép. Nếu giá trị bao gồm một dấu cách hoặc ký tự đặc biệt, thì bạn cần dùng dấu ngoặc kép. Vì lý do này, bạn luôn nên trích dẫn. Nếu giá trị thuộc tính được trích dẫn thì không cần phải có một hoặc nhiều khoảng trắng giữa các thuộc tính, nhưng để đảm bảo an toàn và để người dùng dễ đọc, bạn nên sử dụng dấu ngoặc kép và dấu cách.

HTML không phân biệt chữ hoa chữ thường nhưng có một số giá trị thuộc tính. Các giá trị được xác định trong quy cách không phân biệt chữ hoa chữ thường. Các chuỗi không được xác định là từ khoá thường phân biệt chữ hoa chữ thường, bao gồm cả các giá trị id và class.

Xin lưu ý rằng nếu một giá trị thuộc tính có phân biệt chữ hoa chữ thường trong HTML, thì giá trị đó cũng phân biệt chữ hoa chữ thường khi được sử dụng trong bộ chọn thuộc tính trong CSS và trong JavaScript.

Để dễ đọc mã đánh dấu hơn, bạn nên đánh dấu HTML bằng chữ cái viết thường cho tất cả tên phần tử và tên thuộc tính trong thẻ, đồng thời trích dẫn tất cả giá trị thuộc tính. Nếu bạn đã từng nghe thấy thuật ngữ "đánh dấu kiểu HTML", thì thuật ngữ này và phần tử trống tự đóng có dấu gạch chéo ở cuối chính là điều đó.

Giao diện của các phần tử

Giao diện mặc định của các phần tử ngữ nghĩa là do biểu định kiểu tác nhân người dùng thiết lập. Hầu hết các trình duyệt đều sử dụng biểu định kiểu thực tế cho mục đích này, trong khi một số trình duyệt khác mô phỏng biểu định kiểu trong mã. Kết quả cuối cùng giống nhau. Mặc dù một số hạn chế trên biểu định kiểu tác nhân người dùng được thiết lập theo bản đặc tả HTML, nhưng các trình duyệt lại có nhiều vĩ độ, nghĩa là có một số khác biệt giữa các trình duyệt.

Phần tử bạn chọn và do đó, các thẻ bạn sử dụng phải phù hợp với nội dung bạn đang hiển thị, vì thẻ có ý nghĩa ngữ nghĩa. Ngữ nghĩa hay role của một phần tử đóng vai trò quan trọng đối với các công nghệ hỗ trợ và công cụ tìm kiếm (trong một số trường hợp). HTML nên được sử dụng để cấu trúc nội dung, không phải để xác định hình thức của nội dung. Giao diện là lĩnh vực của CSS. Mặc dù nhiều phần tử làm thay đổi giao diện của nội dung (chẳng hạn như <h1>, <strong> và <em>) mang ý nghĩa ngữ nghĩa, nhưng giao diện thường sẽ thay đổi theo kiểu tác giả.

<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>

Phần tử, thuộc tính và JavaScript

Mô hình đối tượng tài liệu (DOM) là đại diện dữ liệu cho cấu trúc và nội dung của tài liệu HTML. Khi phân tích cú pháp HTML, trình duyệt sẽ tạo một đối tượng JavaScript cho mọi phần tử và phần văn bản gặp phải. Các đối tượng này được gọi là nút – nút phần tử và nút văn bản, tương ứng.

Có một giao diện để xác định chức năng của mỗi phần tử HTML. HTML DOM API cung cấp quyền truy cập và kiểm soát mọi phần tử HTML thông qua DOM, cung cấp giao diện cho phần tử HTML và tất cả lớp HTML kế thừa từ phần tử đó. Giao diện HTMLElement đại diện cho phần tử HTML và tất cả các nút con cháu của phần tử đó. Mọi phần tử khác triển khai phần tử này thông qua một giao diện kế thừa phần tử đó. Mỗi giao diện kế thừa có một hàm khởi tạo, phương thức và thuộc tính. Thông qua các thuộc tính HTMLElement kế thừa, bạn có thể truy cập vào mọi thuộc tính chung, cũng như các sự kiện input, pointer, transition và animation. Bạn có thể truy cập vào các phương thức và giá trị thuộc tính của từng phần tử cụ thể thông qua loại phụ của từng phần tử, chẳng hạn như HTMLAnchorElement và HTMLImageElement.

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về HTML