Làm thế nào để kiểm soát khối văn bản trong HTML5

Khối văn bản xây dựng nền tảng của trang web của bạn. Bạn sử dụng các khối văn bản để tạo ra những thứ như tiêu đề, đoạn văn, và danh sách. Bạn có thể phá vỡ các khối thành các phần nhỏ hơn để hướng dẫn người đọc thông qua nội dung của bạn tốt hơn.

Báo giá khối

Báo giá khối là trích dẫn, hoặc trích đoạn từ một nguồn có bản quyền, mà bạn đã đặt trên một trang. Sử dụng phần tử để kèm theo báo giá:

Trong một xã hội hoàn toàn hợp lý, điều tốt nhất trong chúng ta sẽ là giáo viên và phần còn lại của chúng ta sẽ phải giải quyết cho cái gì khác.

Hầu hết các trình duyệt web hiển thị nội dung trích dẫn khối với một lề trái nhỏ, như thể hiện trong hình này.










Văn bản định sẵn

Thông thường, HTML sẽ bỏ qua khoảng trắng bên trong các tài liệu. Đó là lý do tại sao một trình duyệt sẽ không hiển thị bất kỳ phần tử

Lợi tức cứng của phần tử khối.

Ngắt dòng.

Không gian trắng lớn.

Các đánh dấu sau đây bao gồm các trả về cứng khác nhau, các ngắt dòng, và nhiều không gian. Hình này cho thấy rằng trình duyệt web bỏ qua tất cả những điều này.

• Đây là một đoạn văn có rất nhiều không gian trắng ném vào niềm vui (và như là một bài kiểm tra tất nhiên).

• Thành phần văn bản được định dạng sẵn (

) hướng dẫn các trình duyệt giữ nguyên toàn bộ không gian trắng trong khi nó hiển thị nội dung của bạn. (Như thể hiện trong mẫu mã) Sử dụng phần tử

thay cho phần tử

để làm cho trình duyệt áp dụng toàn bộ không gian trắng của bạn, như thể hiện trong hình.

Khoảng trống trắng

Đây là đoạn văn có rất nhiều không gian trắng được ném vào để vui vẻ (và như một bài kiểm tra tất nhiên).
Bạn có thể muốn trình duyệt hiển thị không gian trắng trong trang HTML có khoảng trống phù hợp, chẳng hạn như
Mẫu mã

Dữ liệu cột, số hoặc văn bản nhạy cảm định dạng khác
Bảng văn bản < Bạn có thể tổ hợp


các phần tử bên trong


để kiểm soát chặt chẽ cách dòng văn bản được trích dẫn xuất hiện trên trang. Hoặc tốt hơn nữa, hãy quên các thẻ này và sử dụng CSS để đặt khối văn bản bên trong phần tử.


Quy tắc ngang


Sử dụng phần tử quy tắc ngang (hr) cho phép bạn bao gồm các đường kẻ thẳng đứng được gọi là


quy tắc
trên trang của bạn.

Trình duyệt tạo ra nguyên tắc dựa trên phần tử hr, vì vậy người dùng không đợi đồ họa để tải xuống. Quy tắc ngang là một lựa chọn tốt để


Chia trang thành các phần hợp lý.
Riêng các tiêu đề và cuối trang từ phần còn lại của trang. Định dạng Khi bạn thêm phần tử
vào trang của bạn, như trong HTML sau đây, trình duyệt sẽ thay thế bằng một dòng, như thể hiện trong hình.


Quy tắc ngang


Đây là đoạn văn theo sau là quy tắc ngang.



Đây là một đoạn văn đứng trước một nguyên tắc ngang.
Nguyên tắc ngang luôn đặt trên một đường thẳng; bạn không thể thêm phần tử ở giữa đoạn văn (hoặc phần tử khối khác) và mong đợi quy tắc xuất hiện ở giữa khối.

Bit HTML sau đây tạo ra một quy tắc ngang chiếm 45 phần trăm chiều rộng trang, cao 4 pixel (px), được căn lề với trung tâm, và đã tắt bóng:
Đây là đoạn văn sau bởi một quy tắc ngang.
Đây là một đoạn văn đứng trước một nguyên tắc ngang.

Hình minh họa cho thấy cách thêm các thuộc tính trong ví dụ trước làm thay đổi cách một quy tắc xuất hiện. (Lưu ý:
Các thuộc tính này không được dùng nữa và được thay bằng các CSS tương đương. Các thuộc tính không được chấp nhận được bao gồm trực tuyến, và mã HTML trước không hợp lệ.)