Hướng dẫn html5 code - mã html5

Nội dung

• Quy ước (coding convention) viết code HTML5
  • Cách thức viết code một cách thông minh
  • Sử dụng đúng DOCTYPE
  • Sử dụng chữ viết thường cho tên các phần tử
    • Cách viết không tốt:
    • Cách viết rất không tốt:
    • Cách viết tốt:
  • Luôn sử dụng thẻ đóng cho tất cả các phần tử HTML
  • Thẻ đóng rỗng cho các phần tử HTML
  • Sử dụng chữ thường cho tên các thuộc tính
  • Sử dụng nháy kép cho các giá trị thuộc tính
  • Thuộc tính image
  • Khoảng trắng và dấu bằng
  • Tránh code dài trên một dòng
  • Lùi đầu dòng và cách dóng
    • Cách dòng và lùi đầu dòng như ví dụ dưới đây là không cần thiết:
    • Cách viết tốt hơn:
    • Ví dụ về Table:
    • Ví dụ về danh sách:
  • Các bạn có đặt ra câu hỏi nếu thiếu thẻ  và ?
    • Ví dụ:
  • Điều gì sẽ xảy ra nếu thiếu thẻ ?
    • Ví dụ:
  • Điều gì sẽ xảy ra nếu thiếu thẻ ?
  • Thẻ Meta
  • Các chú thích trong HTML
  • Style Sheets
  • Liên kết JavaScript trong HTML
    • Ví dụ:
  • Điều gì sẽ xảy ra nếu thiếu thẻ ?
  • Thẻ Meta
  • Sự khác biệt giữa .htm và .html
  • Khác biệt về mặt kỹ thuật

Quy ước (coding convention) viết code HTML5

Cách thức viết code một cách thông minh
Vào giữa khoảng 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.
Với XHTML đòi hỏi các lập trình viên phải viết code đúng cú pháp một cách nghiêm ngặt (well-formed).
HTML5 có cách thức viết tự do hơn nên bạn cần phải tự tạo cho mình thói quen  viết code theo đúng chuẩn.

Cách thức viết code một cách thông minh

Sử dụng đúng DOCTYPE
Trong tương lai, những bộ máy tìm kiếm và phân tích có thể sẽ muốn đọc các trang HTML của bạn. Vì một trang web tốt  là một trang web: “Cho phép dữ liệu được chia sẻ và tái sử dụng trên các ứng dụng, các doanh nghiệp và cộng đồng”.
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.

Sử dụng chữ viết thường cho tên các phần tử

Sử dụng đúng DOCTYPE

Sử dụng chữ viết thường cho tên các phần tửDOCTYPE ở dòng đầu tiên trong đoạn code của bạn:

Cách viết không tốt:

Sử dụng chữ viết thường cho tên các phần tử

Cách viết không tốt:

Cách viết rất không tốt:

• Cách viết tốt:
• Luôn sử dụng thẻ đóng cho tất cả các phần tử HTML
• Thẻ đóng rỗng cho các phần tử HTML
• Sử dụng chữ thường cho tên các thuộc tính

Cách viết không tốt:

This is a paragraph.

Cách viết rất không tốt:

This is a paragraph.

Cách viết tốt:

This is a paragraph.

Luôn sử dụng thẻ đóng cho tất cả các phần tử HTML

Thẻ đóng rỗng cho các phần tử HTML

Sử dụng chữ thường cho tên các thuộc tính

Cách viết không tốt:

This is a paragraph.
This is a paragraph.

Cách viết tốt:

This is a paragraph.
This is a paragraph.

Thẻ đóng rỗng cho các phần tử HTML

Sử dụng chữ thường cho tên các thuộc tính

Sử dụng nháy kép cho các giá trị thuộc tính

Thuộc tính image

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

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

Sử dụng chữ thường cho tên các thuộc tính

HTML5 cho phép bạn có thể sử dụng cả chữ thường và chữ hoa cho tên các thuộc tính.

Nhưng chúng tôi khuyên bạn nên sử dụng chữ thường cho tên các thuộc tính:

• Kết hợp cả chữ hoa và chữ thường sẽ không đẹp mắt.
• Các lập trình viên hay sử dụng chữ viết thường bởi (rất giống chuẩn XHTML).
• Viết thường nhìn đoạn code sẽ rõ ràng hơn.
• Viết chữ thường sẽ nhanh và dễ dàng hơn.

Cách viết không tốt:

Cách viết tốt:

Sử dụng nháy kép cho các giá trị thuộc tính

HTML5 cho phép bạn gán giá trị cho các thuộc tính mà không cần dấu ngoặc.

Nhưng chúng tôi khuyên bạn nên sử dụng dấu nháy kép cho các giá trị thuộc tính:

• Bạn cần sử dụng dấu nháy kép nếu giá trị chứa dấu cách.
• Lúc dùng dấu nháy kép, lúc không điều này tạo một thói quen không tốt cho người lập trình.
• Để giá trị trong dấu ngoặc sẽ dễ đọc và phân biệt hơn.

Ví dụ dưới  không chạy vì thuộc tính class chứa giá trị có khoảng trắng:

Ví dụ này sẽ chạy khi:

Thuộc tính image

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ì. 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ì.

Nên xác định kích thước các bức ảnh.  Nó sẽ không làm trang web của bạn bị nhấp nháy vì trình duyệt có thể giữ chỗ không gian cho bức ảnh trước khi nó được nạp.

Khoảng trắng và dấu bằng

Các khoảng trắng có thể đặt ở hai đầu dấu bằng

Nhưng nếu không để khoảng trắng sẽ làm cho đoạn code của bạn dễ đọc và các thuộc tính trở nên rõ ràng hơn:

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

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 đó. Điều này không hay chút nào.

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 nên thêm dòng trống vào đoạn code nếu không cần thiết.

Để dễ đọc, thêm dòng trống để tách các đoạn code dài 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 nên sử dụng TAB

Không thêm dòng trống hoặc dấu cách khi không cần thiết, nhất là khi gặp những dòng code ngắn hoặc những đoạn code liên quan đến nhau. Chúng không thực sự cần thiết để tách tất cả các phần tử:

Cách dòng và lùi đầu dòng như ví dụ dưới đây là không cần thiết:

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

Ví dụ về Table:

Ví dụ về danh sách:

This is a paragraph.

Các bạn có đặt ra câu hỏi nếu thiếu thẻ  và ?

Theo chuẩn HTML5, bạn có thể  không cần sử dụng thẻ và thẻ .

Đoạn code dưới đây vẫn hoàn toàn hợp lệ trong HTML5

Ví dụ:

This is a paragraph.

Tuy nhiên chúng tôi khuyên bạn không nên bỏ thẻ  và thẻ.

Phần tử là khung của trang. Trong đó bạn có thể khai báo ngôn ngữ mà bạn đang dùng trong trang:

This is a paragraph.

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.

Bạn có thể bỏ qua thẻ  và tuy nhiên nó có thể làm treo DOM và phần mềm XML

Việc bỏ qua thẻ  có thể khiến trang web của bạn gặp phải lỗi của các trình duyệt cũ( các phiên bản IE9).

Điều gì sẽ xảy ra nếu thiếu thẻ ?

Theo chuẩn HTML5, bạn có thể bỏ qua thẻ .

Theo mặc định, trình duyệt sẽ tự động thêm thẻ trước thẻ .

Bạn có thể làm giảm việc phức tạp khi viết các các đoạn code HTML, bằng cách bỏ qua thẻ :

Ví dụ:

This is a paragraph.

Tuy nhiên chúng tôi khuyên bạn không nên bỏ thẻ  và thẻ.

Phần tử là khung của trang. Trong đó bạn có thể khai báo ngôn ngữ mà bạn đang dùng trong trang:

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.

This is a paragraph.

Bạn có thể bỏ qua thẻ  và tuy nhiên nó có thể làm treo DOM và phần mềm XML

This is a paragraph.

Việc bỏ qua thẻ  có thể khiến trang web của bạn gặp phải lỗi của các trình duyệt cũ( các phiên bản IE9).

Điều gì sẽ xảy ra nếu thiếu thẻ ?

This is a paragraph.

Theo chuẩn HTML5, bạn có thể bỏ qua thẻ .

This is a paragraph.

Theo mặc định, trình duyệt sẽ tự động thêm thẻ trước thẻ .

Bạn có thể làm giảm việc phức tạp khi viết các các đoạn code HTML, bằng cách bỏ qua thẻ :

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. Tuy nhiên chúng ta cần thời gian để làm quen với việc này.

This is a paragraph.

Thẻ Meta

This is a paragraph.

Phần tử 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:

Để đảm bảo các công cụ tìm kiếm tìm trang của bạn một cách chuẩn xác, 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 của trang:
background-color: lightgrey;
font-family: “Arial Black”, Helvetica, sans-serif;
font-size: 16em;
color: black;
}

• Các chú thích trong HTML
• 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 2 chấm và một dấu cách để tách biệt phần thuộc tính và giá trị.
• Sử dụng dấu cách sau dấu phẩy hoặc dấu chấm phẩy.
• Sử dụng dấu chấm phẩy sau mỗi cặp “thuộc tính/giá trị”.
• 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 riêng biệt, phía trước không có dấu cách.
• Không nên sử dụng 80 ký tự trên cùng một dòng.

Thêm dấu cách phía sau dấu phẩy hoặc dấu chấm phẩy là quy tắc chung cho tất cả các loại văn bản.

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):

This is a paragraph.

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 “lộn xộn” 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ẽ tạo ra các kết quả khác nhau trong JavaScript:

Ví dụ:

This is a paragraph.

Nếu có thể, hãy sử dụng các quy ước đặt tên giống nhau(như JavaScript) trong 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 chữ hoa và chữ thường với các 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 chữ hoa và chữ 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 trang web từ một máy chủ không phân biệt chữ hoa và chữ thường sang một máy chủ phân biệt chữ hoa và chữ thường, có thể dẫn tới một vài lỗi nhỏ khiến cho trang web của bạn xuất hiện lỗi.

Để 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 (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)..html (hoặc .htm).

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

Các tệp tin JavaScript nên có phần mở rộng là .js.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.

Điểm khác biệt:

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

.html là do “kế thừa” từ 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://timoday.edu.vn/html/), 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ì sử dụng một, thậm chí bạn có thể tự cấu hình tệp tin mặc định khi cần thiết.

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.