Như câu hỏi đã chỉ ra, nếu tôi có một số văn bản mà tôi muốn thêm vào HTML thì khi nào tôi nên sử dụng <p>và khi nào tôi nên sử dụng <span>?
Câu trả lời:
Bạn nên nhớ rằng HTML nhằm mục đích MÔ TẢ nội dung mà nó chứa.
Vì vậy, nếu bạn muốn chuyển tải một đoạn văn, hãy làm như vậy.
Tuy nhiên, so sánh của bạn không chính xác. So sánh trực tiếp hơn sẽ là
Khi nào sử dụng a
<div>thay vì a<p>?
vì cả hai đều là các phần tử cấp khối.
A <span>là nội dòng, giống như một anchor ( <a>), <strong>emphasis ( <em>), v.v., vì vậy hãy nhớ rằng theo bản chất mặc định trong cả html và trong văn bản tự nhiên, một đoạn văn sẽ gây ra ngắt quãng trước và sau, như một <div>.
Đôi khi, khi tạo kiểu cho mọi thứ - những thứ nội tuyến - a <span>là một điều tuyệt vời để cung cấp cho bạn thứ gì đó để "kết nối" css, nhưng nếu không thì đó là một thẻ trống không có ý nghĩa ngữ nghĩa hoặc kiểu cách.
pvới trên span. Trên đoạn văn, padding ảnh hưởng đến mọi dòng (khối văn bản), trong khi trên span, nó chỉ ảnh hưởng đến dòng đầu tiên.
Các <p>thẻ là một paragraph, và như vậy, nó là một khối nguyên tố (như là, ví dụ, h1và div), trong khi đó spanlà một yếu tố nội tuyến (như, ví dụ, bvà a)
Các phần tử khối theo mặc định tạo ra một số khoảng trắng ở trên và dưới chính chúng và không có gì có thể được căn chỉnh bên cạnh chúng, trừ khi bạn đặt floatthuộc tính cho chúng.
Các phần tử nội tuyến xử lý các khoảng văn bản bên trong một đoạn văn. Chúng thường không có lề, và như vậy, chẳng hạn, bạn không thể đặt widthcho nó.
Span hoàn toàn không có ngữ nghĩa. Nó không có ý nghĩa gì, và chỉ đóng vai trò như một yếu tố tạo hiệu ứng thẩm mỹ.
Các đoạn văn có ý nghĩa ngữ nghĩa - chúng nói với máy (như trình duyệt hoặc trình đọc màn hình) rằng nội dung mà chúng đóng gói là một khối văn bản và có cùng ý nghĩa với một đoạn văn bản trong sách.
Nói theo ngữ nghĩa, ap là một thẻ đoạn văn và nên được sử dụng để định dạng một đoạn văn bản. Khoảng là một thay đổi định dạng nội tuyến không được xử lý về mặt ngữ nghĩa.
Khoảng là một phần tử định dạng nội tuyến KHÔNG có nguồn cấp dòng ở trên hoặc dưới.
Một p là một phần tử khối CÓ nguồn cấp dữ liệu dòng ngụ ý ở trên và dưới.
Giải thích thực tế: Theo mặc định, <p> </p>sẽ thêm ngắt dòng trước và sau văn bản kèm theo (vì vậy nó tạo ra một đoạn văn). <span>không làm điều này, đó là lý do tại sao nó được gọi là nội tuyến .
Thẻ p biểu thị một phần tử đoạn văn. Nó có lề / đệm được áp dụng cho nó. Khoảng là một thẻ nội tuyến chưa được định kiểu. Một sự khác biệt quan trọng là p là một phần tử khối khi nhịp nằm trong dòng, có nghĩa là nó <p>Hi</p><p>There</p>sẽ xuất hiện trên các dòng khác nhau khi <span>Hi</span><span>There</span>cuộn lên cạnh nhau.
thẻ là một phần tử cấp khối nhưng thẻ là phần tử nội tuyến. Thông thường chúng tôi sử dụng thẻ span để tạo kiểu bên trong các phần tử khối. nhưng bạn không cần phải sử dụng thẻ span để tạo kiểu nội tuyến. bạn phải làm là; chuyển đổi phần tử khối thành phần tử nội tuyến bằng cách sử dụng "display: inline"
pcó thể không nhất thiết phải được tạo kiểu với các dấu ngắt dòng xung quanh, chẳng hạn, nó có thể được theo sau bởi một biểu tượng dấu chấm nội tuyến . Các thuật ngữ "nội tuyến" và "khối" cũng không có nghĩa gì đối với người dùng. Thay vào đó, hãy phân biệt giữa nội dung luồng và nội dung theo cụm từ (xem liên kết này ).