HTML – Block

126
HTML – Block

Hầu hết HTML elements được định nghĩa block level elements hoặc inline elements.

Block Element

Block level element thường bắt đầu và kết thúc với một dòng mới khi hiển thị trên trình duyệt. Ví dụ như <p>, <h1>, <h2>, <h3>, <h4> <h5> <h6>, <ul>, <ol>, <dl>, <pre>, <hr / >, <blockquote>, và <address>.

Inline Element

Inline element thường hiển thị mà không cần xuống dòng. Các thẻ <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < code>, <cite>, <DFN>, <kbd>, và <var> là các Inline Element.

Có 2 thẻ quan trọng mà chúng ta sử dụng thường xuyên để tạo nhóm các thẻ HTML khác là<div> và <span>.

Thẻ <div>

Đây là một block level element rất quan trọng đóng vai trò lớn trong việc tạo nhóm các thẻ HTML khác. Thẻ <div> có thể được sử dụng để bố trí layout của trang web, như xác định các phần khác nhau (trái, phải, trên,…) của trang.

Khi sử dung song song với CSS, thẻ <div> có thể sử dụng để chỉnh style của content.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>

</body>
</html>

Kết quả:

HTML – Block - 01

Thẻ <span>

Thẻ <span> là một inline element và có thể được sử dụng để tạo nhóm nội tuyến trong tài liệu HTML.

Không giống với thẻ <div>, thẻ <span> không có định dạng mặc định.

Khi sử dụng cùng với CSS, thẻ <span> có thể dùng để chỉnh style của một phần văn bản:

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h1>My <span style="color:red">Important</span> Heading</h1>

</body>
</html>

Kết quả:

HTML – Block - 02