CÁCH SỬ DỤNG THẺ HEADING H1- H6 TRONG HTML5

I: ĐỊNH NGHĨA VÀ CÁCH SỬ DỤNG THẺ HEADING.

  • Nhóm thẻ <hx>: chữ “h” là viết tắt của từ “headings” nghĩa là tiêu đề hoặc  đề mục.
  • Các thẻ <hx> : Sử dụng thẻ <hx> để mô tả tiêu đề cho nội dung trong trang HTML, điều đó giúp trình duyệt nhận biết được tiêu đề (quang trọng, điểm nhấn) của một trang nội dung muốn nói tới.
  • Nhóm thẻ <hx> có giá trị từ <h1> tới <h6>: trong đó mức độ nhấn mạnh, tầm quan trọng giảm xuống từ <h1> cho tới <h6> (thẻ cho tiêu đề lớn nhất, quan trọng nhất là <h1> và điều đó sẽ giảm dần xuống cho tới h6, h6 cho kích cỡ tiêu đề bé nhất và ít quan trọng hơn so với 5 thẻ trên).
  • Lời Khuyên: Những nội dung bên trong nhóm thẻ Heading (<hx></hx>) chỉ nên chứa các thẻ thuộc nhóm inline.
  • Sử dụng nhóm thẻ (<hx></hx>):  Chỉ nên dùng để mô tả tiêu đề trong trang HTML5, không nên dùng cho các mục đích khác.

Hãy mở Sublime Text lên và tạo ra một file index.html có nội dung sau.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
</pre>
<!doctype HTML>
<html>
<head>
 <meta charset="utf8">
 <title>Cách sử dụng thẻ Heading H1- H6 trong HTML5</title>
 <link rel="stylesheet" href="css/style.css"/>
 <script src="js/jquery-1.9.1.min.js" </script>
 <script src="js/custom.js" </script>
</head>
<body>
 <h1>H1 là thẻ heading quan trọng nhất (lớn nhất)</h1>
 <h2>H2 là thẻ heading quan trọng thứ hai (lớn thứ nhì)</h2>
 <h3>H3 là thẻ heading quan trọng thứ ba (lớn thứ ba)</h3>
 <h4>H4 là thẻ heading quan trọng thứ tư (lớn thứ tư)</h4>
 <h5>H5 là thẻ heading quan trọng thứ năm (lớn thứ năm)</h5>
 <h6>H6 là thẻ ít có tính quan trọng hơn (nhỏ nhất)</h6>
</body>
</html>

Khi chạy trên trình duyệt ta sẽ thu được kết quả như sau.


sử dụng thẻ haeding

Trong các thẻ Heading thì thẻ <h1> là quan trọng nhất, mặc định trong một trang web html người ta thưởng chỉ sử dụng thẻ <h1>  một lần duy nhất  cho logo, hoặc tiêu đề cho trang web (mục đích SEO), mục đích sử dụng của <h1> là khai báo cho trình duyệt biết đâu là phần quan trọng nhất của trang web, và qua phần đó nhận biết được nộ dung mà trang web hướng tới.

II: CẤU TRÚC KHÔNG NÊN SỬ DỤNG TRONG TRANG HTML5.

sử dụng thẻ heading
Chúng ta không nên sử dụng các thẻ Heading như ví dụ trên. Không nên để cặp thẻ <p></p> bên trong bất kỳ thẻ heading nào cả, cũng không nên để thẻ <div></div> trong bất kỳ thẻ heading nào cả. Tương tự như vậy đối với các cặp thẻ <dl></dl>, <dt></dt>, <dd></dd>, <ul></ul>, <ol></ol>, <li></li> .

Nếu có bất cừ thắc mắc gì cần giải đáp, các bạn hãy comment câu hỏi ở dưới mình sẽ cố gắng gải đáp giúp các bạn sơm nhất có thể.

 

Nguồn: http://www.toidongian.com/cach-su-dung-the-heading-h1-h6-trong-html5.html

Tagged with:
Posted in HTML5, Web development

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: