Quy ước Và Phong Cách Viết HTML5 - TEDU

Trang chủ » Chuẩn Html5 » Quy ước Và Phong Cách Viết HTML5 - TEDU

Có thể bạn quan tâm

Quy ước cách viết HTML5

Các lập trình viên thường cảm thấy không chắc chắn về phong cách viết và cú pháp được sử dụng trong HTML.

Từ năm 2000 đến 2010, rất nhiều lập trình viên đã chuyển cách viết từ HTML sang XHTML.

Với XHTML, các lập trình viên buộc phải viết code theo đúng định dạng và có “cấu trúc tốt”

HTML5 có cách viết tự do hơn nên bạn phải tự xây dựng và rèn cho mình một phong cách viết mã theo đúng chuẩn.

Viết code một cách thông minh

Một phong cách viết thích hợp giúp các lập trình viên khác (và cả các bộ máy tìm kiếm) có thể hiểu đc code HTML của bạn

Trong tương lai, các chương trình như trình đọc XML có thể sẽ muốn đọ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.

Luôn luôn giữ cho phong cách viết code của bạn thông minh, gọn gàng, sạch sẽ và đúng định dạng.

Sử dụng đúng DOCTYPE

Luôn khai báo doctype ở dòng đầu tiên của trang:

<!DOCTYPE html>

Nếu bạn muốn đồng nhất với các thẻ khác trong trang, bạn có thể viết:

<!doctype html>

Viết thường tên các thẻ

HTML5 cho phép bạn có thể kết hợp cả viết thường và viết hoa tên các thẻ.

Chúng tôi khuyến khích bạn viết thường tên các thẻ, bởi vì:

  • Kết hợp cả viết thường và viết hoa là cách viết rất tệ
  • Các lập trình viên thường sử dụng tên thẻ viết thường (như trong XHTML)
  • Viết thường nhìn mã nguồn sẽ gọn gàng và rõ ràng hơn
  • Viết thường dễ viết hơn

Cách viết tệ:

<SECTION>   <p>Đây là nội dung.</p> </SECTION>

Cách viết rất tệ

<Section> <p>Đây là nội dung.</p> </SECTION>

Cách viết TỐT

<section> <p>Đây là nội dung.</p> </section>

Luôn sử dụng thẻ đóng

Trong HTML5, bạn không cần sử dụng thẻ đóng cho tất cả các thẻ (ví dụ thẻ <p>).

Nhưng, chúng tôi khuyến khích bạn nên sử dụng thẻ đóng:

Cách viết tệ:

<section> <p>Đây là nội dung. <p>Đây là nội dung. </section>

Cách viết TỐT:

<section> <p>Đây là nội dung.</p> <p>Đây là nội dung.</p> </section>

Đóng thẻ rỗng

Trong HTML5, bạn có thể tùy ý đóng những thẻ rỗng (thẻ rỗng là những thẻ không có thẻ đóng).

Bạn được phép viết:

<meta charset="utf-8">

và cũng được phép viết như thế này:

<meta charset="utf-8" />

Tuy nhiên, dấu gạch chéo (/) là bắt buộc trong XHTML và XML.

Nếu bạn muốn những phần mềm đọc XML có thể truy cập trang của bạn, tốt nhất là hãy sử dụng dấu gạch chéo để đóng thẻ.

Viết thường tên các thuộc tính

HTML5 cho phép bạn có thể kết hợp cả viết thường và viết hoa tên các thuộc tính.

Chúng tôi khuyến khích bạn viết thường tên các thuộc tính, bởi vì:

  • Kết hợp cả viết thường và viết hoa là cách viết rất tệ
  • Viết thường gần với chuẩn XHTML
  • Viết thường nhìn mã nguồn sẽ gọn gàng và rõ ràng hơn
  • Viết thường dễ viết hơn

Cách viết tệ:

<div CLASS="menu">

Cách viết tốt:

<div class="menu">

Trích dẫn giá trị thuộc tính

HTML5 cho phép bạn viết giá trị thuộc tính mà không cần trích dẫn.

Chúng tôi khuyến khích bạn nên trích dẫn giá trị thuộc tính vì:

  • Trích dẫn giá trị thuộc tính gần với chuẩn XHTML
  • Bạn phải trích dẫn nếu giá trị thuộc tính có chứa dấu cách
  • Những giá trị trong ngoặc dễ đọc và dễ phân biệt hơn

Trong ví dụ dưới đây, thuộc tính class sẽ không hoạt động như mong muốn do giá trị có chứa dấu cách

<table class=table striped>

Cách viết tệ:

<table class=striped>

Cách viết tốt:

<table class="striped">

Thuộc tính trong thẻ <img>

Luôn sử dụng thuộc tính alt khi bạn chèn ảnh vào website. Điều này rất quan trọng nếu ảnh không thể hiển thị vì một lý do nào đó. Luôn quy định kích cỡ khi sử dụng ảnh. Nó sẽ không làm website của bạn bị co dãn trong quá trình tải trang do trình duyệt đã dành sẵn không gian cho ảnh trước đó.

Viết chưa tốt:

<img src=”html5.gif”>

Tốt:

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Dấu cách và dấu bằng

Bạn có thể sử dụng dấu cách quanh dấu bằng. Nhưng nếu không sử dụng dấu cách sẽ làm cho mã nguồn dễ dọc hơn và các thuộc tính trở nên tách bạch, rõ ràng hơn:

Cách viết tệ:

<link rel = "stylesheet" href = "styles.css">

Cách viết tốt:

<link rel="stylesheet" href="styles.css">

Tránh code dài trên một dòng

Khi bạn sử dụng một công 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 để xem hết. Điều này rất bất tiện.

Hãy cố gắng tránh những dòng code dài hơn 80 ký tự.

Lùi đầu dòng và cách dòng

Không thêm dòng trống vào mã nguồn nếu không cần thiết.

Để dễ đọc, chỉ thêm dòng trống để tách các khối code lớn hoặc phân cách hợp lý giữa các thẻ.

Để dễ đọc, bạn có thể sử dụng 2 dấu cách để lùi đầu dòng.

Không cần thêm dòng trống và thụt lề cho mọi phần tử.

Ví dụ

Không cần thiết:

<body>   <h1>Famous Cities</h1>   <h2>Tokyo</h2>   <p>     Tokyo is the capital of Japan, the center of the Greater Tokyo Area,     and the most populous metropolitan area in the world.     It is the seat of the Japanese government and the Imperial Palace,     and the home of the Japanese Imperial Family.   </p> </body>

Cách viết tốt hơn:

<body> <h1>Famous Cities</h1> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p> </body>

Đối với bảng:

<table>   <tr>     <th>Name</th>     <th>Description</th>   </tr>   <tr>     <td>A</td>     <td>Description of A</td>   </tr>   <tr>     <td>B</td>     <td>Description of B</td>   </tr> </table>

Đối với danh sách:

<ul>   <li>London</li>   <li>Paris</li>   <li>Tokyo</li> </ul>

Bỏ qua thẻ <html> và <body>?

Trong chuẩn HTML5, bạn có thể không cần dung thẻ <html> và thẻ <body>.

Đoạn mã nguồn dưới đây hoàn toàn hợp lệ trong HTML5:

<!DOCTYPE html> <head>   <title>Page Title</title> </head> <h1>This is a heading</h1> <p>This is a paragraph.</p>

Tuy nhiên, chúng không không khuyến khích bạn bỏ thẻ <html> và thẻ <body>.

Thẻ <html> là thẻ gốc của trang, bạn có thể sử dụng để khai báo ngôn ngữ trang đang dung:

<!DOCTYPE html> <html lang="en-US">

Việc khai báo ngôn ngữ rất quan trọng đối với các bộ máy tìm kiếm và các ứng dụng khi truy cập website của bạn.

Việc bỏ thẻ <html> và <body> có thể thể làm treo DOM và phần mềm XML.

Thiếu thẻ <body> có thể gây ra lỗi trong những trình duyệt cũ (như IE9).

Thiếu thẻ <head>?

Trong chuẩn HTML5, bạn có thể bỏ qua thẻ <head>.

Mặc định, trình duyệt sẽ tự động thêm thẻ <head> trước thẻ <body>.

Bạn có thể bỏ thẻ <head> để giảm sự phức tạp khi viết mã HTML:

<!DOCTYPE html> <html> <title>Page Title</title> <body>   <h1>This is a heading</h1>   <p>This is a paragraph.</p> </body> </html>

Tuy nhiên, không khuyến khích bỏ qua thẻ <head>.

Việc bỏ thẻ dường như không mấy quen thuộc với các lập trình viên. Chúng ta cần thời gian để làm quen với việc này.

Thẻ bổ trợ

<title> là thẻ bắt buộc trong HTML5. Hãy đặt tiêu đề trang ý nghĩa nhất có thể:

<title>Quy ước và phong cách viết HTML5</title>

Để đảm bảo các bộ máy tìm kiếm hiểu trang của bạn một cách chuẩn xác, hãy thiết lập ngôn ngữ và bộ mã hóa ký tự mà trang sử dụng ở ngay những dòng đầu tiên của trang:

<!DOCTYPE html> <html lang="en-US"> <head>   <meta charset="UTF-8">   <title>Quy ước và phong cách viết HTML5</title> </head>

Đặt khung nhìn (chế độ xem)

HTML5 cung cấp một phương thức giúp nhà thiết kế web có thể điều khiển chế độ xem, thông qua thẻ <meta>.

Khung nhìn là vùng hiển thị trang web trên thiết bị của người dùng. Và nó có thể khác biệt tùy vào thiết bị (điện thoại di động, laptop, máy để bàn,v.v…)

Bạn nên thêm phần tử <meta> viewport vào mọi trang web:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Một phần tử <meta> viewport cung cấp cho trình duyệt cách xử lý kích thước và tỷ lệ của trang.

Phần width=device-width đặt độ rộng trang tùy theo độ rộng thiết bị.

Phần initial-scale=1.0 đặt mức zoom ban đầu, khi trang được tải lần đầu tiên.

Ghi chú trong HTML

Với những ghi chú ngắn chỉ trên một dòng:

<!-- Đây là một ghi chú -->

Với những ghi chú dài, được viết trên nhiều dòng nên được viết như sau:

<!--   Đây là ví dụ về ghi chú dài. Đây là ví dụ về ghi chú dài. Đây là ví dụ về ghi chú dài.   Đây là ví dụ về ghi chú dài. Đây là ví dụ về ghi chú dài. Đây là ví dụ về ghi chú dài. -->

Những ghi chú dài sẽ dễ nhìn hơn nếu bạn thụt lùi đầu dòng bằng 2 dấu cách.

CSS

Bạn có thể sử dụng cú pháp đơn giản để liên kết với tệp tin CSS (không cần thiết phải sử dụng thuộc tính type):

<link rel="stylesheet" href="styles.css">

Với quy tắc rút gọn, có thể được viết như sau:

p.into {font-family: Verdana; font-size: 16em;}

Với cách viết thường thì nên viết trên nhiều dòng:

body {   background-color: lightgrey;   font-family: "Arial Black", Helvetica, sans-serif;   font-size: 16em;   color: black; }
  • Đặt dấu mở ngoặc trên cùng dòng với bộ chọn.
  • Sử dụng một dấu cách trước dấu ngoặc mở.
  • Sử dụng 2 dấu cách để lùi đầu dòng các thuộc tính bên trong.
  • Sử dụng dấu chấm phẩy sau mỗi cặp thuộc tính-giá trị, kể cả dòng cuối.
  • Chỉ sử dụng dấu ngoặc cho giá trị nếu trong giá trị có chứa dấu cách.
  • Đặt dấu ngoặc đóng ngoặc ở một dòng mới, phía trước không có dấu cách.
  • Tránh sử dụng 80 ký tự trên cùng một dòng.

Liên kết JavaScript trong HTML

Bạn có thể sử dụng cú pháp đơn giản để liên kết với tệp tin JavaScript (không cần thiết phải sử dụng thuộc tính type):

<script src="myscript.js">

Truy cập vào các thành phần HTML bằng JavaScript

Hậu quả của việc sử dụng những kiểu HTML “bừa bãi” có thể dẫn đến các lỗi khi sử dụng JavaScript.

Ở ví dụ dưới đây cho thấy, cách đặt tên khác nhau sẽ có cách truy cập khác nhau trong JavaScript:

<!DOCTYPE html> <html> <body> <p id="Demo">This is paragraph 1.</p> <p id="demo">This is paragraph 2.</p> <script> // Chỉ đoạn văn thứ 2 bị viết đè document.getElementById("demo").innerHTML = "HELLO."; </script> </body> </html>

Viết thường tên các tệp tin

Hầu hết các máy chủ web (Apache, Unix) phân biệt viết hoa, viết thường khi truy cập tên tệp tin:

Một ảnh là london.jpg không thể truy cập được với tên là London.jpg.

Những máy chủ web khác (Microsoft, IIS) không phân biệt viết hoa, viết thường:

london.jpg có thể truy cập bằng tên London.jpg hoặc london.jpg.

Nếu bạn chuyển website từ một máy chủ không phân biệt viết hoa-viết thường sang một máy chủ phân biệt viết hoa-viết thường, có thể dẫn tới một vài lỗi nhỏ khiến cho website của bạn bị hỏng.

Để tránh dẫn tới những lỗi này, hãy luôn sử dụng viết thường cho tên tệp tin (nếu có thể).

Phần mở rộng của tệp tin

Các tệp tin HTML nên có phần mở rộng là .html (hoặc .htm).

Các tệp tin CSS nên có phần mở rộng là .css

Các tệp tin JavaScript nên có phần mở rộng là .js

Sự khác biệt giữa .htm và .html

Không có sự khác biệt nào giữa hai phần mở rộng .htm và .html. Trình duyệt và máy chủ sẽ làm việc với cả 2 phần mở rộng như là một trang HTML.

.htm là do “di truyền” từ hệ điều hành DOS đời đầu, khi mà phần mở rộng bị giới hạn là 3 ký tự.

.html là do “di truyền” của hệ điều hành Unix không bị giới hạn 3 ký tự.

Khác biệt về mặt kỹ thuật

Khi bạn truy cập vào một địa chỉ mà không có tên tệp tin (ví dụ https://tedu.com.vn/), website sẽ tự động hiển thị tệp tin 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, thông thường các website sẽ được cấu hình nhiều tệp tin mặc định thay vì một, thậm chí bạn có thể tự cấu hình bao nhiêu tệp tin mặc định mình muốn.

Dù vậy, phần mở rộng đầy đủ của một tệp tin HTML là .html và không có lý do gì để bạn không sử dụng phần mở rộng này.

Trích nguồn từ: (html5,style,guide,phong cách viết,quy ước)

Từ khóa » Chuẩn Html5