Làm cách nào tôi có thể thực hành viết HTML?
|
Chủ tịch WebFX. Bill có hơn 25 năm kinh nghiệm trong ngành tiếp thị Internet chuyên về SEO, UX, kiến trúc thông tin, tự động hóa tiếp thị, v.v. Nền tảng của William về máy tính khoa học và giáo dục từ Shippensburg và MIT đã cung cấp nền tảng cho MarketingCloudFX cũng như các dự án nghiên cứu và phát triển quan trọng khác tại WebFX
Hầu hết các trang web bạn gặp đều được hiển thị cho bạn qua HTML, ngôn ngữ đánh dấu của web trên toàn thế giới. Trong bài viết này, tôi sẽ chia sẻ với bạn 20 phương pháp hay nhất về HTML sẽ dẫn đến đánh dấu chính xác và rõ ràng. Có cấu trúc HTML phù hợp cho phép các công cụ và thiết bị khác nhau hiển thị chính xác nội dung của bạn Điều này có nghĩa là định dạng HTML phù hợp có thể tạo ra sự khác biệt giữa trải nghiệm thú vị của người dùng hoặc thoát nhanh khỏi trang web của bạn. Trước khi chúng ta bắt đầu, sự khác biệt giữa HTML và HTML5 là gì? HTML5 là phiên bản thứ năm của HTML và cung cấp quản lý nội dung trang web và ứng dụng web tốt hơn. Những mẹo này áp dụng cho cả HTML và HTML5 Khai báo doctype phải là điều đầu tiên trong tài liệu HTML của bạn. Khai báo doctype cho trình duyệt biết về các tiêu chuẩn XHTML mà bạn sẽ sử dụng và giúp trình duyệt đọc và hiển thị đánh dấu của bạn một cách chính xác. Tôi khuyên bạn nên sử dụng XHTML 1. 0 loại tài liệu nghiêm ngặt Một số nhà phát triển coi đó là một lựa chọn khó khăn vì tiêu chuẩn cụ thể này ít dễ tha thứ hơn so với các khai báo loại tài liệu lỏng lẻo hoặc chuyển tiếp, nhưng nó cũng đảm bảo rằng mã của bạn tuân thủ nghiêm ngặt các tiêu chuẩn mới nhất Thẻ
Ví dụ trên xuất hiện giống như hình ảnh sau trong trang kết quả của công cụ tìm kiếm của Google.  Khám phá các trình soạn thảo HTML tốt nhất 3. Sử dụng thẻ meta mô tảThẻ meta làm cho trang web của bạn có ý nghĩa hơn đối với các tác nhân người dùng như trình thu thập dữ liệu của công cụ tìm kiếm Thuộc tính meta mô tảThuộc tính meta 3 mô tả mục đích cơ bản của trang web của bạn (bản tóm tắt nội dung của trang web). Đối với mỗi trang web, bạn nên đặt một bản tóm tắt ngắn gọn và có liên quan bên trong thẻ mô tả meta. Ví dụ, mô tả nàyHiển thị trong trang kết quả của công cụ tìm kiếm của Google như sau. Thay vào đó, hãy cố gắng giải thích mục đích trang web của bạn một cách đơn giản và dễ hiểu. Thuộc tính Meta từ khóaThuộc tính meta 4 chứa danh sách các từ khóa và cụm từ được phân tách bằng dấu phẩy có liên quan đến trang web của bạn. Những từ khóa này làm cho trang web của bạn có ý nghĩa hơn. Một lần nữa, giống như với thuộc tính meta 3, tránh lặp từ và cụm từ;4. Sử dụng Div để chia bố cục của bạn thành các phần chínhCân nhắc việc chia trang web của bạn thành các phần chính như bước đầu tiên trong việc xây dựng thiết kế trang web. Làm như vậy ngay từ đầu sẽ thúc đẩy mã sạch và được thụt lề tốt. Nó cũng sẽ giúp bạn tránh nhầm lẫn và tránh sử dụng quá nhiều div, đặc biệt nếu bạn đang viết phần đánh dấu phức tạp và dài dòng 5. Tách nội dung khỏi bản trình bàyHTML của bạn là nội dung của bạn. CSS cung cấp bản trình bày trực quan cho nội dung của bạn. Không bao giờ trộn cả hai Không sử dụng kiểu nội tuyến trong HTML của bạn. Luôn tạo một tệp CSS riêng cho kiểu của bạn. Điều này sẽ giúp bạn và các nhà phát triển tương lai có thể làm việc trên mã của bạn, thực hiện các thay đổi đối với thiết kế nhanh hơn và làm cho nội dung của bạn dễ hiểu hơn đối với tác nhân người dùng Thực hành xấu. Kiểu nội tuyếnBên dưới, bạn có thể thấy một thành phần đoạn văn được tạo kiểu bằng thuộc tính 6Nó sẽ hoạt động, nhưng đó là cách làm không tốt 06. Thu nhỏ và hợp nhất CSSMột trang web đơn giản thường có một tệp CSS chính và có thể có thêm một vài thứ như thiết lập lại CSS và các bản sửa lỗi dành riêng cho trình duyệt. Nhưng mỗi tệp CSS phải thực hiện một yêu cầu HTTP, điều này làm chậm thời gian tải trang web. Một giải pháp cho vấn đề này là giảm thiểu (loại bỏ các ký tự không cần thiết như dấu cách, dòng mới và tab) tất cả mã của bạn và cố gắng hợp nhất các tệp có thể được kết hợp thành một tệp Điều này sẽ cải thiện thời gian tải trang web của bạn. Một vấn đề với cách tiếp cận này là bạn phải “hủy tinh chỉnh” (vì khó đọc mã không được định dạng) và sau đó thực hiện lại quy trình thu nhỏ mỗi khi bạn cần cập nhật mã của mình. Vì vậy, tốt hơn là làm điều này vào cuối chu kỳ sản xuất của bạn Bạn có thể tìm thấy các công cụ trực tuyến để thu nhỏ và tối ưu hóa CSS trong danh sách các trình tối ưu hóa CSS này. Ngoài ra, hãy luôn đặt liên kết tham chiếu biểu định kiểu của bạn bên trong các thẻ 7 vì nó sẽ giúp trang web của bạn phản hồi nhanh hơn khi tải7. Giảm thiểu, hợp nhất và di chuyển JavaScript xuốngGiống như CSS, không bao giờ sử dụng JavaScript nội tuyến và cố gắng thu nhỏ và hợp nhất các thư viện JavaScript của bạn để giảm số lượng yêu cầu HTTP cần được thực hiện để tạo một trong các trang web của bạn. Nhưng không giống như CSS, có một điều thực sự tồi tệ về các tệp JavaScript bên ngoài. trình duyệt không cho phép tải xuống song song, điều đó có nghĩa là trình duyệt không thể tải xuống bất kỳ thứ gì trong khi đang tải xuống JavaScript, dẫn đến việc trang có cảm giác như đang tải chậm. Vì vậy, chiến lược tốt nhất ở đây là tải JavaScript lần cuối (tôi. e sau khi CSS của bạn được tải). Để thực hiện việc này, hãy đặt JavaScript ở cuối tài liệu HTML của bạn nếu có thể. Phương pháp hay nhất khuyên bạn nên làm điều này ngay trước thẻ đóng 8Ví dụ8. Sử dụng các yếu tố tiêu đề một cách khôn ngoanTìm hiểu cách sử dụng các phần tử 9 đến 0 để biểu thị cấu trúc phân cấp nội dung HTML của bạn. Điều này giúp làm cho nội dung của bạn có ý nghĩa hơn đối với phần mềm đọc màn hình và công cụ tìm kiếm, cũng như các tác nhân người dùng khácVí dụ5Đối với blog, tôi thực sự khuyên bạn nên sử dụng phần tử 9 cho tiêu đề của bài đăng trên blog thay vì tên của trang web vì đây là điều quan trọng nhất đối với các công cụ tìm kiếmVí dụ mã WordPress79. Sử dụng đúng phần tử HTML ở đúng nơiTìm hiểu về tất cả các phần tử HTML có sẵn và sử dụng chúng một cách chính xác cho cấu trúc nội dung có ý nghĩa và ngữ nghĩa. Sử dụng 2 để nhấn mạnh và 3 để nhấn mạnh, thay vì 4 hoặc 5 (không được dùng nữa)Ví dụ2Sử dụng 6 cho đoạn vănKhông sử dụng 7 để thêm một dòng mới giữa các đoạn văn; . Đối với một tập hợp các yếu tố liên quan, sử dụng
Không sử dụng 01 cho mục đích thụt đầu dòng;10. Không sử dụng Div cho mọi thứĐôi khi, các nhà phát triển kết thúc việc bọc các thẻ 02 xung quanh nhiều thẻ 02 chứa nhiều thẻ 02 hơn, tạo ra một núi div. Theo dự thảo mới nhất của đặc tả HTML của W3C, 02 là một phần tử vô nghĩa nên được sử dụng “như một phần tử cuối cùng, khi không có phần tử nào khác phù hợp. ” Nhưng nhiều người sử dụng nó ngay cả đối với những thứ tầm thường như hiển thị các phần tử nội tuyến dưới dạng phần tử khối (thay vì thuộc tính CSS 06). Tránh tạo ra hàng núi div bằng cách sử dụng chúng một cách tiết kiệm và có trách nhiệm11. Use an Unordered List () for NavigationĐiều hướng là một khía cạnh rất quan trọng của thiết kế trang web và yếu tố 8 kết hợp với CSS làm cho các menu điều hướng của bạn có ngữ nghĩa (bởi vì xét cho cùng, menu điều hướng là một danh sách các liên kết) cũng như đẹp mắt. Ngoài ra, theo quy ước, danh sách không có thứ tự cho menu điều hướng của bạn là đánh dấu được chấp nhậnMột ví dụ về một danh sách không có thứ tự5 CSS để tạo kiểu cho Danh sách không có thứ tự thành Thanh điều hướng ngang6 đầu ra12. Đóng thẻ của bạnĐóng tất cả các thẻ của bạn là một thông số kỹ thuật của W3C. Một số trình duyệt vẫn có thể hiển thị chính xác các trang của bạn (ở chế độ Quirks), nhưng việc không đóng các thẻ của bạn là không hợp lệ theo tiêu chuẩn Ví dụ0 13. Sử dụng đánh dấu chữ thườngĐó là một thông lệ tiêu chuẩn của ngành để giữ cho đánh dấu của bạn được viết thường. Viết hoa đánh dấu của bạn sẽ hoạt động và có thể sẽ không ảnh hưởng đến cách các trang web của bạn được hiển thị, nhưng nó ảnh hưởng đến khả năng đọc mã Thực hành xấu1 Thực hành tốt0 14. Sử dụng thuộc tính Alt với hình ảnhSử dụng thuộc tính 08 có ý nghĩa với các phần tử 09 là điều bắt buộc để viết mã ngữ nghĩa và hợp lệThực hành xấu3____34 Thực hành tốt5 15. Sử dụng Thuộc tính Tiêu đề với Liên kết (Khi Cần)Sử dụng thuộc tính 50 trong các phần tử neo của bạn sẽ cải thiện khả năng truy cập khi được sử dụng đúng cách. Điều quan trọng là phải hiểu rằng thuộc tính 50 nên được sử dụng để tăng ý nghĩa của thẻ neoThực hành xấu6 Khi trình đọc màn hình đọc thẻ liên kết, người nghe phải nghe cùng một văn bản hai lần. Điều tồi tệ hơn là nó không giải thích trang được liên kết đến là gì Nếu bạn chỉ đang lặp lại văn bản của anchor hoặc không có ý định mô tả trang được liên kết, tốt hơn hết là bạn không nên sử dụng 50Thực hành tốt7 16. Sử dụng Fieldset và Nhãn trong Biểu mẫu WebSử dụng phần tử 53 để gắn nhãn các trường đầu vào. Chia các trường đầu vào thành các bộ logic bằng cách sử dụng 54. Đặt tên cho một 54 bằng cách sử dụng 56Tất cả điều này sẽ làm cho biểu mẫu của bạn dễ hiểu hơn đối với người dùng và cải thiện chất lượng mã của bạn Ví dụ8 17. Sử dụng bản sửa lỗi IE mô-đunBạn có thể sử dụng nhận xét có điều kiện để nhắm mục tiêu Internet Explorer nếu bạn gặp sự cố với các trang web của mình IE 7 Ví dụ9 IE 6 Ví dụ0Tuy nhiên, hãy cố gắng biến các bản sửa lỗi của bạn thành mô-đun để đảm bảo cho công việc của bạn trong tương lai sao cho khi các phiên bản IE cũ hơn không cần được hỗ trợ nữa, bạn chỉ cần cập nhật trang web của mình ở một nơi (i. e. lấy tham chiếu đến ie-6. biểu định kiểu css). Nhân tiện, để xử lý độ trong suốt của PNG trong IE6, tôi khuyên dùng tập lệnh DD_belated PNG (phương thức JavaScript được tham chiếu ở trên) 18. Xác thực mã của bạnXác nhận không phải là đánh giá cuối cùng của công việc tốt so với công việc tồi tệ Chỉ vì công việc của bạn được xác thực không tự động có nghĩa đó là mã tốt; . ). Tuy nhiên, các dịch vụ xác thực tự động chẳng hạn như dịch vụ xác thực đánh dấu W3C miễn phí có thể là trình gỡ lỗi hữu ích giúp bạn xác định các lỗi kết xuất. Trong khi viết HTML, hãy tạo thói quen xác thực thường xuyên; 19. Viết mã định dạng nhất quánCơ sở mã được viết rõ ràng và được thụt lề tốt thể hiện tính chuyên nghiệp của bạn, cũng như sự cân nhắc của bạn đối với những người khác có thể cần làm việc trên mã của bạn. Viết đánh dấu rõ ràng thụt lề đúng cách ngay từ đầu; 20. Tránh bình luận quá mứcTrong khi ghi lại mã của bạn, mục đích là để làm cho nó dễ hiểu hơn, vì vậy, nhận xét logic mã của bạn là một điều tốt cho các ngôn ngữ lập trình như PHP, Java và C#. Nhưng đánh dấu là rất dễ hiểu và nhận xét mọi dòng mã không có ý nghĩa trong HTML/XHTML. Nếu bạn thấy mình bình luận HTML của mình rất nhiều để giải thích điều gì đang diễn ra, bạn nên xem lại công việc của mình để biết ngữ nghĩa và các quy ước đặt tên phù hợp Cảm thấy choáng ngợp bởi những thực tiễn tốt nhất về HTML này?Khi cân nhắc thực hiện các thay đổi đối với HTML của mình, bạn có thể cảm thấy hơi choáng ngợp Chúng tôi có thể giúp. Để tìm hiểu thêm về các kế hoạch hỗ trợ và bảo trì trang web của chúng tôi, hãy liên hệ với chúng tôi trực tuyến hoặc gọi cho chúng tôi ngay hôm nay theo số 888-256-9448 để nói chuyện với một chiến lược gia Nội dung liên quan
Giới thiệu về tác giảAnh ấy thích viết mã có cấu trúc tốt và rõ ràng để xác thực. Hãy liên lạc với Saqib thông qua blog/công việc kinh doanh tự do của anh ấy, 960Development cũng như theo dõi anh ấy trên Twitter với tên @saqibsarwar Mục lục
Tài nguyên liên quan
Trang web của bạn SEO như thế nào?Sử dụng công cụ miễn phí của chúng tôi để tính điểm của bạn trong vòng chưa đầy 60 giây Nhận điểm SEO của bạnTuyển dụng WebFXTham gia sứ mệnh của chúng tôi để cung cấp các dịch vụ tiếp thị kỹ thuật số hàng đầu trong ngành cho các doanh nghiệp trên toàn cầu - đồng thời xây dựng kiến thức cá nhân của bạn và phát triển với tư cách cá nhân Làm cách nào tôi có thể thực hành viết HTML?Tìm hiểu HTML bằng cách sử dụng Notepad hoặc TextEdit
. Tuy nhiên, để học HTML, chúng tôi khuyên dùng một trình soạn thảo văn bản đơn giản như Notepad (PC) hoặc TextEdit (Mac). Chúng tôi tin rằng sử dụng trình soạn thảo văn bản đơn giản là một cách tốt để học HTML.
Tôi có thể thực hành kỹ năng HTML của mình ở đâu?10 trang web để bạn thực hành kỹ năng phát triển giao diện người dùng 😲 . Cố vấn giao diện người dùng. Cải thiện kỹ năng mã hóa mặt trước của bạn bằng cách giải quyết các thách thức HTML, CSS và JavaScript trong thế giới thực trong khi làm việc với các thiết kế chuyên nghiệp Thử thách Codepen. . Codewell. . Trận chiến CSS. . FreeCodeTrại. . mật mã. . thử thách nhà phát triển. io. . Ace FrontEnd Làm cách nào tôi có thể thực hành HTML miễn phí?Cách học HTML miễn phí . Codecademy có nhiều chương trình miễn phí cung cấp cho bạn những kỹ năng kỹ thuật cần thiết. . Tìm hiểu-HTML. org là một nguồn đáng tin cậy cho mọi thứ bạn cần biết về HTML. . General Assembly Dash là một trang web phổ biến để bắt đầu tìm hiểu những kiến thức cơ bản về HTML Cách thực hành tốt nhất khi viết các thẻ HTML là gì?10 phương pháp hay nhất về HTML dành cho người mới bắt đầu . Sử dụng cấu trúc tài liệu phù hợp. . Khai báo đúng loại tài liệu. . Luôn đóng thẻ. . Không sử dụng kiểu nội tuyến. . Sử dụng thuộc tính alt với hình ảnh. . Xác thực thường xuyên. . Place external style sheets within the tag. .. . Sử dụng các thẻ có ý nghĩa |
