HTML xác định nội dung của mọi trang web trên Internet. Bằng cách “đánh dấu” nội dung thô của bạn bằng các thẻ HTML, bạn có thể cho các trình duyệt web biết cách bạn muốn các phần khác nhau của nội dung được hiển thị. Tạo một tài liệu HTML với nội dung được đánh dấu thích hợp là bước đầu tiên của việc phát triển một trang web. Trong bài viết này chúng ta sẽ tìm hiểu về các phần tử thông dụng trong HTML.
Trong bài viết này, chúng tôi sẽ xây dựng trang web đầu tiên của mình. Nó trông sẽ xấu x vì nó không có bất kỳ CSS nào được đính kèm, nhưng nó sẽ đóng vai trò như một phần giới thiệu kỹ lưỡng về các phần tử HTML mà các lập trình viên làm việc hàng ngày.
Cấu trúc của một trang web HTML
Hãy thêm đoạn HTML bên dưới vào file basic.html. Đây là những gì bạn sẽ bắt đầu với trang web của bạn.
|
1 2 3 4 5 6 7 8 9 |
<code><!DOCTYPE html> <html> <head> <!-- Metadata goes here --> </head> <body> <!-- Content goes here --> </body> </html></code> |
Đầu tiên, chúng ta cần nói với các trình duyệt rằng đây là một trang web HTML5 với dòng <! DOCTYPE html>. Đây chỉ là một chuỗi đặc biệt mà các trình duyệt sẽ tìm kiếm khi cố gắng hiển thị trang web của chúng tôi, và nó luôn cần phải trông giống hệt như ở trên.
Sau đó, toàn bộ trang web của chúng ta cần được bao bọc trong các thẻ <html>. Thực tế <html> thực được gọi là “thẻ mở” (opening tag), trong khi </html> được gọi là “thẻ đóng” (closing tag). Mọi thứ bên trong các thẻ này được coi là một phần của <html> “element”.
Bên trong phần tử <html>, chúng ta có hai phần tử nữa được gọi là <head> và <body>. Phần head của một trang web chứa tất cả metadata (siêu dữ liệu) của nó, như tiêu đề trang, CSS và những thứ khác được yêu cầu để hiển thị trang nhưng bạn không nhất thiết muốn người dùng nhìn thấy. Phần lớn nội dung HTML của chúng tôi sẽ nằm trong phần tử <body>, chúng đại diện cho nội dung hiển thị của trang.
Mục đích của phần <head> / <body> này sẽ trở nên rõ ràng hơn sau khi chúng ta bắt đầu làm việc với CSS.
Cũng lưu ý cú pháp nhận xét HTML trong đoạn code trên. Mọi thứ bắt đầu bằng <! – và kết thúc bằng -> sẽ bị trình duyệt bỏ qua hoàn toàn. Điều này rất hữu ích để ghi chú cho các đoạn code của bạn.
Tiêu đề trang HTML
Một trong những phần quan trọng nhất của siêu dữ liệu là tiêu đề trang web của bạn, được xác định bởi phần tử <title>. Các trình duyệt hiển thị điều này trong tab cho trang của bạn và Google hiển thị nó trong kết quả của công cụ tìm kiếm.
Hãy thử cập nhật <head> của file basic.html bằng đoạn code sau:
|
1 2 3 4 5 6 7 8 9 |
<code><!DOCTYPE html> <html> <head> <title>Interneting Is Easy!</title> </head> <body> <!-- Content goes here --> </body> </html></code> |
Khi tải lại trang trong trình duyệt của mình, bạn vẫn sẽ thấy một trang trống, nhưng bạn cũng sẽ thấy Interneting Is Easy! trong tab trình duyệt:
Lưu ý cách tất cả các thẻ HTML trong trang web của chúng ta được lồng vào nhau một cách gọn gàng. Nó rất quan trọng để đảm bảo rằng không có các yếu tố chồng chéo. Ví dụ: phần tử <title> phải nằm bên trong <head>, vì vậy bạn không bao giờ được thêm thẻ đóng </head> trước thẻ đóng </title>:
|
1 2 3 4 |
<code><!-- (Đừng bao giờ làm điều này) --> <head> <title>Interneting Is Easy!</head> </title></code> |
Đoạn văn bản trong HTML
Tiêu đề thì tốt, nhưng hãy làm điều gì khác mà chúng ta có thể thấy được. Phần tử <p> sẽ đánh dấu tất cả văn bản bên trong nó thành một đoạn văn riêng biệt. Hãy thử thêm phần tử <p> sau vào phần nội dung trang web của bạn:
|
1 2 3 4 5 6 7 8 9 |
<code><!DOCTYPE html> <html> <head> <title>Interneting Is Easy!</title> </head> <body> <p>First, we need to learn some basic HTML.</p> </body> </html></code> |
Bây giờ bạn sẽ có thể thấy nội dung trên trang web. Một lần nữa, vì đây là nội dung chúng ta muốn hiển thị, nên nó cần phải nằm trong phần tử <body>, không phải <head>.
Cũng lưu ý cách các phần tử <p> và <title> được thụt dòng vào hai lần, trong khi <body> và <head> được thụt vào một lần. Thụt lề các phần tử lồng nhau như thế này là một phương pháp quan trọng giúp HTML của bạn dễ đọc hơn đối với các nhà phát triển khác (hoặc cho chính bạn nếu bạn quay lại sau 5 tháng kể từ bây giờ và muốn thay đổi một số nội dung).
Thẻ tiêu đề trong HTML
HTML cung cấp sáu cấp độ của tiêu đề và các phần tử tương ứng là: <h1>, <h2>, <h3>, … , <h6>. Con số càng cao, tiêu đề càng ít nổi bật.
Tiêu đề đầu tiên trên một trang thường phải là <h1>, vì vậy chúng ta hãy chèn một cái bên trên phần tử <p> hiện có của chúng ta. Rất phổ biến khi phần tử <h1> đầu tiên khớp với <title> của tài liệu, như ở đây:
|
1 2 3 4 |
<code><body> <h1>Interneting Is Easy!</h1> <p>First, we need to learn some basic HTML.</p> </body></code> |
Theo mặc định, các trình duyệt hiển thị các tiêu đề ít quan trọng hơn bằng các phông chữ nhỏ hơn. Ví dụ: hãy bao gồm tiêu đề cấp hai và xem điều gì sẽ xảy ra:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<code><!DOCTYPE html> <html> <head> <title>Interneting Is Easy!</title> </head> <body> <h1>Interneting Is Easy!</h1> <p>First, we need to learn some basic HTML.</p> <h2>Headings</h2> <p>Headings define the outline of your site. There are six levels of headings</p> </body> </html></code> |
Điều này sẽ dẫn đến một trang web trông giống như sau:
Tiêu đề là cách chính để bạn đánh dấu các phần khác nhau trong nội dung của mình. Chúng xác định đường viền của trang web của bạn khi cả con người và công cụ tìm kiếm nhìn thấy nó, điều này làm cho việc lựa chọn các tiêu đề có liên quan là điều cần thiết cho một trang web chất lượng cao.
Danh sách không có thứ tự
Bất cứ khi nào bạn muốn hiển thị văn bản dưới dạng một danh sách, Ví dụ như danh sách các khóa học, danh sách bài hát…Hãy nghĩ ngay đến thẻ <ul>. Đặt nội dung bên trong cặp thẻ <ul></ul> sẽ nói với trình duyệt rằng hãy hiển thị nội dung này như một danh sách không có thứ tự. Để biểu thị các mục trong danh sách ta sử dụng thẻ <li> như sau:
|
1 2 3 4 5 6 7 |
<code><h2>Lists</h2> <p>This is how you make an unordered list:</p> <ul> <li>Add a "ul" element (it stands for unordered list)</li> <li>Add each item in its own "li" element</li> <li>They don't need to be in any particular order</li> </ul></code> |
Sau khi thêm nội dung này vào phần tử <body> của trang web. Bạn sẽ thấy một danh sách với các gạch đầu dòng cho mỗi phần tử <li>:
HTML có một sự nghiêm khắc về vấn đề thẻ nào sẽ được làm thẻ con của khác. Trong trường hợp này, thẻ <ul> chỉ nên chứa thẻ <li>, điều này có nghĩa rằng bạn không nên viết một cái gì đó như thế này:
|
1 2 3 4 |
<code><!-- (Không nên viết như vậy!) --> <ul> <p>Add a "ul" element (it stands for unordered list)</p> </ul></code> |
Thay vào đó, bạn nên bọc đoạn văn đó bằng các thẻ <li>:
|
1 2 3 4 |
<code><!-- (Do this instead) --> <ul> <li><p>Add a "ul" element (it stands for unordered list)</p></li> </ul></code> |
Danh sách có thứ tự
Với danh sách không có thứ tự, việc sắp xếp lại các phần tử <li> không thay đổi ý nghĩa của danh sách. Nhưng nếu bạn muốn sắp xếp chúng theo một thứ tự nhất định, hãy sử dụng thẻ <ol>. Để tạo một danh sách có thứ tự, chúng ta chỉ cần thay thế thẻ <ul> thành <ol>. Thêm nội dung sau vào file basic.html:
|
1 2 3 4 5 6 7 |
<code><p>This is what an ordered list looks like:</p> <ol> <li>Notice the new "ol" element wrapping everything</li> <li>But, the list item elements are the same</li> <li>Also note how the numbers increment on their own</li> <li>You should be noticing things is this precise order, because this is an ordered list</li> </ol></code> |
Khi bạn tải lại trang trong trình duyệt của mình, bạn sẽ nhận thấy rằng trình duyệt tự động tăng số lượng cho mỗi phần tử <li>.
In nghiêng văn bản
Từ đầu bài viết đến giờ, chúng ta chỉ mới học đến các phần tử là “block”. Block element là các phần tử được hiển thị trên một dòng hay một khối. Còn inline element là các phần tử có thể hiển thị cùng với các phần tử khác trên cùng một dòng. Hãy xem ảnh đính kèm:
Ví dụ thẻ <p> chính là một block element, trong khi đó thẻ <em> là một inline element có thể được viết bên một đoạn văn bản khác. Nó viết tắt từ “emphasis”, và nó thường được hiển thị dưới dạng văn bản in nghiêng.
|
1 2 |
<code><h2>Inline Elements</h2> <p><em>Sometimes</em>, you need to draw attention to a particular word or phrase.</p></code> |
Phần được bao bọc trong thẻ <em> sẽ hiển thị ở dạng nghiêng, như được hiển thị bên dưới.
In đậm văn bản
Nếu bạn muốn văn bản được in đậm, hãy sử dụng thẻ <strong>. Nó cũng là một inline element và nó trông như thế này:
|
1 |
<code><p>Other times you need to <strong>strong</strong>ly emphasize the importance of a word or phrase.</p></code> |
Nó sẽ được hiển thị như một văn bản được in đậm như sau:
Thậm chí bạn có thể lồng thẻ <em> và <strong> với nhau để được kết quả là vừa in đậm vừa in nghiêng như thế này:
|
1 |
<code><p><em><strong>And sometimes you need to shout!</strong></em></p></code> |
Các thẻ rỗng
Từ đầu bài viết cho đến giờ chúng ta đã học về các thẻ HTML bao bọc văn bản bên trong các thẻ đóng và thẻ mở của chúng. Nhưng đó không phải là tất cả với HTML. Bạn có nghĩ nếu đoạn văn đang viết và bạn muốn xuống dòng thì phải làm như thế nào chưa. Hãy cùng tìm hiểu tiếp nhé:
Thẻ xuống dòng
|
1 2 3 4 |
<code><h2>Empty Elements</h2> <p>Thanks for reading! Interneting should be getting easier now.</p> <p>Regards, The Authors</p></code> |
Dòng mới sau từ Regards trong đoạn code trên sẽ được chuyển thành khoảng trắng thay vì hiển thị dưới dạng xuống dòng:
Để cho trình duyệt biết rằng chúng ta muốn ngắt dòng, chúng ta cần sử dụng phần tử <br/>, như sau:
|
1 2 |
<code><p>Regards,<br/> The Authors</p></code> |
Và chúng sẽ như mong đợi:
Tuy nhiên, hãy hết sức cẩn thận để không lạm dụng thẻ <br/>. Mỗi thẻ bạn sử dụng vẫn phải truyền đạt ý nghĩa — bạn không nên sử dụng nó để thêm một khoảng cách giữa các đoạn văn:
|
1 2 3 4 |
<code><!-- (You will be shunned for this) --> <p>This paragraph needs some space below it...</p> <br/><br/><br/><br/><br/><br/><br/><br/> <p>So, I added some hard line breaks.</p></code> |
Thẻ gạch ngang
Thẻ <hr /> thường được sử dụng để thể hiện sự kết thúc của một đoạn văn bản. Ví dụ như một câu chuyện sẽ có nhiều bối cảnh, thì thẻ <hr /> sẽ được dùng để chuyển sang bối cảnh khác, đánh dấu bối cảnh hiện tại đã kết thúc.
|
1 2 3 4 5 6 |
<code><h2>Empty Elements</h2> <p>Thanks for reading! Interneting should be getting easier now.</p> <p>Regards,<br/> The Authors</p> <hr/> <p>P.S. This page might look like crap, but we'll fix that with some CSS soon.</p></code> |
<br/>, <hr /> nên mang ý nghĩa — không sử dụng nó khi bạn chỉ muốn hiển thị một đường vì mục đích thẩm mỹ. Nếu muốn hãy sử dụng thuộc tính border trong CSS mà chúng ta sẽ được học trong các bài viết tiếp theo.
Kết luận
Trong bài viết này chúng ta đã tìm hiểu về các phần tử cơ bản trong HTML. Khá là đơn giản khi nói về HTML phải không nào. Các trang web được tạo thành từ các phần tử HTML và mỗi phần tử HTML đều mang một ý nghĩa khác nhau và chúng có thể lồng nhau. Hãy xem trong bài viết này chúng ta đã học được những gì nào:
