Các thẻ cơ bản, phần tử và thuộc tính trong HTML
Các thẻ cơ bản của HTML
Thẻ tiêu đề
Bất kỳ tài liệu nào cũng sẽ bắt đầu với một tiêu đề. Bạn có thể sử dụng các kích cỡ khác nhau cho các tiêu đề của bạn.
HTML có sáu cấp độ tiêu đề là các thẻ <h1>, <h2>, <h3>, <h4>, <h5> và <h6> . Trong khi hiển thị bất kỳ tiêu đề nào, trình duyệt sẽ thêm một dòng trước và một dòng sau tiêu đề đó.
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Đây là kết quả:
Thẻ đoạn văn
Thẻ <p> cung cấp một cách để cấu trúc văn bản của bạn thành các đoạn khác nhau. Mỗi đoạn văn bản phải ở giữa một thẻ <p> mở và thẻ đóng </ p> như trong ví dụ dưới đây:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>Đây là kết quả:
Thẻ ngắt dòng
Bất cứ khi nào bạn sử dụng thẻ <br /> , mọi thứ theo sau nó đều bắt đầu từ dòng tiếp theo. Thẻ này là một ví dụ về một thẻ rỗng, nơi bạn không cần mở và đóng thẻ, vì không có gì ở giữa chúng.
Thẻ <br /> có khoảng trắng giữa ký tự br và dấu gạch chéo về phía trước. Nếu bạn bỏ qua khoảng trắng này, các trình duyệt cũ hơn sẽ gặp khó khăn khi hiển thị ngắt dòng, trong khi nếu bạn bỏ lỡ ký tự gạch chéo chuyển tiếp và chỉ sử dụng <br> thì nó không hợp lệ trong XHTML.
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>Đây là kết quả:
Thẻ canh giữa
Bạn có thể sử dụng thẻ <center> để đặt bất kỳ nội dung nào vào giữa trang hoặc bất kỳ ô bảng nào.
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>Đây là kết quả:
Thẻ tạo đường ngang
Các đường ngang được sử dụng để phân chia trực quan các phần của tài liệu. Thẻ <hr> tạo một dòng từ vị trí hiện tại trong tài liệu sang lề phải và ngắt dòng tương ứng.
Ví dụ: bạn có thể muốn đưa ra một dòng giữa hai đoạn như trong ví dụ đã cho bên dưới:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>Đây là kết quả:
Một lần nữa thẻ <hr /> là một ví dụ về thẻ rỗng , nơi bạn không cần mở và đóng thẻ, vì không có gì ở giữa chúng.
Phần tử <hr /> có khoảng trắng giữa các ký tự hr và dấu gạch chéo về phía trước. Nếu bạn bỏ qua khoảng trắng này, các trình duyệt cũ hơn sẽ gặp khó khăn khi hiển thị đường kẻ ngang, trong khi nếu bạn bỏ lỡ ký tự gạch chéo chuyển tiếp và chỉ sử dụng <hr> thì nó không hợp lệ trong XHTML
Thẻ giữ nguyên định dạng
Đôi khi, bạn muốn văn bản của bạn tuân theo định dạng chính xác về cách nó được viết trong tài liệu HTML. Trong những trường hợp này, bạn có thể sử dụng thẻ định dạng <pre> .
Bất kỳ văn bản nào giữa thẻ <pre> mở và thẻ đóng </ pre> sẽ giữ nguyên định dạng của tài liệu nguồn.
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>Đây là kết quả:
Bạn hãy thử xóa cặp thẻ <pre></ pre> rồi xem kết quả nhé.
Ký tự khoảng trắng
Giả sử bạn muốn sử dụng cụm từ “12 Angry Men”. Tại đây, bạn sẽ không muốn trình duyệt chia “12 Angry” và “Men” thành hai dòng:
An example of this technique appears in the movie "12 Angry Men."Trong trường hợp, khi bạn không muốn trình duyệt máy khách ngắt văn bản, bạn nên sử dụng ký tự khoảng trắng thay vì một khoảng trắng bình thường.
Ví dụ: khi viết code “12 Angry Men” trong một đoạn văn, bạn nên sử dụng một cái gì đó tương tự như đoạn mã sau:
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>Đây là kết quả:
Các phần tử trong HTML
Một phần tử HTML được xác định bởi một thẻ bắt đầu. Nếu phần tử chứa nội dung khác, nó kết thúc bằng thẻ đóng, trong đó tên phần tử được bắt đầu bằng dấu gạch chéo về phía trước như được hiển thị bên dưới với một vài thẻ
| Thẻ bắt đầu | Nội dung của thẻ | Thẻ kết thúc |
|---|---|---|
| <p> | Đây là nội dung đoạn văn. | </ p> |
| <h1> | Đây là tiêu đề nội dung. | </ h1> |
| <div> | Đây là nội dung phân chia. | </ div> |
| <br /> |
Vì vậy, ở đây <p> …. </ p> là một phần tử HTML, <h1> … </ h1> cũng là một phần tử HTML.
Có một số phần tử HTML không cần phải đóng, chẳng hạn như các phần tử <img … /> , <hr /> và <br /> . Chúng được gọi là các phần tử rỗng .
Tài liệu HTML là một cây bao gồm các thành phần này và chúng chỉ định cách xây dựng tài liệu HTML và loại nội dung nào sẽ được đặt trong phần nào của tài liệu HTML.
So sánh thẻ với phần tử trong HTML
Một phần tử HTML được xác định bởi một thẻ bắt đầu . Nếu phần tử chứa nội dung khác, nó kết thúc bằng thẻ đóng .
Ví dụ: <p> là thẻ bắt đầu của một đoạn và </ p> là thẻ đóng của cùng một đoạn nhưng <p> Đây là đoạn </ p> là phần tử.
Các phần tử HTML lồng nhau
Bạn sẽ thương xuyên bắt gặp một phần tử HTML ở bên trong một phần tử HTML khác:
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>Đây là kết quả:
Thuộc tính trong HTML
Chúng ta đã xem một số thẻ HTML và cách sử dụng của chúng như thẻ tiêu đề <h1>, <h2>, thẻ đoạn văn bản <p> và các thẻ khác.
Chúng ta đã sử dụng chúng ở dạng đơn giản nhất, nhưng hầu hết các thẻ HTML có các thuộc tính, đó là các thông tin bổ sung.
Một thuộc tính được sử dụng để xác định các đặc điểm của một phần tử HTML và được đặt bên trong thẻ mở của phần tử. Tất cả các thuộc tính được tạo thành từ hai phần là tên và giá trị.
- Tên là thuộc tính bạn muốn thiết lập cho thẻ. Ví dụ: thẻ <p> trong ví dụ dưới đây có thuộc tính là align được sử dụng để chỉ ra sự liên kết của đoạn trên trang.
- Giá trị là những gì bạn muốn thiết lập cho thuộc tính và luôn đặt trong cặp dấu nháy kép. Ví dụ dưới đây cho thấy ba giá trị có thể của thuộc tính align: left, center và right.
Tên thuộc tính và giá trị thuộc tính không phân biệt chữ hoa chữ thường. Tuy nhiên, World Wide Web Consortium (W3C) khuyến nghị sử dụng chữ thường cho các thuộc tính / giá trị thuộc tính trong đề xuất HTML 4 của họ.
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>Đây là kết quả:
Các thuộc tính cốt lõi
Bốn thuộc tính cốt lõi có thể được sử dụng trên phần lớn các phần tử HTML (mặc dù không phải tất cả) là:
- id
- title
- class
- style
Thuộc tính id
Thuộc tính id của một thẻ HTML có thể được sử dụng để nhận diện bất kỳ yếu tố trong một trang HTML. Có hai lý do chính mà bạn có thể muốn sử dụng thuộc tính id trên một phần tử:
- Nếu một phần tử có thuộc tính id là một định danh duy nhất, bạn có thể định danh phần tử đó và nội dung của nó.
- Nếu bạn có hai phần tử giống nhau trong một trang web và bạn muốn phân biệt chúng, bạn có thể sử dụng thuộc tính id.
Chúng ta sẽ thảo luận về phong cách trong một hướng dẫn khác. Hiện tại, hãy sử dụng thuộc tính id để phân biệt giữa hai thành phần đoạn văn như dưới đây.
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style Sheet</p>Thuộc tính title
Thuộc tính title là một tiêu đề gợi ý cho phần tử. Cú pháp của thuộc tính title tương tự như được giải thích cho thuộc tính id.
Hành vi của thuộc tính này sẽ phụ thuộc vào phần tử mang nó, mặc dù nó thường được hiển thị dưới dạng một tooltip khi con trỏ đi qua phần tử hoặc trong khi phần tử đang tải.
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>Đây là kết quả:
Khi đưa con trỏ chuột của bạn qua “Titled Heading Tag Example” và bạn sẽ thấy tooltip “Hello HTML!” hiện ra.
Thuộc tính class
Thuộc tính class được sử dụng để kết hợp một phần tử với một style sheet, và được sử dụng để xác định lớp của phần thử. Bạn sẽ tìm hiểu thêm về việc sử dụng thuộc tính class khi bạn học Cascading Style Sheet (CSS). Vì vậy, bây giờ bạn có thể bỏ qua nó.
Giá trị của thuộc tính cũng có thể là một danh sách các tên lớp được phân cách bằng khoảng trắng. Ví dụ:
class="class-name1 class-name2 class-name3"Thuộc tính style
Thuộc tính style cho phép bạn chỉ định quy tắc Cascading Style Sheet (CSS) trong phần tử.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>Đây là kết quả:
Tại thời điểm này, chúng ta không học CSS, vì vậy hãy tiếp tục mà không cần bận tâm nhiều về CSS. Ở bài viết này, bạn chỉ cần hiểu các thuộc tính HTML là gì và làm thế nào chúng có thể được sử dụng trong khi định dạng nội dung.
Thuộc tính quốc tế hóa
Có ba thuộc tính quốc tế hóa, có sẵn cho hầu hết (mặc dù không phải tất cả) các phần tử XHTML.
- dir
- lang
- xml:lang
Thuộc tính dir
Thuộc tính dir chỉ cho các trình duyệt về hướng trong đó văn bản. Thuộc tính dir có thể lấy một trong hai giá trị, như bạn có thể thấy trong bảng sau:
| Giá trị | Ý nghĩa |
|---|---|
| ltr | Trái sang phải (giá trị mặc định) |
| rtl | Phải sang trái (đối với các ngôn ngữ như tiếng Do Thái hoặc tiếng Ả Rập được đọc từ phải sang trái) |
<!DOCTYPE html>
<html dir = "rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>Đây là kết quả:
Khi thuộc tính dir được sử dụng trong thẻ <html>, nó xác định cách văn bản sẽ được trình bày trong toàn bộ tài liệu. Khi được sử dụng trong một thẻ khác, nó sẽ điều khiển hướng của văn bản chỉ cho nội dung của thẻ đó.
Thuộc tính lang
Thuộc tính lang cho phép bạn chỉ ra ngôn ngữ chính được sử dụng trong một tài liệu, nhưng thuộc tính này đã được giữ trong HTML chỉ để tương thích ngược với các phiên bản trước của HTML. Thuộc tính này đã được thay thế bằng thuộc tính xml: lang trong các tài liệu XHTML mới.
Các giá trị của thuộc tính lang là mã ngôn ngữ hai ký tự chuẩn ISO-639. Kiểm tra mã ngôn ngữ HTML: ISO 639 để biết danh sách đầy đủ các mã ngôn ngữ.
<!DOCTYPE html>
<html lang="en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>Đây là kết quả:
Các thuộc tính xml:lang
Các thuộc tính xml:lang là sự thay thế cho thuộc tính lang trong XHTML. Giá trị của thuộc tính xml:lang phải là mã quốc gia ISO-639 như đã đề cập trong phần trước.
Thuộc tính chung
Đây là bảng một số thuộc tính khác có thể sử dụng được với nhiều thẻ HTML.
| Thuộc tính | Tùy chọn | Chức năng |
|---|---|---|
| align | right, left, center | Sắp xếp các thẻ theo chiều ngang |
| valign | top, middle, bottom | Sắp xếp theo chiều dọc các thẻ trong một phần tử HTML. |
| bgcolor | giá trị số, thập lục phân, RGB | Đặt màu nền cho một phần tử |
| background | URL | Đặt một hình ảnh nền cho một phần tử |
| id | Người dùng định nghĩa | Đặt tên cho một phần tử để sử dụng với Cascading Style Sheets. |
| class | Người dùng định nghĩa | Phân loại một phần tử để sử dụng với Cascading Style Sheets. |
| width | Giá trị số | Chỉ định chiều rộng của bảng, hình ảnh hoặc ô bảng. |
| height | Giá trị số | Chỉ định chiều cao của bảng, hình ảnh hoặc ô bảng. |
| title | Người dùng định nghĩa | Tiêu đề “Pop-up” của các phần tử. |
Chúng ta sẽ xem các ví dụ liên quan đến chúng ở ở những bài viết về các thẻ HTML khác.