Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh.

HTML (Hypertext Markup Language) là mã được dùng để xây dựng nên cấu trúc và nội dung của trang web. Ví dụ, nội dung có thể được cấu thành bởi một loạt các đoạn văn, một danh sách liệt kê, hoặc sử dụng những hình ảnh và bảng biểu. Như tiêu đề, bài viết này sẽ cho bạn những hiểu biết căn bản về HTML và chức năng của nó.

Vậy HTML là cái gì?

HTML không phải là một ngôn ngữ lập trình; nó là một ngôn ngữ đánh dấu (markup language) định hình cấu trúc nội dung của bạn. HTML bao gồm một loạt elements, thứ bạn dùng để đính kèm, hoặc gói các phần khác nhau của nội dung để làm cho chúng xuất hiện hay hoạt động với một cách nhất định. Các tags kèm theo có thể làm một từ hay hình ảnh siêu liên kết từ nơi khác, có thể in nghiêng, làm cho phông chữ lớn hơn hoặc nhỏ hơn...  Ví dụ, theo dõi dòng chữ bên dưới:

My cat is very grumpy

Nếu muốn một dòng văn bản, ta có thể chỉ định một đoạn văn bằng cách đặt nó trong các thẻ paragraph (thẻ p):

<p>My cat is very grumpy</p>

Cấu trúc của một thành phần HTML

Cùng tìm hiểu đoạn văn bản ở trên kỹ hơn.

Gồm những thành phần chính:

  1. The opening tag: Bao gồm tên của thành phần (trường hợp này là p), bao bởi cặp ngoặc góc mở và đóng. Bắt đầu thành phần, hay là bắt đầu có hiệu lực — trường hợp này là đầu đoạn văn.
  2. The closing tag: Cũng giống với The opening tag, ngoài ra nó còn có thêm dấu gạch chéo phía trước tên thành phẩn. Kết thúc thành phần — trường hợp này là cuối đoạn văn. Lỗi thiếu thẻ đóng khá là phổ biến đối với những người mới bắt đầu.
  3. The content: Nơi chứa nội dung, ở đây chỉ là văn bản.
  4. The element: Element bao gồm thẻ mở, thẻ đóng, và tất cả nội dung.

Các element có thể chứa các thuộc tính, như sau:

Attibute là thông tin bổ sung về thành phần mà bạn không muốn chúng hiển thị trong phần nội dung. Ở đây, classtên của một thuộc tính, và editor-notegiá trị của nó.  Thuộc tính class cho phép bạn tạo một định danh cho thành phần nào đó để có thể dùng cho thành phần với phong cách và nhiều thứ khác .

Một thuộc tính thường bao gồm:

  1. Khoảng trống giữa nó và tên thành phần (hoặc các thuộc tính phía trước nếu thành phần đã có một hay nhiều thuộc tính rồi).
  2. Tên thuộc tính, theo sau là dấu bằng.
  3. Ký hiệu đóng mở xung quanh giá trị của nó.        

Các thành phần lồng nhau

Bạn có thể đặt nhiều thành phần vào trong một thành phần khác—Đây gọi là nesting. Nếu chúng ta muôn tuyên bố rằng con mèo rất gắt, ta có thể cho từ "rất" trong thành phần <strong>, Có nghĩa là từ này sẽ được in đậm:

<p>My cat is <strong>very</strong> grumpy.</p>

Tuy vậy bạn cần phải đảm bảo các thành phần của bạn được lồng chặt chẽ: chẳng hạn như ví dụ phía trên, ta mở thành phần <p> ?trước, rồi đến thành phần <strong>, nên ta cần phải đóng thành phần <strong> trước, rồi mới tới  <p>. Ví dụ bên dưới là sai:

<p>My cat is <strong>very grumpy.</p></strong>

Các thành phần phải được đóng mở đúng thì mới chạy ổn định được. Nếu để chúng nạp chồng lên nhau như hình trên, trình duyệt sẽ cố đoán xem ý bạn là gì, như thế có thể trả ra những kết quả không mong muốn. Nên đừng bao giờ làm vậy!

Phần tử rỗng

Một số thành phần không có nội dung, và thường được gọi là phần tử rỗng. Như thành phần <img> mà chúng tôi thường dùng trong HTML của trang:

<img src="images/firefox-icon.png" alt="My test image">

Thành phần này chứa hai thuộc tính, nhưng không có thẻ đóng (</img>), và không chứa gì bên trong nó cả. Đấy là bởi vì thành phần image không chứa bất kì nội dung nào. Nó sinh ra chỉ để nhúng hình ảnh vào trong trang HTML.

Kết cấu của một trang HTML

Điều đó kết thúc các khái niệm cơ bản về các phần tử HTML riêng lẻ, nhưng chúng không hữu ích lắm. Bây giờ, chúng ta sẽ xem các yếu tố riêng lẻ được kết hợp như thế nào để tạo thành một trang HMTL hoàn chỉnh. Hãy xem lại mã ví dụ của chúng tôi đưa vào index.html (mà chúng ta gặp lần đầu trong bài viết Dealing with files):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

Chúng ta có:

  • <!DOCTYPE html> — loại tài liệu. Trong thời gian đó, khi mà HTML còn non nớt (khoảng 1991/2), các DOCTYPE nghĩa là hoạt động như một liên kết đến một bộ quy tắc mà trang HTML phải tuân thủ để được coi là HTML tốt, có nghĩa là kiểm tra lỗi tự động và những thứ hữu ích. Tuy nhiên, tại thời điểm này không ai thực sự quan tâm, và họ thực sự chỉ là một hiện vật lịch sử cần được đưa vào để mọi thứ làm việc đúng. Bây giờ, đó là tất cả những gì bạn cần.
  • <html></html> — thành phần <html>. Thành phần này bao bọc tất cả nội dung trên toàn bộ trang và đôi khi được gọi là phần tử gốc.
  • <head></head> — Thành phần <head>. Là nơi chứa tất cả những nội dung bạn muốn đưa vào trang HTML không phải nội dung bạn hiển thị cho người xem trang của bạn. Điều này bao gồm những thứ như keywords và mô tả trang mà bạn muốn xuất hiện trong kết quả tìm kiếm, CSS tạo kiểu cho nội dung, khai báo bộ ký tư và những thứ khác.
  • <meta charset="utf-8"> — thành phần này đặt tài liệu của bạn sử dụng ký tự ở định dạng UTF-8, hầu hết các ký tự phần lớn là các ngôn ngữ chữ viết của con người. Về cơ bản, bây giờ nó có thể xử lý bất kỳ nội dung có thể đặt trên đó. Không có lý do gì để không thiết lập điều này, và nó giúp tránh một số vấn đề sau này.
  • <title></title> — thành phần <title>. Điều này đặt tiêu đề cho trang của bạn, là tiêu đề xuất hiện trong tab trình duyệt đang được tải. Nó cũng được sử dụng để mô tà trang khi bạn đánh dấu / yêu thích nó.
  • <body></body> — thành phần <body>. Điều này chứa tất cả nội dung mà bạn muốn hiển thị cho người dùng web khi họ truy cập trang của bạn, cho đó là văn bản, hình ảnh, video, trò chơi, bản âm thanh có thể phát hoặc bất kỳ nội dung nào khác.

Hình ảnh

Hãy chú ý đến phần tử <img> lần nữa:

<img src="images/firefox-icon.png" alt="My test image">

Như chúng tôi đã nói trước đây, nó nhúng hình ảnh vào trang của chúng tôi ở vị trí xuất hiện. Nó thực hiện điều này thông qua thuộc tín src (source), chứa đường dẫn đến tệp hình ảnh của chúng ta.

Chúng tôi cũng đã bao gồm một thuộc tính alt (alternative). Trong thuộc tính này, bạn chỉ định văn bản mô tả cho người dùng không thể xem hình ảnh, có thể vì:

  1. Họ bị khiếm thị. Người dùng bị khiếm thị đáng kể thường sử dụng các công cụ được gọi là trình đọc màn hình để đọc to văn bản thay thế chúng.
  2. Đã xảy ra sự cố khiến hình ảnh không hiển thị. Ví dụ, cố gắng thay đổi đường dẫn bên trong thuộc tính src của bạn không đúng. Nếu bạn lưu và tải lại trang, bạn sẽ thấy một cái gì đó như thế này cho hình ảnh:

Các từ khóa về văn bản thay thế "văn bản mô tả". Văn bản thay thế bạn nên cung cấp cho người đọc đủ thông tin để có ý tưởng hay về hình ảnh chuyển tải. Trong ví dụ này, văn bản hiện tại của chúng tôi về "Hình ảnh thử nghiệm của tôi" không tốt chút nào. Một thay thế tốt hơn cho biểu tượng Firefox của chúng tôi sẽ là "Biểu thượng Firefox: một con cáo rực lửa xung quanh trái đất."

Hãy thử đưa ra một số văn bản thay thế tốt hơn cho hình ảnh của bạn ngay bây giờ.

Chú thích: Tìm hiểu thêm về trợ năng tại MDN's Accessibility landing page.

Đánh dấu văn bản

Phần này sẽ bao gồm một số phần tử HTML cơ bản mà bạn sẽ sử dụng để đánh dấu văn bản.

Đề mục

Thành phần đầu đề cho phép bạn chỉ định rằng các thành phần nhất định của nội dung của bạn là các tiêu đề — hoặc các tiêu đề phụ — nội dung của bạn. Trong cùng một một cách mà một cuốn sách có một tiêu đề chính, tiêu đề chương và phụ đề, mà tài liệu HTML có thể có. HTML chứa sáu cấp tiêu đề, <h1><h6> thường bạn sẽ chỉ sử dụng tối đa là 3–4:

<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

Bây giờ hãy thử thêm tiêu đề phù hợp vào trang HTML của bạn ngay phía trên phần tử <img> của bạn.

Đoạn văn

Như đã giải thích ở trên, các thành phần <p> chứa các đoạn văn bản; bạn sẽ sử dụng chúng thường xuyên khi đánh dấu nội dung văn bản thông thường:

<p>This is a single paragraph</p>

Thêm văn bản mẫu của bạn ( bạn nên tham khảo từ What should your website look like?) vào một hoặc một vài đoạn văn, được đặt trực tiếp bên dưới phần tử <img> của bạn.

Danh sách

Rất nhiều nội dung của trang web là danh sách và HTML có các yếu tố đặc biệt cho các danh sách này. Việc đánh dấu danh sách luôn bao gồm ít nhất hai phần tử. Các loại danh sách phổ biến nhất có thứ tự và danh sách không có thứ tự:

  1. Danh sách không có thứ tự dành cho các danh sách có thứ tự không quan trọng, như danh sách mua sắm. Chúng được bọc trong phần tử <ul>.
  2. Danh sách có thứ tự dành cho các danh sách có thứ tự của các vật phẩm, chẳng hạn như công thức. Chúng được bọc trong thành phần <ol>.

Mỗi mục bên trong danh sách được đặt bên trong phần tử <li> (mục danh sách).

Ví dụ, chúng ta muốn thay một phần của đoạn sau vào một danh sách:

<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

Chúng tôi thực hiên điều đó:

<p>At Mozilla, we’re a global community of</p>
    
<ul> 
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ... </p>

Thử thêm danh sách có thứ tự và không thứ tự vào trang ví dụ của bạn.

Liên kết

Liên kết rất quan trọng — đó là những gì làm cho web trở thành một trang web! Để thêm liên kết, chúng tôi cần sử dụng một thành phần đơn giản — <a> — "a" viết tắt của "anchor". Để làm cho văn bản trong đoạn văn của bạn thành môt liên kết, hãy làm theo các bước sau:

  1. Chọn một số wăn bản. Chúng tôi đã chọn=> "Mozilla Manifesto".
  2. Văn bản được bao bởi thành phần <a>, như sau:
    <a>Mozilla Manifesto</a>
  3. Cung cấp thành phần <a> một thuộc tính href, như sau:
    <a href="">Mozilla Manifesto</a>
  4. Điền vào giá trị của thuộc tính này với địa chỉ web mà bạn muốn liên kết đến:
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

Bạn có thể nhận được kết quả không mong muốn nếu bạn bỏ qua phần https:// or http://, được gọi là giao thức, ở đầu địa chỉ web. Sau khi tạo liên kết, hãy nhấp vào liên kết đó để đảm bảo rằng nó đang đưa bạn đến đúng nơi bạn muốn.

href có thể xuất hiện như một lựa chọn khá mơ hồ đối với tên thuộc tính lúc đầu. Nếu gặp khó khăn khi nhớ nó, hãy nhớ nó là từ viết tắt của hypertext reference.

Thêm liên kết vào trang của bạn ngay bây giờ, nếu bạn chưa làm như vậy.

Kết luận

Nếu bạn đã làm theo tất cả các hướng dẫn trong bài viết này, bạn sẽ kết thúc với một trang trông giống như dưới đây (bạn cũng có thể xem nó ở đây):

A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

Nếu gặp khó khăn, bạn luôn có thể so sánh công việc của mình với mã ví dụ đã hoàn thành của chúng tôi trên GitHub.

Ở đây, chúng tôi chỉ nói sơ qua bên ngoài của HTML. Để tìm hiểu thêm, hãy truy cập Chủ đề học tập HTML của chúng tôi.

 

Trong mô-đun này

  •  

Document Tags and Contributors

Những người đóng góp cho trang này: daonhut, PurpleLover, hasuki
Cập nhật lần cuối bởi: daonhut,