search

Hướng dẫn html 3 tags - html3 thẻ

Ngày đăng: 19/11/2022
Trả lời: 0
Lượt xem: 110
, ,

Ngày nay, khả năng truy cập (A11y) là rất quan trọng trong tất cả các giai đoạn xây dựng các sản phẩm phần mềm tùy chỉnh. Bắt đầu từ phần thiết kế UX / UI, nó đi sâu vào các cấp độ nâng cao của việc xây dựng các tính năng trong mã. Nó cung cấp rất nhiều lợi ích cho các nhà phát triển làm việc để tăng DX, nhưng quan trọng hơn là cho người dùng cuối. Một trong số a11 phần đó trong HTML là các thẻ ngữ nghĩa và đó là những gì tôi muốn đề cập ở đây.

Show

Các nhà phát triển front-end phải quen thuộc với các thẻ HTML vì đây là môi trường tự nhiên của họ hàng ngày. Có lẽ tất cả các bạn đều biết một số thẻ cơ bản như 

Heading 1


Heading 2


Heading 3


Heading 4


Heading 5


Heading 6
3v.v. Nhưng, chẳng hạn, bạn có biết rằng bạn có thể đề xuất khoảnh khắc ngắt từ chỉ bằng HTML mà không cần CSS không?các thẻ HTML vì đây là môi trường tự nhiên của họ hàng ngày. Có lẽ tất cả các bạn đều biết một số thẻ cơ bản như 
Heading 1


Heading 2


Heading 3


Heading 4


Heading 5


Heading 6
3v.v. Nhưng, chẳng hạn, bạn có biết rằng bạn có thể đề xuất khoảnh khắc ngắt từ chỉ bằng HTML mà không cần CSS không?

WBR

Giả sử bạn đang làm việc trên một số trang web hoặc ứng dụng cho một khách hàng người Đức. Như bạn đã biết, các từ tiếng Đức có thể rất dài. Vì vậy, bạn có thiết kế với một số nội dung văn bản bạn phải tái tạo bằng mã và nội dung này phải phá vỡ trong những khoảnh khắc rất cụ thể. Đây là 

Heading 1


Heading 2


Heading 3


Heading 4


Heading 5


Heading 6
4thẻ để giúp bạn.

Geburtstagskuchen

METER

Hãy tưởng tượng bạn đang xây dựng một ứng dụng quản lý lưu trữ đĩa. Bạn cần phải hiển thị bằng cách nào đó trong giao diện người dùng dung lượng lưu trữ còn trống và bạn thực sự muốn làm cho nó dễ truy cập nhất có thể. Đây chỉ là một trường hợp sử dụng hoàn hảo cho 

Heading 1


Heading 2


Heading 3


Heading 4


Heading 5


Heading 6
5thẻ. Nó sẽ chỉ cho bạn giá trị trong một phạm vi xác định. Một điều thú vị khác về thẻ này là các thuộc tính của nó:

  • thấp → khi giá trị hiện tại thấp hơn giá trị thấp đã cài đặt, vạch của đồng hồ sẽ chuyển sang màu đỏ;
  • tối ưu → khi giá trị hiện tại cao hơn giá trị thuộc tính tối ưu, vạch của đồng hồ sẽ trở thành màu xanh lục;
  • cao → khi giá trị cao thấp hơn giá trị tối đa và cao hơn giá trị tối ưu, vạch của đồng hồ sẽ có màu cam. Nếu không, nó sẽ có màu xanh lục.

Bạn cũng có thể biết một thẻ tương tự, đó là tiến trình. Vì vậy, thực sự sự khác biệt giữa chúng là gì? Thẻ tiến trình nên được sử dụng cho các nhiệm vụ đang diễn ra. Nói cách khác, hãy sử dụng thẻ tiến trình khi bạn giải quyết một công việc cụ thể. Với thẻ đồng hồ, nó nên được sử dụng để hiển thị mức sử dụng đĩa hoặc bộ nhớ. Một điểm khác biệt nữa là thẻ đồng hồ không được IE hỗ trợ và đó thực sự là nhược điểm duy nhất của thẻ này.

DEL và INS

Bạn đã bao giờ tự hỏi làm thế nào để xây dựng một chỉ báo có thể truy cập được về các phần nội dung đã xóa và được thêm vào (khác biệt trong GitHub hoặc thông báo qua email từ Jira khi vé đã được cập nhật)? Bạn chỉ cần bọc nội dung đã xóa bằng 

Heading 1


Heading 2


Heading 3


Heading 4


Heading 5


Heading 6
6thẻ. Ví dụ 
Heading 1


Heading 2


Heading 3


Heading 4


Heading 5


Heading 6
7:. Để chỉ hiển thị phần nội dung đã thêm, bạn có thể sử dụng 
Heading 1


Heading 2


Heading 3


Heading 4


Heading 5


Heading 6
8thẻ theo cách chính xác. Thẻ này cũng cung cấp hai thuộc tính:
Heading 1


Heading 2


Heading 3


Heading 4


Heading 5


Heading 6
6thẻ. Ví dụ 
Heading 1


Heading 2


Heading 3


Heading 4


Heading 5


Heading 6
7:. Để chỉ hiển thị phần nội dung đã thêm, bạn có thể sử dụng 
Heading 1


Heading 2


Heading 3


Heading 4


Heading 5


Heading 6
8thẻ theo cách chính xác. Thẻ này cũng cung cấp hai thuộc tính:

  • cite → uri của một tài nguyên giải thích lý do tại sao phần này đã được thêm vào;
  • datetime → dữ liệu và thời gian thay đổi

Tất nhiên, có nhiều thẻ hữu ích hơn trong HTML . Tôi thực sự khuyên bạn nên sử dụng tất cả chúng khi có thể và phù hợp. Khách hàng và người dùng ứng dụng của bạn sẽ cảm ơn bạn vì cách tiếp cận như vậy. Tuy nhiên, hãy cẩn thận vì một số thẻ có thể không được dùng nữa. thẻ hữu ích hơn trong HTML . Tôi thực sự khuyên bạn nên sử dụng tất cả chúng khi có thể và phù hợp. Khách hàng và người dùng ứng dụng của bạn sẽ cảm ơn bạn vì cách tiếp cận như vậy. Tuy nhiên, hãy cẩn thận vì một số thẻ có thể không được dùng nữa. 

Chào các bạn!

Có lẽ khá nhiều bạn ở đây ít khi quan tâm đến khái niệm "nhóm tag trong HTML". Trước đây mình có một bài viết giới thiệu về 2 loại: Block elements và Inline elements. Các bạn có thể xem lại bài viết đó ở đây:nhóm tag trong HTML". Trước đây mình có một bài viết giới thiệu về 2 loại: Block elements và Inline elements. Các bạn có thể xem lại bài viết đó ở đây:

https://viblo.asia/p/ban-da-thuc-su-hieu-ve-block-elements-va-inline-elements-chua-4dbZNnOmZYM

Dù bài viết bên trên cũng là chia các elements trong HTML thành 2 nhóm nhưng thực tế lại khác nhau.

  • Block elements và Inline elements: được chia theo định dạng hiển thị block và inline.: được chia theo định dạng hiển thị block và inline.
  • Nhóm tag trong HTML: được phân chia theo chức năng.: được phân chia theo chức năng.

Như vậy bản chất của 2 kiểu phân loại này là hoàn toàn khác nhau. Các bạn đừng gộp chúng lại làm 1 nhé.

Quay trở lại chủ đề chính, một câu hỏi được đặt ra ở đây là: Viết bài này để làm gì? Thực chất có khá nhiều bạn đánh tay ngang, chưa thực sự tìm hiểu kỹ HTML từ đầu nên sử dụng HTML tag khá lôm côm, lung tung dẫn tới code không được tối ưu. Vì vậy mình viết bài này đễ hỗ trợ phần nào các bạn hiểu rõ hơn về chức năng của các tag mà các bạn dự định sẽ sử dụng sao cho chính xác và tối ưu nhất có thể. Đừng nghĩ là dùng tag HTML nào cũng được. Không tự nhiên mà HTML sinh ra các nhóm tag để sử dụng. Nếu sử dụng sai sẽ ảnh hưởng lớn tới performance đấy, mình dính nhiều lần rồi nên biết.đánh tay ngang, chưa thực sự tìm hiểu kỹ HTML từ đầu nên sử dụng HTML tag khá lôm côm, lung tung dẫn tới code không được tối ưu. Vì vậy mình viết bài này đễ hỗ trợ phần nào các bạn hiểu rõ hơn về chức năng của các tag mà các bạn dự định sẽ sử dụng sao cho chính xác và tối ưu nhất có thể. Đừng nghĩ là dùng tag HTML nào cũng được. Không tự nhiên mà HTML sinh ra các nhóm tag để sử dụng. Nếu sử dụng sai sẽ ảnh hưởng lớn tới performance đấy, mình dính nhiều lần rồi nên biết.

Ở bài viết này mình sẽ chỉ giới thiệu tới các bạn các nhóm tag cơ bản nhất, hay sử dụng nhất trong HTML. Còn đối với các nhóm tag mở rộng, các bạn có thể tự tìm hiểu thêm sau nhé. Các nhóm tag được nói tới trong bài này bao gồm:

  • Headings
  • Paragraphs
  • Styles
  • Text Formatting
  • Quotation and Citation Elements
  • Links
  • Images
  • Tables
  • Lists
  • Form

Trên đây là những nhóm tag hay sử dụng nhất.

HTML Headings

Nhóm tag này với mục đích chính là để hiển thị title hoặc subtitle trên 1 page. Hoặc bạn cũng có thể sử dụng các heading tags này cho title bài viết hoặc title product.

Heading 1


Heading 2


Heading 3


Heading 4


Heading 5


Heading 6

Lưu ý: Đối với thì chỉ sử dụng duy nhất 1 tag h2 cho 1 page, tốt nhất là nên sử dụng trên phần logo của page. Còn các tag heading còn lại sẽ sử dụng lần lượt từ trên xuống h2->h2->h3->h4->h5->h6, đừng nhảy cóc. Các bạn nào làm về SEO sẽ hiểu cái này.duy nhất 1 tag h2 cho 1 page, tốt nhất là nên sử dụng

trên phần logo của page. Còn các tag heading còn lại sẽ sử dụng lần lượt từ trên xuống h2->h2->h3->h4->h5->h6, đừng nhảy cóc. Các bạn nào làm về SEO sẽ hiểu cái này.HTML Paragraphs

Tag Paragraphs sử dụng để hiển thị các đoạn văn bản:

  • p: Hiển thị đoạn văn bản: Hiển thị đoạn văn bản
  • hr: Là 1 tag rỗng, không có end tag, dùng để hiển thị 1 đoạn line ngăn cách: Là 1 tag rỗng, không có end tag, dùng để hiển thị 1 đoạn line ngăn cách
  • br: Là 1 tag rỗng, không có end tag, dùng để xuống dòng trong cùng 1 đoạn văn bản mà không cần phải thêm nhiều tag.: Là 1 tag rỗng, không có end tag, dùng để xuống dòng trong cùng 1 đoạn văn bản mà không cần phải thêm nhiều tag.
  • pre: Hiển thị 1 đoạn văn bản đã được định dạng sẵn. Text bên trong pre tag thường được định dạng sẵn font, thường là Courier.: Hiển thị 1 đoạn văn bản đã được định dạng sẵn. Text bên trong pre tag thường được định dạng sẵn font, thường là Courier.

HTML Styles

I am normal


I am red


I am blue


I am big

Cái này chắc các bạn cũng không lạ lẫm gì nữa. Nó chính là để sử dụng trong inline css.

HTML Text Formatting

Các tag này để định dạng text văn bản.

This text is bold


This text is italic


This is subscript and superscript


This text is underline

Kết quả trả ra nó sẽ như thế này:

Hướng dẫn html 3 tags - html3 thẻ

Ngoài các tag khá quen thuộc như , , thì còn có 2 tag khá đặc biệt: và ., , thì còn có 2 tag khá đặc biệt: và .

  • : Dùng để viết các chỉ số bên dưới: Dùng để viết các chỉ số bên dưới
  • : Dùng để viết các chỉ số bên trên: Dùng để viết các chỉ số bên trên
H20 and x2

HTML Quotation and Citation Elements

  • : Dùng để trích dẫn lại đoạn text từ 1 chỗ khác. Cái này dễ dàng gặp nhất trong các forum hoặc các tool chat.: Dùng để trích dẫn lại đoạn text từ 1 chỗ khác. Cái này dễ dàng gặp nhất trong các forum hoặc các tool chat.
  • : Chính là để thêm các dấu nháy cho đoạn mà bạn muốn trích dẫn.: Chính là để thêm các dấu nháy cho đoạn mà bạn muốn trích dẫn.
Viblo về nhóm tags trong HTML.



tag này có tác dụng: Thêm dấu nháy cho đoạn muốn trích dẫn.

Hướng dẫn html 3 tags - html3 thẻ

  • : Xác định chữ viết tắt hoặc từ viết tắt: Xác định chữ viết tắt hoặc từ viết tắt
  • : Sử dụng trong các trường hợp hiển thị thông tin liên lạc trong văn bản.: Sử dụng trong các trường hợp hiển thị thông tin liên lạc trong văn bản.

HTML Links

link text

Thôi cái tag này thì quá rõ ràng rồi, không cần nói thêm gì nữa. Về các attrs của tag thì các bạn có thể tự tìm hiểu thêm nhé.

HTML Images

Hướng dẫn html 3 tags - html3 thẻ

Cũng là 1 thành phần vô cùng quen thuộc mà không cần phải nói gì thêm nữa.

HTML Tables

Table được sử dụng khá nhiều và thường xuyên trong việc sắp xếp các dữ liệu thành nhiều hàng, cột. Tuy nhiên, các bạn đã thực sự biết các attrs và css riêng biệt của chưa?

Bình thường chúng ta thường hay viết code cho 1 table như thế này


  Monthly savings
  

    Month
    Savings
  

  

    January
    $100
  

  

    February
    $50

Nhưng thực chất, để viết đúng cấu trúc cho 1 table thì cần có , ,

Monthly savings
Month Savings
January $100
February $50
Total: $150

Hướng dẫn html 3 tags - html3 thẻ

Ngoài các tags hay sử dụng trong table như: , , , , , , thì còn 3 tags nữa ít sử dụng hơn.

, , , , thì còn 3 tags nữa ít sử dụng hơn.

  • : Hiển thị cation của table.: Hiển thị cation của table.
  • : Được sử dụng để định dạng cho một nhóm cột trong .: Được sử dụng để định dạng cho một nhóm cột trong
, ,
.
  • : Được sử dụng để xác định giá trị thuộc tính cho một hoặc nhiều cột trong : Được sử dụng để xác định giá trị thuộc tính cho một hoặc nhiều cột trong

    • Còn attr và css riêng biệt cho thì như thế nào?

    • CSS border-collapse: Thuộc tính thu gọn lại border cho các cell trong table. Thường được set default là 0.border-collapse: Thuộc tính thu gọn lại border cho các cell trong table. Thường được set default là 0.
    • CSS border-spacing: Thuộc tính dùng để set các khoảng cách giữa các cell trong table. Thường được set default là 0.border-spacing: Thuộc tính dùng để set các khoảng cách giữa các cell trong table. Thường được set default là 0.
    • Attr colspan: Gộp nhiều cột lại với nhaucolspan: Gộp nhiều cột lại với nhau
    • Attr rowspan: Gộp nhiều dòng lại với nhau.rowspan: Gộp nhiều dòng lại với nhau.

    HTML Lists

    Tag list trong HTML có 2 dạng chính: unordered và ordered.unordered và ordered.

    Unordered

    Unordered bắt đầu bằng . Các item bên trong sử dụng

      . Các item bên trong sử dụng 

    • Heading 1
      

      Heading 2
      

      Heading 3
      

      Heading 4
      

      Heading 5
      

      Heading 6
      0

      Ordered

      Ordered bắt đầu sử dụng bằng . Các item bên trong cũng sử dụng

        . Các item bên trong cũng sử dụng 

      1. Heading 1
        

        Heading 2
        

        Heading 3
        

        Heading 4
        

        Heading 5
        

        Heading 6
        1

        Vậy sự khác nhau giữa unordered và ordered là gì? Chính là ở list-style-type và "type". Giữa unordered và ordered thì cách gọi và các giá trị khác nhau nên hiển thị sẽ khác nhau. Chúng ta cùng đi vào bảng so sánh như sau:unordered và ordered là gì? Chính là ở list-style-type và "type". Giữa unordered và ordered thì cách gọi và các giá trị khác nhau nên hiển thị sẽ khác nhau. Chúng ta cùng đi vào bảng so sánh như sau:

    unordered ordered
    list-style-type type
    disc 1
    circle A
    square a
    none I
    i

    Ngoài 2 kiểu chính là unordered và ordered thì trong Lists tag còn có Description Lists. Trong đó vai trò của từng tag như sau:unordered và ordered thì trong Lists tag còn có Description Lists. Trong đó vai trò của từng tag như sau:

    • : định nghĩa 1 description list: định nghĩa 1 description list
    • : xác định tên hoặc là thuật ngữ : xác định tên hoặc là thuật ngữ
    • : mô tả lại các thuật ngữ hoặc tên đó: mô tả lại các thuật ngữ hoặc tên đó
    Heading 1
    

    Heading 2
    

    Heading 3
    

    Heading 4
    

    Heading 5
    

    Heading 6
    2

    HTML Forms

    Cuối cùng là nói về Form. Thực chất, hệ thống của Form khá là rộng và đồ sộ. Không chỉ có số lượng element nhiều mà attibutes cũng vô cùng lớn. Do bài này chỉ là sơ lược về các nhóm tags trong HTML nên mình sẽ chỉ liệt kê element của form cùng với các loại type của input thôi nhé.

    Form có những elements sau:

    Form ElementsForm ElementsForm Elements