Các thẻ HTML không cần đóng và có ích cho SEO

Khi một trình duyệt đọc một tài liệu HTML, trình duyệt đọc nó từ trên xuống dưới và từ trái sang phải. Các thẻ HTML được sử dụng để tạo các tài liệu HTML và hiển thị thuộc tính của chúng, mỗi thẻ HTML có các thuộc tính khác nhau. Thẻ HTML chứa ba phần chính: thẻ mở, nội dung và thẻ đóng.

Với đa số các thẻ HTML thì cần thẻ đóng, và như bạn biết… cái gì trên đời này cũng có ngoại lệ và có một số thẻ ngoại lệ đó là nó không có thẻ đóng, mình hay gọi là thẻ tự đóng.

1. Bắt đầu với Self-Closing Tag

Câu chuyện về thẻ tự đóng không mấy thú vị khi bạn chưa quan tâm tới nó. Thẻ tự đóng có liên quan đến những cách mà HTML đã được phát triển trong suốt quá trình sử dụng từ cuối những năm 1980. Thẻ HTML thông thường có thẻ mở và thẻ đóng như bạn đã biết. Tuy nhiên, có các phần tử trong HTML được gọi là các phần tử void, chẳng hạn như hình ảnh và liên kết, không yêu cầu nghiêm ngặt các thẻ đóng vì cấu trúc vốn có của chúng. Và chắc là như thế nên các chuyên gia cho rằng những thứ như hình ảnh và liên kết không cần và không thể có nội dung - chúng chỉ là loại con trỏ đến một yếu tố được cài đặt trong trang.

Trong các biến thể gần đây hơn của HTML, chẳng hạn như XHTML, thay vì bao gồm các thẻ mở và đóng riêng lẻ, các nhà phát triển sử dụng thẻ tự đóng có thêm ký tự /

<img src="img/circle.png" alt="" />

Bây giờ với HTML5 ngay cả ký tự gạch chéo đó cũng bị coi là lỗi thời. Các quy tắc W3C và các tiêu chuẩn khác cho thấy rằng các nhà phát triển không còn cần phải bao gồm ký tự để chỉ ra thẻ đóng, bởi vì người ta hiểu rằng các phần tử void đó không cần bất kỳ thẻ đóng nào.

2. Một số thẻ tự đóng

Trong HTML hay HTML5 mới nhất thì đây là một số thẻ mà mình tìm được và nghĩ rằng là nó là cá biệt, dị biệt hay cách gọi khác là cá tính:

<area> Là một thẻ khá dị có chức năng là định vị khu vực cho một cái ảnh.

<base> Một thẻ quy định đường dẫn tương đối cho toàn bộ file HTML. (Đặt nó trong thẻ head và nó phải là duy nhất).

<br> Là một thẻ xuống hàng.

<col> Chỉ định thuộc tính cho mỗi cột.

<command> Người dùng có thể gõ lệnh để thực hiện. (Tiếc là chưa thằng browser nào hỗ trợ cả)

<embed> Nhúng flash hay ứng dụng gì đó bên ngoài vào.

<hr> (horizontal rule) Một dấu gạch ngang.

<img> Nhúng một ảnh thông qua thuộc tính src.

<input> Nó là input nơi người dùng nhập giá trị vào.

<keygen> Định nghĩa khoá mã hoá đi kèm với một trường trong form (key-pair).

<source> Định nghĩa các nguồn đa phương tiện cho các phần tử đa phương tiên như <video> và <audio>

<link> Xác định mối quan hệ giữa một tài liệu và một nguồn lực bên ngoài (thường được sử dụng để liên kết đến style sheets).

<meta> Định nghĩa siêu dữ liệu về một tài liệu HTML.

<param> Xác định tham số của plugins là object hay video gì đó.

<track> Định nghĩa nội dung mô tả như chú thích, bình luận, hoặc các loại văn bản khác cho các tập tin đa phương tiện (<video> và <audio>)

<wbr> Vị trí ngắt hàng tuỳ chỉnh. Quy định đoạn nội dung có thể xuống dòng để tránh hỏng giao diện.

Cái gì cũng có bất quy tắc và đây là bất quy tắc của HTML.

3. Lưu ý với các thẻ đóng

Luôn sử dụng thẻ đóng là điều cần thiết không sợ lỗi thời. Trong HTML5, bạn không cần sử dụng thẻ đóng cho tất cả các thẻ ví dụ như các thẻ trên nhưng khuyến khích bạn nên sử dụng thẻ đóng. Bạn có thể tùy ý đóng những thẻ rỗng (thẻ rỗng là những thẻ không có thẻ đóng) và đâu cũng có nguyên do của nó vì:

- Dấu gạch chéo / là bắt buộc nếu bạn sử dụng thẻ trong XHTML và XML.
- Nếu bạn muốn những phần mềm đọc XML có thể hiểu được trang của bạn, tốt nhất là hãy sử dụng cách đóng thẻ.

Cảm ơn bạn đã dành thời gian đọc bài viết!

---

Tham khảo tại: https://viblo.asia/p/cac-the-html-khong-can-the-dong-RQqKL2b0l7z

---

Sử dụng các tag HTML để phục vụ cho nghiệp vụ SEO!!! Để trải nghiệm thực tế tôi đã tổng hợp liệt kê một vài minh chứng dưới đây về một số tag HTML thông thường. Việc ngồi code bao giờ cũng mất nhiều thời gian và đòi hỏi cẩn thận từng dấu kí hiệu để tránh sai sót về sau, và mất thời gian để tìm ra được lỗi, chúng ta cần phải cẩn thận từng chút từng chút một. Kèm với tư duy code tương tác với nghiệp vụ SEO lại càng đòi hỏi cao hơn nữa.

Danh sách các thẻ

• 01. Thẻ base
• 02. Thẻ aside
• 03. Thẻ address
• 04. Thẻ pre
• 05. Thẻ figure
• 06. Thẻ main
• 07. Thẻ s
• 08. Thẻ cite
• 09. Thẻ q
• 10. Thẻ abbr
• 11. Thẻ data
• 12. Thẻ time
• 13. Thẻ ins
• 14. Thẻ del
• 15. Thẻ picture

1. Thẻ base

Đầu tiên khi đã chỉ định đường link tương đối, bạn có thể chỉ định default các path là root. Rồi đưa vào trong thẻ head.

<html>
  <head>
    <base href="http://viblo.asia" target="_blank">
  </head>
  <body>
    <div>
      <a href="/u/trungnt256">trungnt256</a>
    </div>
  </body>
</html>

Làm như thế này thì địa chỉ đường link trong thẻ a sẽ thành http://viblo.asia.com/u/trungnt256 và ta cũng có thể chỉ định thuộc tính target mặc định bằng việc gắn thêm nó vào.
Trong nghiệp vụ làm SEO thì các đường dẫn path tuyệt đối sẽ tốt hơn các path tương đối, tôi đã nghe đâu đó là như vậy nên có thể đây cũng là một trong số các yếu tố quan trọng chúng ta nên lưu ý. Tuy nhiên nó cũng có khả năng dễ bị gây rối nên các bạn cũng cần cẩn thận khi áp dụng nó.

Tốt nhất tôi khuyên các bạn nên sử dụng link tuyệt đối thay vì link tương đối cho rõ ràng (ví dụ khi dẫn link cho một trang khác, không để là mypage.html, mà nên để www.example.com/mypage.html).

2. Thẻ aside

Tiếp nữa là ta thêm các thông tin bổ sung còn thiếu từ nội dung body chính. Ngoài thông tin bổ sung đơn thuần ra thì nó cũng có thể sử dụng cho việc khoanh vùng các yếu tố như là navigation, quảng cáo, side bar.

<aside>
  <nav>
    <ul>
      <li>HOME</li>
      <li>Search</li>
      <li>My page</li>
    </ul>
  </nav>
</aside>

Cột bên phải đang được khoanh vùng bởi thẻ aside

<div class="wrapper">
  <main>
    (main content)
  </main>
  <aside class="side-content">
    (side bar)
  </aside>
</div>

Nếu khoanh lại bằng aside thì ta có thể khiến cho phân biệt main contain không liên quan đến chức năng tìm kiếm, và nội dung được coi là main cũng sẽ được làm nổi bật hơn nữa.

3. Thẻ address

Điền thông tin liên lạc đối với đoạn văn đó. Nếu ở đây ta có cả thẻ article, thì địa chỉ liên lạc sẽ là nội dung của bài post được viết trong thẻ article, nó sẽ được làm nổi bật hơn, còn nếu không có thì sẽ được viết toàn bộ ở phần document (nội dung được viết trong thẻ body)
Trước đây, trước HTML5 thì các thông tin copyright như là địa chỉ v.v..có được hiển thị, nhưng từ sau khi có HTML5 thì được chuyển thành địa chỉ liên lạc của phần nội dung (content).

<article>
  Từ xưa Googlebot bị cho rằng còn yếu khi áp dụng cho nghiệp vụ SEO có dùng javascript, nhưng ngày nay thì nó phát triển khá mạnh mẽ và thậm chí còn có thể làm được cả javascript nữa. Nói gì đi nữa thì cũng không phải nó giúp ích cho bạn hoàn toàn, để bạn không phải suy nghĩ gì nữa, mà tôi chỉ tổng hợp lại một số kĩ năng cần thiết cho đối sách SEO trong trường hợp có sử dụng javascript. Sau đây là về các viết thay thế URL sử dụng  Hisory API mới là nội dung chủ yếu tôi muốn đề cập nữa (tên gọi khác là pjax).
  Theo <a href="http://viblo.asia/ykyk1218/items/78ed3bce0371a4ee219c">Tổng hợp đối sách SEO có sử dụng javascript</a>
  <address>
    <ul>
      <li>Tên: Nguyen Na</li>
      <li>twitter: @ykyk1218 </li>
    </ul>
  </address>
</article>

Cá nhân tôi thì phần này cũng đóng góp không nhỏ trong kết quả tìm kiếm nên các bạn cũng nên lưu ý nhé.

4. Thẻ pre

Hiển thị các yếu tố text đã định dạng format chuẩn. Khoanh bằng markdown \ \ \ 〜 \ \ \ thì sẽ hình thành thẻ pre. Ở trang Viblo hiện tại cũng sử dụng.

<article>
  Cách sử dụng History API
  <pre>
    history.pushState(state, title, url)
  </pre>
</articel>

5. Thẻ figure

Thể hiện các nội dung khép kín dạng biểu đồ. Khi thêm figcaption thì ta có thể thêm caption vào nội dung của figure. Yếu tố figure dù bị tách biệt riêng ra nhưng ta cũng hoàn toàn có thể sử dụng nó một cách triệt để. Cũng có chút chưa rõ ràng nếu so sánh về điểm khác nhau với aside, yếu tố figure không phải không liên quan đến các yếu tố tham khảo từ section đó, còn aside thì cũng có là yếu tố không mấy liên quan đến đoạn nội dung chính.

Tham khảo:[HTML5]Cách sử dụng yếu tố figure đúng đắn

<figure>
  <img src="sample.jpg" alt="Mức lương bình quân của nhân viên văn phòng năm 2016">
  <figcaption>Mức lương bình quân của nhân viên văn phòng năm 2016</figcaption>
</figure>

Yếu tố img trong figure được hiểu là hình ảnh có ý nghĩa cho nên tôi có cảm giác sẽ dễ được index cho tìm kiếm hình ảnh.

6. Thẻ main

Hiển thị yếu tố main của body. Trong document chỉ có thể bao gồm 1 yếu tố main và cũng không được bao hàm bên trong với tư cách là yếu tố con của article, aside, footer, header, nav.
Chắc là những điều này giúp ta không cần rườm rà nhiều việc nữa nhỉ. Tôi cũng có cảm giác như là có ít điểm sử dụng.

<body>
  <header>header</header>
  <main>main content</main>
  <footer>footer</footer>
</body>

7. Thẻ s

Sử dụng khi nội dung đó chưa đúng hoặc không có liên quan. Sử dụng khi có biến động về giá cả. Dùng del thì có lẽ cũng trả về kết quả tương tự như vậy, nó dùng để xóa bỏ nội dung text (để giảm đánh giá của SEO).

<div>
  <p>T-shirt</p>
  <p>
    <s>Giá thông thường：2000 yên</s>
  <p>
  <p>Giá đặc biệt：1280 yên</p>
</div>

Tương tự như vậy ta cũng từng có strike được coi là thẻ gạch xóa, nhưng ở HTML5 nó bị bỏ đi.

8. Thẻ cite

Yếu tố thể hiện title của tác phẩm. Trước bản HTML5, thì không chỉ title của tác phẩm mà cả tên tác giả cũng được hiển thị ra nhưng từ HTML5 thì đã bị giới hạn title của tác phẩm.

<div>
  <p>
    Basket ball<cite>Slumdan</cite>words
  </p>
  <blokquote>
    Fight!
    Play!
    by Nguyen Na
  </blockquote>
</div>

9. Thẻ q

Là viết tắt của quoration, thể hiện trích đoạn ngắn có tính so sánh bỏ qua xuống dòng. Nó cũng gần giống với blockquote nên dùng cũng không cần giải thích nhiều thêm nữa.
blockquote、q、cite là những thứ khiến Google không hiểu đó là nội dung cóp nhặt (copy content) nên nó không có hiệu quả SEO đặc biệt. Chỉ là những yếu tố giúp không bị tính điểm trừ thôi.

10. Thẻ abbr

Thể hiện từ viết tắt. Yếu tố acronym cũng mang ý nghĩa tương tự như vậy, và cũng sẽ bị loại khỏi HTML5 cho nên dùng cái abbr là đủ.

<abbr title="SearchEngineOptimazation>SEO</abbr>

11. Thẻ data

Đưa thêm giá trị có thể nhận biết robot vào thuộc tính value.

<data value="80">80</data>

Vì tôi cũng không rõ cái gì nhận biết được, cái gì không, cho nên việc áp dụng nó thì tôi cũng không khuyến khích.

12. Thẻ time

Thể hiện ngày giờ. Cũng có khi hiện ra ở cả phần kết quả tìm kiếm nên sẽ coi là yếu tố quyết định cập nhật mới của nội dung.

<time datetime="2016-03-28T13:00:27+09:00" itemprop="datePublished">2016/03/28</time>

thuộc tính datetime
Nếu có thuộc tính datetime thì sẽ ưu việt giá trị thuộc tính datetime. nếu không có thì hãy nhìn vào chỗ khung bở thẻ time. Ví dụ như là `<time datetime="2016-10-08">1 tuần trước</time>' thì chức năng tìm kiếm sẽ nhìn datetime rồi quyết định thông tin ngày.
itemprop
itemprop cần thiết cho việc cài đặt Rich snippets (cho Rich xem kết quả tìm kiếm của Google), cho nên việc coi nó là itemprop="datePublished" ta có thể truyền đạt rõ ràng ngày công khai bài viết cho chức năng tìm kiếm.
Về chi tiết thao tác cài đặt Rich snippets thì tôi sẽ không đề cập trong lần này cho nên các bạn hãy xác nhận theo các nội dung dưới đây nếu có quan tâm
http://qiita.com/ryotanatsume/items/91d16968a4677443a6e7

13. Thẻ ins

Hiển thị text đã được chèn thêm vào. Điền thuộc tính datetime rồi thì ta có thể chỉ định một cách rõ ràng ngày đã chèn vào. Bằng việc điền thuộc tính cite, ta có thể chỉ định URL mà có được viết phần text giải thích đã chèn vào.

14. Thẻ del

Hiển thị các text đã bị xóa. Điền thuộc tính datetime thì ta có thể chỉ định mội cách rõ ràng ngày đã chèn vào. Bằng việc điền thuộc tính cite, ta có thể chỉ định URL mà có được viết phần text giải thích đã chèn vào.

<div class="changed">
  <p>
    zoom：<strong>「command」 + 「shift」 + 「+」</strong><br>
    minimize：<strong>「command」 + <del class="del">「shift」</del> <del class="del">+</del> 「-」</strong><br>
    undo：<strong>「command」 + <del class="del">「shift」</del> <del class="del">+</del> 「0」</strong>
  </p>
</div>

Ở page này có được chỉ định noindex cho nên cũng không mấy ý nghĩa đối với nghiệp vụ SEO, còn nếu mà có sử dụng thì chắc các bạn cũng có hình dung được nhỉ.

15. Thẻ picture

Cuối cùng, tôi muốn đề cập đến yếu tố mới được thêm vào ở bản HTML 5.1.
Ta có thể chỉ định hình ảnh sử dụng cho responsive image mà không cần dùng đến CSS và Javascript. responsive web design luôn được Google khuyến khích cho nên nếu bạn áp dụng được vào nghiệp vụ SEO thì đó là điều tuyệt vời.
Cách sử dụng picture
Ta có thể chỉ định mỗi chiều rộng màn hình ảnh sử dụng. Đọc được hình ảnh và thời gian timing của hình ảnh đó nữa.
Tôi nghĩ là cũng có thể xác nhận được thay đổi hình ảnh cùng với việc thu nhỏ kích thước rộng của browser.

<picture>
  <source media="(min-width: 650px)" srcset="images/kitten-large.png">
  <source media="(min-width: 465px)" srcset="images/kitten-medium.png">
  <!-- img tag for browsers that do not support picture element -->
  <img src="images/kitten-small.png" alt="a cute kitten">
</picture>

Nhân tiện đây thì thuộc tính srcset trong thẻ img mới được thêm vào HTML5 cũng thực hiện được điều tương tự. Về phần này thì link dưới đây https://ics.media/entry/13324 có ghi chi tiết, các bạn có thể tham khảo nếu có quan tâm.

<img src="hoge.jpg" srcset="hoge@2x.jpg 200w, hoge.jpg 400w" />

Ở nội dung cài đặt bên trên, ta có thể sử dụng hoge@2x.jpg cho các browser có kích thước rộng từ 200px trở xuống, còn ngoài ra ta sẽ sử dụng hoge.jpg (Trường hợp Retina Display thì có độ phân giải lớn gấp đôi bình thường cho nên có thể sử dụng hoge@2x.jpg cho browser có chiều rộng 100px). Đáng tiếc là ở IE hình như không sử dụng được srcset.http://caniuse.com/#search=srcset

---

Tham khảo tại: https://viblo.asia/p/tong-hop-cac-tag-html-khong-may-noi-bat-cung-co-ich-cho-nghiep-vu-seo-roaerJJweRM