7 Thẻ HTML bạn cần biết với tư cách là người viết hoặc người viết blog trực tuyến

Bài học chính

HTML đóng một vai trò quan trọng trong việc phổ biến nội dung bằng văn bản trên internet, vì các trang web dựa vào khả năng của nó để hiển thị thông tin theo cách hấp dẫn và sắp xếp nó để các công cụ tìm kiếm lập chỉ mục tối ưu.

Để có toàn quyền kiểm soát cách trình bày và sức hấp dẫn thẩm mỹ của tác phẩm viết của một người, điều cần thiết là tác giả phải làm quen với các thành phần HTML cơ bản như thẻ tiêu đề, thẻ văn bản in đậm và in nghiêng và thẻ đoạn văn.

Danh sách, dấu đầu dòng và thẻ hình ảnh có thể được sử dụng để nâng cao tính tổ chức và tính thẩm mỹ của bài viết, trong khi các siêu liên kết cung cấp thêm ngữ cảnh và cải thiện thứ hạng của công cụ tìm kiếm.

Một quan niệm sai lầm phổ biến ở một số tác giả, bao gồm cả những người chuyên viết về công nghệ, cho rằng việc thông thạo kiến ​​thức HTML là không cần thiết. Tuy nhiên, đối với nội dung được dự định xuất bản trên internet, sự hiểu biết về HTML ngày càng trở nên phù hợp và cần thiết hơn so với nhận thức ban đầu.

Các trang web sử dụng HTML làm phương tiện hiển thị nội dung. Mặc dù một số trình chỉnh sửa đánh dấu, người tạo trang web và nền tảng quản lý nội dung cho phép chỉnh sửa trực quan các bài viết, nhưng điều quan trọng cần lưu ý là mã HTML về cơ bản vẫn tham gia vào quá trình này.

Để có được khả năng kiểm soát toàn diện về giao diện nội dung của một người và thực hiện các điều chỉnh chính xác cho cách trình bày nội dung đó, điều cần thiết là phải làm quen với các thành phần HTML cốt lõi. Những yếu tố này mang lại ảnh hưởng đáng kể đến cách một trang web hoặc trang web xuất hiện về mặt bố cục, phong cách và tổ chức. Thông thạo cách sử dụng của chúng cho phép người dùng định hình nội dung kỹ thuật số của họ một cách hiệu quả theo sở thích và yêu cầu cụ thể.

Thẻ tiêu đề

Thẻ tiêu đề cho phép tóm tắt một phân đoạn hoặc phân đoạn cụ thể trong một bài viết. Thông thường, các trình duyệt web sẽ hiển thị các thẻ tiêu đề với phông chữ lớn hơn và đậm hơn, do đó khiến chúng dễ thấy hơn so với văn bản xung quanh.

Ngoài việc truyền tải thông tin trực quan thông qua các tiêu đề, chúng còn mang lại cảm giác về tổ chức và xếp hạng cho nội dung, từ đó tạo điều kiện dễ dàng cho các thuật toán thu thập dữ liệu web hiểu được cách sắp xếp của trang web.

Sáu thẻ tiêu đề được đánh số được sử dụng, trong đó các chữ số có ý nghĩa hơn tương ứng với các tiêu đề xếp hạng thấp hơn. Bạn nên sử dụng thẻ cho tiêu đề chính của trang web, trong khi nên sử dụng thẻ cho các phần và thẻ cho các phần phụ.

Xem xét tính chất của nội dung và đối tượng mục tiêu của bạn, bạn nên sử dụng một cơ cấu tổ chức phù hợp. Mặc dù thẻ và có thể phù hợp với các tài liệu phức tạp hoặc có định hướng hợp pháp, nhưng khả năng đọc của chúng có thể đặt ra thách thức đối với khán giả nói chung.

Các tiêu đề đóng một vai trò thiết yếu trong việc chia nhỏ các bài viết dài thành các phân đoạn dễ quản lý hơn, giúp người đọc dễ đọc hơn, những người có thể thấy những bức tường văn bản đáng sợ. Không giống như những người đọc thụ động có thể lướt qua nội dung không hấp dẫn, các tiêu đề mang lại cảm giác về cấu trúc khuyến khích sự tương tác tích cực với tài liệu. Với những đoạn xen kẽ ngắn gọn giữa các chủ đề, chúng cho phép cả người viết và người đọc lấy lại hơi thở và tập hợp lại trước khi quay lại cuộc thảo luận hiện tại.

Hãy đảm bảo rằng bạn kết thúc mỗi thành phần tiêu đề bằng một thẻ đóng thích hợp, chẳng hạn như.

In đậm, in nghiêng và định dạng văn bản khác

Thẻ tiêu đề đóng vai trò thiết yếu trong việc định hình kiến ​​trúc tổng thể của trang web, trong khi các thẻ định dạng cụ thể hơn được thiết kế để giải quyết các chi tiết nhỏ trong văn bản. Ví dụ: khi tìm cách nhấn mạnh một đoạn cụ thể của câu, các thẻ này cung cấp một phương tiện để thay đổi hình thức của văn bản mà không ảnh hưởng đến ý nghĩa thứ bậc của nó.

⭐ cho văn bản in đậm.

⭐ cho văn bản in nghiêng.

⭐ cho văn bản gạch ngang.

Các công cụ quản lý nội dung và đánh dấu thường xuyên sao chép định dạng khi chuyển văn bản từ các ứng dụng thay thế. Để tinh chỉnh thông tin này, hãy xóa các mã này khỏi nguồn ban đầu hoặc loại bỏ định dạng khi chèn dữ liệu để tránh những vấn đề như vậy trong quá trình ban đầu.

Đoạn văn và Khoảng cách

Ngoài việc sử dụng các tiêu đề để sắp xếp nội dung thành các phân đoạn riêng biệt, có thể sử dụng cả hai phần tử và để phân định các đoạn văn hoặc tạo ngắt dòng tương ứng.

Một số công cụ chỉnh sửa trực quan tự động kết hợp các điểm đánh dấu này khi nhập, chẳng hạn như khi nhấn phím enter. Tuy nhiên, người dùng soạn nội dung của họ trong trình soạn thảo dựa trên văn bản có thể đưa các thuộc tính này trực tiếp vào mã HTML của họ.

Khi soạn văn bản yêu cầu phân tách trực quan giữa các dòng mà không cần bắt đầu một đoạn văn mới, việc sử dụng thẻ tự đóng HTML là một lựa chọn thích hợp. Điều này đặc biệt phù hợp khi sáng tác thơ hoặc các tác phẩm văn học khác, nơi các ý tưởng trôi chảy liền mạch từ dòng này sang dòng khác và không đảm bảo việc tạo ra các đoạn văn riêng biệt. Trong những trường hợp như vậy, việc sử dụng thẻ cho phép chuyển đổi suôn sẻ trong khi vẫn duy trì sự phân chia không gian mong muốn.

Thẻ là một phần tử HTML thiếu phần đóng tương ứng và do đó nên được sử dụng độc lập. Thuộc tính này có thể được quy cho thực tế là nó không chứa cũng như không ảnh hưởng đến bất kỳ nội dung hoặc mô tả nào.

Việc sử dụng các điểm đánh dấu này cho phép tuân thủ các nguyên tắc đã được thiết lập liên quan đến chất lượng thẩm mỹ của cả nội dung bằng văn bản và kỹ thuật số, do đó làm tăng độ tin cậy của trang web của một người theo cảm nhận của cả khách truy cập và thuật toán của công cụ tìm kiếm.

Số và dấu đầu dòng

Danh sách đóng vai trò là phương tiện hiệu quả để sắp xếp thông tin khi trình bày nhiều mục liên tiếp. Khi mô tả một tập hợp các thành phần riêng lẻ, chẳng hạn như thành phần của công thức nấu ăn hoặc hướng dẫn tuần tự, việc sử dụng danh sách sẽ đảm bảo tổ chức mạch lạc.

Phần tử này được sử dụng để tạo danh sách có thứ tự hoặc đánh số, trong khi thẻ đại diện cho danh sách không có thứ tự chứa các mục có dấu đầu dòng. Thẻ được sử dụng để xác định các thành phần riêng lẻ trong một trong hai loại danh sách.

Đây là ví dụ về danh sách có thứ tự bao gồm năm phần tử có thể trông như thế nào ở định dạng HTML:css Mục đầu tiên Mục thứ hai Mục thứ ba Mục thứ tư Mục thứ năm

 <ol>
     <li>alpha</li>
     <li>bravo</li>
     <li>charlie</li>
     <li>delta</li>
     <li>echo</li>
</ol>

Đánh dấu nói trên, khi được trình duyệt web hiển thị, sẽ xuất hiện ở định dạng giống như cấu trúc sau:

Nếu bạn muốn sử dụng danh sách liệt kê, vui lòng thay thế bằng để có được danh sách có dấu đầu dòng.

Mã HTML được cung cấp minh họa cách sắp xếp nội dung bằng các danh sách lồng nhau. Danh sách ngoài cùng được xác định bởi thẻ với mã định danh là “my-list”. Trong danh sách bên ngoài, có hai danh sách bên trong được tạo bằng thẻ và được lồng trong chúng là các mục danh sách khác được biểu thị bằng các phần tử , theo sau là mô tả văn bản tương ứng của chúng được gói trong thẻ . Cấu trúc này cho phép trình bày có tổ chức dữ liệu đa cấp ở định dạng dễ hiểu.

Nhiệm vụ này yêu cầu bạn cung cấp một phiên bản tinh tế và hùng hồn hơn của văn bản nhất định bằng cách sử dụng ngôn ngữ và giọng điệu phù hợp, truyền tải cùng một ý nghĩa trong khi vẫn duy trì văn phong trang trọng.

 <ol>
  <li>alpha</li>
  <li>
    bravo
    <ol>
      <li>Hip</li>
      <li>Hip</li>
      <li>Hooray</li>
    </ol>
  </li>
  <li>charlie</li>
  <li>
    delta
    <ul>
      <li>Difference</li>
      <li>River mouth</li>
    </ul>
  </li>
  <li>echo</li>
</ol> 

Bạn có thể sử dụng các cấu trúc danh sách lồng nhau, bao gồm nhiều định dạng danh sách khác nhau, để minh họa các hệ thống phân cấp phức tạp hơn và nâng cao khả năng hiểu của người đọc về chủ đề đã cho.

Xây dựng bảng

Khi xử lý số lượng lớn dữ liệu có liên quan với nhau, việc sử dụng bảng có thể là một phương tiện tổ chức hiệu quả.

Để tạo bảng HTML, hãy bắt đầu với phần tử `

. Nó phải bao gồm tất cả thông tin mà bạn định hiển thị trong bảng. Sử dụng phần tử để xác định từng hàng của bảng và sử dụng phần tử để biểu thị các ô riêng lẻ trong mỗi hàng. Nếu bạn muốn chỉ ra tiêu đề bảng, bạn có thể thay thế phần tử bằng phần tử `, biểu thị “tiêu đề bảng”. Hãy nhớ cung cấp các phần tử đóng tương ứng cho bảng, hàng và ô của bạn.

 <table>
     <tr>
          <th>Group 1</th>
          <th>Group 2</th>
     </tr>
     <tr>
          <td>Mark</td>
          <td>Belle</td>
     </tr>
     <tr>
          <td>Ralph</td>
          <td>Shane</td>
     </tr>
     <tr>
          <td>John</td>
          <td>Josie</td>
     </tr>
</table>

Ở dạng được hiển thị trong môi trường duyệt web, bảng sẽ xuất hiện như sau:

Khi sử dụng HTML để xây dựng bảng, điều quan trọng cần lưu ý là quá trình này diễn ra theo hàng chứ không phải theo cột. Tuy nhiên, người ta có thể sử dụng các kỹ thuật CSS hiện đại để thêm vào bảng của mình các yếu tố phong cách khác nhau như phân định đường viền, lặp lại hàng màu sắc và các chi tiết trang trí bổ sung.

Thêm hình ảnh

Việc kết hợp các yếu tố trực quan vào trang web đặt ra những thách thức đặc biệt so với việc định dạng nội dung văn bản. Thông thường, hình ảnh không được truyền tải bằng ngôn ngữ, đòi hỏi phải lưu trữ chúng trong các tệp riêng lẻ. Do đó, phương pháp xác định vị trí của các tệp này phải được thiết lập cùng với thẻ HTML tương ứng.

Việc sử dụng phần tử ![]() cho phép kết hợp hình ảnh trực quan trong tài liệu; tuy nhiên, cần phải sử dụng chức năng HTML được gọi là “thuộc tính” để chỉ định vị trí của tệp hình ảnh đi kèm. Các thuộc tính này được thêm vào mã định danh của thẻ và đặt trước dấu ngoặc nhọn kết thúc. Mỗi thuộc tính sở hữu một biệt danh và một giá trị tương ứng, được kết nối bằng dấu bằng. Nên đặt các giá trị thuộc tính trong dấu ngoặc kép.

Đây là một ví dụ:

 <img alt="tree leaves and branches"
    src="https://images.unsplash.com/photo-1532365673558-f9bb768644e7"> 

Thuộc tính “src”, biểu thị nguồn, chỉ định URL của hình ảnh cần kết hợp. Đây có thể là URL quan hệ hoặc URL tuyệt đối, tùy thuộc vào việc đó là hình ảnh bên ngoài hay nằm trên cùng một máy chủ.

Thuộc tính “alt” biểu thị “văn bản thay thế”, dùng để cung cấp mô tả về nội dung được mô tả trong hình ảnh. Nói chung, nên kết hợp thuộc tính này vì nó có giá trị cho cả người dùng trình đọc màn hình và thuật toán của công cụ tìm kiếm. Bất kể người xem là con người hay tự động, những người không thể cảm nhận được hình ảnh gốc vì bất kỳ lý do gì đều có thể hiểu rõ hơn về nội dung của nó thông qua việc cung cấp văn bản thay thế.

Các trình duyệt sẽ kết hợp hình ảnh được chỉ định bởi URL nguồn được cung cấp trong thuộc tính ‘src’, tích hợp nó một cách liền mạch vào trang web như sau: