Articles
Giới thiệu về HTML
Kiến thức cơ bản về HTML

Kiến thức cơ bản về HTML

Trong bài viết này, chúng tôi sẽ giải thích những kiến thức cơ bản về HTML.

Điều này giải thích các thẻ chính như khai báo DOCTYPE, thẻ <html>, <head> và <body>. Nó cũng mô tả các thẻ, thuộc tính và ký tự đặc biệt.

YouTube Video

Kiến thức cơ bản về HTML 

 1<!DOCTYPE html>
 2<html lang="en">
 3    <head>
 4        <meta charset="UTF-8">
 5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6        <title>Basics of HTML</title>
 7    </head>
 8    <body>
 9        <!-- Main content wrapped in the main tag -->
10        <main>
11            <!-- Main heading -->
12            <h1>What is HTML?</h1>
13            <!-- Example of a paragraph -->
14            <p>HTML is the language used to create the basic structure of web pages.</p>
15        </main>
16    </body>
17</html>

  • <!DOCTYPE html>

    Ở đầu tệp, chúng tôi tuyên bố rằng đây là một tài liệu HTML5, chỉ ra rằng nó tuân theo các quy tắc của HTML5.

  • <html>

    Thẻ <html> là phần tử ngoài cùng trong một tài liệu HTML bao bọc toàn bộ nội dung. Mỗi tệp HTML chỉ chứa một thẻ <html>, và tất cả các thẻ khác được lồng bên trong thẻ này. Thuộc tính lang="en" bên trong thẻ <html> mở đầu được gọi là một thuộc tính và thông báo cho trình duyệt rằng tài liệu được viết bằng tiếng Anh. Điều này giúp thông báo cho các trình đọc màn hình và công cụ tìm kiếm về ngôn ngữ của tài liệu.

  • <head>

    Thẻ <head> định nghĩa siêu dữ liệu (thông tin) cho trang. Điều này bao gồm tiêu đề trang, mã hóa ký tự, và các cài đặt thiết kế đáp ứng. Thiết kế đáp ứng đề cập đến một phương pháp được thiết kế để các trang web hoặc ứng dụng có thể thích ứng và hiển thị tốt trên các thiết bị và kích thước màn hình khác nhau. Điều này cho phép người dùng dễ dàng xem nội dung trên các thiết bị khác nhau như điện thoại thông minh, máy tính bảng và máy tính để bàn.

    <meta charset="UTF-8"> thiết lập mã hóa ký tự của tài liệu thành UTF-8.

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> là cài đặt tối ưu hóa hiển thị cho các thiết bị di động. Trang điều chỉnh theo độ rộng của màn hình thiết bị.

    <title> đại diện cho tiêu đề của trang được hiển thị trên tab trình duyệt. Trong ví dụ này, tiêu đề 'Cơ bản về HTML' được đặt.

  • <body>

    Thẻ <body> chứa phần hiển thị nội dung cho người dùng. Trong thẻ này, văn bản, hình ảnh, liên kết, v.v. được viết.

  • <main>

    Thẻ <main> biểu thị nội dung chính của trang. Điều này bao gồm tiêu đề và đoạn văn.

  • <h1>

    Thẻ <h1> biểu thị tiêu đề quan trọng nhất trên trang. Thông thường chỉ sử dụng thẻ <main> và <h1> một lần trong một tài liệu.

  • <p>

    Thẻ <p> biểu thị một đoạn văn.

  • <!-- Comment -->

    Bạn có thể viết nhận xét trong HTML theo định dạng này. Vì HTML phía khách hàng có thể được xem bởi bất kỳ ai, không nên bao gồm thông tin nhạy cảm như mật khẩu hoặc khóa API trong nhận xét.

HTML có nhiều thẻ, nhưng chú ý đến các điểm sau đây. Một tệp HTML bao gồm khai báo DOCTYPE và một thẻ <html>. Thẻ <html> chứa một thẻ <head> và một thẻ <body>. Trong HTML, tất cả các thẻ đều được chứa trong thẻ <html>, biểu diễn cấu trúc của văn bản thông qua các mối quan hệ cha, con và anh chị em, tương tự như một cấu trúc cây. Khi viết HTML, cũng tập trung vào cấu trúc tài liệu.

Thẻ và Thuộc tính

Tiếp theo, chúng ta hãy xem qua các thẻ và thuộc tính HTML.

 1<!-- Opening tag and closing tag -->
 2<div>Content</div>
 3
 4<!-- Self-closing tag -->
 5<br>
 6
 7<!-- Nested tag -->
 8<div>
 9    <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14    <div>Nested Content</div>
15</div>
16
17<!-- Tag     : <div> -->
18<!-- Element : <div>Content</div> -->

Thẻ được bao quanh bởi dấu ngoặc nhọn (<, >) và thường gồm một cặp thẻ mở và thẻ đóng. Tuy nhiên, cũng có các thẻ đơn, chẳng hạn như thẻ <meta> và thẻ <img>, không chứa nội dung. Thẻ đơn không yêu cầu có thẻ đóng.

Thẻ có thể có thuộc tính, cung cấp thông tin bổ sung cho thẻ. Thuộc tính được viết trong thẻ mở theo định dạng tênThuộcTính="giá trị".

Ở đây, <div> được gọi là thẻ, và <div>Content</div> được gọi là phần tử.

1<div id="header">
2    <ul class="menu">
3        <li>Home</li>
4        <li style="display: hidden;">Unvisible Menu Item</li>
5    </ul>
6</div>

Các thuộc tính phổ biến trong HTML bao gồm id, class và style. Thuộc tính id được sử dụng để gán một định danh duy nhất cho một phần tử, và chỉ có thể có một phần tử với cùng một id trên một trang. Nó hữu ích khi thao tác các phần tử cụ thể với JavaScript hoặc CSS. Thuộc tính class cho phép bạn nhóm nhiều phần tử với CSS hoặc JavaScript bằng cách gán tên lớp. Bạn có thể gán cùng một lớp cho nhiều phần tử, cho phép chia sẻ các kiểu định dạng. Thuộc tính style chỉ định các kiểu CSS nội tuyến cho một phần tử. Thông thường, các kiểu định dạng được định nghĩa trong một tệp stylesheet bên ngoài hoặc trong thẻ <style>, nhưng thuộc tính này được sử dụng khi bạn muốn chỉ định các kiểu định dạng trực tiếp cho các phần tử riêng lẻ.

Các ký tự đặc biệt trong HTML

Tiếp theo, hãy tìm hiểu các ký tự đặc biệt trong HTML.

Trong HTML, có các ký tự đặc biệt được sử dụng để hiển thị các biểu tượng và ký tự cụ thể. Các ký tự đặc biệt này được gọi là thực thể. Các ký tự đặc biệt bắt đầu với & (dấu và), theo sau là một tên hoặc số, và kết thúc với ; (dấu chấm phẩy).

Các ký tự đặc biệt tiêu biểu trong HTML

Dưới đây là một số ký tự đặc biệt phổ biến.

Display Entity Name Entity Number Description
& &amp; &#38; Ampersand (&)
< &lt; &#60; Less-than sign (<)
> &gt; &#62; Greater-than sign (>)
" &quot; &#34; Double quotation mark (")
' &apos; &#39; Apostrophe (')
© &copy; &#169; Copyright symbol (©)
€ &euro; &#8364; Euro symbol (€)
¥ &yen; &#165; Japanese Yen symbol (¥)
¢ &cent; &#162; Cent symbol (¢)
£ &pound; &#163; Pound symbol (£)
  &nbsp; &#160; Non-breaking space (space)

Các ví dụ về việc sử dụng ký tự đặc biệt trong HTML

Đặc biệt, dấu ngoặc nhọn (<, >) và dấu ngoặc kép cần được sử dụng đúng cách trong HTML.

Dấu ngoặc nhọn (<, >) và dấu ngoặc kép cần được biểu diễn dưới dạng ký tự đặc biệt trong HTML, như hình dưới đây.

 1<!DOCTYPE html>
 2<html lang="en">
 3    <head>
 4        <meta charset="UTF-8">
 5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6        <title>Basics of HTML</title>
 7    </head>
 8    <body>
 9        <!-- Main content wrapped in the main tag -->
10        <main>
11            <!-- Main heading -->
12            <h1>What is HTML?</h1>
13            <!-- Example of a paragraph -->
14            <p>
15                HTML is the language used to create the basic structure of web pages.<br>
16                It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17            </p>
18            <hr>
19            <h2>Basic Elements of HTML</h2>
20            <div>
21                HTML elements are used to organize and display content on a web page.
22                They include tags for text, images, links, and more.
23            </div>
24            <hr>
25            <ul>
26                <li>Headings (e.g., &lt;h1&gt;, &lt;h2&gt;)</li>
27                <li>Paragraphs (&lt;p&gt;)</li>
28                <li>Links (&lt;a&gt;)</li>
29                <li>Lists (&lt;ul&gt;, &lt;ol&gt;)</li>
30                <li>Images (&lt;img&gt;)</li>
31            </ul>
32            <hr>
33-            <h3>About '<h1>' tag and '<h2>' tag</h3>
34+            <h3>About '&lt;h1&gt;' tag and '&lt;h2&gt;' tag</h3>
35            <img src="image.png"
36-                alt="This is an example of "image"">
37+                alt="This is an example of &quot;image&quot;">
38        </main>
39    </body>
40</html>

Các phiên bản HTML

Chúng ta hãy xem xét các phiên bản HTML tại đây.

Các phiên bản HTML đã phát triển để định nghĩa cấu trúc và chức năng của các trang web. Dưới đây là các phiên bản chính:.

  1. HTML 1.0 (1993)

    Phiên bản HTML đầu tiên chỉ có các tính năng đánh dấu rất cơ bản. Nó định nghĩa các phần tử như liên kết, tiêu đề, đoạn văn và danh sách.

  2. HTML 2.0 (1995)

    Phiên bản chuẩn hóa đầu tiên với nhiều phần tử được bổ sung, bao gồm hỗ trợ cho biểu mẫu và bảng.

  3. HTML 3.2 (1997)

    Các tính năng bố cục được bổ sung thêm, cho phép nhúng phần tử kiểu và kịch bản. Ngoài ra, bố cục sử dụng phần tử <table> trở nên phổ biến.

  4. HTML 4.01 (1999)

    Sự tách biệt giữa cấu trúc và trình bày đã tiến bộ, và CSS đã được giới thiệu. Việc tạo các trang web tuân thủ tiêu chuẩn đã trở thành được khuyến khích. Hơn nữa, khả năng quốc tế hóa và khả năng truy cập của tài liệu đã được cải thiện.

  5. HTML5 (2014)

    Phiên bản chính mới nhất, giới thiệu hỗ trợ cho video và audio, canvas, lưu trữ cục bộ, định vị địa lý và các API mới khác. Nó thân thiện với thiết bị di động, cho phép phát triển các ứng dụng web tương tác hơn.

HTML5.2 là một phiên bản của HTML được khuyến nghị vào năm 2017 và là một phiên bản cải tiến hơn của HTML5. Kể từ HTML5.2, nó được cập nhật liên tục như là Tiêu chuẩn HTML Sống, thay vì có một số phiên bản tĩnh.

HTML đã phát triển qua các phiên bản này, trở thành một công nghệ web linh hoạt và mạnh mẽ hơn.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

HTML ngữ nghĩa