Học HTML, Tất Cả Bài Viết, Tự Học Online

Block và Inline trong HTML – Học HTML


Trong văn bản HTML, các phần tử HTML được phân loại ra thành 2 cấp độ đó là: block và inline

Các phần tử dạng block (khối) nó được hiển thị bắt đầu bởi một dòng mới, đó là các phần tử: 
Ví dụ: <h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div> …

Các phần tử dạng inline nó hiện thị bình thường mà không có sự ngắt dòng mới, như các phần tử: 
Ví dụ: <b>, <a>, <strong>, <img>, <input>, <em>, <span> …

HTML

HTML (tiếng Anh, viết tắt cho HyperText Markup Language, hay là “Ngôn ngữ Đánh dấu Siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World Wide Web.

Code:

<!DOCTYPE html>
<html>
<body>
 
<div style="background-color:black; color:white; padding:20px;">
 
<h2>HTML</h2>
 
<p>HTML (tiếng Anh, viết tắt cho HyperText Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World Wide Web.</p>
 
</div>
 
</body>
</html>

Thành phần block và Inline trong HTML

Block và Inline là hai khái niệm cơ bản nhưng rất quan trọng khi bạn bắt tay vào thiết kế website. Hầu hết các thành phần trong HTML đều thuộc block hoặc inline. Vậy block là gì? Inline là gì?

Block là những thẻ tự động tạo một dòng mới ở đầu và ở cuối của thẻ khi hiển thị trên trình duyệt. Ví dụ như thẻ: <h1>, <p>, <ul>, <table>

Ví dụ:

Thành phần 1 <p>thành phần 2</p> thành phần 3

Trình duyệt sẽ hiển thị:

Thành phần 1
thành phần 2
thành phần 3

Thẻ P sẽ tự động tạo một dòng mới ở đầu và ở cuối thẻ. P là một thành phần kiểu block.

Inline là những thẻ hiển nội dung trên cùng một dòng (không tạo ra dòng mới, không xuống dòng). Ví dụ như thẻ: <b>, <td>, <a>, <img>

Ví dụ:

Thành phần 1 <span>thành phần 2</span> thành phần 3

Trình duyệt sẽ hiển thị:

Thành phần 1 thành phần 2 thành phần 3

Thẻ span vẫn hiển thị nội dung trên cùng một dòng. Span là một thành phần kiểu inline.

Thẻ div trong HTML

Thẻ <div> là một thẻ block có thể sử dụng để chứa các thành phần HTML khác.

Thẻ <div> không mang ý nghĩa đặc biệt nào (như thẻ <h1> dùng để định nghĩa đề mục, thẻ <a> để tạo liên kết…) và cũng không kèm theo thuộc tính bắt buộc.

Vì là một thẻ block nên khi hiển thị, trình duyệt sẽ thêm một dòng ở trước và sau thẻ.

Cùng với CSS, thẻ <div> có thể được dùng để trang trí khung bao ngoài nội dung.

Thẻ span trong HTML

Thẻ <span> trong HTML là một thẻ inline có thể sử dụng để chứa nội dung là chữ.

Cũng giống thẻ <div>, thẻ <span> không mang ý nghĩa đặc biệt nào và cũng không có thuộc tính bắt buộc.

Nếu như thẻ <div> được tự động thêm dòng mới ở đầu và cuối thì thẻ <span> lại hoàn toàn không có bất kỳ trang trí tự động nào.

Khi sử dụng cùng với CSS, thẻ <span> có thể trang trí một phần của đoạn văn bản:

<!DOCTYPE html>
<html>
<body>
 
<h1>Đề mục này <span style="color:red">rất quan trọng</span> trong trang</h1>
 
</body>
</html>

Tổng Kết:

Thẻ <div> dùng để định nghĩa khối trong HTML. Thẻ <span> định nghĩa các phần văn bản dạng inline không ngắt dòng.

Phần tử loại block thì có thể chứa các phần tử inline, phần tử inline thì không được chứa phần tử block

Ngoài ra có một số phần tử có thể sử dụng khi thì là dạng block khi thì inline như:

  • APPLET – nhúng Java applet
  • IFRAME – Inline frame
  • INS – chèn văn bản
  • MAP – image map
  • OBJECT – embedded object
  • SCRIPT – script trong HTML

Nếu có thắc mắc hoặc góp ý về bài viết này hãy để lại bình luận cho tôi phía dưới nhé. Chúc các bạn học tốt với HTML Online.

About HoanTN

Cố gắng hơn nữa ....
View all posts by HoanTN →

Leave a Reply

Your email address will not be published. Required fields are marked *