Các phương pháp hay nhất về HTML giúp các nhà phát triển cung cấp các trang web và ứng dụng web sáng tạo và có tính tương tác cao. Các phương pháp hay nhất này giúp bạn phát triển các ứng dụng giàu tính năng nhất và tập trung vào doanh nghiệp. Ngoài ra, các tổ chức có thể khai thác các phương pháp hay nhất này để cung cấp trải nghiệm người dùng liền mạch.
Ngày nay, khi chúng ta nói về HTML, chúng ta thường thảo luận về HTML5 (chứ không phải những người tiền nhiệm ngay lập tức của nó). HTML5 là một ngôn ngữ đánh dấu mạnh mẽ cho phép các nhà phát triển web tạo một tài liệu web. Nó dễ sử dụng và dễ hiểu, và hầu như tất cả các trình duyệt đều hỗ trợ nó. Ngoài ra, nó là nền tảng của hầu hết tất cả các Hệ thống quản lý nội dung (CMS)
Là một nhà phát triển web với ít kinh nghiệm, những câu hỏi như “Làm cách nào để viết HTML tốt hơn?” thường xuyên phát sinh. Bài viết này nhằm mục đích giúp bạn bắt đầu đi đúng hướng.
Phương pháp tiếp cận mã hóa HTML chung
Có thể bạn đã nắm được ngôn ngữ đánh dấu này, nhưng đây là một số phương pháp hay nhất về HTML5 sẽ cho phép bạn viết mã tốt hơn.
Luôn khai báo một loại Doctype
Khi tạo tài liệu HTML, khai báo DOCTYPE là bắt buộc để thông báo cho trình duyệt những tiêu chuẩn bạn đang sử dụng. Mục đích của nó là hiển thị đánh dấu của bạn một cách chính xác.
Ví dụ:
| Phiên bản | Khai báo Doctype |
|---|---|
| HTML 4.01 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| XHTML 1.1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| HTML5 | <!DOCTYPE html> |
Khai báo <DOCTYPE> phải ở dòng đầu tiên của tài liệu HTML của bạn. Dưới đây là so sánh giữa việc triển khai đúng và sai của nó:
| Thực hành tốt nhất | Thực hành tồi |
|---|---|
|
|
Ngoài ra, bạn có thể sử dụng loại tài liệu tương ứng với phiên bản HTML / XHTML mà bạn muốn sử dụng. Tìm hiểu về danh sách các khai báo loại tài liệu được đề xuất để giúp bạn chọn đúng.
Vị trí thẻ HTML
Các nhà phát triển biết rằng mục đích của các thẻ là giúp trình duyệt web phân biệt giữa nội dung HTML và nội dung thông thường. Thẻ HTML chứa thẻ mở, nội dung và thẻ đóng. Tuy nhiên, họ thường nhầm lẫn về vị trí thích hợp của các thẻ, các yếu tố yêu cầu thẻ đóng hoặc khi nào thì bỏ qua thẻ.
Ví dụ: đâu là nơi tốt nhất để đặt <script> ?
Các thẻ script thường được đặt bên trong phần tử <head> . Nhưng phương pháp hay nhất của HTML hiện đại là đặt chúng ở cuối tài liệu, trước khi đóng <body> , để trì hoãn việc tải xuống. Trang web sẽ tải Mô hình Đối tượng Tài liệu (DOM) trước tiên, hiển thị nó cho người dùng và sau đó yêu cầu các tập lệnh sau đó, giảm thời gian xuống byte đầu tiên (TTFB).
Trình duyệt diễn giải tài liệu HTML của bạn theo từng dòng từ trên xuống dưới. Vì vậy, khi nó đọc head và bắt gặp thẻ script, nó sẽ bắt đầu yêu cầu máy chủ lấy tệp. Vốn dĩ không có gì sai trong quá trình này, nhưng nếu trang đang tải một tệp lớn, nó sẽ mất nhiều thời gian và ảnh hưởng lớn đến trải nghiệm người dùng.
Phần tử gốc
Dưới phần tử gốc là thuộc tính <lang> hoặc ngôn ngữ . Thuộc tính này giúp dịch tài liệu HTML sang ngôn ngữ thích hợp. Cách tốt nhất là giữ giá trị của thuộc tính này càng ngắn càng tốt.
Ví dụ, tiếng Nhật chủ yếu được sử dụng ở Nhật Bản. Do đó, mã quốc gia không cần thiết khi nhắm mục tiêu ngôn ngữ tiếng Nhật.
| Thực hành tốt nhất | Thực hành tồi |
|---|---|
<html lang="ja"> |
<html lang="ja-JP"> |
Những điều Nên và Không nên trong HTML
Một trong những phương pháp hay nhất về HTML phổ biến nhất là kiểm tra những điều nên làm và không nên làm . Dưới đây là một số điều không nên trong mã hóa HTML:
| Sự mô tả | Thực hành tốt | Thực hành tồi |
|---|---|---|
| Trong văn bản, sử dụng mã HTML tương đương của các ký tự Unicode thay vì chính ký tự. | <p>Copyright © 2021 W3C<sup>®</sup></p> |
<p>Copyright © 2021 W3C<sup>®</sup></p> |
| Loại bỏ khoảng trắng xung quanh các thẻ và giá trị thuộc tính. | <h1 class="title">HTML5 Best Practices</h1> |
<h1 class=" title " > HTML5 Best Practices </h1> |
| Thực hành tính nhất quán và tránh trộn lẫn các trường hợp ký tự. | <a href="#status">Status</a> |
<a HREF="#status">Status</a> |
| Không phân tách các thuộc tính bằng hai hoặc nhiều khoảng trắng. | <input type="text" name="LastName"> |
<input type="text" name="LastName"> |
Giữ nó đơn giản
Giống như bất kỳ phương pháp viết mã nào, nguyên tắc “giữ cho nó đơn giản” rất có thể áp dụng cho HTML và HTML5. Nói chung, HTML5 tương thích với các phiên bản HTML và XHTML cũ hơn. Vì lý do đó, chúng tôi khuyên bạn nên tránh sử dụng các khai báo hoặc thuộc tính XML.
Ví dụ:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <!DOCTYPE html>Bạn không cần phải khai báo mã như vậy trừ khi bạn muốn viết một tài liệu XHTML. Tương tự, bạn không cần các thuộc tính XML, chẳng hạn như:
<p lang="en" xml:lang="en">...</p> Viết mã với SEO trong tâm trí
Các nhà phát triển nên ghi nhớ SEO. Nội dung web không được tìm thấy cũng không được lập chỉ mục. Vì lý do đó, đây là một số phương pháp hay nhất về SEO tốt nhất cần xem xét:
Thêm siêu dữ liệu có ý nghĩa
Thẻ <base> là một thẻ tiện dụng, nhưng việc lạm dụng nó có thể dẫn đến một số hành vi không trực quan. Do đó, nếu bạn khai báo thẻ cơ sở, thì mọi liên kết trong tài liệu sẽ là tương đối trừ khi được chỉ định rõ ràng:
<base href="http://www.kinsta.com/" />Cú pháp này thay đổi hành vi mặc định của một số liên kết. Ví dụ: liên kết đến một trang web bên ngoài chỉ với tên trang và phần mở rộng:
href="coding.org"Hoặc trình duyệt sẽ diễn giải nó là:
href="http://www.kinsta.com/coding.org"Việc diễn giải này trở nên hỗn loạn, vì vậy sẽ an toàn hơn khi luôn sử dụng các đường dẫn tuyệt đối cho các liên kết của bạn.
Mặt khác, viết mô tả thẻ meta không hoàn toàn là một phần của các phương pháp hay nhất về HTML, nhưng nó vẫn quan trọng không kém. Thuộc tính <meta name="description"> là những gì mà trình thu thập thông tin của công cụ tìm kiếm tham chiếu khi chúng lập chỉ mục trang của bạn, vì vậy nó rất quan trọng đối với tình trạng SEO của bạn.
Đặt thẻ tiêu đề thích hợp
Thẻ <title> làm cho trang web thân thiện với công cụ tìm kiếm. Đối với một điều, văn bản bên trong <title> xuất hiện trong các Trang kết quả của Công cụ Tìm kiếm (SERP) của Google cũng như các tab và thanh trình duyệt web của người dùng.
Lấy ví dụ, khi bạn tìm kiếm từ khóa “HTML5”. Tiêu đề trong kết quả tìm kiếm này cho biết thuộc tính tiêu đề cụ thể và tác giả. Điều này rất quan trọng trong SEO và tạo lưu lượng truy cập trang web.
Hình ảnh phải có thuộc tính thay thế
Sử dụng thuộc tính alt có ý nghĩa với các phần tử <img> là điều bắt buộc để viết mã hợp lệ và có ngữ nghĩa.
Trong bảng bên dưới, cột thực hành không tốt hiển thị phần tử <img> không có thuộc tính alt. Mặc dù ví dụ thứ hai trong cùng một cột có thuộc tính alt, nhưng giá trị của nó là vô nghĩa.
| Thực hành tốt | Thực hành tồi |
|---|---|
|
|
Thuộc tính Meta mô tả
Mô tả meta là một phần tử HTML mô tả và tóm tắt nội dung của một trang web. Mục đích của nó là để người dùng tìm bối cảnh của trang. Mặc dù siêu dữ liệu không còn giúp ích gì nữa cho thứ hạng SEO, nhưng mô tả meta vẫn đóng một vai trò quan trọng trong SEO trên trang.
Đây là một mã mẫu bao gồm các từ khóa, mô tả, tên tác giả và bộ ký tự. Bộ ký tự được sử dụng để hỗ trợ hầu hết các ký tự và ký hiệu từ các ngôn ngữ khác nhau. Mặt khác, bạn có thể đặt cookie, thêm ngày sửa đổi và cho phép trang làm mới.
<!DOCTYPE html> <html> <head> <title>HTML Best Practices in Website Design</title> <meta name = "keywords" content = "HTML, Website Design, HTML Best Practices" /> <meta name = "description" content = "Learn about HTML best practices." /> <meta name = "author" content = "John Doe" /> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" /> </head> <body> <p>Let's learn how to code HTML5!</p> </body> </html>Thuộc tính tiêu đề có liên kết
Trong các phần tử neo, cách tốt nhất là sử dụng các thuộc tính tiêu đề để cải thiện khả năng truy cập. Thuộc tính tiêu đề làm tăng ý nghĩa của thẻ liên kết. Thẻ <a> (hoặc phần tử neo) được ghép nối với thuộc tính href của nó, tạo một siêu liên kết đến các trang web, địa chỉ email và tệp. Nó được sử dụng để liên kết các vị trí trong cùng một trang hoặc các địa chỉ bên ngoài.
Kiểm tra ví dụ bên dưới cột thực hành không tốt – ví dụ đó là thừa. Loại thực hành này hiển nhiên nếu người dùng sử dụng trình đọc màn hình để đọc thẻ liên kết và đọc cùng một văn bản cho người nghe hai lần. Trình đọc màn hình là một công nghệ hỗ trợ được cung cấp cho người khiếm thị hoặc những người bị khuyết tật học tập. Một phương pháp hay, nếu bạn chỉ đang lặp lại văn bản của anchor, thì tốt hơn hết là bạn không nên sử dụng tiêu đề.
| Thực hành tốt | Thực hành tồi |
|---|---|
<a href="http://kinsta.com/our-pricing" title="Learn about our products.">Click here</a> |
<a href="http://kinsta.com/our-pricing" title="Click Here">Click here</a> |
Các phương pháp hay nhất về HTML trong bố cục
Việc phát triển trang web không chỉ đơn giản là tạo một khối văn bản và tiêu đề, các trang liên kết là xong. Có một số phương pháp hay nhất trong HTML cần xem xét để tận dụng tối đa trang web của bạn.
Đặt cấu trúc tài liệu thích hợp
Các tài liệu HTML sẽ vẫn hoạt động mà không có các phần tử chính: <html> , <head> và <body> . Tuy nhiên, các trang có thể không hiển thị chính xác nếu thiếu các yếu tố này. Để đạt được điều đó, điều quan trọng là phải sử dụng cấu trúc tài liệu thích hợp một cách nhất quán.
Đăng kí để nhận thư mới
Nhóm các phần có liên quan
Để phân nhóm nội dung theo chủ đề, hãy sử dụng phần tử phần. Theo đặc tả W3C, một <section> phải chứa một tiêu đề (H1, H2, v.v.). Một số nhà phát triển bỏ qua hoàn toàn việc sử dụng phần tử tiêu đề, nhưng chúng tôi khuyên bạn nên đưa nó vào để tiếp cận những người dùng tốt hơn bằng cách sử dụng trình đọc màn hình:
| Thực hành tốt | Thực hành tồi |
|---|---|
|
|
Các phương pháp hay nhất về nội dung được nhúng
Thẻ <embed> đóng vai trò là nơi chứa tài nguyên bên ngoài. Điều này bao gồm các trang web, hình ảnh, video hoặc plug-in. Tuy nhiên, bạn phải xem xét rằng hầu hết các trình duyệt không còn hỗ trợ Java Applet và plug-in. Hơn nữa, các điều khiển ActiveX không còn được hỗ trợ trong bất kỳ trình duyệt nào và hỗ trợ cho Shockwave Flash cũng đã bị tắt trong các trình duyệt hiện đại.
Chúng tôi đề xuất những điều sau:
- Để có ảnh, hãy sử dụng
<img>. - Đối với HTML được lấy từ một trang web khác, hãy sử dụng
<iframe>. - Đối với video hoặc âm thanh, hãy sử dụng
<video>và<audio>.
Thuộc tính alt trong phần tử <img> cung cấp mô tả hình ảnh hữu ích cho các công cụ tìm kiếm và trình đọc màn hình. Nó có thể đặc biệt hữu ích cho người dùng khi không thể xử lý hình ảnh:
| Thực hành tốt | Thực hành tồi |
|---|---|
<img alt="HTML Best Practices" src="/img/logo.png"> |
<img src="/img/logo.png"> |
Để trống thuộc tính alt nếu có văn bản bổ sung để giải thích hình ảnh. Điều này là để tránh dư thừa:
| Thực hành tốt | Thực hành tồi |
|---|---|
<img alt="" src="/img/icon/warning.png"> Warning |
<img alt="Warning Sign" src="/img/icon/warning.png"> Warning |
Để trống các phần tử <iframe> nếu có một số hạn chế trong nội dung của nó. Phần tử iframe trống luôn an toàn:
| Thực hành tốt | Thực hành tồi |
|---|---|
|
|
Các nhà phát triển nên cung cấp nội dung dự phòng hoặc liên kết dự phòng cho bất kỳ phần tử <audio> hoặc <video> nào, giống như với hình ảnh. Nội dung dự phòng là cần thiết, đặc biệt là đối với các phần tử mới được giới thiệu trong HTML:
| Thực hành tốt | Thực hành tồi |
|---|---|
|
|
Giảm số lượng phần tử
Các tài liệu HTML trở nên phức tạp, đặc biệt là đối với các trang web có nhiều nội dung. Tốt nhất là giảm số lượng phần tử trên một trang xuống càng ít càng tốt nếu bạn có thể quản lý. Tìm hiểu cách sử dụng các phần tử tiêu đề một cách khôn ngoan và làm theo cách các phần tử <h1> đến <h6> biểu thị hệ thống phân cấp nội dung của HTML. Điều này làm cho nội dung của bạn có ý nghĩa hơn đối với người đọc, phần mềm đọc màn hình và công cụ tìm kiếm.
Thí dụ:
<h1>The topmost heading</h1> <h2>This is a subheading that follows the topmost heading.</h2> <h3>This is a subheading that follows the h2 heading.</h3> <h4>This is a subheading that follows the h3 heading.</h4> <h5>This is a subheading that follows the h4 heading.</h5> <h6>This is a subheading that follows the h5 heading.</h6>Đối với các nhà phát triển và người tạo nội dung WordPress, hãy sử dụng phần tử <h1> cho tiêu đề của bài đăng trên blog thay vì tên của trang web. Điều này giúp ích trong việc thu thập thông tin của công cụ tìm kiếm và cách tiếp cận này thân thiện với SEO.
Ngoài ra, hãy sử dụng phần tử HTML phù hợp để truyền tải thông tin mà nó chứa nhằm đạt được cấu trúc nội dung có ngữ nghĩa và ý nghĩa. Ví dụ: sử dụng <em> để nhấn mạnh và <strong> để nhấn mạnh thay vì những từ trước của chúng <i> hoặc <b> , hiện không được dùng nữa.
Bạn cảm thấy mệt mỏi với việc hỗ trợ lưu trữ WordPress cấp độ 1 phụ mà không có câu trả lời? Hãy thử nhóm hỗ trợ đẳng cấp thế giới của chúng tôi! Kiểm tra các kế hoạch của chúng tôi
Thí dụ:
<em>emphasized text</em> <strong>strongly emphasized text</strong>Cũng quan trọng không kém, hãy sử dụng <p> cho các đoạn văn và tránh sử dụng <br /> để thêm một dòng mới giữa các đoạn văn. Thay vào đó, hãy sử dụng các thuộc tính lề và / hoặc đệm CSS để định vị nội dung của bạn tốt hơn. Đôi khi, bạn có thể thấy mình bị dụ sử dụng <blockquote> cho mục đích thụt lề. Tránh cạm bẫy này – chỉ sử dụng nó khi trích dẫn văn bản.
Những điều Nên và Không nên trong Bố cục
Một trong những phương pháp hay nhất về HTML là sử dụng các phần tử phù hợp về ngữ nghĩa trong bố cục trang của bạn. Một số yếu tố sẽ giúp bạn sắp xếp bố cục của mình theo từng phần.
Với sự đa dạng của các chủ đề trong bố cục HTML, tốt nhất bạn nên làm nổi bật những việc nên làm và không nên làm trong bố cục một cách nhanh chóng. Ví dụ: HTML mang lại nhiều ý nghĩa ngữ nghĩa hơn cho các phần tử đầu trang và chân trang, vì vậy đừng bỏ qua việc sử dụng <header> vì nó được sử dụng trong bất kỳ phần hoặc bài viết nhất định nào. Ngoài việc kiểm soát các <title> và <meta> và các yếu tố phong cách khác của tài liệu, nó được sử dụng trong các tiêu đề, ngày xuất bản và nội dung giới thiệu khác của trang hoặc phần của bạn. Tương tự, bạn có thể loại bỏ quan niệm rằng chân trang chỉ thuộc về phần bản quyền – bây giờ, bạn có thể sử dụng nó ở mọi nơi.
Đối với phần tử <nav> , bạn nên sử dụng nó để điều hướng trên toàn trang web. Không cần phải khai báo vai trò vì việc sử dụng đã được ngụ ý trong thẻ.
| Thực hành tốt | Thực hành tồi |
|---|---|
<nav></nav> |
<nav role="navigation"></nav> |
Đối với phần tử <main> , nó đã là một phần của các phiên bản HTML5 mới nhất, biểu thị nội dung chính của phần thân tài liệu. Vì vậy, không cần sử dụng <div> nữa khi chúng ta có một thẻ cụ thể hơn cho nội dung chính của mình.
| Thực hành tốt | Thực hành tồi |
|---|---|
<main id="content"></main> |
<div id="content"></div> |
<article> được sử dụng cho một khối nội dung. Nó độc lập và có ý nghĩa mà không cần phải giải thích thêm, trong khi <section> được sử dụng để chia một trang thành các lĩnh vực chủ đề khác nhau hoặc để phân chia một bài báo riêng lẻ. Thật không may, nhiều nhà phát triển vẫn sử dụng hai thứ này thay thế cho nhau.
Hãy xem xét rằng <section> là một thẻ chung chung hơn thẻ <article> . Điều này có nghĩa là nội dung trước biểu thị nội dung liên quan đến chủ đề đang bàn, nhưng không nhất thiết phải khép kín. Ngược lại, cái thứ hai là một tài sản độc lập.
Nhưng khi không có thẻ đánh dấu thích hợp cho mục đích của bạn, bạn nên sử dụng cái gì? Câu trả lời là sử dụng <div> khi không có phần tử nào khác hoạt động hoặc khi đó là một phần tử theo phong cách cụ thể. Đối với mục đích của chúng tôi, việc sử dụng <div> cũng là một việc làm không tốt.
Hãy quay lại <section> , là một thẻ đánh dấu ngữ nghĩa. Nó không phải là một phong cách, và điều quan trọng là phải nhấn mạnh nó. Trên thực tế, một phương pháp viết mã tốt nên bao gồm thẻ tiêu đề.
Bây giờ, những điều không nên với <section> sau đó là bạn không nên sử dụng nó để gắn thẻ wrapper, container hoặc bất kỳ khối thuần túy kiểu cách nào khác. Dưới đây là một ví dụ về thực hành mã hóa kém với <section> :
<section id="wrapper"> <section class="container-fluid"> <div id="main"> </div> </section> </section>Đây là một cách tiếp cận tốt hơn, nhưng nó lạm dụng <div> :
<div id="wrapper"> <div class="container-fluid"> <div id="main"> </div> </div> </div>Do đó, một phương pháp viết mã tốt hơn nhiều là:
<body id="wrapper"> <div class="container-fluid"> <main id="main"> </main> </div> </body>Một phần phổ biến của nhiều bố cục là các hình để biểu diễn dữ liệu và phần tử <figure> chủ yếu được sử dụng với các hình ảnh. Tuy nhiên, nó có nhiều mục đích sử dụng hơn, vì bất kỳ thứ gì liên quan đến tài liệu đều có thể được định vị ở bất kỳ đâu và được bao bọc trong phần tử <figure> . Một số ví dụ bao gồm hình minh họa, bảng hoặc sơ đồ trong sách.
Một đặc điểm thú vị của <figure> là nó không đóng góp vào đường nét của tài liệu. Do đó, bạn có thể sử dụng nó để nhóm các phần tử với một chủ đề chung – ví dụ: một số hình ảnh với một <figcaption> chung, hoặc thậm chí một khối mã.
Trong nhóm các phần tử với <figure> , hãy sử dụng <figcaption> . Chú thích <figcaption> phải nằm ngay sau thẻ mở <figure> hoặc ngay trước thẻ đóng </figure> :
<figure> <img src="image1.jpg" alt="Bird Image"> <img src="image2.jpg" alt="Tree Image"> <img src="image3.jpg" alt="Sun Image"> <figcaption>Three images related to a topic</figcaption> </figure>Các phương pháp hay nhất về HTML trong viết kịch bản
HTML là một trong những công nghệ cốt lõi trong phát triển web. Nó có sức mạnh và các tính năng tuyệt vời khiến nó trở nên phổ biến với các nhà phát triển và chủ doanh nghiệp. Quá trình phát triển giao diện người dùng không ngừng đổi mới và để bắt kịp với nó, các nhà phát triển nên biết các phương pháp hay nhất trong tạo kịch bản HTML.
Sử dụng Trang tính kiểu bên ngoài
Các kiểu nội tuyến sẽ làm cho mã của bạn lộn xộn và không thể đọc được. Để đạt được điều đó, hãy luôn liên kết đến và sử dụng các bảng định kiểu bên ngoài. Ngoài ra, tránh sử dụng câu lệnh nhập trong tệp CSS của bạn vì chúng tạo ra một yêu cầu máy chủ bổ sung.
Điều này cũng xảy ra với CSS và JavaScript nội tuyến. Ngoài các vấn đề về khả năng đọc, điều này sẽ làm cho tài liệu của bạn nặng hơn và khó bảo trì hơn để bạn có thể tránh được mã nội tuyến.
Sử dụng đánh dấu chữ thường
Sử dụng các ký tự viết thường trong mã là một thông lệ tiêu chuẩn của ngành. Mặc dù sử dụng chữ hoa hoặc các trường hợp văn bản khác sẽ vẫn hiển thị trang của bạn, nhưng vấn đề không phải là tiêu chuẩn hóa mà là khả năng đọc mã.
Khả năng đọc mã là một khía cạnh quan trọng của mã hóa vì nó giúp làm cho các ứng dụng có thể bảo trì và an toàn. Không chỉ vậy, phát triển web chủ yếu bao gồm một nhóm. Làm cho mã của bạn có thể đọc được làm cho công việc của bạn và công việc của nhóm của bạn ít phức tạp hơn.
| Thực hành tốt | Thực hành tồi |
|---|---|
|
|
Những điều Nên và Không nên trong Viết kịch bản
Mặc dù có nhiều điều không nên trong mã hóa HTML, nhưng chúng tôi sẽ chia sẻ hai điều cơ bản không nên trong viết mã:
- Viết mã được thụt lề tốt và được định dạng nhất quán: Mã sạch và được viết tốt sẽ thúc đẩy khả năng đọc tốt hơn trên trang web của bạn, điều này giúp ích rất nhiều cho nhà phát triển của bạn và những người khác có thể làm việc với trang web. Nó cũng cho thấy sự chuyên nghiệp và chú ý đến từng chi tiết, phản ánh tốt thái độ của bạn với tư cách là một nhà phát triển.
- Hạn chế đưa quá nhiều nhận xét: Nhận xét là điều cần thiết và giúp mã của bạn dễ hiểu hơn. Tuy nhiên, cú pháp HTML rất dễ hiểu, vì vậy việc bình luận là không cần thiết trừ khi bạn phải làm rõ ngữ nghĩa và quy ước đặt tên.
Xác thực và thu nhỏ
Mã xác thực và mã giảm thiểu được sử dụng để xác định lỗi sớm. Đừng đợi cho đến khi bạn hoàn thành tài liệu HTML của mình – hãy tạo thói quen xác thực và xác định lỗi thường xuyên. Bạn có thể thực hiện xác thực theo cách thủ công hoặc sử dụng bất kỳ công cụ xác thực nào đã biết, chẳng hạn như W3C Markup Validator.
Bạn cũng có thể tận dụng tính năng thu nhỏ mã tích hợp trong bảng điều khiển MyKinsta. Điều này cho phép khách hàng kích hoạt tính năng thu nhỏ CSS và JavaScript tự động chỉ với một cú nhấp chuột đơn giản, điều này sẽ tăng tốc trang web của họ mà không cần nỗ lực thủ công.
Đồng thời, thực hành thu nhỏ bằng cách loại bỏ bất kỳ thứ gì không cần thiết như nhận xét hoặc khoảng trắng. Đảm bảo rằng bạn viết mã rõ ràng và ngắn gọn để giảm kích thước tệp HTML của bạn. Bạn có thể sử dụng các công cụ như HTML Minifier và các công cụ khác.
Bản tóm tắt
Nhiều tài nguyên về các phương pháp hay nhất HTML5 cho năm 2021 có sẵn trực tuyến để hỗ trợ bạn. Tuy nhiên, hãy nhớ quy tắc chung trong mã hóa: tính nhất quán. Bài viết này đã cung cấp những hiểu biết cơ bản và giúp bạn bắt đầu hành trình phát triển giao diện người dùng đó. Sử dụng hướng dẫn này, bạn sẽ nhanh chóng trở thành chuyên gia về HTML5 chính xác về mặt ngữ nghĩa.
Khi bạn đã sẵn sàng, hãy nhìn xa hơn những gì HTML có thể cung cấp và khám phá một số khuôn khổ HTML mã nguồn mở để xây dựng các ứng dụng web hiện đại, một trang. Chúng cung cấp khả năng đồng bộ hóa tuyệt vời giữa dữ liệu và giao diện người dùng, đồng thời hoạt động trơn tru với CSS và JavaScript.
Chúng tôi có bỏ lỡ bất kỳ phương pháp hay nhất nào về HTML mà bạn sử dụng trong mã hóa của riêng mình không? Cho chúng tôi biết trong phần ý kiến!
Tiết kiệm thời gian, chi phí và tối đa hóa hiệu suất trang web với:
- Trợ giúp tức thì từ các chuyên gia lưu trữ WordPress, 24/7.
- Tích hợp Cloudflare Enterprise.
- Tiếp cận khán giả toàn cầu với 34 trung tâm dữ liệu trên toàn thế giới.
- Tối ưu hóa với Giám sát Hiệu suất Ứng dụng được tích hợp sẵn của chúng tôi.
Tất cả những điều đó và hơn thế nữa, trong một kế hoạch không có hợp đồng dài hạn, hỗ trợ di chuyển và đảm bảo hoàn tiền trong 30 ngày. Kiểm tra các kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm ra kế hoạch phù hợp với bạn.
