Định nghĩa về HTML là gì?
HTML là gì? HTML (viết tắt của Hyper Text Markup Language) là ngôn ngữ đánh dấu tiêu chuẩn để tạo trang web và mô tả cấu trúc của website. HTML bao gồm một loạt các phần tử, giúp cho trình duyệt biết cách hiển thị nội dung. Các phần tử HTML thường gắn nhãn các phần nội dung như: "đây là một tiêu đề", " đầy là một văn bản", "đây là một liên kết"...
Ví dụ đơn giản về HTML
Giải thích ví dụ:
- Các <!DOCTYPE html> tuyên bố xác định rằng tài liệu này là một tài liệu HTML5
- Phần tử <html> là phần tử gốc của một trang HTML
- Phần tử <head> chứa thông tin meta về trang HTML
- Phần tử <title> chỉ định tiêu đề cho trang HTML (được hiển thị trong thanh tiêu đề của trình duyệt hoặc trong tab của trang)
- Phần tử <body> xác định phần thân của tài liệu và là vùng chứa cho tất cả nội dung hiển thị, chẳng hạn như tiêu đề, đoạn văn, hình ảnh, siêu liên kết, bảng, danh sách, v.v.
- Phần tử <h1> xác định một tiêu đề lớn
- Phần tử <p> xác định một đoạn văn
Phần tử HTML là gì?
Phần tử HTML là thẻ bắt đầu và thẻ kết thúc có nội dung ở giữa:
<h1> Đây là tiêu đề </h1>
Lưu ý: Một số phần tử HTML không có nội dung (như phần tử <br>). Các phần tử này được gọi là phần tử rỗng. Các phần tử rỗng không có thẻ kết thúc!
Trình duyệt web
Mục đích của trình duyệt web (Chrome, Edge, Firefox, Safari) là đọc các tài liệu HTML và hiển thị chúng một cách chính xác.
Trình duyệt không hiển thị các thẻ HTML, nhưng sử dụng chúng để xác định cách hiển thị tài liệu:
Lịch sử phiên bản HTML
Kể từ những ngày đầu của World Wide Web, đã có nhiều phiên bản HTML khác nhau, bạn đọc tham khảo hình dưới đây:
Một số cấu trúc cơ bản của ngôn ngữ HTML
Thuộc tính HTML
- Các phần tử HTML có thể có các thuộc tính
- Các thuộc tính cung cấp thông tin bổ sung về phần tử
- Các thuộc tính có trong các cặp tên/giá trị như charset ="utf-8"
Tài liệu HTML
Tất cả các tài liệu HTML phải bắt đầu với tuyên bố loại tài liệu: <!DOCTYPE html>.
Bản thân tài liệu HTML bắt đầu bằng <html> và kết thúc bằng </html>.
Phần hiển thị của tài liệu HTML nằm giữa <body>và </body>.
Cấu trúc trang HTML
Dưới đây là hình ảnh trực quan của một trang HTML
Lưu ý: Chỉ nội dung bên trong phần <body> (vùng trắng ở trên) được hiển thị trong trình duyệt.
Tiêu đề HTML
Tiêu đề HTML được định nghĩa với thẻ <h1>đến <h6>.
<h1>xác định tiêu đề quan trọng nhất. <h6>xác định tiêu đề ít quan trọng nhất.
Các đoạn HTML
Các đoạn HTML được xác định bằng thẻ <p>.
Liên kết HTML
Các liên kết HTML được xác định bằng thẻ <a>.
Đích của liên kết được chỉ định trong href thuộc tính.
Hình ảnh HTML
Hình ảnh HTML được xác định bằng thẻ<img>.
Tệp nguồn (src) văn bản thay thế (alt) width và height được cung cấp dưới dạng các thuộc tính:
Các nút HTML
Các nút HTML được xác định bằng thẻ <button>.
Danh sách HTML
Danh sách HTML được xác định bằng các thẻ (danh sách <ul> không có thứ tự / dấu đầu dòng) hoặc <ol> ( danh sách có thứ tự / được đánh số), theo sau là <li> các thẻ (mục danh sách):
Bảng HTML
Một bảng HTML được xác định bằng một thẻ <table>.
Các hàng trong bảng được xác định bằng các thẻ <tr>
Tiêu đề bảng được xác định bằng thẻ <th> (in đậm và căn giữa theo mặc định).
Các ô trong bảng (dữ liệu) được xác định bằng các thẻ <td>.
Lập trình HTML
Mọi phần tử HTML đều có thể có các thuộc tính .
Đối với lập trình và phát triển web, các thuộc tính quan trọng nhất là id và class. Các thuộc tính này thường được sử dụng để giải quyết các thao tác trang web dựa trên chương trình.
HTML hoạt động như thế nào?
Tài liệu HTML là các tệp kết thúc bằng a. phần mở rộng html hoặc .htm . Sau đó, bạn có thể xem bằng bất kỳ trình duyệt web nào (chẳng hạn như Google Chrome, Safari hoặc Mozilla Firefox). Trình duyệt đọc tệp HTML và hiển thị nội dung của nó để người dùng internet có thể xem.
Thông thường, các trang web trung bình gồm một số trang HTML khác nhau. Ví dụ: trang chủ, trang giới thiệu, trang liên hệ sẽ có các tài liệu HTML riêng biệt.
Mỗi trang HTML bao gồm một tập hợp các thẻ (còn được gọi là các phần tử ), mà bạn có thể coi là các khối xây dựng của các trang web. Chúng tạo ra một hệ thống phân cấp cấu trúc nội dung thành các phần, đoạn văn, tiêu đề và các khối nội dung khác.
Hầu hết các phần tử HTML có phần mở đầu và phần đóng sử dụng cú pháp <tag> </tag> .
Dưới đây, bạn có thể xem một ví dụ mã về cách các phần tử HTML được cấu trúc:
Tổng quan về các thẻ HTML được sử dụng nhiều nhất
Thẻ HTML có hai loại chính: block-level và inline tags.
- Các phần tử block-level chiếm toàn bộ không gian có sẵn và luôn bắt đầu một dòng mới trong tài liệu. Các tiêu đề và đoạn văn là một ví dụ tuyệt vời về thẻ block-level.
- Các phần tử inline tags chỉ chiếm nhiều không gian khi chúng cần và không bắt đầu một dòng mới trên trang. Chúng thường dùng để định dạng nội dung bên trong của các phần tử block-level. Các liên kết và chuỗi được nhấn mạnh là những ví dụ điển hình về inline tags.
Thẻ block-level
Ba thẻ cấp khối mà mọi tài liệu HTML cần phải chứa là <html> , <head> và <body> .
- Thẻ <html> </html> là phần tử cấp cao nhất bao quanh mọi trang HTML.
- Thẻ <head> </head> chứa thông tin meta như tiêu đề và bộ ký tự của trang.
- Cuối cùng, thẻ <body> </body> bao gồm tất cả nội dung xuất hiện trên trang.
- Tiêu đề có 6 cấp độ trong HTML. Chúng nằm trong khoảng từ <h1> </h1> đến <h6> </h6>, trong đó h1 là tiêu đề cấp cao nhất và h6 là tiêu đề cấp thấp nhất. Các đoạn văn được bao quanh bởi <p> </p> , trong khi các dấu ngoặc kép sử dụng thẻ <blockquote> </blockquote> .
- Divisions là các phần nội dung lớn hơn thường chứa một số đoạn văn, hình ảnh, đôi khi là dấu ngoặc kép và các phần tử nhỏ hơn khác. Chúng tôi có thể đánh dấu chúng bằng thẻ <div> </div>. Một phần tử div cũng có thể chứa một thẻ div khác bên trong nó.
- Bạn cũng có thể sử dụng thẻ <ol> </ol> cho danh sách có thứ tự và <ul> </ul> cho danh sách không có thứ tự. Các mục danh sách riêng lẻ phải được bao bọc bởi thẻ <li> </li>.
Ví dụ: một danh sách không có thứ tự cơ bản trông như thế nào trong HTML:
Thẻ inline tags
Nhiều thẻ inline tags được sử dụng để định dạng văn bản.
Ví dụ: thẻ <strong> </strong> sẽ hiển thị một phần tử được in đậm , trong khi các thẻ <em> </em> sẽ hiển thị phần tử đó ở dạng nghiêng .
Các siêu liên kết cũng là các phần tử inline tags yêu cầu các thẻ <a> </a> và thuộc tính href để chỉ ra điểm đến của liên kết:
Hình ảnh cũng là yếu tố nội dòng. Bạn có thể thêm một thẻ bằng cách sử dụng <img> mà không cần bất kỳ thẻ đóng nào. Nhưng bạn cũng sẽ cần sử dụng thuộc tính src để chỉ định đường dẫn hình ảnh.
Ví dụ
Sự phát triển của thẻ HTML. Điểm khác biệt giữa HTML và HTML5
Từ những ngày đầu tiên, HTML đã trải qua một quá trình phát triển xuyên suốt. W3C liên tục xuất bản các phiên bản và bản cập nhật mới, trong khi các cột mốc lịch sử cũng được đặt tên riêng.
HTML4 (ngày nay thường được gọi là “HTML”) được xuất bản vào năm 1999, trong khi phiên bản chính mới nhất ra mắt vào năm 2014. Được đặt tên là HTML5, bản cập nhật đã giới thiệu nhiều tính năng mới cho ngôn ngữ này.
Một trong những tính năng được mong đợi nhất của HTML5 là hỗ trợ cho nhúng âm thanh và video. Thay vì sử dụng trình phát Flash, bạn có thể chỉ cần nhúng video và tệp âm thanh vào trang web của mình bằng cách sử dụng các thẻ <audio> </audio> và <video> </video> mới. Nó cũng bao gồm hỗ trợ tích hợp cho đồ họa vector có thể mở rộng (SVG) và MathML cho các công thức toán học và khoa học.
HTML5 cũng đã giới thiệu một số cải tiến về ngữ nghĩa. Các thẻ ngữ nghĩa mới thông báo cho trình duyệt về ý nghĩa của nội dung, điều này có lợi cho cả người đọc và công cụ tìm kiếm.
Các thẻ ngữ nghĩa phổ biến nhất là <article> </article>, <section> </section>, <aside> </aside>, <header> </header> và <footer> </footer>.
Ưu và nhược điểm của thẻ HTML
Giống như hầu hết mọi thứ, HTML có một số ưu và nhược điểm sau.
Ưu điểm
- Một ngôn ngữ được sử dụng rộng rãi với rất nhiều tài nguyên và một cộng đồng sử dụng khổng lồ.
- Chạy mượt trong mọi trình duyệt web.
- Qúa trình học tập đơn giản, trực tiếp
- Mã nguồn mở và hoàn toàn miễn phí.
- Markup gọn gàng và nhất quán.
- Các tiêu chuẩn web được duy trì bởi World Wide Web Consortium (W3C).
- Dễ dàng tích hợp với các ngôn ngữ phụ trợ như PHP và Node.js.
Nhược điểm:
- Chủ yếu được sử dụng cho các trang web tĩnh. Đối với tính năng động, bạn có thể cần sử dụng JavaScript hoặc ngôn ngữ phụ trợ như PHP.
- Nó không cho phép người dùng thực hiện logic. Do đó, tất cả các trang web cần được tạo riêng biệt, ngay cả khi chúng sử dụng các phần tử giống nhau, ví dụ: đầu trang và chân trang.
- Một số trình duyệt áp dụng các tính năng mới một cách chậm chạp.
- Hành vi của trình duyệt đôi khi khó dự đoán (ví dụ: các trình duyệt cũ không phải lúc nào cũng hiển thị các thẻ mới hơn).
Sự liên quan của HTML, CSS, Javascript như thế nào
Mặc dù HTML là một ngôn ngữ mạnh mẽ, nhưng nó không đủ để xây dựng một trang web chuyên nghiệp và đáp ứng đầy đủ. Bạn chỉ có thể sử dụng nó để thêm các thành phần văn bản và tạo cấu trúc của nội dung.
Tuy nhiên, HTML hoạt động rất hiệu quả với hai ngôn ngữ giao diện người dùng khác: CSS (Cascading Style Sheets) và JavaScript. Các ngôn ngữ này kết hợp với nhau có thể đạt được trải nghiệm người dùng phong phú và triển khai các chức năng nâng cao.
- CSS chịu trách nhiệm tạo kiểu như nền, màu sắc, bố cục, khoảng cách và hoạt ảnh.
- JavaScript cho phép bạn thêm chức năng động như thanh trượt, cửa sổ bật lên và thư viện ảnh.
Hãy coi HTML như một con người, CSS như một bộ quần áo và JavaScript như cách ứng xử và hành vi của người đó.
Lời kết
Vậy...HTML là gì?
HTML là ngôn ngữ đánh dấu chính của web. Nó chạy trên mọi trình duyệt và được bảo trì bởi World Wide Web Consortium.
Bạn có thể sử dụng nó để tạo cấu trúc nội dung của trang web và ứng dụng web. Đây là cấp thấp nhất của công nghệ giao diện người dùng, làm cơ sở cho việc tạo kiểu mà bạn có thể thêm bằng CSS và chức năng bạn có thể triển khai bằng JavaScript.