Trong thế giới phát triển web hiện đại, CSS (Cascading Style Sheets) được xem là công nghệ không thể thiếu để trang trí và tạo phong cách cho các trang web của bạn. Tuy nhiên, có một sự thật thú vị mà nhiều người có thể chưa biết hoặc đã lãng quên: bạn không nhất thiết phải sử dụng CSS, và website của bạn vẫn có thể hiển thị một cách hợp lý và đẹp mắt. Bài viết này sẽ đi sâu vào vai trò của HTML ngữ nghĩa và cách nó định hình trải nghiệm người dùng ngay cả khi không có CSS, một yếu tố cốt lõi trong việc xây dựng website bền vững và tối ưu SEO.
HTML và CSS: Sự Kết Hợp Hay Tách Biệt?
Nếu bạn đã làm quen với web từ lâu hoặc tự học những kiến thức cơ bản, có thể bạn đã quen với việc sử dụng HTML và CSS mà không thực sự suy nghĩ nhiều về chức năng riêng biệt của chúng. Tuy nhiên, việc hiểu rõ vai trò của từng công nghệ là chìa khóa để kiến tạo nên những trang web mạnh mẽ và dễ bảo trì.
HTML (HyperText Markup Language) là ngôn ngữ dùng để định nghĩa ý nghĩa và cấu trúc nội dung. Đây là một ngôn ngữ mô tả, bạn sử dụng nó để chú thích nội dung của mình bằng các thẻ như <p> (đoạn văn), <table> (bảng), <em> (nhấn mạnh nhẹ), hay <strong> (nhấn mạnh mạnh). Các thẻ này định nghĩa cấu trúc và ngữ nghĩa của văn bản bên trong chúng:
<p>Một đoạn vă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</strong>.</p>HTML đóng vai trò cốt yếu trong việc vận hành internet. Nó cung cấp bộ xương cho mọi trang web, giúp các trình duyệt và công cụ tìm kiếm hiểu được nội dung.
Cận cảnh màn hình máy tính và máy tính bảng hiển thị cấu trúc mã HTML
Ngược lại, CSS (Cascading Style Sheets) là ngôn ngữ dùng để trình bày. Nó chỉ định định dạng của nội dung, sử dụng các thuộc tính như font-size (kích thước phông chữ) và color (màu sắc):
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 quan trọng trong phát triển web:
- Dễ đọc và dễ bảo trì: Mỗi định dạng trở nên sạch sẽ và dễ đọc hơn khi không bị trộn lẫn.
- Linh hoạt trong thiết kế: Bạn có thể thay đổi các tệp HTML và CSS một cách độc lập. Điều này có nghĩa là bạn có thể thay đổi toàn bộ thiết kế của các trang web chỉ với một thay đổi nhỏ trong CSS, và một tệp CSS duy nhất có thể áp dụng cho nhiều trang 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 một tệp CSS duy nhất, tính dư thừa được giảm bớt và 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 về HTML hoặc CSS có thể làm việc với công nghệ mà họ am hiểu nhất một cách song song, giúp các dự án lớn hiệu quả hơn rất nhiều.
Chính sự tách biệt này cũng ngụ ý rằng một trang web không cần CSS để hiển thị. Trên thực tế, đã từng có thời các trang web không sử dụng CSS. Một trình duyệt web sẽ sử dụng các kiểu mặc định (sensible defaults) để hiển thị HTML dựa trên ý nghĩa của các thẻ. Ví dụ, ngay cả khi không có bất kỳ kiểu dáng rõ ràng nào, một phần tử <h1> (tiêu đề chính) vẫn có giao diện mặc định. Vì nó là tiêu đề chính trên một trang, nên việc nó lớn, in đậm và có khoảng cách dọc phù hợp là điều hợp lý.
Xây Dựng Website Mạnh Mẽ Với Nguyên Tắc “Nâng Cao Dần” (Progressive Enhancement)
Khi xây dựng một thiết kế website, điều quan trọng là phải luôn ghi nhớ ngữ nghĩa của HTML. Bạn nên luôn sử dụng thẻ mô tả nội dung của mình tốt nhất, bất kể nó 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. Đây chính là cốt lõi của nguyên tắc “Nâng Cao Dần” (Progressive Enhancement) – xây dựng nền tảng vững chắc trước khi thêm các lớp cải tiến.
Bạn có thể nghĩ rằng CSS bạn cung cấp sẽ luôn có sẵn, nhưng có những trường hợp ngoại lệ bạn nên chuẩn bị. Chúng bao gồm các sự cố mạng ở phía máy khách, lỗi máy chủ hoặc cấu hình sai, lỗi trình duyệt (kể cả trong các tiện ích mở rộng), hoặc việc người 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 một trình duyệt văn bản không hỗ trợ 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 là sử dụng CSS để thêm ký tự dấu đầu dòng vào đầu mỗi đoạn văn:
p:before { content: '• '; }Điều này trông giống như một danh sách gạch đầu dòng, vì vậy mọi thứ dường như ổn trên bề mặt:
Danh sách gạch đầu dòng giả lập bằng CSS trên website
Nhưng khi CSS bị loại bỏ, trình duyệt sẽ chỉ trở lại hiển thị một tập hợp các đoạn văn thông thường, mất đi ý nghĩa của một danh sách.
Tất nhiên, trong trường hợp này, giải pháp rất đơn giản: sử dụng thẻ thích hợp cho danh sách gạch đầu dòng (<ul>) mà HTML cung cấp:
<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 này phức tạp hơn một chút so với đá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 ý 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 như dự định, ngay cả khi không có CSS:
Danh sách gạch đầu dòng mặc định được tạo bằng thẻ HTML ul
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 dấu đầ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 xếp lớp kiểu dáng này lên trên HTML sạch sẽ, mạnh mẽ để cung cấp nền tảng tốt nhất có thể.
Giao diện lập trình (IDE) với các dòng mã code và hình ảnh website ở nền
Ví dụ trên có thể 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ường, 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. Điều này có thể là điều bạn muốn ở phần chân trang, 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 thay đổi phông chữ, nền và khoảng cách:
Một loạt các liên kết được định kiểu giống như tab với 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. Hiển thị nội tuyến mặc định, 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">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#jobs">Jobs</a></li>
<li><a href="#terms">Terms</a></li>
</ol>Bây giờ, ngay cả khi không có CSS, danh sách các liên kết dài hơn cũng dễ đọc:
Danh sách các liên kết HTML được sắp xếp theo cột
Bạn có thể cần một hoặc hai quy tắc CSS bổ sung để hoàn tác kiểu dáng danh sách mặc định, nhưng đây là một cái giá nhỏ để 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 Giúp Mã HTML và CSS “Sạch” và Hiệu Quả
Sử dụng HTML tối giản, ngữ nghĩa mang lại nhiều lợi ích, không chỉ giúp các trang của bạn chống chịu tốt khi không có CSS. Các công cụ tìm kiếm thường sẽ đánh giá cao mã đánh dấu sạch, và nó cũng giúp các công cụ hỗ trợ tiếp cận (accessibility tools) như trình đọc màn hình hoạt động tốt hơn.
Nắm Vững Các Thẻ HTML và Style Mặc Định
Hãy làm quen với kiểu dáng HTML mặc định cho các thẻ khác nhau. Bạn có thể tham khảo các dự án mẫu trên GitHub (ví dụ: cbracco/html5-test-page) để xem nhiều thẻ khác nhau và cách chúng hiển thị mặc định. Việc này giúp bạn hiểu rõ “điểm khởi đầu” của trình duyệt và xây dựng thiết kế một cách có chủ đích.
Ví dụ về các kiểu định dạng HTML mặc định như danh sách định nghĩa và danh sách có thứ tự đa cấp
Tránh Các Thẻ HTML Lỗi Thời (Deprecated Tags)
Một số thẻ — như <font> — mang tính trình bày theo bản chất, vì chúng là phần còn sót lại từ kỷ nguyên tiền 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 phong cách, không có giá trị ngữ nghĩa.
Xác Thực Mã Của Bạn (Validate Your Code)
Hãy đảm bảo bạn xác thực mã HTML và CSS của mình, sử dụng dịch vụ như validator của W3C (validator.w3.org). Đ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 các trang web như Can I use (caniuse.com), cung cấp thông tin chi tiết đầy đủ về khả năng hỗ trợ trình duyệt cho các thẻ HTML và thuộc tính CSS khác nhau, giúp bạn đưa ra quyết định sáng suốt khi phát triển.
Kiểm Tra Trang Web Của Bạn Khi Không Có CSS
Hãy cân nhắc sử dụng một tiện ích mở rộng như Web Developer (có sẵn trên Chrome Web Store), giúp dễ dàng bật và tắt CSS. Đây là một cách tuyệt vời để kiểm tra xem phiên bản không có CSS của trang web của bạn sẽ trông như thế nào, chỉ bằng 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 xem chúng dễ đọc như thế nào khi không có CSS. Đây là một phương pháp tuyệt vời để đảm bảo khả năng tiếp cận tối đa.
Kết Luận
Việc xây dựng website không chỉ dừng lại ở việc tạo ra giao diện bắt mắt mà còn phải đảm bảo tính bền vững, khả năng tiếp cận và hiệu suất. Bằng cách ưu tiên HTML ngữ nghĩa và áp dụng nguyên tắc “Nâng Cao Dần” (Progressive Enhancement), bạn không chỉ tạo ra một trang web hoạt động tốt trong mọi điều kiện mà còn tối ưu hóa mạnh mẽ cho các công cụ tìm kiếm và mang lại trải nghiệm tuyệt vời cho mọi đối tượng người dùng. Hãy luôn nhớ rằng HTML là nền tảng, và một nền tảng vững chắc sẽ là khởi đầu cho mọi sự phát triển ấn tượng.
Hãy bắt đầu kiểm tra và tối ưu hóa mã HTML của website của bạn ngay hôm nay để xây dựng một nguồn tài nguyên web mạnh mẽ và đáng tin cậy! Chia sẻ kinh nghiệm của bạn về việc sử dụng HTML ngữ nghĩa trong phần bình luận bên dưới nhé.
Bài viết bởi Bobby Jack
