Đang load dữ liệu
Các nhà lập trình web thường không thống nhất kiểu viết code và cú pháp khi sử dụng HTML. Vào thời gian từ năm 2000 đến 2010, nhiều lập trình viên đã chuyển cách viết từ HTML sang XHTML – ngôn ngữ đòi hỏi cú pháp được viết một cách đúng chuẩn nghiêm ngặt (well-formed).
HTML5 có cách thức viết tự do hơn, nên để trở thành một lập trình viên thông minh, bạn cần phải tự tạo cho mình thói quen viết code theo đúng chuẩn để người khác có thể dễ dàng hiểu và sử dụng code HTML của bạn.
Hơn thế nữa, trong tương lai, những bộ máy tìm kiếm và phân tích dạng như trình đọc XML có thể sẽ muốn đọc các trang HTML của bạn. Sử dụng cú pháp gần với chuẩn XHTML sẽ là một lựa chọn thông minh của các lập trình viên.
Hãy nhớ luôn giữ cho mã của bạn gọn gàng, sạch sẽ, và chính xác.
Luôn luôn khai báo kiểu tài liệu DOCTYPE ở dòng đầu tiên trong đoạn code của bạn:
<!DOCTYPE html>
Nếu muốn có sự nhất quán với các thẻ bên dưới khác, bạn có thể sử dụng:
<!doctype html>
HTML5 cho phép sử dụng kết hợp cả chữ hoa và chữ thường trong các tên phần tử.
Tuy nhiên bạn nên sử dụng tên phần tử chữ thường, bởi vì:
Không nên:
<SECTION>
<p>Quantrimang được cập nhật thường xuyên và liên tục.</p>
</SECTION>
<Section>
<p>Quantrimang được cập nhật thường xuyên và liên tục.</p>
</SECTION>
Nên:
<section>
<p>Quantrimang được cập nhật thường xuyên và liên tục.</p>
</section>
Trong HTML5, bạn không nhất thiết phải đóng tất cả các phần tử (ví dụ như phần tử <p>).
Nhưng khuyến nghị bạn nên sử dụng thẻ đóng sau khi kết thúc phần tử.
Không nên:
<section>
<p>Quantrimang được cập nhật thường xuyên và liên tục.
<p>Quantrimang được cập nhật thường xuyên và liên tục.
</section>
Nên:
<section>
<p>Quantrimang được cập nhật thường xuyên và liên tục.</p>
<p>Quantrimang được cập nhật thường xuyên và liên tục.</p>
</section>
Trong HTML5, phần tử rỗng có thể dùng thẻ đóng hoặc không.
Bạn có thể sử dụng một trong hai cách viết:
<meta charset="utf-8">
<meta charset="utf-8" />
Tuy nhiên, dấu gạch chéo đóng (/) là bắt buộc phải có trong XHTML và XML.
Nếu muốn những phần mềm đọc XML có thể hiểu được trang của bạn, bạn nên sử dụng thẻ đóng sau khi kết thúc phần tử.
HTML5 cho phép sử dụng cả chữ hoa và chữ thường với tên thuộc tính. Tuy nhiên bạn nên sử dụng chữ thường vì:
Không nên:
<div CLASS="menu">
Nên:
<div class="menu">
HTML5 cho phép các giá trị thuộc tính không cần dấu ngoặc kép. Tuy nhiên tốt hơn hết bạn nên cho thêm dấu ngoặc kép vì:
Không nên:
<table class=striped>
<table class=table striped>
Nên:
<table class="striped">
Luôn sử dụng thuộc tính alt với các ảnh chèn vào trang web. Đây là việc rất quan trọng khi hình ảnh chèn không hiển thị và cũng là cách để các máy tìm kiếm có thể dễ dàng tìm được nội dung ảnh bạn định nói gì.
Ngoài ra, luôn luôn khai báo chiều rộng và chiều cao hình ảnh. Nó sẽ làm trang web của bạn không bị nhấp nháy vì trình duyệt có thể dự trữ không gian cho hình ảnh trước khi tải.
Không nên:
<img src="html5.gif">
Nên:
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
HTML5 cho phép dấu cách đặt ở hai đầu dấu bằng.
<link rel = "stylesheet" href = "styles.css">
Nhưng khi viết liền sẽ tạo cảm giác dễ đọc hơn.
<link rel="stylesheet" href="styles.css">
Khi bạn sử dụng một trình soạn thảo HTML, nếu có một dòng code quá dài bạn sẽ phải trượt thanh cuộn sang phải hoặc sang trái để có thể đọc hết dòng code đó.
Vì thế hãy cố gắng tránh các dòng mã dài hơn 80 ký tự.
Cách dòng và thụt lề như ví dụ dưới đây là không cần thiết:
<body>
<h1>Chuyện Công nghệ</h1>
<h2>Giá Bitcoin hạ kịch sàn, thấp nhất trong năm</h2>
<p>
Tờ CNBC đưa tin đồng tiền ảo này giảm khoảng 9%,
xuống còn $5.640,36 và còn chưa có dấu hiệu dừng lại.
Tại thời điểm viết bài này, giá chỉ còn $5.307,52.
Đây là lần đầu tiên giá bitcoin giảm xuống dưới $6.000
từ khi nhận cú giáng kỉ lục hồi tháng 12 năm ngoái.
</p>
</body>
Nên viết như sau:
<body>
<h1>Chuyện Công nghệ</h1>
<h2>Giá Bitcoin hạ kịch sàn, thấp nhất trong năm/h2>
<p>Tờ CNBC đưa tin đồng tiền ảo này giảm khoảng 9%,
xuống còn $5.640,36 và còn chưa có dấu hiệu dừng lại.
Tại thời điểm viết bài này, giá chỉ còn $5.307,52.
Đây là lần đầu tiên giá bitcoin giảm xuống dưới $6.000
từ khi nhận cú giáng kỉ lục hồi tháng 12 năm ngoái.</p>
</body>
Ví dụ về bảng:
<table>
<tr>
<th>Tên chuyên mục</th>
<th>Giới thiệu</th>
</tr>
<tr>
<td>Công nghệ</td>
<td>Giới thiệu</td>
</tr>
<tr>
<td>Khoa học</td>
<td>Giới thiệu</td>
</tr>
</table>
Vi dụ về danh sách:
<ol>
<li>Làng Công nghệ</li>
<li>Khoa học</li>
<li>Cuộc sống</li>
</ol>
Trong HTML5, thẻ <html> và thẻ <body> có thể bị bỏ qua.
Đoạn code dưới đây vẫn hoàn toàn hợp lệ
<!DOCTYPE html>
<head>
<title>Quantrimang</title>
</head>
<h1>Giới thiệu Quantrimang</h1>
<p>Quantrimang được cập nhật thường xuyên và liên tục.</p>
Tuy nhiên, bạn không nên bỏ thẻ <html> và thẻ <body>.
Phần tử <html> là khung của trang. Trong đó bạn có thể khai báo ngôn ngữ mà bạn đang dùng trong trang:
<!DOCTYPE html>
<html lang="vi-VN">
Việc khai báo một ngôn ngữ rất quan trọng đối với các công cụ tìm kiếm và các ứng dụng khi truy cập trang web của bạn.
Việc bỏ qua <html> hoặc <body> có thể làm hỏng DOM và phần mềm XML, có thể lỗi khi hiển thị trên trình duyệt cũ hơn (IE9).
Trong chuẩn HTML5, thẻ <head> cũng có thể bị bỏ qua.
Theo mặc định, trình duyệt sẽ tự động thêm thẻ<head> trước thẻ <body>.
Bạn có thể giảm độ phức tạp của HTML, bằng cách bỏ qua thẻ <head>:
Ví dụ:
<!DOCTYPE html>
<html>
<title>Quantrimang</title>
<body>
<h1>Giới thiệu Quantrimang</h1>
<p>Quantrimang được cập nhật thường xuyên và liên tục.</p>
</body>
</html>
Tuy nhiên, tốt hơn hết bạn không nên bỏ qua thẻ <head>. Việc bỏ bớt các thẻ dường như không quen thuộc với các lập trình viên.
Phần tử <title> là bắt buộc phải có trong HTML5. Bạn hãy đặt tên tiêu đề càng ý nghĩa càng tốt.
<title>Định dạng chuẩn và quy ước viết code trong HTML5</title>
Để đảm bảo giải thích chính xác và đúng chỉ mục với các công cụ tìm kiếm khi muốn tìm trang web của bạn, hãy thiết lập ngôn ngữ và các kí tự mã hóa mà trang sử dụng ở ngay những dòng đầu tiên:
<!DOCTYPE html>
<html lang="vi-VN">
<head>
<meta charset="UTF-8">
<title>Định dạng chuẩn và quy ước mã hóa trong HTML5</title>
</head>
HTML5 đã giới thiệu một phương pháp giúp cho các nhà thiết kế web kiểm soát chế độ xem thông qua thẻ <meta>.
Chế độ xem là khu vực hiển thị với người dùng trên trang web. Nó thay đổi tùy theo thiết bị, sẽ nhỏ hơn trên điện thoại di động và to hơn trên màn hình máy tính.
Phần tử <meta> viewport hướng dẫn cho trình duyệt cách kiểm soát kích thước và tỷ lệ của trang. Vì vậy, bạn nên sử dụng
phần tử <meta> viewport trong tất cả các trang web của mình:
<!DOCTYPE html>
<html lang=”vi-VN”>
<head>
<meta charset=”UTF-8″>
<title>Định dạng chuẩn và quy ước mã hóa trong HTML5</title>
</head>
Comment ngắn nên được viết trên một dòng, như sau:
<!-- Phần giới thiệu về Quantrimang -->
Comment dài nhiều dòng nên được viết như sau:
<!--
Phần giới thiệu về Quantrimang. Phần giới thiệu về Quantrimang.
Phần giới thiệu về Quantrimang. Phần giới thiệu về Quantrimang.
-->
Những chú thích dài sẽ dễ nhìn hơn nếu bạn lùi đầu dòng bằng hai dấu cách.
Bạn có thể sử dụng các cú pháp đơn giản để liên kết với CSS (không cần thiết phải sử dụng thuộc tính type):
<link rel="stylesheet" href="styles.css">
Các đoạn code ngắn có thể được viết lại trên một dòng, như sau:
p.intro {font-family: Verdana; font-size: 16em;}
Các đoạn code dài viết trên nhiều dòng, như sau:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
Bạn có thể sử dụng các cú pháp đơn giản để liên kết với JavaScript (không cần thiết phải sử dụng thuộc tính type):
<script src="myscript.js">
Hậu quả của việc sử dụng các kiểu HTML không đúng chuẩn có thể dẫn đến lỗi JavaScript.
Hai câu lệnh JavaScript này sẽ tạo ra các kết quả khác nhau:
var obj = getElementById("Demo")
var obj = getElementById("demo")
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<p id="Demo">This is paragraph 1.</p>
<p id="demo">This is paragraph 2.</p>
<script>
// Only paragraph 2 will be overwritten
document.getElementById("demo").innerHTML = "HELLO.";
</script>
</body>
</html>
Nếu có thể, hãy sử dụng các quy ước đặt tên giống nhau (như JavaScript) trong HTML.
Một số máy chủ web (Apache, Unix) phân biệt chữ hoa chữ thường với tên tập tin: “london.jpg” không thể truy cập là “London.jpg”.
Nhưng có những máy chủ web (Microsoft, IIS) không phân biệt chữ hoa và chữ thường: london.jpg có thể truy cập bằng tên London.jpg hoặc london.jpg.
Vì vậy, nếu bạn sử dụng kết hợp giữa chữ hoa và chữ thường, bạn phải cực kỳ nhất quán để tránh xảy ra lỗi khi chuyển máy chủ.
Để tránh dẫn tới những lỗi này, hãy luôn sử dụng chữ thường cho tên tệp tin.
Không có sự khác biệt nào giữa hai phần mở rộng .htm và .html. Cả hai sẽ được coi là HTML khi làm việc với bất kỳ trình duyệt và máy chủ nào.
Sự khác biệt về kỹ thuật
Khi URL không chỉ định tên tệp (như https://www.quantrimang.com/html/), máy chủ sẽ tự động trả về tên tệp mặc định. Tệp tin mặc định phổ biến là index.html, index.htm, default.html và default.htm.
Nếu website của bạn đã được cấu hình tên tệp tin mặc định là “index.html”, bạn phải đặt tên tệp tin là “index.html”, không được đặt là “index.htm.” Tuy nhiên, máy chủ có thể được cấu hình với nhiều tệp tin mặc định, và thông thường bạn có thể thiết lập nhiều tập tin mặc định nếu cần.
Dù sao, phần mở rộng đầy đủ cho các tập tin HTML là .html, và không có lý do gì mà bạn không sử dụng tên này.
Tạm vậy thôi. Hãy trở thành một lập trình viên thông minh bằng cách thức viết code gọn gàng, sạch sẽ và đúng chuẩn định dạng như này nhé.
Chúc bạn thành công!
Devmaster Academy via quantrimang
.png "Lập trình frontend với reacjs (Full)")