You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Đi tìm nguyên nhân vì sao chúng ta phải thực hiện Tab trong HTML

Đi tìm nguyên nhân vì sao chúng ta phải thực hiện Tab trong HTML

Có nhiều lý do để chúng ta phải sử dụng Tab trong HTML.

Xem thêm bài viết

Chúng ta đang bàn về sự khác nhau của một vài thẻ trong HTML. Vì thế mình sẽ nói về chuyện tại sao phải dùng Tab khi chúng ta bắt đầu viết code. Hiển nhiên là bạn không hề muốn bản thân mình gặp phải những rắc rối không đáng có trong quá trình thực hiện viết code. Lần trước chúng ta bàn về sự khác nhau của giữa thẻ Div và Span. Lần này chúng ta sẽ bàn về chuyện bạn muốn dùng Tab trong HTML.

Bạn cần nhớ rằng không hề có thẻ Tab trong HTML. Chúng ta chỉ có thể thực hiện tạo khoảng trắng trong HTML bằng ký tự đặc biệt. Từ trước đến nay các phiên bản của HTML không hề có thẻ Tab. Thế nên bạn đừng mong tạo khoảng cách bằng thẻ Tab. Không có thẻ đâu cho nên bạn đừng cố công tìm kiếm làm gì.

Chúng ta nhấn Tab trên bàn phím mày tính là có một lý do khác. Không phải là vì muốn tạo khoảng trắng hay gì cả.

Không tạo khoảng trắng vậy nhấn Tab làm gì?

Bạn đã thử viết code mà không dùng thẻ chưa. Nếu bạn chưa thử thì cùng xem ví dụ dưới đây.

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>

Chà! Hơn 200 dòng code mà thẻ nào cũng như thẻ nào. Không có sự khác biệt gì cả. Không biết các bạn cảm thấy thế nào chứ mình thì thấy chóng mặt, nhức đầu rồi. Bây giờ chúng ta sẽ cùng xem thử đoạn văn đó khi có dấu Tab nhé!

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>

 

Bạn cảm thấy thế nào. Dễ nhìn hơn rồi đúng không nào. Chỉ cần đặt dấu Tab trước mỗi dòng code bạn đã dễ dàng kiểm soát được những thẻ nằm trong thẻ Head và thẻ Body. Hiện tại bạn vẫn còn đang sử dụng các công cụ Text Editor. Thế nên bạn sẽ nhìn thấy những lổi sai của mình dễ dàng. Kiểm soát được những dòng code của bạn vào lúc này là rất quan trọng. Sau này bạn sẽ cảm thấy hơi khó khăn một chút khi bạn không sử dụng Tab.

Nếu bạn thật sự muốn tạo ra những khoảng trắng trong HTML thì chúng ta sẽ sử dụng kỹ thuật khác. Bạn hãy nhớ rằng dùng Tab chỉ đơn giản là để cho trang HTML gọn gàng và dễ nhìn hơn. Chúng không hề hiện lên tên trình duyệt. Còn nếu bạn cố ý tạo khoảng trắng thì vẫn có cách. Tuy nhiên, bài viết này không đề cập đến điều đó. Cách tạo ra các khoảng trắng sẽ có trong những bài viết sau.

 




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