Hướng dẫn sử dụng HTML Block/Inline Elements

Xem thêm các chuyên mục:

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

1- Inline/Block Elements

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

Block-level Elements

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ó.
<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ó.
div-inline-example.html
<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 Elements

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ó.
<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> (if it has visible controls)
  • <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ó.
span-block-example.html
<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.

2- 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,....
div-css-example.html
<!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>

3- 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,...
span-css-example.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>

Xem thêm các chuyên mục: