Hướng dẫn chèn khoảng trắng trong HTML đúng chuẩn

24/06/2025

Nội dung bài viết

Bài viết này sẽ hướng dẫn bạn cách chèn khoảng trắng và ngắt dòng trong HTML. Khác với văn bản thông thường, HTML chỉ hiển thị một khoảng trắng dù bạn nhập nhiều dấu cách. Do đó, cần sử dụng các thẻ HTML chuyên dụng để tạo nhiều khoảng trắng theo ý muốn.

Quy trình thực hiện

Áp dụng HTML

Mở file HTML. Bạn có thể chỉnh sửa file HTML bằng trình soạn thảo văn bản cơ bản như Notepad (Windows) hoặc TextEdit (Mac). Nếu chuyên nghiệp hơn, hãy dùng phần mềm thiết kế web như Adobe Dreamweaver. Các bước mở file HTML:

Tìm đến file HTML cần chỉnh sửa trong File Explorer (Windows) hoặc Finder (Mac)
Nhấp chuột phải vào file HTML
Di chuyển tới mục Open with (Mở bằng)
Chọn phần mềm bạn muốn sử dụng để chỉnh sửa

Sử dụng phím cách để tạo khoảng trống cơ bản. Chỉ cần đặt con trỏ tại vị trí cần chèn và nhấn phím cách. Lưu ý rằng HTML mặc định chỉ hiển thị một khoảng trống duy nhất bất kể số lần nhấn phím cách.

Dùng   để tạo khoảng trống cố định. Đây là khoảng trống không bị ngắt dòng, giúp duy trì bố cục văn bản.

Ví dụ: Xin chào sẽ giữ nguyên khoảng cách giữa hai từ
Lưu ý: Sử dụng quá nhiều sẽ khiến văn bản khó đọc và phá vỡ bố cục tự nhiên
Bạn cũng có thể dùng   với chức năng tương tự

Tạo các khoảng trống đa dạng với kích thước khác nhau. HTML cung cấp nhiều lựa chọn để kiểm soát khoảng cách:

Khoảng trống trung bình - Sử dụng &ensp; (2 khoảng trống)
Khoảng trống rộng - Dùng &emsp; (4 khoảng trống)
Thụt lề đoạn văn - Kết hợp

Tận dụng sức mạnh của CSS

Chuẩn bị file HTML hoặc CSS. Bạn có thể nhúng CSS trực tiếp trong phần head của HTML hoặc tạo file CSS riêng.

Phần head nằm giữa cặp thẻ <head> và </head> ở đầu file HTML
File CSS riêng giúp quản lý style dễ dàng hơn cho website lớn

Thiết lập vùng CSS chuyên biệt. Bạn có thể đặt đoạn mã CSS trong phần head của HTML hoặc file CSS riêng. Cú pháp cơ bản:

Mở khối CSS bằng thẻ <style>
Đóng khối CSS bằng thẻ </style>
Mọi quy tắc CSS cần nằm giữa hai thẻ này

Áp dụng thuộc tính thụt đầu dòng: p {text-indent: 5em;}. Thuộc tính này giúp tạo lề cho đoạn văn một cách chuyên nghiệp.

Điều chỉnh giá trị '5em' để thay đổi độ rộng thụt lề
Đơn vị 'em' linh hoạt theo cỡ chữ, có thể thay bằng px, %, cm tùy nhu cầu
Ví dụ: 'text-indent: 20px' hoặc 'text-indent: 10%'

Đánh dấu vị trí cần thụt lề bằng thẻ <p>. Thẻ này sẽ áp dụng tự động các thuộc tính CSS đã định nghĩa trước đó, giúp văn bản có bố cục rõ ràng và chuyên nghiệp hơn.

Khám phá các mẫu định dạng có sẵn

Chuẩn bị file HTML để chỉnh sửa. Bạn có thể sử dụng:

Trình soạn thảo cơ bản: Notepad (Windows), TextEdit (Mac)
Phần mềm chuyên dụng: Adobe Dreamweaver, VS Code
Cách mở file:
1. Tìm file trong File Explorer/Finder
2. Nhấp chuột phải chọn Open with
3. Chọn phần mềm mong muốn

Khởi tạo vùng định dạng nguyên bản với thẻ <pre>. Thẻ này bảo toàn mọi khoảng trắng và ngắt dòng như bản gốc, mang đến sự chân thực tuyệt đối cho nội dung.

Nhập nội dung cần hiển thị ngay sau thẻ <pre>. Mọi định dạng, bao gồm khoảng cách và xuống dòng, sẽ được trình duyệt tôn trọng và hiển thị chính xác như bạn nhập.

Kết thúc khối định dạng với thẻ </pre>. Đây là bước quan trọng để hoàn thiện vùng nội dung được định dạng sẵn.

Góc kinh nghiệm

• Gặp lỗi hiển thị ký tự? Ưu tiên dùng trình soạn thảo văn bản thuần túy để đảm bảo nội dung sạch sẽ
• CSS - giải pháp tối ưu để kiểm soát khoảng cách và bố cục với độ chính xác cao
• Thực thể   - công cụ hữu ích khi cần khoảng trắng cố định không bị gộp

Lưu ý quan trọng

• Ký tự tab HTML 	 không hoạt động như phím Tab thông thường. Trong HTML, tab chỉ là khoảng trắng thông thường không có chức năng đặc biệt.
• Luôn sử dụng trình soạn thảo code chuyên dụng hoặc file văn bản thuần (plain text) để viết HTML, tránh dùng phần mềm xử lý văn bản có định dạng phức tạp.

Du lịch

Ẩm thực

Khám phá

Đi Phượt

Vẻ đẹp Việt Nam

Chuyến đi