Tại sao việc lạm dụng thẻ
để tạo khoảng cách dòng trong bố cục HTML lại là mộtanti-pattern trong các dự án Enterprise, và cách tiếp cận chuẩn mực bằng CSS là gì?

Question

Accepted Answer

Thẻ  (line break) trong HTML có nhiệm vụ duy nhất là ngắt dòng văn bản bên trong một đoạn văn (ví dụ: địa chỉ, thơ ca). Việc sử dụng  liên tiếp để tạo khoảng cách (spacing) giữa các thành phần giao diện là một lỗi thiết kế phổ biến của lập trình viên Junior.
Tác động tiêu cực:

Phá vỡ tính ngữ nghĩa (Semantic HTML): Làm cho cây DOM mất đi cấu trúc logic, khiến các thiết bị hỗ trợ người khuyết tật (Screen Readers) đọc ngắt quãng sai ngữ cảnh.
Khó khăn trong bảo trì (Maintainability): Khi thay đổi thiết kế giao diện (Responsive Design), việc dùng  cố định không thể điều chỉnh khoảng cách linh hoạt trên các thiết bị màn hình khác nhau như điện thoại hay máy tính bảng.
Ảnh hưởng SEO: Công cụ tìm kiếm đánh giá thấp các trang web lạm dụng thẻ HTML không đúng mục đích cấu trúc nội dung.

Giải pháp chuẩn mực:

Sử dụng CSS Margin và Padding để kiểm soát khoảng cách không gian.
Sử dụng các mô hình bố cục hiện đại như CSS Flexbox hoặc CSS Grid với thuộc tính 'gap' để quản lý khoảng cách giữa các phần tử một cách đồng bộ và chuyên nghiệp.

Tại sao việc lạm dụng thẻ <br> để tạo khoảng cách dòng trong bố cục HTML lại là mộtanti-pattern trong các dự án Enterprise, và cách tiếp cận chuẩn mực bằng CSS là gì?

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi html liên quan cùng chủ đề