Lưu ý rằng, bài viết này không nhằm mục đích chê bai, chỉ trích mà nhắm đến việc giúp các lập trình viên nhận biết được nguyên nhân dẫn đến việc mắc lỗi syntax, cũng như gợi ý những hướng khắc phục cho từng lỗi tương ứng.
Không mất nhiều thời gian nữa, chúng ta cùng bắt đầu thôi!
TÓM TẮT NỘI DUNG
- 1 Lỗi #1: Quên viết thẻ đóng cho các phần tử HTML thuộc dạng Nested Element
- 2 Lỗi #2: Thiếu dấu nháy đôi ” hoặc nháy đơn ‘ khi viết thuộc tính HTML
- 3 Lỗi #3: Viết 2 hoặc nhiều thuộc tính cùng loại trên một phần tử HTML
- 4 Lỗi #4: Có 2 hoặc nhiều id giống nhau tồn tại trong cùng một văn bản HTML
- 5 Lỗi #5: Nhằm cú pháp giữa giấu = và : khi viết thuộc tính style
- 6 Lỗi #6: Viết sai tên thẻ hoặc tên thuộc tính
Lỗi #1: Quên viết thẻ đóng cho các phần tử HTML thuộc dạng Nested Element
Như ta đã được biết, các phần tử HTML tồn tại ở 2 dạng: Nested Element (dạng cặp thẻ, có thể chứa nội dung bên trong) và Empty Element (dạng thẻ đơn, không thể chứa nội dung bên trong). Chính vì vậy, việc quên viết thẻ đóng là một hiện tượng thường xuyên diễn ra đối với những lập trình viên mới bắt đầu làm quen, tiếp xúc với HTML.
Ví dụ:
| Đoạn code lỗi syntax | Đoạn code đúng syntax |
...<div class="row"> <div class="col-6"> <h5><a href="/mb-pro-15-inch-256gb">Macbook Pro 15inch 256GB</h5></div>.... |
...<div class="row"> <div class="col-6"> <h5><a href="/mb-pro-15-inch-256gb">Macbook Pro 15inch 256GB</a></h5> </div></div>.... |
Nguyên nhân:
- Lập trình viên thực hiện các thao tác viết syntax chưa đúng thứ tự
- Sai sót trong quá trình copy một đoạn code (copy thiếu hoặc dư thẻ đóng/mở)
Hướng khắc phục:
- Tập làm quen với thao tác chuẩn khi viết một Nested Element:
- Bước 1: Viết thẻ đóng sau ngay lập tức sau khi viết thẻ mở. Ví dụ:
<div></div> - Bước 2: Di chuyển (đặt) trỏ vào vị trí giữa thẻ đóng và mở để bắt đầu viết nội dung. Ví dụ:
<div>Nội dung ở đây...</div>
- Bước 1: Viết thẻ đóng sau ngay lập tức sau khi viết thẻ mở. Ví dụ:
- Indent hợp lý: Việc Indent (thục dòng code) một cách hợp lý sẽ giúp code của bạn trở nên cân đối hơn, dễ dàng nhận biết được rằng đoạn code bạn vừa viết có đang thiếu hay thừa thẻ đóng/mở không.
Lỗi #2: Thiếu dấu nháy đôi ” hoặc nháy đơn ‘ khi viết thuộc tính HTML
Trong syntax liên quan đến thuộc tính HTML (HTML Attribute), ta có quyền lựa chọn giữa nháy đôi và nháy đơn để viết cho một thuộc tính bất kỳ. Nhưng dù cho bạn chọn nháy nào, bạn phải luôn viết chúng dưới dạng một cặp (nháy mở và nháy đóng). Và việc quên viết nháy đóng cũng thường xuyên diễn ra trong lập trình HTML.
| Đoạn code lỗi syntax | Đoạn code đúng syntax |
...<button data-toggle="modal" class="btn btn-primary data-target="#dialog-1>Mở hộp thoại</button>... |
...<button data-toggle="modal" class="btn btn-primary" data-target="#dialog-1">Mở hộp thoại</button>... |
Nguyên nhân (giống với nguyên nhân quên thẻ đóng):
- Lập trình viên thực hiện các thao tác viết syntax chưa đúng thứ tự
- Sai sót trong quá trình copy một đoạn code (copy thiếu hoặc dư thẻ đóng/mở)
Hướng khắc phục:
- Tập làm quen với thao tác chuẩn khi viết một thuộc tính trong HTML:
- Bước 1: Viết cặp nháy ngay sau khi viết tên thuộc tính:
<button class=""></button> - Bước 2: Di chuyển (đặt) trỏ vào vị trí giữa cặp nháy đó để tiếp tục viết giá trị thuộc tính. Ví dụ:
<button class="my-class-1"></button>
- Bước 1: Viết cặp nháy ngay sau khi viết tên thuộc tính:
Lỗi #3: Viết 2 hoặc nhiều thuộc tính cùng loại trên một phần tử HTML
HTML chỉ cho phép duy nhất một thuộc tính/loại thuộc tính tồn tại trên một phần tử HTML. Trong trường hợp bạn viết 2 hoặc nhiều thuộc tính cùng loại cho một phần tử HTML, chỉ có thuộc tính đầu tiên là có tác dụng.
| Đoạn code lỗi syntax | Đoạn code đúng syntax |
<p style="background-color: red" class="p1" style="color: white">Paragraph content...</p>
Trong trường hợp này, trình duyệt chỉ xử lý (render) thuộc tính |
<p style="background-color: red; color: white" class="p1">Paragraph content...</p> |
Nguyên nhân:
- Do phần tử HTML chứa nhiều loại thuộc tính khác nhau, giá trị thuộc tính có độ dài lớn dẫn đến việc người lập trình quên mất sự tồn tại của thuộc tính mà mình đã viết trước đó.
- Do copy code của một lập trình viên khác, hay viết tiếp đoạn code của một lập trình viên khác mà quên để ý
Hướng khắc phục:
- Hãy tập thói quen xem lại các thuộc tính đang có của phần tử trước khi bổ sung một thuộc tính mới cho phần tử đó
Lỗi #4: Có 2 hoặc nhiều id giống nhau tồn tại trong cùng một văn bản HTML
Như hoccode.org đã đề cập nhiều lần trong series HTML & CSS căn bản, bản chất của thuộc tính id là độc nhất (unique), nghĩa là bạn không được phép tạo ra 2 phần tử mang thuộc tính id giống nhau trong cùng một văn bản HTML. Trong trường hợp bạn có 2 hoặc nhiều phần tử mang id giống nhau, mặc dù trình duyệt không báo lỗi nhưng một số chức năng sẽ bị ảnh hưởng như anchor link, tương tác với Javascript…
| Đoạn code lỗi syntax | Đoạn code đúng syntax |
...<p id="p1">abc</p><p id="p1">efg</p>...<script> $("#p1").html("zzz");</script>
Trong trường hợp này, chỉ có phần tử |
...<p class="p1">abc</p><p class="p1">efg</p>...<script> $(".p1").html("zzz");</script>
Để cả 2 phần tử có khả năng tương tác với Javascript, ta thay thuộc tính |
Nguyên nhân
- Chưa nắm vững các quy tắc liên quan đến thuộc tính
idvàclass - Copy code của một lập trình viên khác và thiếu sót trong khâu kiểm tra lại
Hướng khắc phục
- Xem lại bài giảng Thuộc tính của phần tử HTML
- Kiểm tra kỹ trước khi viết một id mới (Mẹo: Bạn có thể sử dụng Javascript
document.getElementById('ten_id')để kiểm tra một cách nhanh chóng và chính xác liệu id đó đã tồn tại trên văn bản hay chưa)
Lỗi #5: Nhằm cú pháp giữa giấu = và : khi viết thuộc tính style
Tuy rằng cú pháp trong thuộc tính của HTML và thuộc tính CSS được đề cập khá nhiều, trong rất nhiều bài giảng và bài viết. Tuy nhiên, vì một lý do nào đó, có thể chủ quan hoặc khách quan, nhiều lập trình viên vẫn nhầm lẫn 2 loại cú pháp này, cụ thể là dấu = và dấu : trong các trường hợp viết inline CSS.
| Đoạn code lỗi syntax | Đoạn code đúng syntax |
<p style:"background-color=red; padding=5px; color=#fff">Nội dung đoạn văn...</p> |
<p style="background-color: red; padding:5px; color:#fff">Nội dung đoạn văn...</p> |
Lỗi #6: Viết sai tên thẻ hoặc tên thuộc tính
Việc viết sai tên thẻ hoặc tên thuộc tính sẽ khiến trình duyệt không thể render theo đúng mục đích của người lập trình, hay chức năng của phần tử đó không thể hoạt động. Điều đáng nói là trong khá nhiều trường hợp, lập trình viên lại không thể nhận ra được lỗi này.
Ví dụ về những trường hợp thường mắc phải:
| Tên thẻ sai syntax | Tên thẻ đúng syntax |
<buton></buton><sript></sript><aticle></aticle>... |
<button></button><script></script><article></article>... |
| Thuộc tính sai syntax | Thuộc tính đúng syntax |
scr="..."atl="..."clas="..."widht="..."heigth="..."... |
src="..."alt="..."class="..."width="..."height="..."... |
Nguyên nhân
- Sai thông tin từ khâu nghe → viết
- Chưa xem kỹ cú pháp đã vội viết code → nhớ sai cú pháp
- Lỗi liên quan đến đánh máy.
Hướng khắc phục
- Tập phát âm đúng tên thẻ và thuộc tính
- Tra cứu kỹ càng về một loại thẻ hay thuộc tính mà trước đây mình chưa sử dụng
- Tập luyện tính cẩn thận
- Luôn giữ đầu óc trong trạng thái bình tĩnh và tập trung khi viết code
Như vậy ta vừa điểm qua những lỗi syntax phổ biến nhất trong HTML rồi. Liệu bạn có thường mắc phải một trong những lỗi trên? Liệu có lỗi nào phổ biến khác mà hoccode.org chưa điểm qua? Hãy comment bên dưới cho chúng mình biết nhé!
Nếu bạn cảm thấy nội dung bài viết hay và hữu ích, hãy để lại 1 like, share hoặc đánh giá để chúng tớ có thêm động lực cho ra những bài viết có chất lượng tốt hơn nhé!
>> Xem Thêm : Cú pháp (Syntax) của CSS | Series HTML & CSS Căn bản | Bài 7
