HTML (Ngôn ngữ đánh dấu siêu văn bản) là một cách tiếp cận dựa trên văn bản để mô tả cách cấu trúc nội dung chứa trong tệp HTML. Đánh dấu này cho trình duyệt web biết cách hiển thị văn bản, hình ảnh và các dạng đa phương tiện khác trên trang web.
HTML là một khuyến nghị chính thức của World Wide Web Consortium ( W3C ) và thường được tuân thủ bởi tất cả các trình duyệt web chính, bao gồm cả trình duyệt web trên máy tính để bàn và thiết bị di động.
Html là gì?
HTML là viết tắt của cụm từ Hypertext Markup Language (tạm dịch là Ngôn ngữ đánh dấu siêu văn bản). HTML được sử dụng để tạo và cấu trúc các thành phần trên website hoặc ứng dụng..Ngoài ra giúp phân chia các đoạn văn, heading, titles, blockquotes… và HTML không phải là ngôn ngữ lập trình.
Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML Elements) được quy định bằng các cặp thẻ (tag và attributes). Các cặp thẻ này được bao bọc bởi một dấu ngoặc ngọn (ví dụ <html>) và thường là sẽ được khai báo thành một cặp, bao gồm thẻ mở và thẻ đóng. Ví dụ, chúng ta có thể tạo một đoạn văn bằng cách đặt văn bản vào trong cặp tag mở và đóng văn bản <p> và </p> :
<p>Đây là cách bạn thêm đoạn văn trong HTML.</p>
Nhưng một số thẻ đặc biệt lại không có thẻ đóng và dữ liệu được khai báo sẽ nằm trong các thuộc tính (ví dụ như thẻ <img>).
Cha đẻ của HTML là Tim Berners-Lee, cũng là người khai sinh ra World Wide Web và chủ tịch của World Wide Web Consortium (W3C – tổ chức thiết lập ra các chuẩn trên môi trường Internet). Các thiết lập và cấu trúc HTML được vận hành và phát triển bởi World Wide Web Consortium (W3C). Bạn có thể kiểm tra tình trạng mới nhất của ngôn ngữ này bất kỳ lúc nào trên trang W3C’s website.
Cách HTML hoạt động
HTML là một tệp văn bản chứa cú pháp, tệp và quy ước đặt tên cụ thể giúp máy tính và máy chủ web biết rằng nó ở dạng HTML và nên được đọc như vậy. Bằng cách áp dụng các quy ước HTML này cho tệp văn bản trong hầu hết mọi trình soạn thảo văn bản, người dùng có thể viết và thiết kế một trang web cơ bản, sau đó tải nó lên internet.
Quy ước cơ bản nhất của HTML là đưa vào phần khai báo loại tài liệu ở đầu tệp văn bản. Phần này luôn xuất hiện đầu tiên trong tài liệu vì nó là phần thông báo chắc chắn cho máy tính rằng đây là tệp HTML. Tiêu đề tài liệu thường trông như thế này: <!DOCTYPE html>. Nó phải luôn được viết theo cách đó, không có bất kỳ nội dung nào bên trong hoặc chia nhỏ nó. Bất kỳ nội dung nào xuất hiện trước tuyên bố này sẽ không được máy tính công nhận là HTML.
Các loại tài liệu không chỉ được sử dụng cho HTML mà còn có thể áp dụng cho việc tạo bất kỳ tài liệu nào sử dụng SGML (Ngôn ngữ đánh dấu tổng quát tiêu chuẩn). SGML là một tiêu chuẩn để chỉ định ngôn ngữ đánh dấu cụ thể đang được sử dụng. HTML là một trong một số ngôn ngữ đánh dấu mà khai báo SGML và doctype áp dụng.
Yêu cầu quan trọng khác để tạo tệp HTML là lưu tệp đó với phần mở rộng tệp .html. Trong khi khai báo doctype báo hiệu HTML đến máy tính từ bên trong tệp, thì phần mở rộng tệp báo hiệu HTML đến máy tính từ bên ngoài tệp. Bằng cách có cả hai, máy tính có thể biết rằng đó là tệp HTML cho dù nó có đọc tệp hay không. Điều này trở nên đặc biệt quan trọng khi tải tệp lên web, vì máy chủ web cần biết phải làm gì với tệp trước khi có thể gửi chúng đến máy khách để đọc nội dung bên trong.
Sau khi viết loại tài liệu và lưu dưới dạng tệp HTML, người dùng có thể triển khai tất cả các công cụ cú pháp khác của HTML để tùy chỉnh trang web. Sau khi hoàn tất, họ có thể sẽ có một số tệp HTML tương ứng với các trang khác nhau của trang web. Điều quan trọng là người dùng phải tải các tệp này lên theo cùng thứ bậc mà họ đã lưu chúng, vì mỗi trang đều tham chiếu đường dẫn tệp cụ thể của các trang khác, cho phép liên kết giữa chúng. Tải chúng lên theo thứ tự khác sẽ khiến liên kết bị hỏng và mất trang vì đường dẫn tệp được chỉ định sẽ không khớp với các trang.
Các thành phần cơ bản của HTML
Bằng cách sử dụng HTML, tệp văn bản sẽ được đánh dấu thêm bằng văn bản bổ sung mô tả cách hiển thị tài liệu. Để tách biệt đánh dấu khỏi nội dung thực tế của tệp HTML, có một cú pháp HTML đặc biệt, dễ phân biệt được sử dụng. Những thành phần đặc biệt này được gọi là thẻ HTML . Các thẻ có thể chứa các cặp tên-giá trị được gọi là thuộc tính và một phần nội dung được đặt trong thẻ được gọi là phần tử HTML.
Các phần tử HTML luôn có thẻ mở, nội dung ở giữa và thẻ đóng. Các thuộc tính có thể cung cấp thông tin bổ sung về phần tử và được bao gồm trong thẻ mở. Các phần tử có thể được mô tả theo một trong hai cách:
- Các phần tử cấp khối bắt đầu trên một dòng mới trong tài liệu và chiếm không gian riêng của chúng. Ví dụ về các yếu tố này bao gồm các tiêu đề và thẻ đoạn văn.
- Các phần tử nội tuyến không bắt đầu trên một dòng mới trong tài liệu và chỉ chiếm không gian cần thiết. Các phần tử này thường định dạng nội dung của các phần tử cấp khối. Ví dụ về các phần tử nội tuyến bao gồm siêu liên kết và thẻ định dạng văn bản.
Ưu và nhược điểm của HTML
Ưu điểm của việc sử dụng HTML bao gồm:
- Được áp dụng rộng rãi với một lượng lớn tài nguyên có sẵn.
- Nguyên bản được chạy trên mọi trình duyệt.
- Tương đối dễ học.
- Có mã nguồn rõ ràng và nhất quán.
- Là nguồn mở và miễn phí sử dụng.
- Có thể tích hợp với các ngôn ngữ lập trình phụ trợ khác như PHP .
Một số nhược điểm cần xem xét là:
- Không có chức năng rất năng động và chủ yếu được sử dụng cho các trang web tĩnh.
- Tất cả các thành phần phải được tạo riêng ngay cả khi chúng sử dụng các thành phần tương tự nhau.
- Hành vi của trình duyệt có thể không thể đoán trước được. Ví dụ: các trình duyệt cũ hơn có thể không tương thích với các tính năng mới hơn.
Các thẻ HTML thông dụng
Thẻ HTML quy định cấu trúc tổng thể của một trang và cách các phần tử bên trong chúng được hiển thị trên trình duyệt. Các thẻ HTML thường được sử dụng bao gồm:
- <h1> mô tả tiêu đề cấp cao nhất.
- <h2> mô tả tiêu đề cấp hai.
- <p> mô tả một đoạn văn.
- <table> mô tả dữ liệu dạng bảng.
- <ol> mô tả danh sách thông tin có thứ tự.
- <ul> mô tả danh sách thông tin không có thứ tự.
Như đã đề cập, có các thẻ mở và đóng bao quanh nội dung mà chúng đang tăng cường. Thẻ mở có dạng như sau: <p>. Thẻ đóng cũng tương tự nhưng có dấu gạch chéo ngược để cho biết rằng đó là phần cuối của phần tử HTML đã cho. Thẻ đóng có dạng như sau: </p>.
Cách sử dụng và triển khai HTML
Vì HTML hoàn toàn dựa trên văn bản nên có thể chỉnh sửa tệp HTML một cách đơn giản bằng cách mở tệp đó trong một chương trình như Notepad++, Vi hoặc Emacs. Bất kỳ trình soạn thảo văn bản nào cũng có thể được sử dụng để tạo hoặc chỉnh sửa tệp HTML và miễn là nó được đặt tên bằng phần mở rộng tệp .html, bất kỳ trình duyệt web nào — chẳng hạn như Chrome hoặc Firefox — sẽ có khả năng hiển thị tệp dưới dạng trang web .
Đối với các nhà phát triển phần mềm chuyên nghiệp, có rất nhiều trình soạn thảo WYSIWYG để phát triển trang web. Netbeans, IntelliJ, Eclipse và Visual Studio của Microsoft cung cấp các trình soạn thảo WYSIWYG dưới dạng plugin hoặc thành phần tiêu chuẩn, giúp việc sử dụng và triển khai HTML trở nên cực kỳ dễ dàng.
Các trình soạn thảo WYSIWYG này cũng cung cấp các phương tiện khắc phục sự cố HTML, mặc dù các trình duyệt web hiện đại thường chứa các plugin dành cho nhà phát triển web sẽ làm nổi bật các vấn đề với các trang HTML, chẳng hạn như thiếu thẻ đóng hoặc cú pháp không tạo ra HTML đúng định dạng.
Cả Chrome và Firefox đều bao gồm các công cụ dành cho nhà phát triển HTML cho phép xem ngay tệp HTML hoàn chỉnh của trang web, cùng với khả năng chỉnh sửa HTML nhanh chóng và kết hợp ngay các thay đổi trong trình duyệt internet.
HTML, CSS và JavaScript
HTML được sử dụng để tạo trang web nhưng gặp phải những hạn chế khi có các thành phần đáp ứng đầy đủ. Do đó, HTML chỉ nên được sử dụng để thêm các thành phần văn bản và cấu trúc chúng trong một trang. Đối với các tính năng phức tạp hơn, HTML có thể được kết hợp với các biểu định kiểu xếp tầng ( CSS ) và JavaScript ( JS ).
Tệp HTML có thể liên kết đến biểu định kiểu xếp tầng hoặc tệp JS — thường ở đầu tài liệu với đường dẫn tệp được chỉ định — sẽ chứa thông tin về màu nào sẽ sử dụng, phông chữ nào sẽ sử dụng và thông tin kết xuất phần tử HTML khác. JavaScript cũng cho phép các nhà phát triển đưa nhiều chức năng động hơn, chẳng hạn như cửa sổ bật lên và thanh trượt ảnh vào trang web. Các thẻ được gọi là thuộc tính lớp được sử dụng để khớp các phần tử HTML với các phần tử CSS hoặc JS tương ứng của chúng.
Ví dụ: nếu người dùng muốn màu của một lượng văn bản nhất định là màu đỏ, họ có thể viết mã trong tệp CSS có thuộc tính lớp đi kèm để chuyển văn bản thành màu đỏ. Sau đó, họ có thể đặt thuộc tính lớp được liên kết trên tất cả các đoạn văn bản mà họ muốn có màu đỏ trong trang HTML. Phương pháp cơ bản tương tự áp dụng cho các trang JS, với các chức năng khác nhau.
Việc tách thông tin về cách cấu trúc một trang, vai trò của HTML khỏi thông tin về giao diện của trang web khi nó được hiển thị trong trình duyệt là một mô hình phát triển phần mềm và phương pháp hay nhất được gọi là tách biệt các mối quan tâm.
Lịch sử và sự phát triển
Trong những ngày đầu của world wide web, việc đánh dấu các tài liệu dạng văn bản bằng cú pháp HTML là quá đủ để tạo điều kiện thuận lợi cho việc chia sẻ các tài liệu học thuật và các bản ghi nhớ kỹ thuật. Tuy nhiên, khi Internet mở rộng ra ngoài các bức tường của học viện và đến với gia đình của người dân nói chung, nhu cầu về các trang web càng lớn về mặt định dạng và tính tương tác.
HTML 4.01 được phát hành vào năm 1999, vào thời điểm Internet vẫn chưa trở thành một cái tên quen thuộc và HTML5 chưa được tiêu chuẩn hóa cho đến năm 2014. Trong thời gian này, đánh dấu HTML đã chuyển từ công việc mô tả đơn giản cấu trúc tài liệu của nội dung trang web sang vai trò cũng như mô tả nội dung sẽ trông như thế nào khi một trang web hiển thị nó.
Do đó, các trang web dựa trên HTML4 thường bao gồm thông tin trong thẻ về phông chữ nào sẽ sử dụng khi hiển thị văn bản, màu nào nên sử dụng cho nền và cách căn chỉnh nội dung. Việc mô tả trong thẻ HTML cách định dạng một phần tử HTML khi được hiển thị trên trang web được coi là một mô hình HTML. Nói chung, HTML phải mô tả cách cấu trúc nội dung chứ không phải cách nội dung đó được tạo kiểu và hiển thị trong trình duyệt. Các ngôn ngữ đánh dấu khác phù hợp hơn với nhiệm vụ này.
Một điểm khác biệt lớn giữa HTML4 và HTML5 là mẫu phân tách mối quan tâm được thực thi chặt chẽ hơn trong HTML5 so với HTML4. Với HTML5, các thẻ <b> in đậm và in nghiêng <i> không còn được dùng nữa. Đối với thẻ đoạn văn, thuộc tính căn chỉnh đã bị xóa hoàn toàn khỏi đặc tả HTML.
Phiên bản HTML
Sau đây là danh sách các phiên bản HTML và năm chúng được tạo ra. Một số lần lặp lại của mỗi phiên bản đã được phát hành theo thời gian. Danh sách này nhằm mục đích tập trung vào các lần lặp lại đáng kể.
- HTML 1.0 – phát hành năm 1992 – có khả năng rất hạn chế và khoảng 20 phần tử.
- HTML 2.0 – phát hành năm 1995 – bắt đầu kết hợp các phần tử liên quan đến hàm toán học.
- HTML 3.2 — phát hành năm 1996 — đã loại bỏ hoàn toàn sáng kiến về hàm toán học và khắc phục sự chồng chéo giữa các phần mở rộng độc quyền khác nhau.
- HTML 4.0 — phát hành năm 1997 — cung cấp ba biến thể khác nhau về số lượng phần tử không được dùng nữa được cho phép.
- HTML 4.01 — phát hành năm 1999 — phần lớn giống với 4.0.
- HTML 5 — được phát hành vào năm 2014 — ra đời sau một thời gian dài ngừng cập nhật vì tổ chức phát triển nó — W3C — đang tập trung vào một ngôn ngữ song song khác có tên là XHTML.
- HTML 5.1 — được phát hành vào năm 2016 — nhằm mục đích dễ dàng hỗ trợ nhiều loại phương tiện nhúng khác nhau bằng các thẻ mới.
- HTML 5.2 — được phát hành vào năm 2017 — nhằm mục đích giúp con người và máy tính dễ hiểu như nhau.
- HTML 5.3 — chưa được phát hành — W3C đang cộng tác với WHATWG trên một phiên bản mới. Sự hợp tác bắt đầu vào năm 2019.
Các tính năng của HTML5
HTML5 giới thiệu một số yếu tố để tăng tính tương tác, khả năng đa phương tiện và hiệu quả ngữ nghĩa. Thay vì sử dụng plugin, đa phương tiện có thể được đặt trong mã HTML. Những yếu tố này bao gồm:
Các yếu tố đồ họa:
-
- <canvas>, tạo ra một không gian hình chữ nhật trống trong đó các nhà thiết kế web có thể vẽ bằng JavaScript.
- <svg>, là vùng chứa đồ họa vector có thể mở rộng (SVG).
Các yếu tố ngữ nghĩa:
-
- <header>, tạo tiêu đề ở đầu trang.
- <footer>, tạo chân trang ở cuối trang.
- <article>, tạo ra một khu vực dành cho nội dung độc lập.
- <section>, xác định các phần và phần phụ như chương hoặc đầu trang và chân trang khi cần nhiều hơn một phần.
- <nav>, tạo menu điều hướng.
Yếu tố đa phương tiện:
-
- <audio>, mô tả các tệp MP3, tệp WAV và tệp OGG trong HTML.
- <video>, mô tả các loại video MP4, WebM và OGG.
- Các thuộc tính áp dụng cho phần tử <form>, tạo ra một khu vực để người dùng nhập liệu trên trang web. Chúng bao gồm số, ngày, lịch và phạm vi.
Các tính năng chính khác của HTML5 bao gồm:
- Loại bỏ các thuộc tính lỗi thời hoặc dư thừa.
- Chỉnh sửa ngoại tuyến.
- Khả năng kéo và thả giữa các tài liệu HTML5.
- Cải tiến tin nhắn.
- Phân tích chi tiết
- Đăng ký trình xử lý giao thức và MIME .
- Một tiêu chuẩn chung để lưu trữ dữ liệu trong cơ sở dữ liệu SQL (Web SQL ).
- Giao diện chương trình ứng dụng ( API ) cho các ứng dụng phức tạp.
- Chỗ ở để phát triển ứng dụng thiết bị di động.
- MathML cho các công thức toán học và khoa học.
Mặc dù việc bổ sung các tính năng này thể hiện nỗ lực hỗ trợ nhúng đa phương tiện, nhưng những thay đổi đối với đặc tả HTML thể hiện mong muốn của cộng đồng đối với HTML để quay trở lại mục đích ban đầu là mô tả cấu trúc nội dung. Về cơ bản, nhiều tính năng cấu trúc hơn đã được thêm vào, trong khi một số tính năng tập trung vào định dạng không được dùng nữa. Với mục đích tương thích ngược, các trình duyệt web sẽ tiếp tục hỗ trợ các thẻ HTML không được dùng nữa, nhưng cuối cùng HTML sẽ chủ yếu dựa trên cấu trúc.
Tiêu chuẩn cú pháp HTML
Trong ví dụ HTML sau đây, có hai phần tử HTML. Cả hai phần tử đều sử dụng cùng một thẻ đoạn văn, được chỉ định bằng chữ cái p và cả hai đều sử dụng thuộc tính định hướng dir, mặc dù một giá trị thuộc tính khác được gán cho cặp giá trị tên của thuộc tính HTML, cụ thể là rtl và ltr.
Lưu ý rằng khi đoạn mã HTML này được hiển thị trong trình duyệt, các thẻ HTML sẽ tác động đến cách mỗi thành phần HTML được hiển thị trên trang, nhưng không có thẻ hoặc thuộc tính HTML nào được hiển thị. HTML chỉ mô tả cách hiển thị nội dung. Bản thân HTML không bao giờ được hiển thị cho người dùng cuối.
Để trình duyệt web hiển thị trang HTML mà không gặp lỗi, nó phải được cung cấp HTML đúng định dạng. Để được định dạng đúng, mỗi phần tử HTML phải được chứa trong thẻ mở — <p> — và thẻ đóng — </p>. Hơn nữa, bất kỳ thẻ mới nào được mở trong một thẻ khác đều phải được đóng trước khi thẻ chứa được đóng lại. Vì vậy, ví dụ: <h1><p>HTML được định dạng đúng</p></h1> là HTML được định dạng đúng, trong khi <h1><p>HTML được định dạng đúng</h1></p> thì không HTML được định dạng tốt.
Một quy tắc cú pháp khác là các thuộc tính HTML phải được đặt trong dấu ngoặc đơn hoặc dấu ngoặc kép. Thường có tranh luận về việc định dạng nào là đúng về mặt kỹ thuật, nhưng World Wide Web Consortium khẳng định rằng cả hai cách tiếp cận đều có thể chấp nhận được.
Kết luận
Như vậy trong bài viết này, kidoweb đã giải thích cho bạn hiểu hơn về khái niêm “HTML là gì” rồi phải không nào. Cảm ơn các bạn đã đọc bài viết này, hẹn gặp lại trong bài viết tiếp theo
Nguồn dịch: https://www.theserverside.com/definition/HTML-Hypertext-Markup-Language