Sau khi học xong thẻ Div và thẻ Span chắc chắn bạn còn nhiều thắc mắc về cách phân biệt hai thẻ này như thế nào. Có rất nhiều bạn vẫn đang còn nhầm lẫn giữa hai loại thẻ này. Thẻ Div và Span trong HTML là hai khái niệm khác nhau. Nhưng trong quá trình thực hiện bạn sẽ có chút bối rối do bạn mối sử dụng hoặc hiểu sai về ý nghĩa của hai loại thẻ này.

Thực tế thì không chỉ bạn đang gặp vấn đề này mà còn nhiều bạn vẫn đang gặp phải những thắc mắc tương tự giống như bạn. Hôm nay chúng ta sẽ làm rõ xem thực tế thẻ Div và thẻ Span khác nhau như thế nào. Sau khi phân biệt được rồi thì bạn sẽ không còn nhầm lẫn giữa hai thẻ nữa.

Contents

Div và Span có giống nhau hay không?

Chắc chắn là không. Cơ bản mà nói thì cả hai chẳng thuộc về mặt nào của nhau ngoại trừ có chút giống nhau trong cách hiển thị mà thôi. Cả hai thẻ này đều là những thẻ trung tính. Mình đã từng đề cập về các thẻ trung tính trong bài viết về Span. Bạn còn nhớ là thẻ Span thường dùng để định dạng cho một chữ hoặc mội chuỗi chữ mà bạn muốn định dạng. Chắc chắn các bạn vẫn còn nhớ về đặc điểm của thẻ Span. Span không làm thay đổi định dạng của nội dung được đặt trong thẻ. Nếu bạn đặt hai thẻ Span đứng liền kề nhau, bạn sẽ nhận thấy sự khác biệt rất rõ ràng. Thẻ Span không xuống hàng mà nối lại với nhau.

Trong khi Div khi đặt hai thẻ Div đứng kế nhau, bạn sẽ thấy thẻ Div sẽ tự xuống hàng trong trình duyệt thay vì nối lại giống như những gì đã xảy ra với Span.

Ví dụ về sự khác nhau của thẻ Div và thẻ Span

Bạn sẽ nhìn thấy sự khác nhau ngay sau đây bằng một ví dụ khá đơn giản.

Ví dụ:

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
        <style>
            body{
                background-color: aqua;
            }
            h1{
                color: crimson;
            }
            .intro {
                background-color:peachpuff;
                
            }
        </style>
        
    </head>
    <body>
        
        
            <h1>Tổng hợp tin tức</h1>
            <p class="intro">
                    Zinedine Zidane một lần nữa cho thấy tài nghệ điều binh khiển tướng của mình trong chuyến hành quân đến El Molinon. Tại một trận chiến mà hầu hết quân tinh nhuệ đều vắng mặt, vị tướng trẻ người Pháp vẫn giúp đoàn quân áo trắng ca khúc khải hoàn trở về thánh địa Santiago Bernabeu.<br/>

                    Hãy nhìn vào con số thống kê để thấy màn trình diễn của Real ấn tượng như thế nào. Các học trò của Zidane <em>kiểm soát bóng 70%</em>, thực hiện <em>604 đường chuyền với độ chính xác lên tới 90%</em> và tung ra tổng cộng <span style="color: #ff1aff">17 pha dứt điểm</span>, <span>tức trung bình trên 5 phút lại tung ra 1 pha dứt điểm.</span>  <br/>
            
                    <img src="images/zidane.jpg"  width="500" height="300" alt="Huấn luyện viên Zinedine Zidane"/> 
                    </br>
    
                    Những số liệu như vậy, trước đây chỉ được chứng kiến ở binh đoàn Barcelona dưới thời Pep Guardiola, những người đã thiết lập nên đế chế tiqui-taca mà chuyền bóng tới đâu cỏ không mọc nổi tới đấy. Chưa hết, chiến thắng của Real được ấn định chỉ 1 phút sau khi Zidane thực hiện thay đổi người chiến thuật. Thật là bậc kỳ tài. <br/>
                </p>
            
            <div style="color:#ff6600">
                <p>
                    Phần 8 của Fast and Furious (The Fate of the Furious) vừa có màn ra mắt hoành tráng tại phòng vé Hàn với 1.428.225 khán giả trong 5 ngày đầu tiên công chiếu, thu về 10,58 triệu USD. Với kết quả này, Fast 8 đã hoàn toàn thống trị bảng xếp hạng doanh thu tuần vừa qua. Thế nhưng, nó vẫn còn kém những gì Beauty and the Beast từng làm được trong tuần đầu tiên ra mắt. "Quái Vật" nhà Disney thu hút tới 1.569.525 khán giả và thu về 11,7 triệu USD (khoảng 266 triệu VND), đáng chủ ý là bộ phim đã đạt được kết quả này chỉ sau 4 ngày.
                </p>
            </div>
            <div>Fast and Furious lập kỷ lục phòng vé.</div><div>Trong khi bộ phim Boss Baby cũng vẫn đang ổn định tại rạp.</div>

            <p class="intro" >
                Càng cận ngày công chiếu, phim điện ảnh lần thứ 21 của loạt anime trinh thám nổi tiếng với tên gọi Detective Conan: Crimson Love Letter (tạm dịch Thám Tử Lừng Danh Conan: Bức thư tình đỏ thắm) lại càng siêng năng tung hoả mù thông tin khiến khán giả đứng ngồi không yên.

                Cụ thể, sau hai trailer đầu tiên tiết lộ chủ đề chính của phim sẽ xoay quanh hai nhân vật Kazuha và Heiji, vừa qua nhà phát hành lại tiếp tục tung ra hai đoạn quảng cáo ngắn để quảng bá phim trên sóng truyền hình Nhật Bản. Điều đáng nói là cách đặt tên hai đoạn phim này lại tiếp tục gợi nên nghi vấn: Liệu có phải Heiji đã thầm thương cô bạn thân của mình từ lâu?
            </p>


        
    
    </body>
</html>

Mình đã thêm hai câu khác nhau bằng thẻ Div và cho chúng đứng cạnh nhau. Các bạn sẽ hiểu ra nguyên ý hoạt động ngay khi nhìn thấy kết quả của ví dụ này. Trong khi đó ở phần Span mình cũng làm tương tự. Cụm từ được chọn là “17 cú dứt điểm tương đương…”.

Kết quả ví dụ

Sau hai ví dụ này bạn có lẽ hiểu ra sự khác nhau của hai thẻ này. Hi vọng bạn sẽ không còn nhầm lẫn giữa hai thẻ nữa. cả hai không phải là thẻ có cùng chức năng với nhau. Div và Span vốn ở chung một “công ty” nhưng chúng chẳng có liên hệ gì với nhau cả.

Bài viết hôm nay đến đây là hết. Hẹn gặp các bạn ở những bài viết thú vị tiếp theo.