Tìm kiếm

HTML/CSS | Các mẹo để viết HTML tốt hơn

Học HTML, CSS từ Zero Tới Hero

Viết thẻ mở và thẻ đóng trước

Tuân thủ theo cách viết này, bạn sẽ không bao giờ bị quên thẻ đóng.

Hãy bắt đầu với thẻ mở và thẻ đóng:

<h1></h1>

Sau đó mới thêm nội dung:

<h1>Hôm nay là một ngày đẹp trời!</h1>

Đối với thẻ tự đóng (self-closing tag), hãy bắt đầu với:

<meta />

Sau đó mới bổ sung thuộc tính:

<meta charset="UTF-8" />

Trình bày code ngay ngắn

Một bài văn tốt cần đúng chính tả. Người viết văn là người hành văn, người viết code là người hành code. Vậy viết code HTML như thế nào cho đúng “chính tả”?

Thẻ con thụt lề 1 dấu tab so với thẻ cha

Để đảm bảo tính dễ đọc, tránh nhầm lẫn khi số lượng code HTML nhiều lên, các bạn luôn thụt lề cho thẻ con bằng 1 dấu Tab (4 dấu cách) so với thẻ cha nhé.

Ví dụ:

<body>
    <h1>Hôm nay là một ngày đẹp trời!</h1>
    <ul>
        <li>Đầu mục 1</li>
        <li>Đầu mục 2</li>
        <li>Đầu mục 3</li>
    </ul>
</body>

Dưới đây là ví dụ cho việc trình bày không ngay hàng, thẳng lối:

<body>
<h1>Hôm nay là một ngày đẹp trời!</h1>
<ul><li>Đầu mục 1</li>
<li>Đầu mục 2</li>
<li>Đầu mục 3</li></ul>
</body>

Thực tế, việc không ngay hàng thẳng lối có rất nhiều hình thái khác nhau, tùy vào cách viết của mỗi người. Nhưng đều gây ra vấn đề chung đó là rất khó đọc và khó xác định được các thẻ mở và thẻ đóng. Có thể dẫn tới việc viết thừa/thiếu thẻ mở/thẻ đóng, gây lỗi giao diện trang web.

Không để dư các khoảng trắng

Trong HTML, việc viết dư thừa các khoảng trắng hay các dấu ngắt dòng không gây lỗi giao diện. Tuy nhiên, chúng ta không có lý do gì để viết dư các khoảng trắng. Luôn đảm bảo viết code tối giản, đơn giản, không dư thừa các khoảng trắng, dấu ngắt dòng không cần thiết.

Ví dụ dư khoảng trắng trong thẻ mở của thẻ <body>:

<body    >
    Nội dung trang web
</body>

Dư khoảng trắng trước/sau thuộc tính lang:

<html   lang="vi" >
    ...
</html>

Dư khoảng trắng giữa 2 thuộc tính:

<a href="https://f8.edu.vn/"   title="F8">Truy cập F8</a>

Dư dấu ngắt dòng trước thẻ đóng của thẻ <h1>:

<body>
    <h1>Hôm nay là một ngày đẹp trời!
</h1>
</body>

Ngắt dòng hợp lý

Để đảm bảo tính dễ đọc cho code của các bạn khi viết HTML, các bạn cần tìm những điểm ngắt dòng hợp lý.

Ví dụ, sử dụng dấu ngắt dòng hợp lý:

<ul>
    <li>Đầu mục 1</li>
    <li>Đầu mục 2</li>
    <li>Đầu mục 3</li>
</ul>

Còn đây là trường hợp chưa hợp lý, làm code trở nên khó đọc hơn:

<ul><li>Đầu mục 1</li><li>Đầu mục 2</li><li>Đầu mục 3</li></ul>

Đặt các thẻ đúng vị trí

Có một số trường hợp các thẻ HTML được thiết kế để luôn nằm trong một thẻ cha khác.

Thẻ <head>, <body> luôn là thẻ con trực tiếp của thẻ <html>:

<html>
    <head>
        <!-- Các thẻ meta -->
    </head>
    <body>
        <!-- Nội dung trang web -->
    </body>
</html>

Tình huống sử dụng sai:

<html>
    <head>
        <!-- Các thẻ meta -->
        <body>
            <!-- Nội dung trang web -->
        </body>
    </head>
    <h1>Hôm nay là một ngày đẹp trời!</h1>
</html>

Có 2 điểm sử dụng chưa đúng:

  1. Thẻ <body> đang nằm trong thẻ <head>
  2. Thẻ <h1> đang là con trực tiếp của thẻ <html>

Thẻ <li> luôn là thẻ con trực tiếp của thẻ <ul>, <ol>:

<!-- Unordered list -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<!-- Ordered list -->
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Tình huống sử dụng chưa đúng:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <p>Some paragraph</p>
</ul>

Điểm sai ở đây là thẻ <p> đang là thẻ con trực tiếp của thẻ <ul>.

Một số sai lầm thường gặp khác

Khi mới học, chúng ta thường gặp khó khăn trong việc học cú pháp. Nhiều khi, chỉ một lỗi cú pháp nhỏ có thể lấy đi thời gian cả ngày của bạn.

Quên http, https cho thuộc tính href

Ví dụ, để chuyển tới trang web google.com.vn khi nhấn vào thẻ <a> bạn sẽ làm như nào?

Như này là sai:

<a href="google.com.vn">Tới Google</a>

Vì một URL cần bắt đầu với phần giao thức (http, https). Trường hợp sử dụng đúng sẽ như sau:

<a href="https://google.com.vn">Tới Google</a>

Ví dụ:

  1. Tới Google (thiếu https)
  2. Tới Google (có https)

Mở/đóng thẻ sai thứ tự

Ví dụ trong trường hợp sử dụng kết hợp nhiều thẻ một lúc.

Thay vì làm đúng như thế này:

<p><b>Hôm nay</b> là một ngày đẹp trời!</p>

Bạn có thể nhầm thành như thế này:

<p><b>Hôm nay</p> là một ngày đẹp trời!</b>

Đương nhiên, trong tình huống này kết quả sẽ không được như bạn mong đợi. Vậy nên, hãy luôn viết thẻ mở và thẻ đóng trước bạn nhé.

Tóm tắt

  • Luôn viết cú pháp mở và đóng thẻ trước, sau đó mới viết nội dung
  • Sử dụng thụt lề bằng 1 dấu Tab cho các thẻ con
  • Không viết dư thừa các khoảng trắng và các dấu ngắt dòng
  • Sử dụng dấu ngắt dòng hợp lý, đảm bảo code dễ đọc
  • Đặt các thẻ đúng vị trí. Ví dụ: thẻ <li> luôn là con trực tiếp của thẻ <ul>, <ol>
  • Luôn nhớ sử dụng https cho các URL trong thuộc tính href
Tags

Bạn có thể thích những bài đăng này

Nhận xét

Mới hơn Cũ hơn