You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Những lý do để bạn nên dùng thẻ Div thay thế các thẻ phân chia trang

Những lý do để bạn nên dùng thẻ Div thay thế các thẻ phân chia trang

Thẻ Div đúng là có công hiệu rất lớn trong HTMl nhưng tại sao chúng ta lại thường xuyên dùng thẻ này nhỉ?

Xem thêm bài viết

Các trang web hiện nay đều có sử dụng  rất nhiều thẻ Div. Chức năng của thẻ Div thì các bạn cũng đã biết đến khá nhiều rồi. Chúng ta dã nói trong bài viết trước. Đồng thời chúng ta cũng đã phân tích sự khác nhau giữa Span và Div. Hai thẻ này hoàn toàn khác nhau. Chúng không có liên quan gì đến nhau cả. Bạn đừng quên và đừng sử dụng nhầm lẫn hai thẻ này với nhau. Hôm nay mình có một số lưu ý và những thông tin khá thú vị dành cho bạn về cách dùng thẻ Div trong HTML.

Div quan trọng như thế nào?

Phải khẳng định là thẻ này rất quan trọng. Đối với HTML thì bạn chưa thấy được cái sự quan trọng bậc nhất của thẻ này. Bởi bạn cũng khó thấy được. Bạn có thể trang trí một chút trong HTML để có thể thấy được một vài nét trong HTML của thẻ Div. Thẻ Div có mối liên hệ chằng chịt với những khoá học sau. Div có mối quan hệ rất lớn với CSS và JavaScript. Đây là một thẻ rất cần thiết trong HTML, CSS và JavaScript. Thẻ Div sẽ giúp cho bạn trang trí dễ dàng hơn trong CSS. Giúp bạn định hình xem mình đã chia bao nhiêu phần cho trang web của bạn. Chúng ta sẽ thực hiện các hình động trong phần JavaScript.

Chúng ta hãy xem thử ví dụ nhé!

Ví dụ

 Chúng ta sẽ mượn tạm kỹ thuật CSS cho ví dụ này.

Đoạn mã trang HTML (try.html)

<!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" />
    <link href="css/style.css" rel="stylesheet" type="text/css"/>

</head>

<body>
    <nav>
        <a href="try.html" class="main-menu">Trang chủ</a> |
        <a href="thuc-don.html" class="main-menu">Thực Đơn</a> |
        <a href="lien-he.html" class="main-menu">Liên Hệ</a>
    </nav>
    

    <h1>Ẩm thực 47 ngõ đường phố Sài Gòn</h1>
    <nav id="gola">
        <a href="#" class="main-top">Giới thiệu dự án</a> |
        <a href="#" class="main-top">Mục tiêu dự án</a> |
        <a href="#" class="main-top">Điểm nhấn dự án</a>
    </nav>
   
    
    <pre>
            Sài Gòn không giống với Hà Nội bởi thời tiết Sài Gòn luôn thất thường.
                Sài Gòn không có đặc sản của riêng mình vì Sài Gòn là nơi dung nạp mọi nền văn hoá.
                    Muốn ăn món Thái, 
                            Có ngay! 
                    Muốn ăn món Hàn, 
                            Hãy nhìn bên kia đường! 
                    Muốn ăn thịt nướng, 
                            Đi thêm vài bước nữa! 
                    Muốn ăn món Nhật, 
                            Ghé đối diện! 
                Sài Gòn tuy có vẻ đơn điệu về ẩm thực nhưng chính Sài Gòn cũng có một phong cách rất riêng mà chỉ có ở Sài Gòn
                    Những buổi tối không ngủ 
                        Ngắm nhìn đường phố nhộp nhịp
                            Bên cạnh những người mình yêu thương cùng ly cà phê hương vị đậm đà. 
                Sài Gòn là nơi của những ly cà phê đặc biệt. 
                Hiếm có nơi mà người ta có thể thưởng thức được ly cà phê hấp dẫn bằng nhiều hình thức khác nhau. 
                Có một Sài Gòn rất khác... 
            
            Chúng ta sẽ khám phá Sài Gòn bằng mọi cung bậc mà bạn có thể cảm nhận được. Thấm nhuần những giá trị tinh thần khác biệt. Đó mới là Sài Gòn. Một Sài Gòn diễm tình hoa lệ.
        </pre>
        
        <h1>Khám phá Sài Gòn ngay nào</h1>
        <center><a href="thuc-don.html"><button class="button1">Khám phá ngay</button></a></center>
        <div>
        <h2>Giới thiệu dự án</h2>
        <p>Dự án được thự chiện bởi một nhóm bạn trẻ có niềm đam mê với ẩm thực nơi họ sinh ra. Chúng tôi luôn phát triển dự án theo đúng tôn chỉ "Ngon-bổ-rẻ". Chúng tôi luôn muốn mang đến cho bạn những trải nghiệm ẩm thực chỉ có ở Sài Gòn không nơi đâu có được. </p>
        <h2>Mục tiêu dự án</h2>
        <p>Chúng tôi muốn hoàn thành trọn vẹn bộ bản đồ ẩm thực Sài Gòn theo từng quận huyện khác nhau. Hiện chúng tôi đã có bản đồ của hai huyện ngoại thành thành phố.</p>
        <h2>Điểm nhấn dự án</h2>
        <p>Món ăn đường phố thường bị gắn mác là kém vệ sinh. Nhưng chúng tôi muốn mang đến một trải nghiệm khác biệt hơn dành cho bạn. Một trải nghiệm thức ăn đường phố rẻ nhưng hợp vệ sinh.</p>
        </div>
</body>

</html>

Đoạn mã CSS (style.css)

.button1{
    color: white;
    background-color: firebrick;
    border: none;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    
}
h1 {
    color: darkblue;
    text-align: center;
    font-size: 50px;
    
}
h2 {
    color:darkred;
    text-align: center;
    font-size: 40px;
    
}
nav{
    text-align: center;
    font-size: 25px;
    text-decoration: none;
    
}
a {
    text-decoration: none;

    
}
div h2 {
    color:coral;

}

Kết quả ví dụ

Khi có thẻ Div nhưng chưa trang trí trên CSS. Mặc định đoạn văn trong thẻ Div là màu đỏ.

Khi đã tuỳ chỉnh thẻ Div trên CSS

 

Ra đời để đơn giản hoá việc chia trang web

Bạn đã từng nhìn thấy bộ đôi thẻ Fame – Fameset. Bộ đôi này khá phức tạp và sẽ khiến bạn nhức đầu vì không biết phải sử dụng làm sao đây. Lâu lâu còn quên lên quên xuống cấu trúc. Có khi thì bạn lại chẳng xoá thẻ Body. Biết bao nhiêu rắc rối mà thẻ này gây ra cho bạn. Div ra đời để giải quyết vấn đề rắc rối này cho bạn. Chưa kể sau này bạn còn có thẻ iFame để giải quyết những vấn đề rắc rối về việc chia trang HTML. Div tiện lợi và dễ dùng hơn so với bộ đôi thẻ rắc rối kia.

Dùng thẻ Div một cách thận trọng

Chức năng của thẻ Div dù là dễ sử dụng nhưng bạn cũng không thể nào dùng một cách quá bừa bãi. Không phải bạn đụng cái gì cũng chia được. Đụng cái nào cũng Div được. Nếu bạn cứ thích thì Div thôi, sớm muộn gì trang web của bạn cũng nát tan theo từng dòng Div. Xử lý những thẻ Div thật tốt mang đến cho bạn hiệu quả thật cao.

Điều chỉnh được cách chia trong HTML một cách hợp lý

Nếu bạn làm sai một thẻ hoặc không cảm thấy vừa ý với trang bạn vừa chia. Trang của bạn sẽ được chia lại trong vòng 1 phút 30 giây. Không phức tạp và rườm rà lắm. Thế nên bây giờ nhiều nhà phát triển mới sử dụng thẻ Div. Thẻ Div đúng là có lợi hơn so với những thẻ khác. Bạn sẽ công nhận điều này và đặc biệt bạn sẽ không nhầm lẫn trong quá trình tạo ra các phần của trang HTML. Nếu bạn có để ý trang web của Apple. Bạn sẽ thấy có rất nhiều thẻ Div trong trang HTML.

Thẻ Div có nhiều công dụng lắm. Và bạn có thể áp dụng thẻ Div vào nhiều trường hợp khác nhau. Trang HTML của bạn sẽ trông đặc biệt hơn cả. Ở phần sau chúng ta sẽ học về cách ẩn thẻ Div. Hẹn gặp các bạn vào những bài viết sau.




Đặt câu hỏi cho bài viết này ?