Làm việc với văn bản

Nhiệm vụ chính của HTML là cung cấp cấu trúc văn bản. Trong bài viết này, mình sẽ trình bày cách sử dụng các tag HTML để xây dựng một văn bản có cấu trúc.

Các đoạn văn và tiêu đề

Trong HTML, chúng ta đã làm quen với tag p chúng giúp chúng ta chia văn bản thành các đoạn nhỏ, giúp chúng ta dễ dàng theo dõi nội dung hơn. Hôm nay, chúng ta sẽ tiếp tục tìm hiểu các tag tiêu đề, chúng ta có thể sử dụng chúng để xây dựng tiêu đề cho một đoạn văn bản, cũng như xây dựng cấu trúc của cả một văn bản. Trước hết, các bạn hãy xem 2 ví dụ bên dưới, đây là 1 đoạn văn bản về chiến tranh thế giới thứ 2.

Xem qua 2 ví dụ trên, có lẽ các bạn cũng đã thấy được tầm quan trọng của các đoạn văn và tiêu đề.

HTML cung cấp cho chúng ta 6 tags để xây dựng tiêu đề. h1, h2, h3, h4, h5 và h6. Tag h1 sẽ dùng để hiển thị tiêu đề chính, tag h2 sẽ thể hiện tiêu đề phụ, h3 sẽ là tiêu đề phụ của tiêu đề phụ (h2)… cứ như vậy cho đến h6.

Xây dựng một văn bản có cấu trúc

Các bạn có thể nhìn trực tiếp vào trang web các bạn đang đọc, tiêu đề trang mình đang sử dụng tag h1, các tiêu đề của từng section là h2. Kế đến các sub-title của từng phần là h3.

HTML cung cấp cho chúng ta đến 6 cấp độ của thẻ heading. Tuy nhiên, trong quá trình làm việc mình thường chỉ sử dụng từ 3-4 cấp độ trên cùng một trang.

Tại sao chúng ta cần xây dựng một văn bản có cấu trúc?

Chắc chắn khi xem 2 ví dụ phía trên, mỗi người trong chúng ta đều hiểu lý do cho việc xây dựng một văn bản có cấu trúc rồi. Tuy nhiên, một lý do vô cùng quan trọng nữa là để các search engine có thể hiểu được cấu trúc trang web của chúng ta. Nhờ đó mà trang web của chúng ta dễ dàng hơn trong việc tiếp cận đến người dùng.

Ngữ nghĩa

Ngữ nghĩa (Semantics) là một khái niệm khá trừu tượng. Để giải thích nó mình sẽ đưa ra 1 ví dụ: Bạn đang chạy xe trên đường, đèn giao thông chuyển sang đỏ và bạn tự động dừng lại. Tương tự như vậy, các đoạn văn, tiêu đề luôn mang ý nghĩa của nó (khi đọc một văn bản, bạn sẽ tự hiểu rằng, phần chữ bự nhất chính là tiêu đề). Do đó, chúng ta cần phối hợp các đoạn văn, tiêu đề một cách hợp lý, để giúp người đọc dễ dàng nắm nội dung và có trải nghiệm tốt hơn khi tiếp cận nội dung trang web.

Ngoài việc quan tâm về ngữ nghĩa với người dùng. Trong phần cuối, mình cũng sẽ giới thiệu về việc HTML cũng quan tâm đến ngữ nghĩa cho các search engine, robots…vv

Danh sách

Danh sách là một cách trình bày khá phổ biến. Chúng ta có thể bắt gặp danh sách ở bất cứ đâu trong cuộc sống quanh ta. Và HTML cũng cung cấp cho chúng ta 2 tags để trình bày một danh sách: “ol” và “ul“. Trong các danh sách sẽ có các phần tử. Các phần tử của một danh sách phải luôn được bao bằng một tag li.

Danh sách có thứ tự – Ordered list

Là các danh sách mà thứ tự của các phần tử là điều là quan trọng. Người ta thường dùng số La Mã, số thứ tự hay bảng chữ cái để đánh dấu thứ tự của các phần tử.

Ta có một ví dụ về danh sách có thứ tự. Không đâu xa, bạn có thể kéo lên phía trên trang web, phần tóm tắt nội dung. Ta có một danh sách có thứ tự.

Với đoạn mã trên, chúng ta sẽ nhận được:

  1. Các đoạn văn và tiêu đề
  2. Danh sách
  3. Nhấn mạnh

Danh sách không thứ tự – Unordered list

Là các danh sách mà thứ tự của các phần tử không quan trọng. Người ta có thể liệt kê các phần tử một cách tự do mà không quan tâm đến vị trí của nó.

Ta có một ví dụ về danh sách không thứ tự: công thức nấu chè đậu xanh:

Với đoạn mã trên, chúng ta sẽ nhận được

  • Đậu xanh bóc vỏ: 300g
  • Đường kính: 100g
  • Bột sắn dây: 3 muỗng cà phê
  • Nước cốt dừa: 200ml
  • Một ít muối

Danh sách lồng nhau

Đây là một vấn đề khá bình thường. Trong cuộc sống, chúng ta cũng dễ dàng bắt gặp những danh sách lồng nhau (Có thể là một danh sách không thứ tự là con của một danh sách thứ tự, hoặc ngược lại…vv). Và trong HTML, điều đó cũng rất bình thường. Vì nội dung của một phần tử có thể là một phần tử khác.

Vậy để hiểu đơn giản, ta có thể tạo 2 danh sách lồng nhau bằng cách, tạo một danh sách nằm trong phần nội dung của một phần tử li của danh sách cha.

Bài tập nhỏ: Các bạn thử copy/paste đoạn code này vào file html của bạn, xem nó hiển thị như thế nào nhé.

Nhấn mạnh

Trong văn bản, đôi lúc chúng ta cần nhấn mạnh một hoặc một vài từ. Đối với những người tiếp xúc nhiều với máy tính, các phần mềm soạn thảo. Có lẽ các bạn không lạ gì với tổ hợp phím ctrl + i, ctrl + bctrl + u (hoặc command với MacOS). Các tổ hợp phím này giúp chúng ta định dạng chữ nghiêng, chữ đậm và gạch chân. Qua đó, nhấn mạnh một cụm từ nào đó trong đoạn văn. HTML cũng cung cấp cho chúng ta các tags i, bu để thực hiện công việc tương tự

Nhưng, như giới thiệu ở trên, ngoài việc định dạng HTML còn quan tâm đến ngữ nghĩa. Do đó, HTML cung cấp và khuyến khích chúng ta sử dụng 2 tags emstrong để nhấn mạnh các cụm từ.

Tag em

em là viết tắt của từ emphasis (nhấn mạnh). Hiệu ứng của tag này tương tự tag i, nhưng về mặt ngữ nghĩa sẽ cho các lập trình viên, search engine hay bots biết được, đây là một từ khá quan trọng.

Các bạn có thể copy 2 dòng mã này vào file html của mình và mở thử trên trình duyệt. Hầu như không có sự khác biệt. Nhưng khi chúng ta (hoặc search engine) đọc mã nguồn. Chúng ta sẽ thấy được sự nhấn mạnh của tính từ “trễ”.

Tag strong

strong là viết tắt của strong importance (rất quan trọng). Với hiệu tương tự như tag b nhưng tag strong tập trung vào ngữ nghĩa.