Thẻ HTML là gì so với một phần tử HTML?

Có sự khác biệt giữa hai điều khoản này

Thiết kế web, giống như bất kỳ ngành công nghiệp hay nghề nghiệp nào, đều có ngôn ngữ riêng. Khi bạn bước vào ngành công nghiệp và bắt đầu nói chuyện với các đồng nghiệp của bạn, bạn chắc chắn sẽ chạy vào một loạt các thuật ngữ và cụm từ mới đối với bạn, nhưng dòng chảy của ngôn ngữ của các chuyên gia web của bạn. Hai trong số các thuật ngữ bạn sẽ nghe là HTML "tag" và "element".

Khi bạn nghe thấy hai thuật ngữ này được nói, bạn có thể nhận ra rằng chúng đang được sử dụng một cách hoán đổi cho nhau. Như vậy, một câu hỏi mà nhiều chuyên gia web mới có khi họ bắt đầu làm việc với mã HTML là "sự khác biệt giữa Thẻ HTML và Phần tử HTML là gì?"

Trong khi hai thuật ngữ này có ý nghĩa tương tự nhau, chúng không thực sự là từ đồng nghĩa. Vậy sự giống nhau với hai thuật ngữ này là gì? Câu trả lời ngắn gọn là cả thẻ và phần tử đều tham chiếu đến đánh dấu được sử dụng để viết HTML. Ví dụ: bạn có thể nói rằng bạn đang sử dụng thẻ

để xác định đoạn văn hoặc phần tử để tạo liên kết. Nhiều người sử dụng thẻ thuật ngữ và yếu tố thay thế lẫn nhau và bất kỳ nhà thiết kế web hoặc nhà phát triển nào bạn nói chuyện đều hiểu ý của bạn, nhưng thực tế là có sự khác biệt nhỏ giữa hai cụm từ.

HTML là một ngôn ngữ đánh dấu , có nghĩa là nó được viết bằng các mã có thể được đọc bởi một người mà không cần phải biên dịch trước. Nói cách khác, văn bản trên trang web được "đánh dấu" bằng các mã này để cung cấp cho các hướng dẫn trình duyệt web cách hiển thị văn bản. Các thẻ đánh dấu này chính là các thẻ HTML.

Khi bạn viết HTML, bạn đang viết các thẻ HTML. Tất cả các thẻ HTML được tạo thành từ một số phần cụ thể, bao gồm:

• Dấu nhỏ hơn <
• Một từ hoặc ký tự xác định thẻ nào đang được viết
• Bất kỳ số lượng thuộc tính HTML tùy chọn nào dưới dạng cặp name = "value"
• Và cuối cùng là một dấu hiệu lớn hơn>

Ví dụ: dưới đây là một số thẻ HTML:

Đây là tất cả các thẻ mở HTML, không có bất kỳ thuộc tính tùy chọn nào được thêm vào chúng. Các thẻ này đại diện cho:

• - xác định một đoạn văn.

• - xác định trang dưới dạng HTML
• - định nghĩa một bộ phận.

Sau đây cũng là các thẻ HTML:

• Tất cả các ví dụ này đều bao gồm các thuộc tính đã được thêm vào các thẻ HTML mở.

  • là một danh sách không có thứ tự bao gồm thuộc tính ID
    • Bộ phận có thuộc tính lớp
    • Phần tử neo hoặc liên kết, bao gồm thuộc tính "href"
    • Thẻ hình ảnh có thuộc tính "src"

    Đối với các thẻ neo và hình ảnh, các thuộc tính thực sự không phải là tùy chọn, chúng cần thiết cho các thẻ đó để hiển thị chính xác. Bạn cần phải nói cho liên kết đi đâu (đó là những gì "href" làm) và hình ảnh những gì để hiển thị (đó là những gì thuộc tính "src" cung cấp).

    Các phần tử HTML là gì

    Theo đặc tả HTML của W3C , một phần tử là khối xây dựng cơ bản của HTML và thường được tạo thành từ hai thẻ : một thẻ mở và một thẻ đóng. Cho đến nay, chúng tôi chỉ xem xét mở thẻ, bắt đầu các yếu tố. Để kết thúc phần tử đó, bạn viết các thẻ đóng tương ứng.

    Ví dụ, đối với phần tử paragraph bạn viết:

    Điều này được tạo thành từ thẻ mở mà chúng tôi đã xem một lúc trước cũng như thẻ đóng - . Đóng thẻ thực sự chỉ là thẻ mở lặp đi lặp lại, nhưng với một "dấu gạch chéo về phía trước" được thêm trực tiếp sau "ký tự nhỏ hơn".

    Hầu như tất cả các phần tử HTML đều có thẻ mở và thẻ đóng. Các thẻ này bao quanh văn bản sẽ hiển thị trên trang web. Ví dụ: để viết một đoạn văn bản, bạn viết văn bản để hiển thị trên trang và sau đó bao quanh nó bằng các thẻ này:

    Đây là nơi bạn sẽ viết văn bản của đoạn văn mà bạn muốn hiển thị trên trang web.

    Một số phần tử HTML không có thẻ đóng. Chúng được gọi là "các phần tử rỗng". Đôi khi, chúng cũng được gọi là các phần tử “ singleton ” hoặc “void”. Các phần tử trống dễ sử dụng vì bạn chỉ cần bao gồm một thẻ trong trang web của mình và trình duyệt sẽ biết phải làm gì. Ví dụ: để thêm một ngắt dòng vào trang của bạn, bạn sẽ sử dụng thẻ b
    .

    Một yếu tố phổ biến khác chỉ bao gồm thẻ mở là phần tử "hình ảnh". Ví dụ:

    Chúng tôi đã xem ví dụ này trước đó, nhưng không có thẻ đóng cho phần tử hình ảnh này. Trình duyệt sẽ chỉ thay thế mã này bằng hình ảnh được tham chiếu trong thuộc tính "href". Trong trường hợp này, đó sẽ là "logo.png".

    Nói chung, khi tôi tham chiếu đến một phần tử hoặc thẻ HTML, tôi sẽ sử dụng cụm từ “phần tử” để biểu thị rằng tôi đang đề cập đến tất cả các phần của phần tử (cả thẻ mở và thẻ đóng). Tôi sử dụng "tag" là tôi thực sự là một chỉ giới thiệu một hay khác. Đây là cách sử dụng hợp lý hai thuật ngữ này, và tôi khuyến khích bạn sử dụng chúng đúng cách - nhưng chỉ biết rằng nếu bạn trượt và trao đổi chúng một chút, bạn sẽ vẫn được hiểu bởi các đồng nghiệp phát triển web mới của bạn!

    Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard vào ngày 21/7/2017