Trong thế giới phát triển web hiện đại, CSS (Cascading Style Sheets) thường được xem là yếu tố không thể thiếu để tạo nên một giao diện trang web đẹp mắt và chuyên nghiệp. Tuy nhiên, ít ai nhận ra rằng HTML (HyperText Markup Language) – xương sống của mọi trang web – tự bản thân nó đã đủ mạnh mẽ để định hình cấu trúc và ý nghĩa nội dung, cho phép trình duyệt hiển thị thông tin một cách hợp lý ngay cả khi không có bất kỳ dòng CSS nào. Với vai trò là một chuyên gia SEO và biên tập viên tại thoibaocongnghe.net, chúng tôi muốn làm rõ vai trò cốt lõi của HTML ngữ nghĩa và Progressive Enhancement trong việc xây dựng các trang web không chỉ đẹp về mặt hình thức mà còn bền vững, dễ truy cập và thân thiện với công cụ tìm kiếm.
HTML và CSS: Hai Mảnh Ghép Bổ Trợ Cho Web Hiện Đại
Nếu bạn đã từng học hoặc tự tìm hiểu về phát triển web, có thể bạn đã quen với việc sử dụng HTML và CSS cùng lúc mà không thực sự đào sâu vào chức năng riêng biệt của chúng. Thực chất, cả hai công nghệ này có vai trò rõ ràng và bổ trợ cho nhau:
-
HTML (HyperText Markup Language) là ngôn ngữ định nghĩa ý nghĩa và cấu trúc của nội dung. Nó cho phép bạn đánh dấu các phần tử văn bản với các thẻ như
<p>(đoạn văn),<table>(bảng),<h1>(tiêu đề chính),<strong>(văn bản nhấn mạnh mạnh mẽ) hay<em>(văn bản nhấn mạnh nhẹ). Các thẻ này cung cấp ngữ nghĩa cho nội dung, giúp trình duyệt và các công cụ khác hiểu được bản chất của thông tin.<p>Đây là một đoạn văn bản đơn giản với <em>văn bản được nhấn mạnh nhẹ</em> và <strong>văn bản được nhấn mạnh mạnh mẽ</strong>.</p> -
CSS (Cascading Style Sheets) là ngôn ngữ dùng để trình bày nội dung. Nó quy định cách các phần tử HTML hiển thị trên màn hình, sử dụng các thuộc tính như
font-size(kích thước chữ),color(màu sắc),border-width(độ rộng viền), v.v.p { color: rgb(100, 100, 100); } #advert { border-width: 4px; }
Sự tách biệt rõ ràng giữa HTML và CSS mang lại nhiều lợi ích đáng kể cho quá trình phát triển web:
- Mã nguồn sạch và dễ đọc: Mỗi định dạng trở nên gọn gàng và dễ hiểu hơn so với việc kết hợp cả hai.
- Linh hoạt trong thiết kế: Bạn có thể thay đổi toàn bộ giao diện của trang web chỉ với một sự thay đổi nhỏ trong tệp CSS, và một tệp CSS duy nhất có thể áp dụng cho nhiều trang HTML khác nhau.
- Giảm thiểu trùng lặp và kích thước tệp: Vì nhiều tệp HTML có thể tham chiếu đến cùng một tệp CSS, giúp giảm sự dư thừa và làm cho kích thước tệp nhỏ hơn.
- Tối ưu hóa quy trình làm việc: Các chuyên gia HTML và CSS có thể làm việc song song, tận dụng chuyên môn của mình, từ đó nâng cao hiệu quả cho các dự án lớn.
Chính sự phân tách này cũng có nghĩa là một trang web không cần CSS để hiển thị. Trên thực tế, vào thời kỳ đầu của web, CSS còn chưa ra đời. Trình duyệt web sẽ sử dụng các kiểu mặc định hợp lý để hiển thị HTML dựa trên ý nghĩa của các thẻ. Chẳng hạn, một phần tử <h1> vẫn sẽ có một giao diện mặc định mà không cần bất kỳ kiểu CSS nào được định nghĩa. Vì đây là tiêu đề chính trên trang, việc nó hiển thị lớn, in đậm và có khoảng cách hợp lý để dễ đọc là hoàn toàn hợp lý.
Hình ảnh minh họa các kiểu mặc định của HTML cho tiêu đề và đoạn văn, hiển thị chữ lớn và in đậm
Xây Dựng Trang Web Mạnh Mẽ Hơn Với Progressive Enhancement
Khi xây dựng một thiết kế web, việc ghi nhớ ngữ nghĩa của HTML là cực kỳ quan trọng. Bạn nên luôn sử dụng thẻ HTML mô tả nội dung của mình tốt nhất, bất kể nó sẽ hiển thị như thế nào trong trình duyệt. Nếu bạn sử dụng các thẻ phù hợp, nội dung của bạn ít nhất sẽ có thể đọc được, ngay cả khi không có bất kỳ CSS nào.
Bạn có thể nghĩ rằng CSS bạn cung cấp sẽ luôn khả dụng, nhưng có những trường hợp ngoại lệ bạn nên tính đến. Các trường hợp này bao gồm sự cố mạng phía người dùng, lỗi hoặc cấu hình sai của máy chủ, lỗi trình duyệt (bao gồm cả tiện ích mở rộng), hoặc việc khách truy cập quyết định tắt CSS. Khách truy cập của bạn thậm chí có thể đang sử dụng trình duyệt văn bản không xử lý CSS. Ngoài ra, hãy xem xét những người dùng khiếm thị; HTML và CSS của bạn càng độc lập, họ càng dễ dàng tiếp cận nội dung của bạn.
Để minh họa, hãy tưởng tượng bạn có một tập hợp các đoạn văn mà bạn muốn biến thành một danh sách gạch đầu dòng:
<p>lorem ipsum dolor sit amet</p>
<p>lorem ipsum dolor sit amet</p>
<p>lorem ipsum dolor sit amet</p>Một cách tiếp cận có thể là sử dụng CSS để thêm ký tự gạch đầu dòng vào đầu mỗi đoạn văn:
p:before { content: '• '; }Kết quả nhìn giống một danh sách gạch đầu dòng, có vẻ ổn:
Hình ảnh một danh sách gạch đầu dòng đơn giản với ba mục được tạo bằng CSS
Tuy nhiên, khi CSS bị loại bỏ, trình duyệt sẽ đơn giản quay trở lại hiển thị một tập hợp các đoạn văn thông thường:
Hình ảnh ba dòng văn bản không có dấu gạch đầu dòng khi CSS bị tắt
Tất nhiên, trong trường hợp này, giải pháp rất đơn giản: sử dụng thẻ phù hợp cho danh sách gạch đầu dòng mà HTML cung cấp, đó là <ul> (unordered list) và <li> (list item):
<ul>
<li>lorem ipsum dolor sit amet</li>
<li>lorem ipsum dolor sit amet</li>
<li>lorem ipsum dolor sit amet</li>
</ul>Cách làm này có vẻ phức tạp hơn một chút so với việc chỉ đánh dấu đoạn văn, nhưng chi tiết bổ sung đó mang lại nhiều lợi ích: HTML của bạn giờ đây mô tả hơn và truyền tải được ý nghĩa của nội dung. Kết quả là, trình duyệt có thể hiển thị trang của bạn đúng như dự định, ngay cả khi không có CSS:
Hình ảnh một danh sách gạch đầu dòng đơn giản với ba mục, được tạo đúng bằng HTML
Bạn vẫn có thể sử dụng CSS để tinh chỉnh thiết kế, có thể sử dụng một kiểu gạch đầu dòng khác, thêm một số khoảng cách bổ sung hoặc sử dụng một phông chữ khác. Nhưng bạn nên tạo lớp kiểu dáng này dựa trên một HTML sạch, mạnh mẽ để cung cấp nền tảng tốt nhất có thể.
Ví dụ trên có vẻ hơi phức tạp, vậy hãy cùng khám phá một ví dụ khác: các liên kết. Thường thì bạn sẽ cần đưa một loạt các liên kết vào trang của mình, có thể là một tập hợp các tài liệu tham khảo hoặc liên kết trong phần chân trang (footer):
<a href="#about">About</a>
<a href="#contact">Contact</a>
<a href="#jobs">Jobs</a>
<a href="#terms">Terms</a>Theo mặc định, các liên kết hiển thị dưới dạng các hộp nội tuyến, vì vậy một tập hợp dài sẽ hiển thị trên một dòng cho đến khi nó xuống dòng:
Hình ảnh một loạt hai mươi mốt liên kết một từ trên một trang web, hầu hết nằm trên một dòng ngang, với ba liên kết cuối cùng được xuống dòng
Đây có thể là điều bạn muốn ở một chân trang, vì vậy với một chút CSS, bạn có thể đạt được giao diện mong muốn:
a {
text-decoration: none;
background-color: #eee;
color: black;
padding: 0.5em 1em;
font-family: helvetica;
font-size: 150%;
margin: 0 0.5em;
display: inline-block;
}Kiểu dáng cơ bản này làm cho các liên kết trông giống như các tab, với sự thay đổi phông chữ, nền và khoảng cách:
Hình ảnh một loạt các liên kết được tạo kiểu giống như các tab, mỗi tab có nền màu xám
Tuy nhiên, nếu không có CSS, trang sẽ hiển thị dưới dạng khối văn bản một dòng ban đầu, không đặc biệt dễ đọc. Nếu các liên kết có nhiều từ, chúng thậm chí còn khó xử lý hơn:
Hình ảnh một số liên kết có số lượng từ khác nhau, nằm cạnh nhau trên một hàng duy nhất với ít khoảng cách
Hiển thị mặc định nội tuyến, khoảng cách và kích thước phông chữ khiến các liên kết này chạy vào nhau, khiến chúng khó phân biệt trong nháy mắt. Tuy nhiên, vấn đề này có thể được giải quyết bằng HTML ngữ nghĩa hơn:
<ol>
<li><a href="#about">Về Chúng Tôi</a></li>
<li><a href="#contact">Liên Hệ</a></li>
<li><a href="#jobs">Tuyển Dụng</a></li>
<li><a href="#terms">Điều Khoản</a></li>
</ol>Bây giờ, ngay cả danh sách các liên kết dài hơn cũng dễ đọc mà không cần CSS:
Hình ảnh một danh sách năm liên kết HTML trong một cột, mỗi liên kết nằm dưới liên kết trước đó
Bạn có thể cần thêm một hoặc hai quy tắc CSS để hoàn tác kiểu dáng danh sách mặc định, nhưng đây là một cái giá nhỏ phải trả cho HTML sạch hơn và trải nghiệm tốt hơn khi không có CSS.
Các Kỹ Thuật Để Có HTML và CSS Sạch
Việc sử dụng HTML ngữ nghĩa tối giản mang lại nhiều lợi ích, không chỉ giúp trang của bạn “chống đạn” khi truy cập mà không có CSS. Các công cụ tìm kiếm thường đánh giá cao cấu trúc mã sạch, và nó cũng giúp các công cụ hỗ trợ tiếp cận (như trình đọc màn hình) hoạt động tốt hơn.
Nắm Vững Các Thẻ HTML
Hãy làm quen với các kiểu mặc định của HTML cho các thẻ khác nhau. Dự án GitHub này là một ví dụ tốt bao gồm nhiều thẻ khác nhau. Bạn có thể xem trang kết quả để thấy cách chúng hiển thị mặc định.
Hình ảnh ví dụ các kiểu HTML mặc định hiển thị danh sách định nghĩa với thụt lề và danh sách có thứ tự đa cấp với các loại đánh số khác nhau
Tránh Các Thẻ Đã Lỗi Thời
Một số thẻ – như <font> – mang tính chất trình bày, vì chúng là tàn dư từ kỷ nguyên trước CSS, khi chúng là phương tiện duy nhất để thay đổi định dạng của các trang web. Bạn nên tránh các thẻ này vì chúng hoàn toàn mang tính chất kiểu dáng và không có giá trị ngữ nghĩa nào.
Kiểm Tra Mã Nguồn Của Bạn
Đảm bảo bạn kiểm tra HTML và CSS của mình, sử dụng dịch vụ như trình kiểm tra của W3C. Điều này sẽ cảnh báo bạn về các thẻ lỗi thời và các lỗi khác có thể làm cho HTML của bạn kém mạnh mẽ hơn.
Bạn cũng có thể sử dụng một trang web như Can I use, cung cấp thông tin chi tiết về khả năng hỗ trợ trình duyệt cho các thẻ HTML và thuộc tính CSS khác nhau.
Kiểm Tra Trang Web Của Bạn Khi Không Có CSS
Hãy xem xét sử dụng một tiện ích mở rộng như Web Developer, giúp dễ dàng bật và tắt CSS. Đây là một cách tuyệt vời để kiểm tra giao diện trang web của bạn khi không có CSS, chỉ với một nút bấm.
Bạn cũng có thể kiểm tra các trang của mình trong một trình duyệt văn bản, như Lynx, để kiểm tra khả năng đọc của chúng khi không có CSS.
Kết Luận
Việc hiểu rõ và áp dụng HTML ngữ nghĩa cùng nguyên tắc Progressive Enhancement là chìa khóa để xây dựng các trang web bền vững, hiệu quả và dễ tiếp cận. Bằng cách ưu tiên cấu trúc và ý nghĩa của nội dung thông qua HTML chính xác, bạn không chỉ đảm bảo rằng trang web của mình luôn hiển thị tốt trong mọi điều kiện mà còn cải thiện đáng kể khả năng tối ưu hóa công cụ tìm kiếm (SEO) và trải nghiệm người dùng tổng thể.
Chúng tôi khuyến nghị bạn hãy thực hành các kỹ thuật này trong các dự án phát triển web của mình. Hãy luôn ưu tiên cấu trúc HTML chuẩn, kiểm tra mã nguồn thường xuyên, và thử nghiệm khả năng hiển thị của trang web khi không có CSS. Bằng cách đó, bạn sẽ tạo ra những sản phẩm kỹ thuật số không chỉ đẹp mắt mà còn vững chắc theo thời gian.
