032.2 Bài 1
Chứng chỉ: |
Web Development Essentials |
---|---|
Phiên bản: |
1.0 |
Chủ đề: |
032 Đánh dấu Tài liệu HTML |
Mục tiêu: |
032.1 Ngữ nghĩa trong HTML và Phân cấp Tài liệu |
Bài: |
1 trên 1 |
Giới thiệu
Trong bài học trước, chúng ta đã biết HTML là một ngôn ngữ đánh dấu có thể mô tả về mặt ngữ nghĩa nội dung của một trang web. Tài liệu HTML chứa cái được gọi là khung xương bao gồm các phần tử HTML <html>
, <head>
và <body>
. Trong khi phần tử <head>
mô tả một khối thông tin meta cho tài liệu HTML không hiển thị đối với khách truy cập vào trang web thì phần tử <body>
có thể chứa nhiều các phần tử khác giúp xác định cấu trúc và nội dung của tài liệu HTML.
Trong bài học này, chúng ta sẽ tìm hiểu về định dạng văn bản, các phần tử HTML ngữ nghĩa cơ bản, mục đích của chúng cũng như cách cấu trúc một tài liệu HTML. Chúng ta sẽ sử dụng một danh sách mua sắm làm ví dụ.
Note
|
Tất cả các ví dụ mã tiếp theo sẽ nằm trong phần tử |
Văn bản
Trong HTML, không có khối văn bản nào nên được để trống và đứng bên ngoài một phần tử. Ngay cả một đoạn văn bản ngắn cũng phải được bao bọc ở bên trong các thẻ HTML <p>
là viết tắt của paragraph (đoạn).
<p>Short text element spanning only one line.</p>
<p>A text element containing much longer text that may span across multiple lines, depending on the size of the web browser window.</p>
Khi được mở bằng trình duyệt web, mã HTML này sẽ tạo ra kết quả được hiển thị trong Figure 1.
Theo mặc định, các trình duyệt web sẽ thêm khoảng cách vào trước và sau các phần tử <p>
để tiện theo dõi. Vì lý do này, <p>
còn được gọi là phần tử khối.
Đề mục
HTML xác định sáu cấp độ đề mục để mô tả và cấu trúc nội dung của tài liệu HTML. Các tiêu đề này sẽ được đánh dấu bằng các thẻ HTML <h1>
, <h2>
, <h3>
, <h4>
, <h5>
và <h6>
.
<h1>Heading level 1 to uniquely identify the page</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
Một trình duyệt web sẽ hiển thị mã HTML này như được hiển thị trong Figure 2.
Nếu đã quen thuộc với các trình xử lý văn bản như LibreOffice hoặc Microsoft Word, bạn có thể sẽ nhận ra được một số điểm tương đồng trong cách tài liệu HTML sử dụng các cấp độ đề mục khác nhau và cách chúng được hiển thị trong trình duyệt web. Theo mặc định, HTML sẽ sử dụng kích thước để biểu thị thứ bậc và tầm quan trọng của các tiêu đề, đồng thời thêm khoảng trắng vào trước và sau mỗi tiêu đề để tách biệt nó khỏi nội dung một cách trực quan.
Đề mục sử dụng phần tử <h1>
nằm ở đầu phân cấp và do đó được coi là đề mục quan trọng nhất giúp xác định nội dung của trang. Chir tính trong phạm vi nội dung của tài liệu HTML, nó có thể so sánh với phần tử <title>
(tiêu đề) đã được thảo luận trong bài học trước. Các phần tử đề mục tiếp theo có thể được sử dụng để cấu trúc thêm nội dung. Hãy đảm bảo rằng bạn không bỏ qua các cấp đề mục ở giữa. Hệ thống phân cấp tài liệu nên bắt đầu bằng <h1>
, tiếp tục với <h2>
, rồi <h3>
, v.v. Bạn không cần sử dụng mọi phần tử đề mục cho đến <h6>
nếu nội dung của bạn không yêu cầu điều này.
Note
|
Đề mục là công cụ quan trọng để cấu trúc một tài liệu HTML cả về mặt ngữ nghĩa và lẫn khía cạnh trực quan. Tuy nhiên, các đề mục không được sử dụng để tăng kích thước của văn bản không quan trọng về mặt cấu trúc. Theo nguyên tắc tương tự, ta không nên in đậm hoặc in nghiêng một đoạn văn bản ngắn để làm cho nó trông giống như một đề mục; hãy sử dụng các thẻ đề mục để đánh dấu các đề mục. |
Hãy bắt đầu tạo tài liệu HTML cho danh sách mua sắm bằng cách xác định dàn ý của nó. Chúng ta sẽ tạo một phần tử <h1>
để chứa tiêu đề trang (trong trường hợp này là Garden Party
), theo sau là một đoạn thông tin ngắn được bao bọc trong phần tử <p>
. Ngoài ra, ta sẽ sử dụng hai phần tử <h2>
để giới thiệu hai phần nội dung Agenda
(Nội dung Chương trình) và Please bring
(Hãy mang theo).
<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<h2>Please bring</h2>
Khi được mở bằng trình duyệt web, mã HTML này sẽ tạo ra kết quả được hiển thị trong Figure 3.
Ngắt Dòng
Đôi khi chúng ta sẽ cần phải ngắt dòng mà không chèn thêm một phần tử <p>
khác hoặc bất kỳ phần tử khối tương tự nào. Trong những trường hợp như vậy, ta có thể sử dụng phần tử <br>
tự đóng. Hãy lưu ý rằng nó chỉ nên được sử dụng để chèn ngắt dòng trong nội dung như thơ, lời bài hát hoặc địa chỉ. Nếu nội dung được phân tách theo ý nghĩa, tốt hơn hết là nên sử dụng phần tử <p>
.
Ví dụ: chúng ta có thể tách văn bản trong đoạn thông tin từ ví dụ trước như sau:
<p>
Invitation to John's garden party.<br>
Saturday, next week.
</p>
Khi được mở bằng trình duyệt web, mã HTML này sẽ tạo ra kết quả được hiển thị trong Figure 4.
Dòng Ngang
Phần tử <hr>
xác định một dòng ngang hay còn được gọi là quy tắc ngang. Theo mặc định, nó sẽ kéo dài toàn bộ chiều rộng của phần tử mẹ của nó. Phần tử <hr>
có thể giúp bạn xác định một thay đổi theo chủ đề trong nội dung hoặc tách các phần của tài liệu. Phần tử này có thể tự đóng và vì thế mà nó không có thẻ đóng.
Trong ví dụ, chúng ta có thể tách hai đề mục:
<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<hr>
<h2>Please bring</h2>
Figure 5 sẽ hiển thị kết quả của mã này.
Danh sách HTML
Trong HTML, bạn có thể xác định được ba loại danh sách:
- Danh sách có thứ tự
-
mà trong đó thứ tự của các thành phần trong danh sách là một yếu tố quan trọng
- Danh sách không có thứ tự
-
mà trong đó thứ tự của các thành phần trong danh sách không đặc biệt quan trọng
- Danh sách mô tả
-
để mô tả chính xác hơn một số thuật ngữ
Mỗi danh sách có thể chứa bất kỳ số danh mục nào. Chúng ta sẽ mô tả từng loại danh sách ngay sau đây.
Danh sách có Thứ tự
Một danh sách có thứ tự trong HTML (được biểu thị bằng phần tử HTML <ol>
) là một tập hợp gồm bất kỳ một số lượng danh mục nào. Điều làm cho phần tử này trở nên đặc biệt là thứ tự của các phần tử trong danh sách này. Để nhấn mạnh điều này, các trình duyệt web sẽ hiển thị các chữ số trước các danh mục con theo mặc định.
Note
|
Phần tử |
Trong ví dụ trên, ta có thể điền vào nội dung chương trình cho bữa tiệc ngoài vườn bằng cách sử dụng phần tử <ol>
với mã sau:
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>Barbecue</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>
Khi được mở bằng trình duyệt web, mã HTML này sẽ tạo ra kết quả được hiển thị trong Figure 6.
Tuỳ chọn
Như có thể thấy trong ví dụ này, các danh mục đã được đánh số bằng chữ số thập phân bắt đầu từ 1 theo mặc định. Tuy nhiên, ta có thể thay đổi hành vi này bằng cách chỉ định thuộc tính type
của thẻ <ol>
. Các giá trị hợp lệ cho thuộc tính này là 1
cho chữ số thập phân, A
cho chữ hoa, a
cho chữ thường, I
cho chữ số La Mã viết hoa và i
cho chữ số La Mã viết thường.
Nếu muốn, chúng ta cũng có thể xác định giá trị bắt đầu bằng cách sử dụng thuộc tính start
của thẻ <ol>
. Thuộc tính start
luôn nhận một giá trị là số thập phân ngay cả khi thuộc tính type
đã đặt một kiểu đánh số khác.
Ví dụ: chúng ta có thể điều chỉnh danh sách có thứ tự trong ví dụ trước để các mục trong danh sách sẽ được bắt đầu bằng chữ in hoa và bắt đầu bằng chữ C như được minh họa trong ví dụ sau:
<h2>Agenda</h2>
<ol type="A" start="3">
<li>Welcome</li>
<li>Barbecue</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>
Trong trình duyệt web, mã HTML này sẽ được hiển thị dưới dạng Figure 7.
Thứ tự của các danh mục trong danh sách cũng có thể được đảo ngược bằng cách sử dụng thuộc tính reversed
mà không đi kèm với một giá trị nào.
Note
|
Trong một danh sách có thứ tự, ta cũng có thể đặt giá trị ban đầu của một danh mục cụ thể bằng cách sử dụng thuộc tính |
Danh sách không có Thứ tự
Một Danh sách không có Thứ tự sẽ chứa một loạt các danh mục và, khác với các danh mục trong danh sách có thứ tự, các danh mục này sẽ không có một thứ tự hoặc trình tự đặc biệt nào. Phần tử HTML cho danh sách này là <ul>
. Một lần nữa, <li>
là phần tử HTML để đánh dấu các danhn mục trong danh sách của nó.
Note
|
Phần tử |
Đối với trang web trong ví dụ, chúng ta có thể sử dụng danh sách không có thứ tự để liệt kê các vật phẩm để khách mang đến bữa tiệc. Chúng ta có thể đạt được điều này với mã HTML sau:
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
Trong trình duyệt web, mã HTML này sẽ tạo ra phần được hiển thị trong Figure 8.
Theo mặc định, mỗi danh mục sẽ được biểu thị bằng ký hiệ đĩa đàu dòng. Chúng ta sẽ có thể thay đổi giao diện của nó bằng CSS (sẽ được thảo luận trong các bài học sau).
Lồng Danh sách
Các danh sách có thể được lồng vào với nhau, chẳng hạn như danh sách có thứ tự có thể được lồng trong danh sách không có thứ tự và ngược lại. Để đạt được điều này, danh sách lồng phải là một phần của phần tử danh sách <li>
vì <li>
là phần tử con hợp lệ duy nhất của cả danh sách không có thứ tự và có thứ tự. Khi lồng chúng với nhau, hãy cẩn thận để không chồng chéo lẫn lộn các thẻ HTML.
Trong ví dụ đang được sử dụng, chúng ta có thể thêm một số thông tin về nội dung chương trình đã được tạo trước đây, ví dụ như sau:
<h2>Agenda</h2>
<ol type="A" start="3">
<li>Welcome</li>
<li>
Barbecue
<ul>
<li>Vegetables</li>
<li>Meat</li>
<li>Burgers, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>
Trình duyệt web sẽ hiển thị mã như được hiển thị trong Figure 9.
Bạn cũng có thể tiến xa hơn nữa và lồng nhiều cấp độ sâu hơn nữa. Về mặt lý thuyết, không có giới hạn về số lượng các danh sách có thể lồng vào nhau. Tuy nhiên, hãy cân nhắc về khả năng đọc của khách truy cập khi làm điều này.
Danh sách Mô tả
Một danh sách mô tả sẽ được xác định bằng cách sử dụng phần tử <dl>
và sẽ đại diện cho một từ điển của các khoá và giá trị. Khóa là một thuật ngữ hoặc một cái tên mà bạn muốn mô tả và giá trị là phần mô tả. Danh sách mô tả có thể bao gồm các cặp khóa-giá trị từ đơn giản cho đến những định nghĩa mở rộng.
Khóa (hoặc thuật ngữ) sẽ được xác định bằng phần tử <dt>
, còn mô tả của nó thì được xác định bằng phần tử <dd>
.
Một ví dụ cho danh sách mô tả như vậy có thể là danh sách các loại trái cây kỳ lạ (exotic fruits) và các phần giải thích về việc chúng trông như thế nào.
<h3>Exotic Fruits</h3>
<dl>
<dt>Banana</dt>
<dd>
A long, curved fruit that is yellow-skinned when ripe. The fruit's skin
may also have a soft green color when underripe and get brown spots when
overripe.
</dd>
<dt>Kiwi</dt>
<dd>
A small, oval fruit with green flesh, black seeds, and a brown, hairy
skin.
</dd>
<dt>Mango</dt>
<dd>
A fruit larger than a fist, with a green skin, orange flesh, and one big
seed. The skin may have spots ranging from green to yellow or red.
</dd>
</dl>
Trong trình duyệt web, điều này sẽ tạo ra kết quả được hiển thị trong Figure 10.
Note
|
Trái ngược với danh sách có thứ tự và danh sách không có thứ tự, trong danh sách mô tả, bất kỳ phần tử HTML nào cũng có thể được coi là một phần tử con trực tiếp hợp lệ. Điều này cho phép ta nhóm các phần tử và thiết kế cho chúng cả ở nơi khác thông qua việc sử dụng CSS. |
Định dạng Văn bản Nội tuyến
Trong HTML, chúng ta có thể sử dụng các phần tử định dạng để thay đổi hình thức của văn bản. Các phần tử này có thể được phân loại thành phần tử trình bày hoặc phần tử cụm từ.
Phần tử Trình bày
Các phần tử trình bày cơ bản sẽ thay đổi phông chữ hoặc hình thức của văn bản. Chúng là <b>
, <i>
, <u>
và <tt>
. Những phần tử này đã được xác định ngay từ ban đầu trước khi CSS cho phép văn bản có thể được in đậm, in nghiêng, v.v. Hiện nay đã có nhiều cách hay hơn để thay đổi hình thức của văn bản, nhưng đôi khi bạn vẫn sẽ thấy những phần tử này.
Văn bản in đậm
Để in đậm văn bản, chúng ta sẽ gói văn bản đó vào trong phần tử <b>
như được minh họa trong ví dụ sau. Kết quả sẽ hiển thị trong Figure 11.
This <b>word</b> is bold.
<b>
dùng để in đậm văn bản.Theo như đặc tính của HTML 5, ta chỉ nên sử dụng phần tử <b>
khi không còn thẻ nào thích hợp hơn. Một phần tử khác cũng tạo ra cùng một kết quả trực quan nhưng lại bổ sung thêm tầm quan trọng về mặt ngữ nghĩa cho văn bản được đánh dấu là <strong>
.
Văn bản in nghiêng
Để in nghiêng văn bản, chúng ta sẽ gói văn bản đó trong phần tử <i>
như được minh họa trong ví dụ sau. Kết quả sẽ hiển thị trong Figure 12.
This <i>word</i> is in italics.
<i>
dùng để in nghiêng văn bản.Theo như đặc tính của HTML 5, ta chỉ nên sử dụng phần tử <i>
khi không còn thẻ nào thích hợp hơn.
Văn bản được gạch chân
Để gạch chân văn bản, chúng ta sẽ gói văn bản đó trong phần tử <u>
như được minh họa trong ví dụ sau. Kết quả sẽ hiển thị trong Figure 13.
This <u>word</u> is underlined.
<u>
dùng để gạch chân văn bản.Theo như đặc tính của HTML 5, ta chỉ nên sử dụng phần tử <u>
khi không có cách nào tốt hơn để gạch chân văn bản. CSS có cung cấp một giải pháp thay thế hiện đại hơn.
Phông chữ Cố định Chiều rộng hoặc Đơn cách
Để hiển thị văn bản ở phông chữ đơn cách (có độ rộng cố định) thường được sử dụng để hiển thị mã máy tính, chúng ta sẽ sử dụng phần tử <tt>
như được minh họa trong ví dụ sau. Kết quả sẽ hiển thị trong Figure 14.
This <tt>word</tt> is in fixed-width font.
<tt>
được sử dụng để hiển thị văn bản ở phông chữ có độ rộng cố định.Thẻ <tt>
không được hỗ trợ trong HTML 5. Tuy các trình duyệt web vẫn sẽ hiển thị nó nhưng ta vẫn nên sử dụng các thẻ thích hợp hơn là <code>
, <kbd>
, <var>
và <samp>
.
Phần tử Cụm từ
Các phần tử cụm từ không chỉ thay đổi hình thức của văn bản mà còn bổ sung tầm quan trọng về mặt ngữ nghĩa cho một từ hoặc một cụm từ. Bằng cách sử dụng chúng, ta có thể nhấn mạnh một từ hoặc đánh dấu nó là quan trọng. Trái ngược với các phần tử trình bày, các phần tử này được trình đọc màn hình nhận diện và từ đó giúp khách truy cập khiếm thị dễ tiếp cận với văn bản hơn cũng như cho phép các công cụ tìm kiếm đọc và đánh giá nội dung trang tốt hơn. Các phần tử cụm từ chúng ta sẽ sử dụng trong suốt bài học này là <em>
, <strong>
và <code>
.
Văn bản được Nhấn mạnh
Để nhấn mạnh văn bản, chúng ta có thể gói văn bản đó trong thành phần <em>
như được minh họa trong ví dụ sau:
This <em>word</em> is emphasized.
<em>
dùng để nhấn mạnh văn bản.Như có thể thấy, các trình duyệt web đã hiển thị <em>
theo một cách tương tự như <i>
, nhưng <em>
sẽ bổ sung tầm quan trọng về mặt ngữ nghĩa với tư cách là một phần cụm từ, giúp cải thiện khả năng theo dõi cho khách truy cập khiếm thị.
Văn bản Quan trọng
Để đánh dấu văn bản là quan trọng, chúng ta sẽ gói văn bản đó trong phần tử <strong>
như được minh họa trong ví dụ sau. Kết quả sẽ được hiển thị trong Figure 16.
This <strong>word</strong> is important.
<strong>
được dùng để đánh dấu văn bản quan trọng.Như có thể thấy, các trình duyệt web sẽ hiển thị <strong>
theo một cách tương tự như <b>
, nhưng <strong>
bổ sung tầm quan trọng về mặt ngữ nghĩa với tư cách là một phần tử cụm từ, giúp cải thiện khả năng theo dõi cho khách truy cập khiếm thị.
Mã Máy tính
Để chèn một đoạn mã máy tính, chúng ta sẽ gói đoạn mã đó trong phần tử <code>
như được minh họa trong ví dụ sau. Kết quả sẽ được hiển thị trong Figure 17.
The Markdown code <code># Heading</code> creates a heading at the highest level in the hierarchy.
<code>
dùng để chèn một đoạn mã máy tính.Văn bản được đánh dấu
Để đánh dấu văn bản với nền màu vàng (ương tự như kiểu đánh dấu tô sáng khi dùng bút dạ quang), chúng ta sẽ sử dụng phần tử <mark>
như được minh họa trong ví dụ sau. Kết quả sẽ được hiển thị trong Figure 18.
This <mark>word</mark> is highlighted.
<mark>
dùng để đánh dấu văn bản với nền màu vàng.Định dạng Văn bản của Danh sách Mua sắm HTML
Dựa trên các ví dụ của chúng ta, hãy cùng chèn một số phần tử cụm từ để thay đổi hình thức của văn bản, đồng thời tăng thêm tầm quan trọng về mặt ngữ nghĩa của chúng. Kết quả sẽ được hiển thị trong Figure 19.
<h1>Garden Party</h1>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
<hr>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
Trong tài liệu HTML mẫu này, thông tin quan trọng nhất liên quan đến bữa tiệc trong vườn được đánh dấu là quan trọng bằng cách sử dụng phần tử <strong>
. Các loại thực phẩm có sẵn cho tiệc nướng được nhấn mạnh bằng phần tử <em>
. Pháo hoa được làm nổi bật bằng cách sử dụng phần tử <mark>
.
Như một bài tập thực hành, bạn cũng có thể thử định dạng các đoạn văn bản khác bằng cách sử dụng các phần tử định dạng khác.
Văn bản định dạng sẵn
Trong hầu hết các phần tử HTML, khoảng trắng thường được giảm xuống thành một khoảng cách bình thường hoặc thậm chí bị bỏ qua hoàn toàn. Tuy nhiên, có một phần tử HTML có tên <pre>
sẽ cho phép ta xác định cái được gọi là văn bản định dạng sẵn. Khoảng trắng trong nội dung của phần tử này (bao gồm các khoảng cách và khoảng ngắt dòng) sẽ được giữ nguyên và hiển thị trong trình duyệt web. Ngoài ra, văn bản sẽ được hiển thị bằng phông chữ có chiều rộng cố định, tương tự như phần tử <code>
.
<pre>
field() {
shift $1 ; echo $1
}
</pre>
<pre>
duy trì khoảng trắng.Nhóm các Phần tử
Theo quy ước, các phần tử HTML sẽ được chia thành hai loại:
- Phẩn tử Cấp độ Khối
-
Chúng xuất hiện trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn. Ví dụ về các phần tử cấp độ khối mà chúng ta đã thảo luận là
<p>
,<ol>
và<h2>
. - Các Phần tử Cấp độ Nội tuyến
-
Chúng xuất hiện trên cùng một dòng với các phần tử và văn bản khác và chỉ chiếm phần không gian cần thiết đủ cho nội dung của chúng. Ví dụ về các phần tử cấp độ nội tuyến là
<strong>
,<em>
và<i>
.
Note
|
HTML5 đã giới thiệu các danh mục phần tử chính xác hơn để tránh khỏi nhầm lẫn với khối CSS và hộp nội tuyến. Để đơn giản hơn, ở đây chúng ta sẽ tập trung vào việc chia nhỏ thành các phần tử khối và nội tuyến truyền thống. |
Các phần tử cơ bản để nhóm nhiều phần tử lại với nhau là các phần tử <div>
và <span>
.
Phần tử <div>
là vùng chứa cấp khối của các phần tử HTML khác và sẽ không tự thêm giá trị ngữ nghĩa. Chúng ta có thể sử dụng phần tử này để chia tài liệu HTML thành các phần và cấu trúc nội dung để tăng khả năng theo dõi mã cũng như áp dụng các kiểu CSS cho một nhóm phần tử ta sẽ trong bài học sau.
Theo mặc định, trình duyệt web sẽ luôn chèn dấu ngắt dòng trước và sau mỗi phần tử <div>
để mỗi phần tử đều sẽ được hiển thị trên một dòng riêng.
Ngược lại, phần tử <span>
được sử dụng làm vùng chứa văn bản HTML và thường được sử dụng để nhóm các phần tử nội tuyến khác nhằm áp dụng các kiểu CSS cho một phần văn bản nhỏ hơn.
Phần tử <span>
hoạt động giống như văn bản thông thường và sẽ không bắt đầu trên một dòng mới. Do đó, nó là một phần tử nội tuyến.
Ví dụ sau đây sẽ so sánh biểu diễn trực quan của phần tử ngữ nghĩa <p>
và các phần tử nhóm <div>
và <span>
:
<p>Text within a paragraph</p>
<p>Another paragraph of text</p>
<hr>
<div>Text wrapped within a <code>div</code> element</div>
<div>Another <code>div</code> element with more text</div>
<hr>
<span>Span content</span>
<span>and more span content</span>
Trình duyệt web sẽ hiển thị mã này như trong Figure 21.
Chúng ta đã thấy rằng theo mặc định, trình duyệt web sẽ thêm khoảng cách trước và sau các phần tử <p>
. Khoảng cách này không được áp dụng cho cả hai phần tử nhóm <div>
và <span>
. Tuy nhiên, các phần tử <div>
sẽ được định dạng dưới dạng các khối riêng của chúng, trong khi văn bản trong các phần tử <span>
sẽ được hiển thị trên cùng một dòng.
Cấu trúc Trang HTML
Chúng ta đã thảo luận về cách sử dụng các phần tử HTML để mô tả nội dung của trang web theo ngữ nghĩa – nói cách khác - để truyền đạt ý nghĩa và ngữ cảnh cho văn bản. Một nhóm phần tử khác được thiết kế với mục đích mô tả cấu trúc ngữ nghĩa của một trang web, một biểu thức hoặc cấu trúc của nó. Các phần tử này là phần tử khối, tức là . hành vi trực quan của chúng cũng tương tự như phần tử <div>
. Mục đích của chúng là xác định cấu trúc ngữ nghĩa của trang web bằng cách chỉ định các khu vực được xác định rõ như tiêu đề, chân trang và nội dung chính của trang. Các phần tử này cho phép ta nhóm nội dung theo ngữ nghĩa để máy tính cũng có thể hiểu được nội dung đó, bao gồm cả công cụ tìm kiếm và trình đọc màn hình.
Phần tử <header>
Phần tử <header>
(đầu trang) sẽ chứa các thông tin giới thiệu về phần tử ngữ nghĩa xung quanh trong tài liệu HTML. Một đầu trang khác với một đề mục, nhưng một đầu trang sẽ thường bao gồm một thành phần đề mục (<h1>
, … , <h6>
).
Trong thực tế, phần tử này thường được sử dụng nhiều nhất để biểu diễn phần đầu trang, chẳng hạn như biểu ngữ có logo. Nó cũng có thể được sử dụng để giới thiệu nội dung cho bất kỳ phần tử nào sau đây: <body>
, <section>
, <article>
, <nav>
hoặc <aside>
.
Một tài liệu có thể có nhiều phần tử <header>
, nhưng một phần tử <header>
lại không thể được lồng trong một phần tử <header>
khác. Phần tử <footer>
cũng không thể được sử dụng lồng trong <header>
.
Ví dụ: để thêm một đầu trang vào tài liệu mẫu, ta có thể thực hiện như sau:
<header>
<h1>Garden Party</h1>
</header>
Sẽ không có một thay đổi rõ ràng nào đối với tài liệu HTML, vì <h1>
(giống như tất cả các phần tử đề mục khác) là một phần tử cấp độ khối không có thuộc tính trực quan nào khác.
Phần tử Nội dung <main>
Phần tử <main>
(phần chính) là vùng chứa nội dung trung tâm của trang web. Không được có nhiều hơn một phần tử <main>
trong tài liệu HTML.
Trong tài liệu ví dụ của chúng ta, tất cả các mã HTML mà chúng ta đã viết từ trước cho tới nay sẽ được đặt bên trong phần tử <main>
.
<main>
<header>
<h1>Garden Party</h1>
</header>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
<hr>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</main>
Giống như phần tử <header>
, phần tử <main>
sẽ không gây ra bất kỳ thay đổi trực quan nào trong ví dụ của chúng ta.
Phần tử <footer>
Phần tử <footer>
(chân trang) sẽ chứa các chú thích (ví dụ như thông tin tác giả, thông tin liên hệ hoặc tài liệu liên quan) được đặt ở cuối trang cho các phần tử ngữ nghĩa xung quanh nó, ví dụ như <section>
, <nav>
hoặc <aside>
. Một tài liệu có thể có nhiều phần tử <footer>
cho phép bạn mô tả chính xác hơn các phần tử ngữ nghĩa. Tuy nhiên, phần tử <footer>
không thể được lồng trong một phần tử <footer>
khác, cũng như không thể sử dụng phần tử <header>
ở bên trong <footer>
.
Trong ví dụ của chúng ta, ta có thể thêm thông tin liên hệ về chủ nhà (John) như trong ví dụ dưới đây:
<footer>
<p>John Doe</p>
<p>john.doe@example.com</p>
</footer>
Phần tử <nav>
Phần tử <nav>
(điều hướng) mô tả một đơn vị điều hướng chính (chẳng hạn như menu) có chứa một loạt các siêu liên kết.
Note
|
Không phải siêu liên kết nào cũng đều phải được gói trong một phần tử |
Bởi vì các siêu liên kết vẫn chưa được nhắc đến nên các phần tử điều hướng sẽ không có trong ví dụ của bài học này.
Phần tử <aside>
Phần tử <aside>
(phần bên cạnh) là nơi chứa những nội dung không cần thiết theo thứ tự của nội dung trang chính, nhưng lại thường sẽ có liên quan một cách gián tiếp hoặc bổ sung. Phần tử này thường được sử dụng cho các thanh/ cột bên để hiển thị thông tin thứ cấp, chẳng hạn như bảng thuật ngữ.
Trong ví dụ của chúng ta, ta có thể thêm thông tin về địa chỉ và hành trình (tức những thông tin chỉ liên quan gián tiếp đến phần nội dung còn lại) bằng cách sử dụng phần tử <aside>
.
<aside>
<p>
10, Main Street<br>
Newville
</p>
<p>Parking spaces available.</p>
</aside>
Phần tử <section>
Phần tử <section>
(phần) xác định một phần logic trong tài liệu - tức một phần của phần tử ngữ nghĩa xung quanh nhưng sẽ không hoạt động như một nội dung độc lập (chẳng hạn như một chương).
Trong tài liệu mẫu, chúng ta ta có thể gói các phần nội dung cho nội dung chương trình và đưa vào các phần danh sách như trong ví dụ sau:
<section>
<header>
<h2>Agenda</h2>
</header>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</section>
<hr>
<section>
<header>
<h2>Please bring</h2>
</header>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</section>
Ví dụ này cũng đã bổ sung thêm các phần tử <header>
trong các phần, sao cho mỗi phần đều nằm trong phần tử <header>
của chính nó.
Phần tử <article>
Phần tử <article>
(bài viết) xác định nội dung độc lập có ý nghĩa riêng mà không cần các phần còn lại của trang. Nội dung của nó có khả năng phân phối lại hoặc tái sử dụng trong những ngữ cảnh khác. Một số ví dụ điển hình cho phần tử <article>
là một bài đăng trên blog, danh sách sản phẩm cho một cửa hàng và một quảng cáo sản phẩm. Sau đó, quảng cáo có thể tự tồn tại một mình hoặc ở trong một trang lớn hơn.
Trong ví dụ của chúng ta, ta có thể thay thế phần tử <section>
đầu tiên bao quanh nội dung chương trình bằng một phần tử <article>
.
<article>
<header>
<h2>Agenda</h2>
</header>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</article>
Phần tử <header>
mà chúng ta đã thêm trong ví dụ trước cũng có thể được dùng ở đây vì các phần tử <article>
có thể có các phần tử <header>
của riêng chúng.
Ví dụ cuối cùng
Kết hợp tất cả các ví dụ trước, tài liệu HTML cuối cùng của lời mời sẽ trông như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Garden Party</title>
</head>
<body>
<main>
<h1>Garden Party</h1>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<article>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</article>
<hr>
<section>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</section>
</main>
<aside>
<p>
10, Main Street<br>
Newville
</p>
<p>Parking spaces available.</p>
</aside>
<footer>
<p>John Doe</p>
<p>john.doe@example.com</p>
</footer>
</body>
</html>
Trong trình duyệt web, toàn bộ trang sẽ được hiển thị như trong Figure 22.
Bài tập Hướng dẫn
-
Đối với mỗi thẻ sau, hãy chỉ ra thẻ đóng tương ứng:
<h5>
<br>
<ol>
<dd>
<hr>
<strong>
<tt>
<main>
-
Đối với mỗi thẻ sau, hãy cho biết liệu nó đánh dấu phần đầu của một phần tử khối hay một phần tử nội tuyến:
<h3>
<span>
<b>
<div>
<em>
<dl>
<li>
<nav>
<code>
<pre>
-
Có những loại danh sách nào mà bạn có thể tạo trong HTML? Nên sử dụng thẻ nào cho mỗi loại danh sách đó?
-
Những thẻ nào có thể gói các phần tử khối mà bạn có thể sử dụng để cấu trúc một trang HTML?
Bài tập Mở rộng
-
Hãy tạo một trang HTML cơ bản với tiêu đề “Form Rules”. Bạn sẽ sử dụng trang HTML này cho tất cả các bài tập mở rộng, mỗi bài đều sẽ dựa trên các bài trước. Sau đó, hãy thêm tiêu đề cấp 1 có nội dung “To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields:” và một danh sách không có thứ tự với các danh mục sau: “Name”, “Surname”, “Email Address”, “Nation”, “Country” và “Zip/Postal Code”.
-
Hãy đặt ba trường đầu tiên (“Name”, “Surname”, and “Email Address”) bằng chữ in đậm, đồng thời tăng thêm tầm quan trọng về mặt ngữ nghĩa. Sau đó, hãy thêm tiêu đề cấp 2 có nội dung “Required fields” và một đoạn có nội dung “Bold fields are mandatory.”.
-
Hãy thêm một tiêu đề cấp 2 khác có nội dung “Steps to follow”, một đoạn văn bản có nội dung “There are four steps to follow:” và một danh sách có thứ tự với các danh mục sau: “Fill in the fields”, “Click the Submit button”, “Check your e-mail and confirm your request by clicking on the link you receive” và “Check your e-mail - You will receive the full HTML course in minutes”.
-
Hãy sử dụng
<div>
và tạo một khối cho mỗi một phần bắt đầu bằng tiêu đề cấp 2. -
Hãy sử dụng
<div>
và tạo một khối khác cho phần bắt đầu bằng tiêu đề cấp 1. Sau đó, hãy tách phần này với hai phần còn lại bằng một đường ngang. -
Hãy thêm phần tử đầu trang có nội dung “Form Rules - 2021” và phần tử chân trang có nội dung “Copyright Note - 2021”. Cuối cùng, hãy thêm phần tử chính có chứa ba khối
<div>
.
Tóm tắt
Trong bài học này, bạn đã học về:
-
Cách tạo đánh dấu cho nội dung trong tài liệu HTML
-
Cấu trúc văn bản HTML phân cấp
-
Sự khác biệt giữa các phần tử HTML khối và nội tuyến
-
Cách tạo tài liệu HTML có cấu trúc ngữ nghĩa
Các thuật ngữ sau đây đã được nhắc tới trong bài học này:
<h1>
,<h2>
,<h3>
,<h4>
,<h5>
,<h6>
-
Các thẻ Đề mục.
<p>
-
Thẻ đoạn văn bản.
<ol>
-
Thẻ danh sách có thứ tự.
<ul>
-
Thẻ danh sách không có thứ tự.
<li>
-
Thẻ danh mục.
<dl>
-
Thẻ danh sách mô tả.
<dt>
,<dd>
-
Các thẻ của mỗi thuật ngữ và phần mô tả cho một danh sách mô tả.
<pre>
-
Thẻ định dạng bảo toàn.
<b>
,<i>
,<u>
,<tt>
,<em>
,<strong>
,<code>
,<mark>
-
Các thẻ định dạng.
<div>
,<span>
-
Các thẻ nhóm.
<header>
,<main>
,<nav>
,<aside>
,<footer>
-
Các thẻ được sử dụng để cung cấp cấu trúc và bố cục đơn giản cho trang HTML.
Đáp án Bài tập Hướng dẫn
-
Đối với mỗi thẻ sau, hãy chỉ ra thẻ đóng tương ứng:
<h5>
</h5>
<br>
Does not exist
<ol>
</ol>
<dd>
</dd>
<hr>
Does not exist
<strong>
</strong>
<tt>
</tt>
<main>
</main>
-
Đối với mỗi thẻ sau, hãy cho biết liệu nó đánh dấu phần đầu của một phần tử khối hay một phần tử nội tuyến:
<h3>
Phần tử Khối
<span>
Phần tử Ngoại tuyến
<b>
Phần tử Ngoại tuyến
<div>
Phần tử Khối
<em>
Phần tử Ngoại tuyến
<dl>
Phần tử Khối
<li>
Phần tử Khối
<nav>
Phần tử Khối
<code>
Phần tử Ngoại tuyến
<pre>
Phần tử Khối
-
Có những loại danh sách nào mà bạn có thể tạo trong HTML? Nên sử dụng thẻ nào cho mỗi loại danh sách đó?
Trong HTML, bạn có thể tạo ba loại danh sách: danh sách có thứ tự bao gồm một loạt các danh mục được đánh số, danh sách không có thứ tự bao gồm một loạt các danh mục không có thứ tự hoặc trình tự đặc biệt, và cuối cùng là danh sách mô tả đại diện cho các mục như trong từ điển hoặc bách khoa toàn thư . Một danh sách có thứ tự sẽ được đặt giữa các thẻ
<ol>
và</ol>
, một danh sách không có thứ tự sẽ được đặt giữa các thẻ<ul>
và</ul>
và một danh sách mô tả sẽ được đặt giữa các thẻ<dl>
và</dl>
. Mỗi một mục trong danh sách có thứ tự hoặc không có thứ tự sẽ được đặt giữa các thẻ<li>
và</li>
, trong khi mỗi thuật ngữ trong danh sách mô tả sẽ được đặt giữa các thẻ<dt>
và</dt>
và phần mô tả của nó được đặt giữa các thẻ<dd>
và</dd>
. -
Những thẻ nào có thể gói các thành phần khối mà chúng ta sẽ sử dụng để cấu trúc một trang HTML?
Các thẻ
<header>
và</header>
gói phần đầu trang, các thẻ<main>
và</main>
gói nội dung chính của trang HTML, các thẻ<nav>
và</nav>
gói phần điều hướng, các thẻ<aside>
và</aside>
gói các thanh bên và các thẻ<footer>
và</footer>
gói phần chân trang.
Đáp án Bài tập Mở rộng
-
Hãy tạo một trang HTML cơ bản với tiêu đề “Form Rules”. Bạn sẽ sử dụng trang HTML này cho tất cả các bài tập mở rộng, mỗi bài đều sẽ dựa trên các bài trước. Sau đó, hãy thêm tiêu đề cấp 1 có nội dung “To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields:” và một danh sách không có thứ tự với các danh mục sau: “Name”, “Surname”, “Email Address”, “Nation”, “Country” và “Zip/Postal Code”.
<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li>Name</li> <li>Surname</li> <li>Email Address</li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> </body> </html>
-
Hãy đặt ba trường đầu tiên (“Name”, “Surname”, and “Email Address”) bằng chữ in đậm, đồng thời tăng thêm tầm quan trọng về mặt ngữ nghĩa. Sau đó, hãy thêm tiêu đề cấp 2 có nội dung “Required fields” và một đoạn có nội dung “Bold fields are mandatory.”.
<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> </body> </html>
-
Hãy thêm một tiêu đề cấp 2 khác có nội dung “Steps to follow”, một đoạn văn bản có nội dung “There are four steps to follow:” và một danh sách có thứ tự với các danh mục sau: “Fill in the fields”, “Click the Submit button”, “Check your e-mail and confirm your request by clicking on the link you receive” và “Check your e-mail - You will receive the full HTML course in minutes”.
<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> <h2>Steps to follow</h2> <p>There are four steps to follow:</p> <ol> <li>Fill in the fields</li> <li>Click the Submit button</li> <li> Check your e-mail and confirm your request by clicking on the link you receive </li> <li> Check your e-mail - You will receive the full HTML course in minutes </li> </ol> </body> </html>
-
Hãy sử dụng
<div>
và tạo một khối cho mỗi một phần bắt đầu bằng tiêu đề cấp 2.<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> <div> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> </div> <div> <h2>Steps to follow</h2> <p>There are four steps to follow:</p> <ol> <li>Fill in the fields</li> <li>Click the Submit button</li> <li> Check your e-mail and confirm your request by clicking on the link you receive </li> <li> Check your e-mail - You will receive the full HTML course in minutes </li> </ol> </div> </body> </html>
-
Hãy sử dụng
<div>
và tạo một khối cho mỗi một phần bắt đầu bằng tiêu đề cấp 2.<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <div> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> </div> <hr> <div> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> </div> <div> <h2>Steps to follow</h2> <p>There are four steps to follow:</p> <ol> <li>Fill in the fields</li> <li>Click the Submit button</li> <li> Check your e-mail and confirm your request by clicking on the link you receive </li> <li> Check your e-mail - You will receive the full HTML course in minutes </li> </ol> </div> </body> </html>
-
Hãy thêm phần tử đầu trang có nội dung “Form Rules - 2021” và phần tử chân trang có nội dung “Copyright Note - 2021”. Cuối cùng, hãy thêm phần tử chính có chứa ba khối
<div>
.<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <header> <h1>Form Rules - 2021</h1> </header> <main> <div> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> </div> <hr> <div> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> </div> <div> <h2>Steps to follow</h2> <p>There are four steps to follow:</p> <ol> <li>Fill in the fields</li> <li>Click the Submit button</li> <li> Check your e-mail and confirm your request by clicking on the link you receive </li> <li> Check your e-mail - You will receive the full HTML course in minutes </li> </ol> </div> </main> <footer> <p>Copyright Note - 2021</p> </footer> </body> </html>