HTML Elements

Code: Default | Auth: 03cd82

Chúng ta đã biết 1 trang HTML được tạo nên từ các thẻ. Trong cấu trúc trang HTML có nhiều phần tử (Element) khác nhau. Thẻ HTML là một trong các loại phần tử tạo nên trang HTML.

Thẻ HTML gồm loại thẻ có chứa nội dung (sẽ có thẻ mở và thẻ đóng) và thẻ không chứa nội dung.

Thẻ không chứa nội dung chỉ bao gồm thẻ mở như thẻ <br>, <hr>

Thẻ có chứa nội dung bạn phải viết đầy đủ cấu trúc cả thẻ đóng và thẻ mở: <tên_thẻ> ... nội dung ...</tên_thẻ> 

Khi viết các thẻ bạn cần chú ý nguyên tắc lồng ghép thẻ. Bạn hãy xem ví dụ trong ảnh dưới đây:

Quy tắc viết thẻ html

Phân loại thẻ theo mức khối và mức dòng

Tất cả các thẻ html được phân chia thành 2 loại

  • Thẻ mức khối (block): Khi sử dụng các thẻ này thì nội dung thẻ sẽ được tách riêng thành 1 khối độc lập, khác với thẻ mức dòng. Khi sử dụng các thẻ này thì việc hiển thị sẽ bắt đầu một dòng mới.
  • Thẻ mức dòng (inline): Khi sử dụng các thẻ này thì nội dung thẻ sẽ không bị tách khối riêng, nếu để thẻ này trong 1 dòng này vẫn giữ nguyên dòng liền mạch không bị ngắt ra thành các khối riêng.

Các thẻ hiển thị mức khối

<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.

Ví dụ

<!DOCTYPE html>  
<html>  
    <head>
          <title>Các thẻ mức khối</title>
          <meta charset="UTF-8">
    </head>
<body>  
    <div style="background-color: lightblue">Khối thẻ DIV 1</div>  
    <div style="background-color: lightgreen">Khối thứ 2</div>  
    <p style="background-color: pink">Khối thứ 3</p> 
	<p>Mỗi thẻ sẽ chiếm chiều rộng 1 khối và hiển thị hết chiều rộng của màn hình.</p>
</body>  
</html>

Chạy thử code

Các thẻ hiển thị mức dòng

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.

Ví dụ

<!DOCTYPE html>  
<html>  
    <head>
          <title>Các thẻ mức dòng</title>
          <meta charset="UTF-8">
    </head>
<body>  
	Các thẻ a, span sẽ 
    <a href="https://zezo.dev">hiển thị</a>  
    <span style="background-color: cyan">trên cùng 1 dòng</span>  
       
	<p>Dòng nội dung ở trên không bị ngắt ra thành các khối riêng.</p>
</body>  
</html>

Chạy thử code