HTML - Khối
Tất cả các phần tử HTML có thể được phân loại thành hai loại (a) Phần tử cấp độ khối (b)Phần tử nội tuyến.
Phần tử khối
Các phần tử khối xuất hiện trên màn hình như thể chúng có dấu ngắt dòng trước và sau chúng. Ví dụ: các thẻ <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr Các phần tử />, <blockquote> và <address> đều là các phần tử cấp khối. Tất cả đều bắt đầu trên dòng mới của riêng mình và bất cứ thứ gì theo sau chúng đều xuất hiện trên dòng mới của chính nó.
Phần tử nội tuyến
Mặt khác, các phần tử nội dòng có thể xuất hiện trong các câu và không nhất thiết phải xuất hiện trên một dòng mới của chính chúng. <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < các phần tử code>, <cite>, <dfn>, <kbd> và <var> đều là phần tử nội tuyến.
Nhóm các phần tử HTML
Có hai thẻ quan trọng mà chúng tôi sử dụng rất thường xuyên để nhóm các thẻ HTML khác nhau (i) thẻ <div> và (ii) thẻ <span>
Thẻ <div>
Đây là thẻ cấp khối rất quan trọng, đóng vai trò lớn trong việc nhóm các thẻ HTML khác nhau và áp dụng CSS trên nhóm các phần tử. Ngay cả bây giờ, thẻ <div> có thể được sử dụng để tạo bố cục trang web nơi chúng tôi xác định các phần khác nhau (Trái, Phải, Trên cùng, v.v.) của trang bằng thẻ <div>. Thẻ này không cung cấp bất kỳ thay đổi trực quan nào trên khối nhưng điều này có nhiều ý nghĩa hơn khi nó được sử dụng với CSS.
Thí dụ
Sau đây là một ví dụ đơn giản về thẻ <div>. Chúng ta sẽ tìm hiểu Cascading Style Sheet (CSS) trong một chương riêng biệt nhưng chúng ta đã sử dụng nó ở đây để hiển thị cách sử dụng thẻ <div> -
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thẻ <span>
HTML <span> là một phần tử nội tuyến và nó có thể được sử dụng để nhóm các phần tử nội tuyến trong một tài liệu HTML. Thẻ này cũng không cung cấp bất kỳ thay đổi trực quan nào trên khối nhưng có nhiều ý nghĩa hơn khi nó được sử dụng với CSS.
Sự khác biệt giữa thẻ <span> và thẻ <div> là thẻ <span> được sử dụng với các phần tử nội dòng trong khi thẻ <div> được sử dụng với các phần tử cấp khối.
Thí dụ
Sau đây là một ví dụ đơn giản về thẻ <span>. Chúng ta sẽ tìm hiểu Cascading Style Sheet (CSS) trong một chương riêng biệt nhưng chúng ta đã sử dụng nó ở đây để chỉ ra cách sử dụng thẻ <span> -
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style = "color:red">red</span> and this is
<span style = "color:green">green</span></p>
</body>
</html>Điều này sẽ tạo ra kết quả sau: