Hotline : 07 088 44444
Thích
Chia sẻ

HTML là gì? Cấu trúc và các tags HTML được sử dụng phổ biến

19/02/2021

Những người mới bắt đầu với lập trình thì HTML là ngôn ngữ cơ bản và dễ học mà bạn cần phải biết và phải thành thạo với nó. Vậy, HTML là gì? Tất cả sẽ được Vietnix chia sẻ chi tiết và cụ thể cho bạn ở dưới đây. Xem ngay nhé.

HTML là gì?

HTML (Hypertext Markup Language) hay là ngôn ngữ đánh dấu siêu văn bản là một ngữ ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web. Có sự hỗ trợ bởi CSSJavaScript.

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.

html là gì
HTML là ngôn ngữ đẻ đánh dấu siêu văn bản

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, 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. Ví dụ <p>Xin chào các bạn đến với Vietnix </p>

Lịch sử của HTML

HTML được tạo ra bởi Tim Berners-Lee là nhà vật lý học cảu trung tâm nghiên cứu CERN ở Thụy Sĩ. Ông đã nghĩ ra và viết siêu văn bản và hypertext trên Internet. Hypertext được hiểu là văn bản chứa links, có thể giúp người xem truy cập ngay lập tức.

Mô tả HTML đầu tiên được công khai là một tài liệu có tên “HTML Tags” được đề cập trên Internet vào cuối năm 1991. Gồm 18 phần tử đơn giản của HTML và các phiên bản sau của HTML đều có thêm tag và attributes mới.

lịch sử của html
Lịch sử của HTML

Sự phát triển hơn nữa dưới sự bảo trợ của IETF đã bị đình trệ bởi các lợi ích cạnh tranh. Từ năm 1996, các đặc tả HTML được duy trì với đầu vào là các nhà cung cấp phần mềm thương mại bởi World Wide Web Consortium.

Năm 2000, HTML trở thành tiêu chuẩn quốc tế, sau đó đến năm 2004 HTML5 trong Web Hypertext Application Technology Working Group và được hoàn thiện vào năm 2014. Nó có thêm tags vào markup để xác định rõ nội dung là gì ví dụ như <article>, <header>, <footer>.

YearVersion
1989Tim Berners-Lee invented www
1991Tim Berners-Lee invented HTML
1993Dave Raggett drafted HTML+
1995HTML Working Group defined HTML 2.0
1997W3C Recommendation: HTML 3.2
1999W3C Recommendation: HTML 4.01
2000W3C Recommendation: XHTML 1.0
2008WHATWG HTML5 First Public Draft
2012WHATWG HTML5 Living Standard
2014W3C Recommendation: HTML5
2016W3C Candidate Recommendation: HTML 5.1
2017W3C Recommendation: HTML5.1 2nd Edition
2017W3C Recommendation: HTML5.2

Cách hoạt động của HTML

HTML documents là files được kết thúc .html hay .htm. Với những file này bạn có thể xem bằng cách sử dụng bất kỳ trình duyệt nào (Google Chrome, Firefox, Safari,…). Các trình duyệt đọc những file HTML này và biến đổi chúng thành một dạng visual trên Internet sao cho người dùng có thể xem và hiểu được chúng.

hoạt động của html
Hoạt động của HTML

Bình thương một trang web có nhiều có web HTML như: trang chủ, giới thiệu, liên hệ, blog,…mỗi trang như thế đều cần một trang HTML riêng. Trong mỗi trang HTML chứa một bộ các tag (elements) để xác định từng khối của một trang web và tạo thành một cấu trúc gồm section, paragraph, heading và các khối nội dung khác.

Đa phần các HTML elements đều có tag mở và tag đóng <tag></tag>. Bạn có thể xem qua một đoạn HTML được cấu trúc như thế nào:

<div>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Paragraph</p>
<img src="/" alt="Alternative information">
<p>Paragraph two with a <a href="https://example.com">hyperlink</a></p>
</div>

Trong đó:

  • Element được bao ở ngoài là bộ tag division <div></div> dùng để markup cho toàn bộ nội dung.
  • Tiếp theo là các thẻ tag tiêu đề <h1></h1>, <h2></h2>, <h3></h3>.
  • Đoạn văn <p></p>.
  • Hình ảnh <img>.
  • Đoạn văn thứ 2 chứa tag <a></a> với attribute href chứa URL đích.
  • Tag hình ảnh chứa 2 attribute: src cho ảnh và alt cho mô tả hình ảnh.

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

Ưu điểm HTML

HTML có một số ưu điểm dưới đây:

  • Cộng đồng với nhiều tài nguyên lớn.
  • Hoạt động mượt mà trên tất cả các trình duyệt.
  • Các markup sử dụng trong HTML ngắn gọn và có độ đồng nhất cao.
  • Sử dụng mã nguồn mở và miễn phí.
  • Tích hợp dễ dàng với các ngôn ngữ backend (PHP, Node.js,..).

Nhược điểm HTML

Nói đển ưu điểm thì không thể bỏ qua các nhược điểm của HTML, cụ thể một số nhược điểm HTML dưới đây:

  • Chủ yếu được áp dụng cho web tĩnh, nếu muốn tạo tính năng động thì các lập trình viên cần sử dụng thêm JavaScript hoặc ngôn ngữ backend khác.
  • Mỗi trang HTMK cần được tạo riêng biệt ngau có khi có nhiều yếu tố trùng lặp như header và footer.
  • Khó để kiểm soát cách đọc và hiển thị file HTML của trình duyệt (một số trình duyệt cũ không render được tag mới. Vì vậy, dù trong HTML document có sử dụng các tag thì các browser đó không đọc được).
  • Một số trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML.

Tag thông dụng trong HTML

HTML tags có 2 loại chính đó là: block-level inline tags. Cùng tìm hiểu 2 loại tags trong HTML là gì và cụ thể ở dưới đây.

Block-level Tags

Element Block-level sẽ sử dụng cho toàn bộ không gian web và luôn bắt đầu ở dòng mới của trang web. Các thẻ Headings và paragraph là những ví dụ trong block tags.

Trong Block-level tags của mỗi trang HTML sẽ bao gồm các thẻ: <html>, <head> và <body>. Trong đó:

  • <html></html> là element cao nhất dùng để đóng gói mỗi trang web HTML.
  • <head></head> trong thẻ tag này sẽ thường chứa thông tin meta như title page và charset.
  • <body></body> dùng để đóng gói tất cả nội dung sẽ hiện trên trang.
<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>

Ngoài ra, một trang HTML sẽ có các thẻ Heading 1 đến Heading 6 hay <h1></h1> đến <h6></h6>. Trong đó h1 là cấp độ cao nhất, còn h6 là cấp độ thấp nhất. Các văn bản được đặt trong đoạn văn thẻ <p></p>, quotes thì được đặt trong <blockquote></blockquote>.

Tags <div></div> sử dụng để chứa các paragraph, images, blockquotes và các yếu tố khác. Các tags div này cũng có thể chứa các tag khác bên trong nó.

Sử dụng tag <ul></ul> cho các danh sách không theo thứ tự. Và <ol><ol> cho các danh sách theo thứ tự, nhưng trong các danh sách đó sẽ được đặt trong thẻ tag <li></li>. Bạn có thể hình dung rõ hơn với ví dụ dưới đây:

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Inlines Tags

Inlines Tags là một phần nhỏ trong không gian web và không bắt đầu dòng mới ở mỗi trang web. Thường được dùng để định dạng nội dung bên trong của block-level. Links và những tags nhấn mạnh là những inlines tags phổ biến.

Với nhiều inlines tags dùng để định dạng văn bản như <strong></strong> dùng để in đậm chữ, in nghiên cho văn bản đó sẽ sử dụng <em></em>. Khi sử dụng hyperlinks cần sử dụng tag <a></a> và attributes href để xác định link cụ thể với ví dụ ở đây:

<a href="https://vietnix.vn">Xem ngay</a>

Bên cạnh đó, hình ảnh cũng là một inline, bạn có thể thêm ảnh bằng cách sử dụng tag <img> mà không cần tag đóng </img>. Nhưng cần attributes để xác định nguồn ảnh. Ví dụ:

<img src="/images/example.jpg" alt="Example image">

Trong đó:

  • Hình ảnh sẽ được đặt trong thẻ <img>.
  • Attributes src để xác định nguồn ảnh được tải lên từ đường dẫn nào?.
  • alt: Alternative information là thông tin thay thể có hình ảnh, khi trang web không hiện hình ảnh thì nội dung trong alt sẽ mô tả hình ảnh đó. Và đây cũng là một yếu đó trong việc thực hiện SEO.

Phần tử HTML là gì?

Một phần tử HTML là gì? Nó được xác định bởi thẻ bắt đầu, một số nội dung và thẻ kết thúc:

<tagname> Nội dung ở đây ... </tagname>

Phần tử HTML là tất cả mọi thứ từ thẻ bắt đầu đến thẻ kết thúc:

<h1> Tiêu đề đầu tiên của tôi </ h1>
<p> Đoạn đầu tiên của tôi. </p>
Start tagElement contentEnd tag
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<br>nonenone

Lưu ý: Một số phần tử HTML không có nội dung (như phần tử <br>). Các yếu tố này được gọi là các yếu tố trống. Các yếu tố trống không có thẻ kết thúc!

Xem thêm: 5 bước để tạo menu ngang trong HTML và CSS đơn giản

Cấu trúc trang HTML là gì?

Dưới đây là một hình ảnh trực quan của cấu trúc trang HTML:

<html>
<head>
<title> Tiêu đề trang </ title>
</head>
<body>
<h1> Đây là một tiêu đề </ h1>
<p> Đây là một đoạn văn. </ p>
</ body>
</ html>

Lưu ý: Chỉ nội dung bên trong phần <body> (vùng màu trắng ở trên) mới được hiển thị trong trình duyệt.  Nội dung bên trong phần tử <title> sẽ được hiển thị trên thanh tiêu đề của trình duyệt hoặc trong tab của trang.

Sự khác biệt giữa HTML và HTML 5

Sự khác biệt giữa HTML và phiên bản HTML5
Sự khác biệt giữa HTML và phiên bản HTML5

HTML5 được gọi chung là HTML, đây là phiên bản mới nhất của HTML được phát hành năm 2014. So với HTML thì HTML 5 được bổ sung nhiều tính năng quan trọng và cụ thể như:

  • Có khả năng hỗ trợ video và audio: Giúp cho các lập trình viên có thể nhúng trực tiếp các file video hay audio vào website HTML bằng tag <audio></audio> hay <video></video>.
  • Hỗ trợ scalable vector graphic (SVG) và MathML dễ dàng khi chèn các công thức hóa học và phương trình hóa học.
  • Và có nhiều tag mới giúp người dùng hiểu hơn về bố cục và nội dung webiste như các thẻ: <article></article>, <section></section>, <aside></aside>, <header></header>, <footer></footer>.
  • Ngoài ra, hỗ trợ nhiều loại kiểu form: ngày/giờ, email, số điện thoại,…
  • Một số tag trong HTML đã được gỡ bỏ trong HTML5 như: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike,…

Tham khảo thêm: HTML5 là gì? Mọi thứ cần biết về HTML5

HTML có phải là ngôn ngữ lập trình không?

Câu trả lời là: HTML không phải là ngôn ngữ lập trình, tuy nó được cấu tạo nên những thành phần của website nhưng không có chức năng “động” cho website. Thao tác thực hiện HTML rất đơn giản khi bạn hiểu rõ HTML là gì? Và thành thạo với các tags và attributes cơ bản. Ngoài ra, cũng cần biết thêm một số tags nâng cao để lập trình web HTML được đầy đủ và chuẩn hơn.

HTML, CSS và JavaScript liên quan như thế nào?

HTML được xem là nền tảng cơ bản và quan trọng trong quá trình xây dựng website nhưng vẫn chưa để để tạo nên một trang web đẹp và chuyên nghiệp. HTML thường sử dụng để thêm các elements để hình thành bố cục, cấu trúc và nôi dung của website. Sau đó, các lập trình viên kết hợp với 2 ngôn ngữ frontendCSS JavaScript để tạo một website hoàn chỉnh.

Sự kết hợp giữa HTML, CSS và JavaScript trong quá trình xây dựng website
Sự kết hợp giữa HTML, CSS và JavaScript trong quá trình xây dựng website

Khi thực hiện sự kết hợp giữa HTML, CSS và JavaScript sẽ giúp cho website tăng trải nghiệm người dùng lên đáng kể với một số chức năng cơ bản như:

  • CSS đóng vai trò trong quá trình thiết lập màu sắc, background, hiệu ứng, nói chung về mặt thiết kế uyển chuyển, linh động phù hợp với ý tưởng của website.
  • Còn JavaScript có vai trò tạo ra các chức năng “động”: như thư viện hình ảnh, slider, pop-up,…

Các phần mềm lập trình HTML phổ biến

Sublime Text

Phần mềm lập trình Sublime Text
Phần mềm lập trình Sublime Text

Sublime Text là phần mềm được phát triển năm 2008 và được viết bằng ngôn ngữ Python và C++. Là phần mềm giúp các lập trình viên tiết kiệm được thời gian với các plugin được tích hợp sẵn. Phiên bản mới nhất của Sublime Text là Sublime Text 4. Bạn có thể download Sublime Text 4 ngay dưới đây.

PHP Designer

Phần mềm lập trình PHP Designer
Phần mềm lập trình PHP Designer

PHP Designer là phần mềm của tác giả Michael Pham phát triển năm 1998. Hiện nay, phần mềm này được sửu dụng phổ biến trên 200 quốc gia trên thế giới và trở thành công cụ đắc lực của các lập trình viên. PHP Designer không chỉ hỗ trợ viết code mà còn hỗ trợ thiết kế web PHP. Với giao diện khá đơn giản, dễ sử dụng và PHP hỗ trợ đã ngôn ngữ.

Dreamweaver

Phần mềm lập trình Dreamweaver
Phần mềm lập trình Dreamweaver

Dreamweaver là phần mềm được sử dụng hầu hết ở các trường học để giảng day cho sinh viên trong môn lập trình. Phần mềm có đầy đủ các tính năng cần thiết để lập trình viên viết code phần mềm mềm hoặc ứng dụng. Với khá nhiều tiện ích với thao tác dễ dàng di chuyển, kéo thả. Tương thích với nhiều ngôn ngữ khác nhau: PHP, ASP.NET,….

Notepad ++

Phần mềm lập trình Notepad ++
Phần mềm lập trình Notepad ++

Notepad ++ với môi trường nhỏ gon, với nhiều tiện ích giúp tối ưu hóa quá trình xây dựng website hay phần mềm. Notepad ++ có thể hỗ trợ các ngôn ngữ như: C++, Java, C#, XML,…

Tài liệu HTML đơn giản

Ví dụ HTML

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

Giải thích ví dụ trên

  • Khai báo  <!DOCTYPE html> 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 trang HTML.
  • <head>chứa thông tin meta về trang HTML.
  • <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).
  • <body>xác định phần thân của tài liệu và là vùng  chứa cho tất cả cá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.

Nếu bạn làm lập trình viên thì cũng đừng quên MVC là gì? Bạn cần biết nó để sử có thể áp dụng mô hình này trong quá trình thực hiện các dự án lớn. Hỗ trợ rất nhiều trong công việc của bạn.

Lời kết

Từ những thông tin trên hy vọng sẽ đem lại cho bạn một cái nhìn mới mẻ hơn về HTML là gì và có thể sớm tạo cho mình được một trang web hoàn chỉnh. Mong bài viết này sẽ giúp bạn hiểu rõ về HTML và một số thao tác cơ bản. Chúc các bạn thành công.

https://vietnix.business.site/

Vietnix tổng hợp

Nếu bạn có thắc mắc hay có vấn đề cần hỗ trợ, bạn có thể liên hệ trực tiếp với Vietnix thông qua các kênh sau:
  • Hotline: 1800 1093 - 07 088 44444
  • Email: support@vietnix.vn
  • Hoặc chat trực tiếp với Vietnix thông qua biểu tượng Livechat ở góc phải màn hình. Đội ngũ chuyên viên của chúng tôi luôn sẵn sàng tư vấn và hỗ trợ bạn 24/7.
Vietnix hiện đang có chương trình khuyến mãi lớn nhất trong năm, giảm giá TRỌN ĐỜI: Đăng ký dùng thử ngay và Vietnix sẽ hoàn tiền 100% nếu quý khách không hài lòng với chất lượng sản phẩm, dịch vụ!
Mình là Bo - admin của Quản Trị Linux. Mình đã có 10 năm làm việc trong mảng System, Network, Security và đã trải nghiệm qua các chứng chỉ như CCNP, CISSP, CISA, đặc biệt là chống tấn công DDoS. Gần đây mình trải nghiệm thêm Digital Marketing và đã hòan thành chứng chỉ CDMP của PersonVUE. Mình rất thích được chia sẻ và hỗ trợ cho mọi người, nhất là các bạn sinh viên. Hãy kết nối với mình nhé!
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments