Hướng dẫn và ví dụ HTML Block/Inline Elements

Inline/Block Elements
Div Element
Span Element

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.

Hướng dẫn và ví dụ CSS Display

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>

Hướng dẫn và ví dụ HTML Block/Inline Elements

1. Inline/Block Elements

2. Div Element

3. Span Element

Các hướng dẫn HTML

Các hướng dẫn HTML

Các bài viết mới nhất