Thẻ tag hay các element là các khối xây dựng của HTML, mô tả cấu trúc và nội dung của một trang web. Cùng xem qua những kiến thức về chúng nhé!
Element trong HTML là gì?
Element là các khối xây dựng của HTML, mô tả cấu trúc và nội dung của một trang web. Chúng là phần “Đánh dấu” của Ngôn ngữ Đánh dấu Siêu văn bản (HTML).
Cú pháp HTML sử dụng dấu ngoặc nhọn (”<” và ”>”) để giữ tên của một phần tử HTML. Các phần tử thường có thẻ mở, thẻ đóng và cung cấp thông tin về nội dung mà chúng chứa. Sự khác biệt giữa hai thẻ này là thẻ đóng có dấu gạch chéo.
Hãy xem một số ví dụ cụ thể về HTML tag.
Thẻ p
Thẻ <p> là viết tắt của đoạn văn, là thẻ phổ biến nhất sử dụng để tạo các dòng văn bản bên trong tài liệu HTML.
Việc sử dụng thẻ <p> tương thích với các thẻ khác cho phép thêm các hyperlink (<a>) và văn bản in đậm (<strong>).
Ví dụ
<html>
<head>
<title>Ví dụ về đoạn văn</title>
</head>
<body>
<p>
Đây là một đoạn văn. Là đoạn đầu tiên trong số nhiều đoạn.
</p>
<p>
Đây là một đoạn văn khác. Nó sẽ xuất hiện trên một dòng riêng biệt.
</p>
</body>
</html>Bạn cũng có thể lồng một phần tử anchor <a> trong một đoạn văn.
Ví dụ
<p>Here's a <a href="https://freecodecamp.org">link to freeCodeCamp</a>.</p>Thẻ Heading
Có sáu phần tử tiêu đề : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
Các yếu tố tiêu đề sử dụng để biểu thị tầm quan trọng của nội dung bên dưới chúng. Số lượng tiêu đề càng thấp thì tầm quan trọng càng cao.
Ví dụ: <h1> đại diện cho tiêu đề chính của trang và chỉ nên có một phần tử này trên mỗi trang. Điều này giúp các công cụ tìm kiếm hiểu được chủ đề chính của trang. <h2> có ít tầm quan trọng hơn và phải thấp hơn <h1> .
Ví dụ
<h1>Đây là tiêu đề chính.</h1>
<h2>Đây là tiêu đề phụ h2.</h2>
<h3>Đây là tiêu đề phụ h3.</h3>
<h4>Đây là tiêu đề phụ h4.</h4>
<h5>Đây là tiêu đề phụ h5.</h5>
<h6>Đây là tiêu đề phụ h6.</h6>Thẻ a
Anchor (<a>) tạo một siêu liên kết đến một trang hoặc tệp khác. Để liên kết đến một trang hoặc tệp khác, <a> cũng phải chứa href , cho biết điểm đến của liên kết.
Văn bản giữa các <a> sẽ trở thành liên kết. Văn bản này phải là một mô tả có ý nghĩa về đích liên kết và không phải là một cụm từ chung chung, như “Nhấp vào đây”. Điều này cho phép người dùng điều hướng giữa các liên kết khác nhau trên một trang và hiểu được nội dung mà từng liên kết sẽ liên kết đến.
Theo mặc định, một trang được liên kết sẽ hiển thị trong cửa sổ trình duyệt hiện tại, trừ khi một mục tiêu khác được chỉ định. Các kiểu liên kết mặc định như sau:
- Liên kết chưa truy cập được gạch dưới và màu xanh lam
- Một liên kết đã truy cập được gạch dưới và màu tím
- Một liên kết đang hoạt động được gạch chân và màu đỏ
Ví dụ:
<a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>Bạn cũng có thể tạo liên kết đến một phần khác trên cùng một trang:
<h1 id="top"></h1>
<a href= "#top">đầu trang</a>Một hình ảnh cũng có thể được chuyển thành liên kết bằng cách đặt thẻ <img> vào thẻ <a> :
<a href= "https://guide.freecodecamp.org/"><img src="logo.svg"></a>Thẻ Danh sách (list)
Có hai loại danh sách chính trong HTML: có thứ tự (<ol>) và không có thứ tự (<ul >). Tất cả các danh sách phải chứa một hoặc nhiều phần tử danh sách (<li>).
Danh sách không theo thứ tự
Danh sách không có thứ tự bắt đầu bằng thẻ <ul> và các mục danh sách bắt đầu bằng thẻ <li> . Trong danh sách không có thứ tự, tất cả các mục được đánh dấu bằng dấu đầu dòng theo mặc định.
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>Output:
- Item
- Item
- Item
Danh sách theo thứ tự
Danh sách có thứ tự bắt đầu bằng thẻ <ol> và các mục danh sách bắt đầu bằng thẻ <li> . Trong danh sách có thứ tự, tất cả các mục được đánh dấu bằng số.
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>Output:
- Mục đầu tiên
- Mục thứ hai
- Mục thứ ba
Thẻ em
< em> được sử dụng để nhấn mạnh văn bản trong tài liệu HTML. Thực hiện bằng cách gói văn bản bạn muốn được nhấn mạnh trong thẻ <em> và thẻ </em> tương ứng. Hầu hết các trình duyệt sẽ hiển thị văn bản được bao bọc trong thẻ <em> in nghiêng.
Lưu ý: Không nên dùng <em> để in nghiêng về mặt phong cách. Thông thường, định dạng CSS sẽ sử dụng để in nghiêng văn bản theo phong cách.
Ví dụ
<body>
<p>
Văn bản yêu cầu nhấn mạnh phải ở <em>đây</em>.
</p>
</body>Thẻ i
<i> sử dụng để biểu thị văn bản được đặt tách biệt với văn bản xung quanh theo một cách nào đó. Theo mặc định, văn bản được bao quanh bởi thẻ <i> sẽ được hiển thị ở dạng in nghiêng.
Trong HTML trước đây, thẻ <i> chỉ được sử dụng để biểu thị văn bản được in nghiêng. Tuy nhiên, trong HTML hiện đại, các thẻ như <em> và <strong> được sử dụng khi thích hợp.
Bạn có thể sử dụng thuộc tính <i> để nêu lý do tại sao văn bản trong các thẻ khác với văn bản xung quanh. Bạn có thể muốn chứng minh văn bản hoặc cụm từ là từ một ngôn ngữ khác:
<p>Cụm từ tiếng Pháp <i class="french">esprit de corps</i>thường được sử dụng để mô tả cảm giác gắn kết nhóm và tình đồng nghiệp</p>Thẻ strong
< strong> sử dụng để biểu thị văn bản có tầm quan trọng cao hoặc khẩn cấp. Hầu hết các trình duyệt sẽ hiển thị văn bản được bao bọc trong thẻ <strong> in đậm.
Lưu ý: <strong> không nên sử dụng để tạo kiểu văn bản, hãy sử dụng CSS để làm điều đó.
Ví dụ:
<body>
<p>
<strong>Điều này</strong> thực sự quan trọng.
</p>
</body>Thẻ img
Một phần tử HTML <img> có thể được đưa vào tài liệu HTML như sau:
<img src="path/to/image/file" alt="đây là một bức tranh tuyệt vời" title="Một số văn bản mô tả có ở đây">Lưu ý rằng <img> tự đóng và không yêu cầu thẻ đóng.
Thẻ alt cung cấp văn bản thay thế cho một hình ảnh. Chúng có thể đọc alt của hình ảnh để hiểu ý nghĩa của hình ảnh.
Thuộc tính title là tùy chọn và sẽ cung cấp thêm thông tin về hình ảnh. Hầu hết các trình duyệt hiển thị thông tin này trong chú giải khi người dùng di chuột qua nó.
Lưu ý rằng đường dẫn đến tệp hình ảnh có thể là tương đối hoặc tuyệt đối. Ngoài ra, hãy nhớ rằng img tự đóng, nghĩa là không cần đóng bằng thẻ </img> và thay vào đó chỉ đóng bằng một dấu >.
Ví dụ
<img src="https://example.com/image.png" alt="hình ảnh của tôi" title="Đây là một hình ảnh mẫu">(Giả sử rằng tệp HTML có tại https://example.com/index.html, vì vậy nó nằm trong cùng một thư mục với tệp hình ảnh)
Giống như:
<img src="image.png" alt="hình ảnh của tôi" title="Đây là hình ảnh mẫu">Đôi khi một <img> cũng sẽ sử dụng hai thuộc tính khác để chỉ định kích thước, chiều cao và chiều rộng, như được hiển thị bên dưới:
<img src="image.png" alt="hình ảnh của tôi" width="650" height="400" />Các giá trị được chỉ định bằng pixel, nhưng kích thước thường được dùng trong CSS hơn là HTML.
Thẻ nav
< nav> dành cho khối liên kết điều hướng chính. KHÔNG phải tất cả các liên kết của tài liệu phải nằm trong <nav>.
Các trình duyệt, chẳng hạn như trình đọc màn hình cho người dùng bị vô hiệu, có thể sử dụng phần tử này để xác định xem có bỏ qua hiển thị ban đầu của nội dung này hay không.
Ví dụ
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>Thẻ header
Thẻ <header> là một vùng chứa sử dụng cho các liên kết điều hướng hoặc nội dung giới thiệu. Nó có thể bao gồm các phần tử tiêu đề, chẳng hạn như <h1>, <h2>, nhưng cũng có thể bao gồm các phần tử khác như biểu mẫu tìm kiếm, logo, thông tin tác giả, v.v.
Mặc dù không bắt buộc, nhưng thẻ <header> dùng để chứa tiêu đề các phần xung quanh. Nó cũng có thể sử dụng nhiều lần trong một tài liệu HTML. Điều quan trọng cần lưu ý là thẻ <header> không giới thiệu một phần mới, mà chỉ đơn giản là phần mở đầu.
Ví dụ
<article>
<header>
<h1>Tiêu đề của Trang</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>Thẻ textare
Thẻ textarea HTML cho phép bạn nhập một hộp chứa văn bản cho phản hồi hoặc tương tác của người dùng. Trong hầu hết các trường hợp, người ta thường xem vùng văn bản sử dụng như một phần của biểu mẫu.
Các lập trình viên sử dụng thẻ textarea để tạo trường đa dòng cho người dùng nhập vào (đặc biệt hữu ích trong trường hợp biểu mẫu văn bản dài). Người lập trình có thể chỉ định các thuộc tính khác nhau cho các thẻ textarea.
Thí dụ
<form>
<textarea name="Nhận xét" rows="8" cols="80" maxlength="500" placeholder="Nhập nhận xét của bạn vào đây ..." required></textarea>
</form>Các thuộc tính phổ biến nhất: thuộc tính row và cols xác định height và width của textarea, placeholder thuộc tính chỉ định văn bản hiển thị cho người dùng, nó giúp người dùng hiểu dữ liệu nào nên được nhập vào, maxlength thuộc tính xác định độ dài tối đa của văn bản có thể được nhập vào, required có nghĩa là trường này phải được điền trước khi gửi biểu mẫu.
Thẻ Label
Thẻ <label> xác định nhãn cho <input> .
Một nhãn có thể được liên kết với một phần tử bằng cách sử dụng thuộc tính “for” hoặc bằng cách đặt phần tử vào bên trong.
Ví dụ
<label for="id">Label</label>
<input type="text" name="text" id="id" value="yourvalue"><br>Hỗ trợ nền tảng
Thuộc tính (Attributes)
| Thuộc tính | Giá trị | Mô tả |
| for | element_id | chỉ định phần tử biểu mẫu nào mà label được liên kết |
| form | form_id | chỉ định một hoặc nhiều dạng mà label thuộc về |
Thuộc tính chung (Global Attribute)
Thẻ <label> hỗ trợ các thuộc tính chung trong HTML.
Thuộc tính sự kiện (Event Attribute)
Thẻ <label> hỗ trợ các thuộc tính sự kiện trong HTML.
Phần <label> không hiển thị bất kỳ đặc biệt gì cho người dùng. Tuy nhiên, nó cung cấp sự cải tiến về khả năng sử dụng cho người dùng chuột, bởi vì nếu người dùng nhấp vào văn bản trong phần tử, nó sẽ chuyển đổi điều khiển.
Thẻ Meta
Thẻ < meta> cung cấp metadata của tài liệu HTML.
Metadata sử dụng để chỉ định bộ ký tự, mô tả, từ khóa, tác giả và chế độ xem của trang.
Dữ liệu này sẽ không xuất hiện trên chính trang web, nhưng nó sẽ được người duyệt và công cụ tìm kiếm sử dụng để xác định cách trang sẽ hiển thị nội dung và đánh giá mức độ tối ưu hóa của công cụ tìm kiếm (SEO).
Ví dụ
<head>
<meta charset="UTF-8">
<meta name="description" content="Mô tả ngắn gọn về nội dung trang web tại đây">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Jane Smith">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-HTML5 đã giới thiệu một phương pháp cho phép các nhà thiết kế web kiểm soát chế độ xem thông qua thẻ <meta>.Chế độ xem là vùng hiển thị của người dùng trên một trang web. Phần tử khung nhìn <meta> cung cấp cho trình duyệt hướng dẫn về cách kiểm soát kích thước và tỷ lệ của trang -->
</head>Thẻ Div
Thẻ <div> là một vùng chứa chung một phần trong tài liệu HTML của bạn. Phần <div> được sử dụng để nhóm các phần của phần tử HTML lại với nhau và định dạng chúng bằng CSS.
<div> là phần tử cấp độ khối. Điều này có nghĩa là nó chiếm dòng riêng trên màn hình. Các phần tử ngay sau dấu <div> sẽ được đẩy xuống dòng bên dưới. Để tạo kiểu và nhóm không phải ở cấp độ khối mà ở dạng inline, bạn sẽ sử dụng thẻ <span> thay thế. Thẻ được sử dụng để nhóm các phần tử nội tuyến trong một tài liệu.
Ví dụ
Đây là ví dụ về cách hiển thị phần nội dung có cùng màu:
<div style="color:#ff0000">
<h3>heading</h3>
<p>paragraph</p>
</div>Thẻ section
Phần <section> xác định một phần mà không có phần tử HTML ngữ nghĩa cụ thể để đại diện cho nó. Thông thường, một <section> sẽ bao gồm một phần tử tiêu đề (<h1> – <h6>) làm phần tử con.
Ví dụ, một trang web có thể chia thành nhiều phần khác nhau như phần chào mừng, phần nội dung và phần liên hệ.
<section> không nên sử dụng thay cho <div> nếu cần một vùng chứa chung. Nó nên sử dụng để xác định các phần trong một trang HTML.
<html>
<head>
<title>Ví dụ về section</title>
</head>
<body>
<section>
<h1>Heading</h1>
<p>Content</p>
</section>
</body>
</html>Thẻ footer
Thẻ <footer> biểu thị phần footer của tài liệu hoặc section HTML. Thông thường, footer chứa thông tin về tác giả, bản quyền, liên hệ và sơ đồ trang web. Mọi thông tin liên hệ bên trong thẻ <footer> phải nằm trong thẻ <address> .
Ví dụ
<html>
<head>
<title>Paragraph</title>
</head>
<body>
<footer>
<p>© 2017 Joe Smith</p>
</footer>
</body>
</html>Thẻ audio
Thẻ <audio> xác định một phần tử âm thanh, có thể sử dụng để thêm phương tiện âm thanh vào tài liệu HTML. Phần tử này sẽ được phát bằng tính năng hỗ trợ phát âm thanh gốc được tích hợp sẵn trong trình duyệt thay vì một plugin.
Thẻ âm thanh hiện hỗ trợ ba định dạng tệp OGG, MP3 và WAV:
Thêm OGG
<audio controls>
<source src="file.ogg" type="audio/ogg">
</audio>Thêm MP3
<audio controls>
<source src="file.mp3" type="audio/mpeg">
</audio>Thêm WAV
<audio controls>
<source src="file.wav" type="audio/wav">
</audio>Nó có thể chứa một hoặc nhiều nguồn âm thanh, được biểu diễn bằng thuộc tính src hoặc phần tử nguồn.
Thêm nhiều tệp âm thanh
<audio controls>
<source src="file-1.wav" type="audio/wav">
<source src="file-2.ogg" type="audio/ogg">
<source src="file-3.mp3" type="audio/mpeg">
</audio>Hỗ trợ trình duyệt cho các loại tệp khác nhau như sau
Các thuộc tính được hỗ trợ
| Thuộc tính | Giá trị | Mô tả |
| autoplay | autoplay | Âm thanh sẽ bắt đầu phát ngay khi sẵn sàng |
| controls | controls | Âm thanh sẽ được hiển thị (chẳng hạn như nút phát / tạm dừng, v.v.) |
| loop | loop | Âm thanh sẽ bắt đầu lại, mọi lúc kết thúc |
| muted | muted | Output âm thanh sẽ bị tắt tiếng |
| src | URL | Chỉ định URL của tệp âm thanh |
Thẻ iframe
HTML <iframe> đại diện cho một khung nội tuyến, cho phép bạn bao gồm một tài liệu HTML độc lập thành tài liệu HTML hiện tại. <iframe> thường sử dụng để nhúng media bên thứ ba, phương tiện của riêng bạn, tiện ích con, đoạn mã hoặc nhúng các ứng dụng của bên thứ ba, chẳng hạn như biểu mẫu thanh toán.
Thuộc tính
Liệt kê bên dưới là một số thuộc tính của <iframe>:
| Thuộc tính | Mô tả |
| allowfullscreen | Đặt thành true để cho phép đặt khung ở chế độ toàn màn hình |
| frameborder | Cho trình duyệt vẽ đường viền xung quanh khung (được đặt thành 1 theo mặc định) |
| height | Chiều cao của khung trong CSS pixel |
| name | Tên cho khung |
| src | URL của trang web để nhúng |
| width | Chiều rộng của khung tính bằng pixel CSS |
Thẻ Iframe được sử dụng để thêm một trang web hoặc ứng dụng hiện có vào trang web của bạn trong một không gian nhất định.
Khi sử dụng thẻ iframe, thuộc tính src nên được sử dụng để chỉ ra vị trí của trang web hoặc ứng dụng sử dụng trong khung.
<iframe src="framesite/index.html"></iframe>Bạn có thể đặt thuộc tính chiều rộng và chiều cao để giới hạn kích thước của khung.
<iframe src="framesite/index.html" height="500" width="200"></iframe>Iframe có đường viền theo mặc định, nếu bạn muốn bỏ điều này, bạn có thể làm bằng cách sử dụng thuộc tính style và đặt thuộc tính đường viền CSS thành không.
<iframe src="framesite/index.html" height="500" width="200" style="border:none;"></iframe>Ví dụ
Nhúng video YouTube với <iframe>:
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es"
frameborder="0" allowfullscreen></iframe>Nhúng Google Maps với <iframe>:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d774386.2436462595!2d-74.53874786161381!3d40.69718109704434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e0!3m2!1sen!2sau!4v1508405930424"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>Văn bản thay thế
Nội dung giữa thẻ mở và thẻ đóng <iframe> được sử dụng làm văn bản thay thế, sẽ được hiển thị nếu trình duyệt của người xem không hỗ trợ iframe.
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>Nhắm mục tiêu iframe trong liên kết
Bất kỳ phần tử anchor nào cũng có thể nhắm mục tiêu nội dung của <iframe> . Thay vì chuyển hướng cửa sổ trình duyệt đến trang web được liên kết, nó sẽ chuyển hướng <iframe>. Để điều này hoạt động, đích thuộc tính <a> phải khớp với name thuộc tính <iframe>.
<iframe width="560" height="315" src="about:blank" frameborder="0" name="iframe-redir"></iframe>
<p><a href="https://www.youtube.com/embed/v8kFT4I31es" target="iframe-redir">Redirect the Iframe</a></p>Ví dụ này sẽ hiển thị <iframe> , nhưng khi bạn nhấp vào liên kết ở trên, nó sẽ chuyển hướng <iframe> để hiển thị video YouTube.
JavaScript và iframes
Các tài liệu được nhúng trong <iframe> có thể chạy JavaScript trong ngữ cảnh của riêng chúng (mà không ảnh hưởng đến trang web mẹ) như bình thường.
Bất kỳ tương tác tập lệnh nào giữa trang web mẹ và nội dung của <iframe> đều phải tuân theo chính sách cùng nguồn gốc. Điều này có nghĩa là nếu bạn tải nội dung của <iframe> từ một miền khác, trình duyệt sẽ chặn mọi truy cập nội dung đó bằng JavaScript.
Lời kết
Trên đây là những kiến thức cơ bản về các thẻ trong HTML và hướng dẫn về cách sử dụng chúng, hy vọng bạn đã có những kiến thức bổ ích với bài viết này!
Nguồn bài viết: freecodecamp.org
