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 thanfh 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à các hàm 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 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 to somewhere else, 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 chữ đứng một mình, ta có thể định nó như một đoạn văn bằng cách kèm theo các thẻ paragraph ở bên ngoài:

<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 về đoạn văn trên sâu hơn một chút.

Các 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), gói bởi cặp ngoặc góc đóng và mở. Đây là nơi thành phần bắt đầu, 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 của thành phần. Đây là nơi thành phần kết thúc— 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à các chữ.
  4. The element: Thẻ mở, thẻ đóng, và tất cả nội dung.

Các phần tử có thể chứa các thuộc tính, như này:

Thuộc tính 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 đó để sau này có thể dùng để gắn thẻ thành phần với thông tin định dạng 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à Lồng. Nếu chúng ta muôn tuyên bố rằng con mèo rất gắt, ta có thể bao từ "rất" trong một thành phần <strong>, Có nghĩa 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 hoàn toàn:

<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 bọc 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

That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page. Let's revisit the code we put into our index.html example (which we first met in the Dealing with files article):

<!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>

Here we have:

  • <!DOCTYPE html> — the doctype. In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days no one really cares about them, and they are really just a historical artifact that needs to be included for everything to work right. For now, that's all you need to know.
  • <html></html> — the <html> element. This element wraps all the content on the entire page, and is sometimes known as the root element.
  • <head></head> — the <head> element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
  • <body></body> — the <body> element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.
  • <meta charset="utf-8"> — this element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of human written languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.
  • <title></title> — the <title> element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favourite it.

Hình ảnh

Let's turn our attention to the <img> element again:

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

As we said before, it embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.

We have also included an alt (alternative) attribute. In this attribute, you specify descriptive text for users who cannot see the image, possibly because:

  1. They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.
  2. Something has gone wrong causing the image to not display. For example, try deliberately changing the path inside your src attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:

The key words about alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth."

Try coming up with some better alt text for your image now.

Note: Find out more about accessibility at MDN's Accessibility landing page.

Marking up text

This section will cover some of the basic HTML elements you'll use for marking up text.

Đề mục

Heading elements allow you to specify that certain parts of your content are headings — or subheadings — of your content. In the same way that a book has a main title, chapter titles and subtitles, an HTML document can too. HTML contains six heading levels, <h1><h6> although you'll commonly only use 3–4 at most:

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

Now try adding a suitable title to your HTML page just above your <img> element.

Đoạn văn

As explained above, <p> elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content:

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

Add your sample text (you should have it from What should your website look like?) into one or a few paragraphs, placed directly below your <img> element.

Danh sách

A lot of the web's content is lists, and HTML has special elements for these. Marking up lists always consist of at least two elements. The most common list types are ordered and unordered lists:

  1. Unordered lists are for lists where the order of the items doesn't matter, like a shopping list. These are wrapped in a <ul> element.
  2. Ordered lists are for lists where the order of the items does matter, like a recipe. These are wrapped in an <ol> element.

Each item inside the lists is put inside an <li> (list item) element.

For example, if we wanted to turn the part of the following paragraph fragment into a list:

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

We could modify the markup to this:

<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>

Try adding an ordered or unordered list to your example page.

Đường dẫn

Links are very important — they are what makes the web a web! To add a link, we need to use a simple element — <a> — the "a" being short for "anchor". To make text within your paragraph into a link, follow these steps:

  1. Choose some text. We chose the text "Mozilla Manifesto".
  2. Wrap the text in an <a> element, like so:
    <a>Mozilla Manifesto</a>
  3. Give the <a> element an href attribute, like so:
    <a href="">Mozilla Manifesto</a>
  4. Fill in the value of this attribute with the web address that you want the link to link to:
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

You might get unexpected results if you omit the https:// or http:// part, called the protocol, at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.

href might appear like a rather obscure choice for an attribute name at first. If you are having trouble remembering it, remember that it stands for hypertext reference.

Add a link to your page now, if you haven't already done so.

Kết luận

If you have followed all the instructions in this article, you should end up with a page that looks like the one below (you can also view it here):

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

If you get stuck, you can always compare your work with our finished example code on GitHub.

Here, we have only really scratched the surface of HTML. To find out more, go to our HTML Learning topic.

 

In this module

Document Tags and Contributors

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