Một trong những thẻ mà bạn sẽ học sớm trong giáo dục thiết kế web của bạn là một cặp thẻ được gọi là "thẻ nhấn mạnh". Chúng ta hãy xem các thẻ này là gì và chúng được sử dụng như thế nào trong thiết kế web ngày nay.
Quay lại XHTML
Nếu bạn đã học HTML năm trước, trước khi sự nổi lên của HTML5, bạn có thể sử dụng cả các thẻ in đậm và in nghiêng. Như bạn mong đợi, các thẻ này biến phần tử thành văn bản in đậm hoặc văn bản in nghiêng tương ứng. Vấn đề với các thẻ này, và tại sao chúng bị đẩy sang một bên để ủng hộ các yếu tố mới (mà chúng ta sẽ xem xét ngay), là chúng không phải là các phần tử ngữ nghĩa. Điều này là do chúng xác định cách văn bản nên trông như thế nào hơn là thông tin về văn bản. Hãy nhớ rằng, HTML (đó là nơi các thẻ này sẽ được viết) là tất cả về cấu trúc, không phải là phong cách trực quan! Hình ảnh được xử lý bởi CSS và thực hành thiết kế web tốt nhất từ lâu đã được tổ chức mà bạn cần phải có một tách rõ ràng về phong cách và cấu trúc trong các trang web của bạn. Điều này có nghĩa là không sử dụng các phần tử không có ngữ nghĩa và chi tiết trông thay vì cấu trúc. Đây là lý do tại sao các thẻ in đậm và in nghiêng thường được thay thế bằng mạnh (đậm) và nhấn mạnh (cho chữ in nghiêng).
& lt; strong & gt; và & lt; em & gt;
Các yếu tố mạnh mẽ và nhấn mạnh thêm thông tin vào văn bản của bạn, nêu chi tiết nội dung cần được xử lý khác và nhấn mạnh khi nội dung đó được nói. Bạn sử dụng các yếu tố này khá giống với cách bạn đã sử dụng chữ đậm và in nghiêng trong quá khứ. Chỉ cần bao quanh văn bản của bạn với các thẻ mở và đóng ( và để nhấn mạnh và và để nhấn mạnh mạnh) và văn bản đính kèm sẽ được nhấn mạnh.
Bạn có thể lồng các thẻ này và không quan trọng đó là thẻ bên ngoài. Dưới đây là một số ví dụ.
Văn bản này được nhấn mạnh và hầu hết các trình duyệt sẽ hiển thị văn bản dưới dạng chữ nghiêng. Văn bản này được nhấn mạnh và hầu hết các trình duyệt sẽ hiển thị văn bản dưới dạng in đậm.Trong cả hai ví dụ này, chúng tôi không ra lệnh hiển thị trực quan bằng HTML. Có, giao diện mặc định của thẻ sẽ in nghiêng và sẽ được in đậm, nhưng các giao diện đó có thể dễ dàng được thay đổi trong CSS. Điều này là tốt nhất của cả hai thế giới. Bạn có thể tận dụng các kiểu trình duyệt mặc định để có văn bản in nghiêng hoặc in đậm trong tài liệu của bạn mà không thực sự vượt qua dòng và cấu trúc và kiểu trộn. Giả sử bạn muốn văn bản đó không chỉ được in đậm, mà còn màu đỏ, bạn có thể thêm nó vào CSS
mạnh {
màu đỏ;
}
Trong ví dụ này, bạn không cần thêm thuộc tính cho phông chữ đậm vì đó là mặc định. Tuy nhiên, nếu bạn không muốn rời khỏi cơ hội đó, bạn luôn có thể thêm nó vào:
mạnh {
font-weight: bold;
màu đỏ;
}
Bây giờ bạn sẽ được tất cả, nhưng đảm bảo để có một trang với văn bản đậm (và màu đỏ) bất cứ nơi nào thẻ được sử dụng.
Tăng gấp đôi lên nhấn mạnh
Một điều tôi đã nhận thấy trong năm là những gì sẽ xảy ra nếu bạn cố gắng tăng gấp đôi về sự nhấn mạnh. Ví dụ:
Văn bản này phải có cả văn bản in đậm và in nghiêng bên trong văn bản.Bạn sẽ nghĩ rằng dòng này sẽ tạo ra một khu vực có văn bản đậm và nghiêng. Đôi khi điều này thực sự xảy ra, nhưng tôi đã thấy một số trình duyệt chỉ tôn vinh thứ hai của hai kiểu nhấn mạnh, một kiểu gần nhất với văn bản thực tế được đề cập và chỉ hiển thị chữ này dưới dạng chữ nghiêng. Đây là một trong những lý do tại sao tôi không tăng gấp đôi các thẻ nhấn mạnh.
Một lý do khác để tránh điều này "tăng gấp đôi lên" là cho các mục đích phong cách. Một hình thức nhấn mạnh nếu thường đủ để truyền đạt những giai điệu bạn muốn thiết lập. Bạn không cần in đậm, in nghiêng, tô màu, phóng to và gạch dưới văn bản để nó nổi bật. Văn bản đó, tất cả những loại nhấn mạnh khác nhau, sẽ trở nên sặc sỡ. Vì vậy, hãy cẩn thận khi sử dụng thẻ nhấn mạnh hoặc phong cách CSS để cung cấp sự nhấn mạnh và không lạm dụng nó.
Lưu ý về chữ in đậm và in nghiêng
Một ý nghĩ cuối cùng - trong khi các thẻ đậm () và in nghiêng () không còn được sử dụng làm yếu tố nhấn mạnh, có một số nhà thiết kế web sử dụng các thẻ này để tạo kiểu nội dung văn bản. Về cơ bản, họ sử dụng nó như một phần tử . Điều này là tốt đẹp bởi vì các thẻ là rất ngắn, nhưng sử dụng các yếu tố này theo cách này thường không được khuyến khích. Tôi đề cập đến trong trường hợp bạn nhìn thấy nó trên một số trang web đang được sử dụng không để tạo ra văn bản in đậm hoặc in nghiêng, nhưng để tạo ra một móc CSS cho một số loại khác của kiểu dáng trực quan.
Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard vào ngày 12/2/16.