HTML là gì? Các kiến thức cơ bản nhất về HTML phải biết

1748
22-12-2018
HTML là gì? Các kiến thức cơ bản nhất về HTML phải biết

Đối với những người lập trình thì ngôn ngữ HTML là một trong những ngôn ngữ đơn giản nhất cần nắm rõ. Có thể nói HTML là một ngôn ngữ dễ hiểu, dễ học, đây là một ngôn ngữ mà tất cả mọi người có thể học trước khi muốn xây dựng một Website. Cùng Bizfly Cloud tìm hiểu thêm thông tin về ngôn ngữ này qua bài viết dưới đây nhé. 

HTML là gì? 

HTML viết tắt cho Hypertext Markup Language, được sử dụng để tạo các tài liệu điện tử (hay còn gọi là page như web page) và các tài liệu này sẽ được hiển thị trên World Wide Web. Mỗi trang thường sẽ chứa một tập hợp kết nối đến các trang khác, các kết nối này được gọi là siêu liên kết. Mỗi trang web bạn thấy trên Internet sẽ sử dụng một phiên bản mã HTML này hoặc một phiên bản HTML khác.

Mã HTML sẽ đảm bảo định dạng chính xác của hình ảnh và văn bản sao cho trình duyệt Internet của bạn có thể hiển thị chúng theo đúng ý tưởng thiết kế và trình bày.

HTML là gì

Những thông tin cần biết về HTLM

Không có HTML, trình duyệt sẽ không biết phải hiển thị văn bản dưới dạng phần tử như thế nào hay tải hình ảnh hoặc các phần tử khác ra sao. HTML cũng cung cấp một cấu trúc trang cơ bản, các Cascading Style Sheets (CSS) sẽ được xếp ở lớp trên để thay đổi các hiển thị. HTML có thể được mô tả như xương sườn (cấu trúc) và CSS như lớp da (giao diện) của một trang web.

>>Đọc thêm: Đừng quên tối ưu hóa CSS và JS để cải thiện tốc độ tải trang!

Lịch sử phát triển của HTML

HTML được tạo ra bởi nhà vật lý học Tim Berners-Lee ở Thụy Sĩ. Hiện nay ngôn ngữ này đã được tổ chức W3C vận hành và phát triển. Bạn có thể dễ dàng tìm kiếm trạng thái mới của HTML ở trên trang web của W3C. 

Phiên bản đầu tiên của HTML được xuất bản vào năm 1991, bao gồm 18 tag HTML. Năm 1999 phiên bản mới HTML 4.01 được xuất bản, sau đó năm 2000 các nhà phát triển đã thay đổi ngôn ngữ HTML bằng XHTML. 

Cho đến năm 2014 HTML đã được nâng cấp lên thành HTML5 với nhiều tag được thêm vào markup và mục để để xác định rõ nội dung thuộc loại gì. 

Hoạt động của HTML

HTML document có đôi dạng files và kết thúc bằng đuôi .html hay .htm. Bạn có thể xem được dễ dàng ở bất kỳ trình duyệt nào (như Google Chrome, Firefox, Safari,…) Tác dụng của những trình duyệt này là xuất bản nội dung lên internet giúp người đọc có thể xem và hiểu được nó. 

Thông thường một trang chủ của Website sẽ chứa nhiều HTML document như: Trang chủ, trang liên hệ, trang about hoặc tất cả những trang cần có HTML riêng. 

Mỗi trang HTML có chứa một bộ tag riêng, nó tạo thành một thư mục cây bao gồm section, paragraph, heading cùng những nội dung khác. Hầu hết các HTML element đều bao gồm một thẻ tag mở và một thẻ tag đóng với cấu trúc <tag></tag>. 

Cấu trúc thẻ HTML

HTML là gì? Các kiến thức cơ bản nhất về HTML phải biết - Ảnh 1.

Trong ví dụ về thẻ HTML ở trên, chúng ta có thẻ thấy 1 thẻ HTML không có nhiều thành phần. Hầu như tất cả các thẻ HTML đều có thẻ mở chứa tên kèm theo thuộc tính, thẻ đóng có dấu gạch nghiêng bên phải ''/" và tên của thẻ đóng đó. Đối với các thẻ không có dấu đóng như <img>, cách tốt nhất là kết thúc thẻ bằng dấu gạch nghiêng bên phải. Mỗi thẻ sẽ nằm bên trong và cả bên ngoài dấu ngoặc góc và các nội dung giữa thẻ mở và đóng sẽ được hiển thị hoặc bị tác động bởi thẻ.

Trong ví dụ trên, thẻ <a> đang tạo một liên kết có tên " Computer Hope" đang trỏ đến tệp Hope.html.

HTML cấu trúc như thế nào?

Sau đây là một ví dụ về một trang web cơ bản được viết bằng HTML cũng như mô tả từng phần và chức năng của nó.

<!DOCType HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

<html lang="en"><head>

<title>Example page</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

</head>

<body>

<h1>This is a heading</h1>

<p>This is an example of a basic HTML page.</p>

</body></html>

Phần lệnh trên chứa các thành phần chính cho một web page cơ bản. Dòng đầu tiên (DOCType) mô tả phiên bản HTML được dùng để viết, qua đó trình duyệt Internet có thể diễn giải được phần văn bản theo sau. Tiếp theo, thẻ mở HTML sẽ cho trình duyệt biết rằng nó đang đọc mã HTML.

Theo sau thẻ HTML là phần head (mở đầu) chứa các thông tin về trang như tiêu đề, thẻ meta và vị trí để xác định tệp CSS. Phần body (thân) là tất cả các nội dung có thể xem được trên trình duyệt. Cuối cùng, các thẻ đóng sẽ cho vào trong ngoặc đóng mỗi phần tử với cú pháp thích hợp.

Vai trò quan trọng của HTML

HTML được biết đến là loại ngôn ngữ siêu văn bản, giúp cấu trúc cơ bản của một Website, giúp trang Web trở thành một hệ thống hoàn chỉnh. Cụ thể ngôn ngữ này đánh dấu siêu văn bản, chia khung sườn các thành phần của trang web. Hỗ trợ khai báo file kỹ thuật số như nhạc, video, hình ảnh... 

Muốn một website có cấu trúc tốt, sử dụng nhiều yếu tố trong văn bản, bạn cần dùng đến HTML. Người lập trình có thể lựa chọn ngôn ngữ riêng cho website tùy theo mục đích sử dụng. Trang web của bạn cần phải sử dụng ngôn ngữ lập trình để hiển thị nội dung cho người truy cập. 

Ưu, nhược điểm của HTML

Ngôn ngữ HTML có khá nhiều ưu điểm, tuy nhiên cũng có những điểm hạn chế. Dưới đây là những ưu và nhược điểm của HTML:

Ưu điểm của HTML 

  • Có khá nhiều tài nguyên giúp hỗ trợ và được sử dụng rộng rãi
  • Dễ hiểu, đơn giản, học nhanh chóng
  • Hoàn toàn miễn phí với các mã nguồn mở
  • Các markup được sử dụng trong HTML thường ngắn gọn có tính đồng bộ cao
  • Dễ dàng tích hợp được các ngôn ngữ như PHP, Python...

Nhược điểm của HTML

  • Dùng chủ yếu cho các web tĩnh, trong trường hợp nếu dùng tính năng động cần phải dùng JavaScript hoặc ngôn ngữ backend bên thứ 3 như PHP.
  • Một vài trình duyệt còn chậm để có thể hỗ trợ tính năng mới của HTML
  • Khó kiểm soát được cách cách đọc và hiển thị file HTML của trình duyệt

HTML5 là gì?

HTML là gì? Các kiến thức cơ bản nhất về HTML phải biết - Ảnh 3.

HTML5 là phiên bản cập nhật của HTML từ HTML4 (XHTML tuân thủ theo một sơ đồ đánh số phiên bản khác). HTML5 sử dụng các quy tắc cơ bản như HTML4, nhưng được bổ sung thêm một số thẻ và thuộc tính mới hỗ trợ ngôn ngữ đặc tả tốt hơn và cũng hỗ trợ một số yếu tố động sử dụng JavaScript. Các thành phần mới bao gồm, <article>, <sid>, <audio>, <bdi>, <canvas>, <datalist>, <chi tiết>, <embed>, <hình>, <figcaption>, <footer>, < tittle>, <keygen>, <mark>, <meter>, <nav>, <output>, <process>, <rp>, <rt>, <ruby>, <time>, <track>, <video><wbr>.

Ngoài ra, còn có một số kiểu input mới cho các biểu mẫu, bao gồm tel, search, url, email, datetime, ngày, tháng, tuần, thời gian, datetime-local, số, phạm vi và màu.

Với một số cải tiến được thực hiện để phân tách cấu trúc và kiểu thành phẩn, một số yếu tố đã được loại bỏ hoặc sử dụng ít hơn trong HTML5.

Các yếu tố sau không còn được sử dụng trong mã HTML bao gồm: <acronym>, <applet>, <basefont>, <big>, <centre>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike><tt>. HTML5 cũng đơn giản hóa việc khai báo doctype như sau:.

<!doctype html>

Ví dụ điển hình về HTML5

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Example page</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is an example of a basic HTML page.</p>

</body>

</html>

Sự khác biệt HTML với HTML5

So với HTML thì HTML5 được bổ sung rất nhiều tính năng quan trọng. Cụ thể một số tính năng mới của HTML5 như: 

  • Khả năng hỗ trợ video và audio: Thay vì việc sử dụng Flash Player giúp phát video/audio. Với HTML5 lập trình có thể nhúng trực tiếp file video/audio vào trang web bằng cặp tag <audio></audio> hoặc dùng <video></video>.
  • Hỗ trợ cho scalable vector graphic (SVG) và MathML dành cho các công thức toán học và phương trình hóa học. 
  • Có thêm khá nhiều cải thiện ngôn ngữ: Chứa semantic tag khiến người dùng có thể hiểu được những nội dung chính của Website. 
  • Hỗ trợ nhiều loại form so với HTML: Email, ngày/giờ, số điện thoại, URL, tìm kiếm...
  • HTML không cho phép JavaScript chạy ở trong trình duyệt Web. Còn với HTML5 có thể hỗ trợ JavaScript chạy trong nền.

Các tag thông dụng nhất của HTML

HTML tag được sử dụng chủ yếu 2 loại chính: block-level tags và inline tags

 Block-level tags

Có thể nói đây là một tag cao cấp, chiếm toàn bộ không gian của trang Web và luôn bắt đầu dòng mới của một trang. 3 block-level tags mà hầu hết các trang HTML cần có: <html></html>, <head></head> và <body></body>.

inline tags

Loại tag này chiếm một phần khá nhỏ trong không gian của Website và không bắt đầu dòng mới của website. Dùng để tạo bố cục cho nội dung của Block-level tags. 

HTML bao gồm nhiều dạng inline tags như: <strong></strong> dùng để chữ in đậm, còn cặp tag <em></em> định dạng chữ nghiêng. 

Hy vọng với bài viết này có thể giúp bạn hiểu được những thông tin chi tiết về HTML. Đây là ngôn ngữ thấp nhất trong các lớp xử lý ở fontend, giúp đảm nhiệm phong cách cơ bản nhất cho website. 

Theo Computer Hope

Có thể bạn quạn tâm: 5 tính năng mới của HTML và CSS được mong đợi nhất trong năm 2018

Kể từ ngày 05/11/2018, VCCloud chính thức đổi tên thành Bizfly Cloud - là nhà cung cấp các dịch vụ đám mây hàng đầu tại Việt Nam hiện nay với các dịch vụ nổi bật như: Bizfly Cloud Server, Bizfly CDN, Bizfly Load Balancer, Bizfly Pre-built Application, Bizfly Business Mail, Bizfly Simple Storage. Hãy tăng tốc thích nghi cho doanh nghiệp cùng các giải pháp công nghệ của Bizfly Cloud tại đây.
TAGS: html
SHARE