Ngôn ngữ HTML là gì? Vai trò của HTML trong website
Ngôn ngữ HTML là một trong những xương sống tạo nên website. Bên cạnh CSS và JavaScript, gần như lập trình viên website nào cũng gần phải biết về HTML. HTML tuy dễ học nhưng để hiểu hết được nó lại là một chuyện hoàn toàn khác. Hãy cùng tìm hiểu về ngôn ngữ HTML và vai trò của HTML qua bài viết sau.
Tìm hiểu thêm về CSS và Javascript ????
1. Ngôn ngữ HTML là gì?
1.1. Giới thiệu ngôn ngữ HTML
HTML (viết tắt của từ Hypertext Markup Language, hay là “Ngôn ngữ Đánh dấu Siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web. Nó có thể được trợ giúp bởi các công nghệ như CSS và các ngôn ngữ kịch bản giống như JavaScript.
Các trình duyệt web nhận tài liệu HTML từ một web server hoặc một kho lưu trữ cục bộ và render tài liệu đó thành các trang web đa phương tiện. HTML mô tả cấu trúc của một trang web về mặt ngữ nghĩa và các dấu hiệu ban đầu được bao gồm cho sự xuất hiện của tài liệu.
Các phần tử HTML là các khối xây dựng của các trang HTML. Với cấu trúc HTML, hình ảnh và các đối tượng khác như biểu mẫu tương tác có thể được nhúng vào trang được hiển thị. HTML cung cấp một phương tiện để tạo tài liệu có cấu trúc bằng cách biểu thị ngữ nghĩa cấu trúc cho văn bản như headings, paragraphs, lists, links, quotes và các mục khác. Các phần tử HTML được phân định bằng các tags, được viết bằng dấu ngoặc nhọn. Các tags như và giới thiệu trực tiếp nội dung vào trang. Các tags khác như bao quanh và cung cấp thông tin về văn bản tài liệu và có thể bao gồm các thẻ khác làm phần tử phụ. Các trình duyệt không hiển thị các thẻ HTML, nhưng sử dụng chúng để diễn giải nội dung của trang.
HTML có thể nhúng các chương trình được viết bằng scripting như JavaScript, điều này ảnh hưởng đến hành vi và nội dung của các trang web. Việc bao gồm CSS xác định giao diện và bố cục của nội dung. World Wide Web Consortium (W3C), trước đây là đơn vị bảo trì HTML và là người duy trì hiện tại của các tiêu chuẩn CSS, đã khuyến khích việc sử dụng CSS trên HTML trình bày rõ ràng kể từ năm 1997.
1.2. Lịch sử phát triển HTML
HTML được tạo ra bởi Tim Berners-Lee, một nhà vật lý học của trung tâm nghiên cứu CERN ở Thụy Sĩ. Hiện nay, HTML đã trở thành một chuẩn Internet được tổ chức W3C (World Wide Web Consortium) vận hành và phát triển. Bạn có thể tự tìm kiếm tình trạng mới nhất của HTML tại bất kỳ thời điểm nào trên Website của W3C.
Phiên bản đầu tiên của HTML xuất hiện năm 1991, gồm 18 tag HTML. Phiên bản HTML 4.01 được xuất bản năm 1999. Sau đó, các nhà phát triển đã thay thế HTML bằng XHTML vào năm 2000.
Đến năm 2014, HTML được nâng cấp lên chuẩn HTML5 với nhiều tag được thêm vào markup, mục đích là để xác định rõ nội dung thuộc loại là gì (ví dụ như: <article>, <header>, <footer>,…).
Theo Mozilla Developer Network thì HTML Element Reference hiện nay có khoảng hơn 140 tag. Tuy nhiên một vài tag trong số đó đã bị tạm ngưng (do không được hỗ trợ bởi các trình duyệt hiện hành).
1.3. HTML hoạt động như thế nào?
HTML documents là files kết thúc với đuôi .html hay .htm. Bạn có thể xem chúng bằng cách sử dụng bất kỳ trình duyệt web nào (như Google Chrome, Safari, hay Mozilla Firefox). Trình duyệt đọc các files HTML này và xuất bản nội dung lên internet sao cho người đọc có thể xem được nó.
Thông thường, trung bình một web chứa nhiều trang web HTML, ví dụ như: trang chủ, trang about, trang liên hệ, tất cả đều cần các trang HTML riêng.
Mỗi trang HTML chứa một bộ các tag (cũng được gọi là elements), bạn có thể xem như là việc xây dựng từng khối của một trang web. Nó tạo thành cấu trúc cây thư mục bao gồm section, paragraph, heading, và những khối nội dung khác.
1.4. Cấu trúc của HTML.
Một trang web HTML sẽ được chia thành nhiều phần tử HTML nhỏ hơn. Các phần tử của ngôn ngữ HTML phổ biến bao gồm: thẻ tiêu đề, thẻ văn bản, thẻ in đậm, thẻ in nghiêng,… và các phần tử này được quy định bởi một thẻ tag. Các thẻ HTML sẽ bao gồm 2 thành phần là thẻ mở và thẻ đóng. Chẳng hạn như cấu trúc của một thẻ đoạn văn bản <p> sẽ bao gồm:
<p>Nội dung</p>
<p> là thẻ mở và </p> là thẻ đóng. Các thẻ đóng sẽ được quy định bởi một dấu “/”. Phần nội dung sẽ nằm giữa 2 thẻ này. Ngoài ra, có nhiều thẻ chỉ có thẻ mở mà không có thẻ đóng như <br>, <hr>, <img>,… Hiện nay, HTML đã có phiên bản mới nhất là HTML5 với nhiều tính năng đa dạng. Bạn hãy cập nhập thêm về phiên bản mới này đễ các thao tác được thực hiện dễ dàng hơn nhé.
Ngoài ra, trong các thẻ còn có các thuộc tính, thuộc tính sẽ đặt bên trong thẻ mở đầu, mỗi thuộc tính sẽ có giá trị được đặt trong dấu ngoặc kép và cách nhau bởi dấu bằng (=) với tên thuộc tính. Ví dụ dưới đây là một thẻ có sử dụng thuộc tính.
VD: [html]<p>Đây là một đoạn văn bản trong HTML.</p>[/html]
[html]<form action=”https://antoandulieu.com”> </form>[/html]
Một thẻ có thể sử dụng nhiều thuộc tính chứ không phải chỉ một thuộc tính nhé.
Bên dưới, bạn có thể xem code ví dụ của một trang HTML được cấu trúc như thế nào:
VD:
<div>
<h1>The Main Heading</h1>
<h2>A catchy subheading</h2>
<p>Paragraph one</p>
<img src=”/” alt=”Image”>
<p>Paragraph two with a <a href=”https://example.com”>hyperlink</a></p>
</div>
- Element ngoài cùng là bộ tag division (), dùng để mark up cho phần nội dung lớn.
- Nó bao gồm một tag tiêu đề (), một tag subheading (), 2 văn bản (), và một bước hình ().
- Đoạn văn thứ 2 chứa tag chứa link () với attribute href chứa địa chỉ URL đích.
- Tag hình ảnh cũng có 2 attribute: src cho ảnh, và alt cho mô tả của hình.
2. Các thẻ phổ biến trong HTML
Ngôn ngữ HTML được chia thành nhiều yếu tố khác nhau. Mỗi yếu tố này được định dạng bằng một thẻ tag. Các thẻ này sẽ được chứa trong dấu ngoặc đơn với cấu trúc <tên thẻ>. Một số thẻ sẽ có thẻ đóng và một số thẻ sẽ không có. Ví dụ như thẻ <html> sẽ phải đi kèm với thẻ </html>, thẻ <body> phải đi với </body>. Một số thẻ quan trọng mà bạn hay gặp trong HTML như sau:
- <!DOCTYPE>: Đây là thẻ khai báo đầu tiên của một tệp HTML. Khi sử dụng thẻ này, trình duyệt web sẽ biết đây là một file HTML và hiển thị cho phù hợp.
- <html>: Đây là thẻ bắt đầu cho tệp HTML. Cặp thẻ này sẽ bao bọc tài đoạn code HTML cho website của bạn. Bên trong thẻ <html> là các cặp thẻ <head> và <body>.
- <head>: Cặp thẻ head sẽ chứa các thẻ cặp thẻ nhỏ giúp khai báo thông tin website. Các cặp thẻ khai báo có thể gồm: <title>, <meta>, <link>,…
- <title>: Thẻ <title> nằm trong cặp thẻ <head>. Đây là thẻ khai báo tiêu đề cho trang web (dòng chữ hiển thị lên tab của trình duyệt web).
- <body>: Đây là cặp thẻ khai báo mở đầu cho nội dung của website. Phần hiển thị chính của website sẽ được xây dựng ở trong cặp thẻ <body>. Các thẻ phổ biến trong thẻ <body> bao gồm <h1>, <div>, <p>,…
3. Vai trò của HTML
Vai trò của ngôn ngữ HTML đối với website là vô cùng quan trọng. HTML giúp định dạng các yếu tố siêu văn bản bao gồm ảnh, video, infographic và nhiều một vài thành phần khác. Các siêu văn bản này sẽ giúp tạo nên một website đa dạng và phong phú, tối ưu trải nghiệm cho người dùng.
Hơn nữa, ngôn ngữ HTML giúp chia khung sườn, tạo nên bố cục của trang web. Nếu bạn muốn xây dựng được một trang web có cấu trúc hoàn chỉnh. Nhất định bạn phải làm chủ được HTML. HTML chứa hầu hết mọi yếu tố cần thiết mà website cần có. Từ các blog cá nhân đến trang thương mại điện tử, HTML đều có thể áp dụng được. Chỉ cần website có nội dung thì phải cần đến HTML để hiển thị.
4. Ưu điểm và nhược điểm của HTML là gì?
Ưu điểm của HTML là gì?
- Ngôn ngữ được sử dụng rộng lớn này có rất nhiều nguồn tài nguyên hỗ trợ và cộng đồng sử dụng cực lớn.
- Sử dụng mượt mà trên hầu hết mọi trình duyệt.
- Có quá trình học đơn giản và trực tiếp.
- Chuẩn chính của web được vận hành bởi World Wide Web Consortium (W3C).
- Dễ dàng tích hợp với các ngôn ngữ backend như PHP và Node.js.
- Mã nguồn mở và hoàn toàn miễn phí.
- Markup gọn gàng và đồng nhất.
Nhược điểm của HTML là gì?
- Nó có thể thực thi một số logic nhất định cho người dùng. Vì
- Khó kiểm soát cảnh thực thi của trình duyệt (ví dụ: những trình duyệt cũ không render được tag mới).
- Được dùng chủ yếu cho web tĩnh. Đối với các tính năng động, bạn cần sử dụng JavaScript hoặc ngôn ngữ backend bên thứ 3 như PHP.
- vậy, hầu hết các trang đều cần được tạo riêng biệt, kể cả khi nó sử dụng cùng các yếu tố, như là headers hay footers.
- Một số trình duyệt chậm hỗ trợ tính năng mới.
Ngôn ngữ HTML là công cụ không thể thiếu giúp bạn xây dựng nên một website hoàn chỉnh. Đây sẽ là kiến thức đầu tiên mà bạn phải học nếu bạn theo đuổi lập trình web. HTML sẽ không quá khó để học, tuy nhiên để thực sự nắm rõ bạn cần phải thực hành rất nhiều