10 lỗi thường gặp khi viết HTML
Cập nhật: 21-09-2021 - Đăng bởi: Khoa Kỹ thuật - Công nghệHTML (viết tắt của từ Hypertext Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web.
Khi viêt HTML sinh viên thường hay gặp một số lỗi sau:
1. Không đặt các phần tử khối trong các phần tử nội tuyến
Một phần tử HTML được hiển thị dưới dạng khối hoặc theo mặc định. Các phần tử nội tuyến nằm trong các khối.
Bạn không nên đặt phần tử khối bên trong các phần tử nội tuyến.
Sai:
<a href="#"><h2> Phần tử khối nằm trong phần tử nội tuyến</h2></a>
Đúng
<h2><a href="#"> Phần tử khối nằm trong phần tử nội tuyến</a></h2>
2. Luôn luôn có thuộc tính alt cho các thẻ hình ảnh
Thuộc tính alt là một yêu cầu cho thẻ <img>, nó mô tả ngữ cảnh của hình ảnh. Nó cũng làm cho các trình thu thập thông tin web chỉ mục nội dung của bạn tốt hơn. Nếu các hình ảnh mục đích chỉ để hiển thị, sử dụng một thuộc tính alt trống như sau: alt = “”
Sai
<img src="sun.jpg"/>
Đúng
<img src="sun.jpg" alt="Sun-asterisk"/>
3. Không sử dụng ngắt dòng để hiển thị một danh sách
Nếu bạn muốn hiển thị một danh sách theo thứ tự hoặc có thứ tự, bạn không nên sử dụng thẻ ngắt dòng br. Sử dụng các danh sách không có thứ tự <ul> hoặc các thẻ liệt kê có thứ tự <ol>
Sai:
- Nguyễn Văn A <br/>
- Nguyễn Văn B <br/>
- Nguyễn Văn C <br/>
Đúng
<ol start="number">
<li>Nguyễn Văn A</li>
<li>Nguyễn Văn B</li>
<li>Nguyễn Văn C</li>
</ol>
4. Không sử dụng <b> và <i> để in đậm và in nghiêng
<b> và <i> được sử dụng để in đậm và in nghiêng các văn bản. Bạn nên sử dụng các đặc tính CSS font-weight và font-style cho những mục đích này tương ứng. Nếu áp dụng cho các phong cách trên tài liệu, hãy sử dụng <strong> và <em> thay thế. Chúng làm công việc giống như <b> và <i> nhưng đúng ngữ nghĩa. Trong trường hợp này thì không hẳn là sai mà chính xác hơn thì là nên dùng <strong> và <em> hơn vì 2 tag này tốt cho SEO.
<strong> Dòng text in đậm. </strong>
<em> Dòng text in nghiêng</em>
5. Không sử dụng nhiều ngắt dòng
Thẻ ngắt dòng br chỉ nên được sử dụng để ngắt dòng đơn trong dòng văn bản. Nó không nên được sử dụng để tạo khoảng trống giữa các phần tử, thay vào đó, chia văn bản thành các đoạn riêng biệt, hoặc điều chỉnh lề theo kiểu CSS.
Sai:
Đây là dòng text 1
<br/>
<br/>
Đây là dòng text 2
Đúng:
<p>Đây là dòng text 1</p>
<p>Đây là dòng text 2</p>
6. Tránh sử dụng css inline
Css inline là những css được đặt trực tiếp vào trong element:
<p style="color: blue;">Đây là dòng text 1</p>
Khi viết như này sẽ gây khó khăn rất lớn cho việc override css hoặc bảo trì code sau này. Không những thế, cách viết này sẽ ảnh hưởng lớn đến performance của 1 website. Chính vì thế, hãy hạn chế sử dụng css inline. Thay vào đó là việc sử dụng load css external, tức là dùng file css để define css.
<p class="text">Đây là dòng text 1</p>
.text {
color: #ff000;
}
7. Không thêm (hoặc xóa) thuộc tính border trong HTML
Sai:
<img src="sun.jpg" alt="Sun-asterisk" border="0"/>
Đúng:
<img class="no-border" src="sun.jpg" alt="Sun-asterisk"/>
.no-border {
border: 0;
}
8. Viết thiếu hoặc không chính xác chữ DOCTYPE
DOCTYPE cho trình duyệt web biết phiên bản HTML nào trang của bạn đang sử dụng. Về mặt kỹ thuật, nó đề cập đến một định nghĩa kiểu tài liệu xác định các quy tắc cho phiên bản HTML đó.
DOCTYPE nên luôn luôn là dòng đầu tiên của mã HTML của bạn và nó là trường hợp nhạy cảm.
9. Viết không đúng định dạng HTML
- Thiếu dấu ngoặc kép cho các thuộc tính
Mặc dù các phiên bản cũ của HTML không yêu cầu bạn bao quanh các giá trị với dấu ngoặc kép, các phiên bản tương lai (bao gồm cả XHTML) có thể vẫn sẽ không yêu cầu dấu ngoặc kép. Nhưng để tránh mắc phải những lỗi về hiển thị trên hầu hết các trình duyệt, bạn nên đặt dấu ngoặc kép xung quanh các giá trị.
Sai:
<img src=sun.jpg alt=Sun-asterisk/>
Đúng:
<img src="sun.jpg" alt="Sun-asterisk"/>
– Thiếu thẻ đóng
Hầu hết các thẻ HTML đều có cả thẻ mở và thẻ đóng (ví dụ: <a></a>). Nếu bạn thiếu thẻ đóng thì trình duyệt sẽ hiển thị sai kết quả.
– Các thẻ HTML phải được đóng theo đúng thứ tự theo các thẻ bạn đã mở
Sai:
<div><a href="#"><span>Đây là ví dụ</a></span></div>
Đúng:
<div><a href="#"><span>Đây là ví dụ</span></a></div>
Đây là lỗi hay thường thấy nhất. Hiện tại đa phần các bạn sử dụng các editor cho phép auto thêm thẻ đóng thì sẽ ít bị mắc lỗi sai này. Tuy nhiên với các bạn mới học, chỉ gõ thẻ mở mà quên gõ thẻ đóng hoặc đặt sai thứ tự thì hậu quả sẽ là đoạn code đó khi hiển thị sẽ bị vỡ tanh bành. Như vậy, để khắc phục lỗi này thì nên gõ thẻ đóng ngay sau khi gõ thẻ mở trong trường hợp bạn dùng editor không hỗ trợ auto thẻ đóng.
10. Nội dung phần đầu phải nằm trong thẻ <head>
Các thẻ <title>, <meta>, <style> phải nằm trong cặp thẻ <head> và </head>
(Nguồn: Viblo.asia - Biên tập: Bộ môn Mạng và truyền thông)
- TÀI LIỆU NHỮNG ĐIỀU CẦN BIẾT VỀ NGÀNH CÔNG NGHỆ THÔNG TIN (30-09-2019)
- TRƯỜNG ĐẠI HỌC HÙNG VƯƠNG ĐẦU TƯ CƠ SỞ VẬT CHẤT HIỆN ĐẠI PHỤC VỤ NÂNG CAO CHẤT LƯỢNG ĐÀO TẠO NGÀNH ĐẠI HỌC CÔNG NGHỆ THÔNG TIN (30-08-2021)
- Khoa Kỹ thuật - Công nghệ tổ chức seminar chuyên đề dành cho sinh viên chuyên ngành Công nghệ thông tin" (30-03-2018)
- Phạm Hải Bằng – Trưởng nhóm Big data & data analytics (29-03-2020)
- Tổ chức thành công đại hội liên chi Đoàn khoa Kỹ thuật - Công nghệ nhiệm kỳ 2019-2021 (28-02-2019)
