Hướng dẫn HTML

TRANG CHỦ HTML Giới thiệu HTML Trình chỉnh sửa HTML HTML cơ bản Phần tử HTML Thuộc tính HTML Tiêu đề HTML Đoạn văn HTML Kiểu HTML Định dạng HTML Trích dẫn HTML Nhận xét HTML Màu HTML HTML CSS Liên kết HTML Hình ảnh HTML HTML Favicon Bảng HTML Danh sách HTML Khối HTML & Nội tuyến Các lớp HTML Id HTML Khung nội tuyến HTML HTML JavaScript Đường dẫn tệp HTML Đầu HTML Bố cục HTML HTML đáp ứng Mã máy tính HTML Ngữ nghĩa HTML Hướng dẫn kiểu HTML Thực thể HTML Biểu tượng HTML Biểu tượng cảm xúc HTML Bộ mã HTML Mã hóa URL HTML HTML so với XHTML

Biểu mẫu HTML

Biểu mẫu HTML Thuộc tính biểu mẫu HTML Phần tử biểu mẫu HTML Các loại đầu vào HTML Thuộc tính đầu vào HTML Thuộc tính biểu mẫu nhập HTML

Đồ họa HTML

HTML Canvas HTML SVG

HTML Media

HTML Media Video HTML Âm thanh HTML Trình cắm HTML HTML YouTube

API HTML

Vị trí địa lý HTML Kéo / thả HTML Lưu trữ web HTML Nhân viên web HTML HTML SSE

Ví dụ HTML

Ví dụ HTML HTML Quiz Bài tập HTML Chứng chỉ HTML Tóm tắt HTML Khả năng truy cập HTML

Tham chiếu HTML

Danh sách thẻ HTML Thuộc tính HTML Thuộc tính toàn cầu HTML Hỗ trợ trình duyệt HTML Sự kiện HTML Màu HTML HTML Canvas HTML Audio / Video HTML Doctypes Bộ ký tự HTML Mã hóa URL HTML Mã HTML Lang Tin nhắn HTTP Phương thức HTTP Công cụ chuyển đổi PX sang EM Các phím tắt bàn phím

Khả năng truy cập HTML


Khả năng truy cập HTML

Luôn ghi nhớ mã HTML với khả năng truy cập!

Cung cấp cho người dùng một cách tốt để điều hướng và tương tác với trang web của bạn. Làm cho mã HTML của bạn có ngữ nghĩa nhất có thể.


HTML ngữ nghĩa

HTML ngữ nghĩa có nghĩa là sử dụng các phần tử HTML chính xác cho mục đích chính xác của chúng càng nhiều càng tốt. Yếu tố ngữ nghĩa là yếu tố có một nghĩa; nếu bạn cần một nút, hãy sử dụng <button>phần tử (chứ không phải <div>phần tử).

Ngữ nghĩa

<button>Report an Error</button>

Phi ngữ nghĩa

<div>Report an Error</div>

HTML ngữ nghĩa cung cấp ngữ cảnh cho trình đọc màn hình, trình đọc này sẽ đọc to nội dung của một trang.

Với ví dụ về nút:

  • các nút có kiểu dáng phù hợp hơn theo mặc định
  • trình đọc màn hình xác định nó là một nút
  • có thể tập trung
  • có thể bấm được

Một nút cũng có thể truy cập được đối với những người chỉ dựa vào điều hướng bằng bàn phím; nó có thể nhấp được bằng cả chuột và phím, và nó có thể được sắp xếp giữa các tab (sử dụng phím tab trên bàn phím).

Ví dụ về các yếu tố phi ngữ nghĩa : <div><span>- Không cho biết gì về nội dung của nó.

Ví dụ về các yếu tố ngữ nghĩa:,<form><table>- <article>Xác định rõ ràng nội dung của nó.


Tiêu đề quan trọng

Các tiêu đề được xác định bằng các thẻ <h1>to <h6>:

Thí dụ

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Các công cụ tìm kiếm sử dụng các tiêu đề để lập chỉ mục cấu trúc và nội dung của các trang web của bạn.

Người dùng đọc lướt các trang của bạn theo các tiêu đề của nó. Điều quan trọng là sử dụng các tiêu đề để hiển thị cấu trúc tài liệu và mối quan hệ giữa các phần khác nhau.

Trình đọc màn hình cũng sử dụng tiêu đề như một công cụ điều hướng. Các loại tiêu đề khác nhau chỉ định đường viền của trang. <h1>các tiêu đề nên được sử dụng cho các tiêu đề chính, tiếp theo là <h2>các tiêu đề, sau đó là các tiêu đề ít quan trọng hơn <h3>, v.v.

Lưu ý: Chỉ sử dụng tiêu đề HTML cho các tiêu đề. Không sử dụng tiêu đề để làm cho văn bản LỚN hoặc in đậm .



Văn bản thay thế

Thuộc alttính cung cấp văn bản thay thế cho hình ảnh, nếu người dùng vì lý do nào đó không thể xem được (do kết nối chậm, src thuộc tính có lỗi hoặc nếu người dùng sử dụng trình đọc màn hình).

Giá trị của altthuộc tính phải mô tả hình ảnh:

Thí dụ

<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">

Nếu trình duyệt không thể tìm thấy hình ảnh, nó sẽ hiển thị giá trị của alt thuộc tính:

Thí dụ

<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">

Khai báo ngôn ngữ

Bạn phải luôn bao gồm lang thuộc tính bên trong <html>thẻ, để khai báo ngôn ngữ của trang Web. Điều này có nghĩa là để hỗ trợ các công cụ tìm kiếm và trình duyệt.

Ví dụ sau chỉ định tiếng Anh là ngôn ngữ:

<!DOCTYPE html>
<html lang="en">
<body>

...

</body>
</html>

Sử dụng ngôn ngữ rõ ràng

Luôn sử dụng ngôn ngữ rõ ràng, dễ hiểu. Cũng cố gắng tránh các ký tự không thể đọc rõ ràng bằng trình đọc màn hình. Ví dụ:

  • Giữ các câu càng ngắn càng tốt
  • Tránh dấu gạch ngang. Thay vì viết 1-3, hãy viết 1 thành 3
  • Tránh viết tắt. Thay vì viết tháng hai, hãy viết tháng hai
  • Tránh các từ lóng

Tạo văn bản liên kết tốt

Văn bản liên kết phải giải thích rõ ràng thông tin mà người đọc sẽ nhận được bằng cách nhấp vào liên kết đó.

Ví dụ về các liên kết tốt và xấu:

Lưu ý: Trang này là phần giới thiệu về khả năng truy cập web. Truy cập Hướng dẫn hỗ trợ tiếp cận của chúng tôi để biết thêm chi tiết.