Phần tử Block và Inline trong HTML

HTML Block và Inline Element

Anh NguyễnBạn nghĩ gì về bài viết này?

Giới thiệu

Các phần tử trong HTML được phân chia làm 2 loại: Block-Level element (phần tử khối) và Inline element (phần tử nội tuyến).

Block-level Element

Các Block-level element (phần tử khối) khi hiển thị trên trình duyệt chúng sẽ tự động thêm các ngắt dòng (line break) vào phía trước và phía sau nó.

Phần tử Block và Inline trong HTML
<h3>Block Element Example:</h3>
<hr/>
 
Tom <h1>and</h1> Jerry.

Danh sách tất cả các Block-level element (theo mặc định) của HTML5:

  • <address>
  • <article>
  • <aside>
  • <blockquote>
  • <details>
  • <dialog>
  • <dd>
  • <div>
  • <dl>
  • <dt>
  • <fieldset>
  • <figcaption>
  • <figure>
  • <footer>
  • <form>
  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <header>
  • <hgroup>
  • <hr>
  • <li>
  • <main>
  • <nav>
  • <ol>
  • <p>
  • <pre>
  • <section>
  • <table>
  • <ul>

Chú ý: Một số phần tử theo mặc định là Block-Level element, chẳng hạn <div>, nhưng bạn có thể biến đổi nó thành Inline Element nếu áp dụng CSS: {display:inline} cho nó.

<h3>DIV (Default):</h3>
 
This is a <div>DIV</div> element.
 
<hr/>
 
<h3>DIV style:{display:inline}</h3>
 
This is a <div style='display:inline'>DIV</div> element.

Inline Element

Các Inline element (phần tử nội tuyến) thường xuất hiện trong một đoạn văn (sentence), khi hiển thị trên trình duyệt nó không tự động thêm các ngắt dòng (line break) vào phía trước và phía sau của nó.

Phần tử Inline và Block trong HTML
<h3>Inline Element Example:</h3>
<hr/>
 
Tom <b>and</b> Jerry.

Danh sách tất cả các Inline element (theo mặc định) của HTML5:

  • <a>
  • <abbr>
  • <acronym>
  • <audio>
  • <b>
  • <bdi>
  • <bdo>
  • <big>
  • <br>
  • <button>
  • <canvas>
  • <cite>
  • <code>
  • <data>
  • <datalist>
  • <del>
  • <dfn>
  • <em>
  • <embed>
  • <i>
  • <iframe>
  • <img>
  • <input>
  • <ins>
  • <kbd>
  • <label>
  • <map>
  • <mark>
  • <meter>
  • <noscript>
  • <object>
  • <output>
  • <picture>
  • <progress>
  • <q>
  • <ruby>
  • <s>
  • <samp>
  • <script>
  • <select>
  • <slot>
  • <small>
  • <span>
  • <strong>
  • <sub>
  • <sup>
  • <svg>
  • <template>
  • <textarea>
  • <time>
  • <u>
  • <tt>
  • <var>
  • <video>
  • <wbr>

Chú ý: Một số phần tử theo mặc định là Inline element, chẳng hạn <span>, nhưng bạn có thể biến đổi nó thành Block-Level nếu áp dụng CSS: {display:block} cho nó.

<h3>SPAN (Default):</h3>
 
This is a <span>SPAN</span> element.
 
<hr/>
 
<h3>SPAN style:{display:block}</h3>
 
This is a <span style='display:block'>SPAN</span> element.

Div Element

<div> là một Block-level element, nó là một trong các phần tử được sử dụng nhiều nhất, và quan trọng nhất trong một tài liệu HTML, nó được sử dụng để chứa các phần tử khác, hoặc tham gia vào việc tạo nên bố cục (Layout) của trang.Theo mặc định <div> tạo ra một vùng hình chữ nhật trong suốt, nhưng bạn có thể nhìn thấy nó một cách trực quan nếu áp dụng CSS cho nó, chẳng hạn: background, border,….

<!DOCTYPE html>
<html>
 
<head>
    <title>DIV Element</title>
    <meta charset="UTF-8">
</head>
<body>
 
<h2>DIV Css Example:</h2>
 
<div style="background:#eee;width:250px;padding:5px;">
   <h3>HTML Tutorials</h3>
   <ul>
      <li>Iframe</li>
      <li>Tables</li>
      <li>Lists</li>
   </ul>
</div>
 
<p>Others ...</p>
 
</body>
</html>

Span Element

<span> là một Inline element quan trọng và được sử dụng rất nhiều trong tài liệu HTML. Nó được sử dụng để chứa các Inline element khác, hoặc chứa các nội dung văn bản. <span> tạo ra một vùng trong suốt, nhưng bạn có thể nhìn thấy nó một cách trực quan nếu áp dụng CSS cho nó, chẳng hạn: background, border,…

Phần tử Inline và Block trong HTML
<!DOCTYPE html>
<html>
 
<head>
    <title>SPAN Element</title>
    <meta charset="UTF-8">
</head>
<body>
 
<h2>Span Css Example:</h2>
 
<p>
  Apollo 11 was the spaceflight that landed the first humans,
 
  <span style="background:#eee;color:blue;padding:3px;margin:2px;">
     Americans <b>Neil Armstrong</b> and <b>Buzz Aldrin</b>,
     on the Moon on July 20, 1969, at 20:18 UTC.
  </span>
 
  Armstrong became the first to step onto the lunar surface
  6 hours later on July 21 at 02:56 UTC.
</p>
 
<p>...</p>
 
</body>
</html>

Kết luận

Qua đây là một số chia sẻ về phần tử Block và Inline trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.

Các bạn có thể tham khảo các bài viết hay về HTML tại đây.

Nguồn: https://timoday.edu.vn/bai-16-bang-trong-html/

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Bình luận