Học HTML, CSS từ Zero Tới Hero
Tình huống sử dụng
Khi làm việc, đôi khi chúng ta có thể bắt gặp một thiết kế tương tự như dưới đây.
Ví dụ:
Hai từ “HTML CSS” trong tiêu đề chính được thiết kế có styles khác phần còn lại.
Trong tình huống này, để có thể CSS được riêng cho hai từ “HTML CSS” chúng ta cần thực hiện 2 bước sau:
- Thêm một thẻ HTML để bao bọc hai từ “HTML CSS”
- Viết CSS cho thẻ HTML được thêm vào
Nhờ vậy, CSS sẽ tác động vào thẻ HTML mới thêm làm cho riêng phần “HTML CSS” được đổi màu, trong khi phần còn lại không bị ảnh hưởng.
Ví dụ:
Ví dụ trên mình đã sử dụng CSS để thay đổi màu chữ cho giống như mẫu thiết kế. Tuy nhiên, vì chúng ta chưa học tới CSS nên mình sẽ giải thích ý nghĩa của chúng trong chương học về CSS nhé.
Vậy trong ý 1, nhiệm vụ của chúng ta là thêm 1 thẻ HTML để bao bọc các từ “HTML CSS”. Câu hỏi đặt ra ở đây là: Chúng ta sẽ sử dụng thẻ nào là hợp lý?
Hãy ưu tiên chọn thẻ theo trình tự sau:
- Đúng về ngữ nghĩa (HTML Semantic), mục đích sử dụng của thẻ
- Độ phù hợp về styles mặc định của thẻ so với thiết kế
Nếu chúng ta phải cân nhắc về ngữ nghĩa và styles thì chúng ta nên chọn ngữ nghĩa, có 2 lý do chính:
- Mỗi thẻ HTML được tạo ra là có mục đích
- Ưu tiên ngữ nghĩa hơn vì styles có thể dùng CSS
Cách lựa chọn thẻ HTML phù hợp ở trên có thể áp dụng trong mọi lúc bạn viết code HTML.
Tóm tắt
- Trong tình huống thẻ tiêu đề chứa các từ mang ý nghĩa quan trọng cho nội dung và có styles khác phần còn lại. Chúng ta có thể sử dụng thẻ
<strong>để đánh dấu các từ quan trọng này, vừa để CSS, vừa đảm bảo ngữ nghĩa. - Có tình huống xác định được từ có ý nghĩa rất quan trọng trong tiêu đề, có thể sử dụng thẻ
<strong>cho các từ này mặc dù nó không có styles khác phần còn lại. Điều này là không bắt buộc, đơn giản là chúng ta làm rõ hơn về mặt ngữ nghĩa. - Nếu chúng ta phải cân nhắc về ngữ nghĩa và styles thì chúng ta nên chọn ngữ nghĩa, có 2 lý do chính:
- Mỗi thẻ HTML được tạo ra là có mục đích
- Ưu tiên ngữ nghĩa hơn vì styles có thể dùng CSS
Nhận xét