Cấu Trúc Trang HTML Cơ Bản | TopDev

Trang chủ » Trình Bày Html » Cấu Trúc Trang HTML Cơ Bản | TopDev

Có thể bạn quan tâm

Bài viết được sự cho phép của tác giả Kien Dang Chung

Quá trình học lập trình thường khá dài và hầu hết mọi người đều muốn nhanh chóng bước vào các bài lý thuyết lập trình và thực hành các ví dụ thực tế. Những bài viết đầu tiên một khóa học lập trình web chủ yếu giới thiệu các thông tin xoay quanh ngôn ngữ, các thuật ngữ liên quan tuy nhiên cũng rất quan trọng bởi khi bạn đã nắm được HTML5 là gì? thì việc học các cấu trúc, các thẻ html chỉ là công cụ để xây dựng website mà thôi. Có rất nhiều bạn đã vào nghề lập trình web rất lâu nhưng không hiểu rõ bản chất HTML là gì hay còn mơ hồ về siêu văn bản, tại sao lại phải sử dụng HTML?… mà chỉ nhăm nhăm muốn code ngay. Những kiến thức cơ bản là nền tảng để phát triển tư duy công việc sau này, bạn không chỉ là một người lập trình (coder) mà biết đâu bạn có thể trở thành một người nghiên cứu, một người phát triển những ngôn ngữ, những công nghệ mới? Dài dòng một chút những chia sẻ về nghề và giờ là lúc chúng ta cùng đi vào tìm hiểu kiến thức HTML cơ bản. Theo truyền thống, một ví dụ HTML đầu tiên – Chào mừng đến với khóa học HTML cơ bản, một ví dụ đơn giản cho cái nhìn đầu tiên về HTML.

HTML5 khác HTML như thế nào?

1. Ví dụ HTML đầu tiên – Chào mừng đến với khóa học HTML cơ bản

Trong suốt khóa học HTML cơ bản chúng ta sẽ sử dụng hai công cụ để tiện demo và show code cho các bạn là Sublime Text và JsFiddle. Ok, bạn hãy mở Sublime Text tạo một file hello-world.html với nội dung sau:

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Ví dụ HTML đầu tiên - Chào mừng đến với Khóa học HTML cơ bản</title> </head> <body> <h1 class="text-success">Khóa học HTML cơ bản</h1> <p>Chào mừng bạn đến với khóa học HTML cơ bản từ website allaravel.com, chúng ta sẽ cùng nhau tìm hiểu từ những vấn đề cơ bản nhất của HTML và những gì mới nhất trong phiên bản HTML5.</p> </body> </html>

Kết quả khi chạy file hello-world.html chúng ta được như sau:

[jsfiddle url=”https://jsfiddle.net/allaravel/808ahvjg/” height=”200px” include=”result,html,js” font-color=”39464E” menu-background-color=”FFFFFF” code-background-color=”f3f5f6″ accent-color=”1C90F3″]

Chú ý, phần kết quả thay vì chụp lại nội dung hiển thị trên trình duyệt thì chúng ta sẽ mặc định dùng JsFiddle để xem được nhanh chóng và trực quan.

Ví dụ HTML đầu tiên

Trong ví dụ HTML đầu tiên này, chúng ta tạm coi như đã biết code HTML, các phần tiếp theo sẽ diễn giải những gì đã sử dụng. Mã HTML ở trên khá nhiều nhưng khi xem trên trình duyệt, nội dung lại rất ít, còn toàn văn bản vì HTML là ngôn ngữ đánh dấu siêu văn bản, nó cho trình duyệt biết chỗ nào phải hiển thị như là tiêu đề (thẻ <h1>) và chỗ nào là đoạn văn mô tả (thẻ <p>).

2. Các khái niệm HTML cơ bản

Trong ví dụ HTML đầu tiên nếu bạn mới bắt đầu học HTML cơ bản, bạn sẽ thấy hơi hoa mắt chút nhưng đảm bảo rằng sau khi được giới thiệu các khái niệm HTML cơ bản, bạn sẽ làm chủ được đoạn code này dễ dàng.

HTML là gì?

Cấu phần của HTML element

2.1 HTML element vs thẻ HTML

Để ý trong ví dụ HTML đầu tiên, có rất nhiều các chuỗi ký tự được mở đầu bằng < hoặc </ và kết thúc bằng >. Mỗi chuỗi ký tự đó được gọi là thẻ HTML, ví dụ <title>, <h1>… chúng ta gọi đây là thẻ title hoặc thẻ h1. HTML element là các thành phần của HTML, ví dụ <h1>Khóa học HTML cơ bản</h1> là thành phần h1 của HTML, nó được bắt đầu bằng thẻ mở <h1> và kết thúc bằng thẻ đóng </h1>. Vậy mỗi thành phần HTML sẽ bao gồm:

  • Thẻ mở bắt đầu bằng < và kết thúc bằng >, ví dụ <h1>, <p>.
  • Thẻ đóng bắt đầu bằng </ và kết thúc bằng >, ví dụ </h1>, </p>.

Nội dung giữa thẻ mở và thẻ đóng của một HTML element sẽ là nội dung được hiển thị trên trình duyệt, thẻ mở và thẻ đóng sẽ “đánh dấu” (markup) để trình duyệt hiểu được cụm từ “Khóa học HTML cơ bản” là tiêu đề loại lớn nhất (h1 – Heading 1).

Trong thực tế, chúng ta cũng không cần quá phân biệt HTML element với HTML tag (thẻ HTML) mà có thể gọi chung là thẻ h1, thẻ p, thẻ body… chúng ta thống nhất trong suốt Khóa học HTML cơ bản, khi nói đến thẻ HTML chúng ta coi đó là HTML element.

Như vậy trong ví dụ trên chúng ta có các thẻ HTML là html, head, title, meta, body, h1, p.

2.2 Thuộc tính của thẻ html

Trong thẻ <h1 class=”text-success”>Khóa học HTML cơ bản</h1>, chuỗi class=”text-success” là thuộc tính của thẻ HTML, nó cung cấp thông tin thêm cho thẻ HTML. Ở đây có thể có nhiều các thẻ h1 và chúng ta phân biệt các thẻ này bằng thuộc tính class, tức là các thẻ h1 có thuộc tính class là text-success sẽ được nhóm chung vào một nhóm để có thể tô màu, tăng giảm kích thước chữ, chọn font chữ sau này.

Thuộc tính của một thẻ HTML có những tính chất như sau:

  • Tất cả các thẻ HTML đều có có thể các thuộc tính.
  • Các thuộc tính cung cấp thêm các thông tin cho thẻ HTML.
  • Các thuộc tính luôn được đưa vào thẻ mở trong thẻ HTML.
  • Thuộc tính luôn đi theo cặp tên thuộc tính/giá trị thuộc tính, ví dụ class=”text-success”.

Thuộc tính class của thẻ h1 trong ví dụ trên chưa thực sự rõ ý nghĩa sử dụng do chúng ta chưa sử dụng đến thẻ này, chúng ta cùng xem một số ví dụ tiếp theo bạn sẽ hiểu rõ hơn thuộc tính trong HTML sử dụng làm gì?

Ví dụ 1: thuộc tính src của thẻ  giúp chỉ rõ đường dẫn đến ảnh cần hiển thị

<img src="public/news/anh-dep.jpg"

Ví dụ 2: thuộc tính style giúp “trang điểm” cho thẻ HTML, ví dụ này chúng ta sẽ tô màu đỏ cho thẻ h1

<h1 style="color:red">Khóa học HTML căn bản</h1>

Tham khảo việc làm lập trình viên HTML lương cao trên TopDev

3. Cấu trúc căn bản một trang HTML

Như vậy bạn đã nắm được một số khái niệm căn bản trong HTML và giờ là lúc xem lại code của ví dụ HTML đầu tiên, nó đã bớt phức tạp hơn. Trong đầu bạn hiện lại có những câu hỏi tiếp theo, các thẻ h1, p thì rõ ý nghĩa của nó rồi, còn lại một đống thẻ HTML khác để làm gì? Khoan đi vào chi tiết, bạn chỉ cần nhớ rằng, đây là cấu trúc chung của một trang HTML.

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Tiêu đề của trang</title> </head> <body> </body> </html>

Đầu tiên, trước khi khai báo các thẻ khác trong HTML chúng ta cần khai báo dạng tài liệu bằng thẻ <!DOCTYPE>, cách khai báo này là khác nhau cho các phiên bản HTML.

Trong HTML4 chúng ta khai báo nội dung tiếp theo viết theo tiêu chuẩn HTML4 bằng cách đưa cú pháp sau vào dòng đầu tiên của mã nguồn:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Với HTML5, cách khai báo đơn giản hơn do HTML5 không còn dựa trên SGML nên không phải khai báo DTD:

<!DOCTYPE html>

Tiếp theo, toàn bộ nội dung trong thẻ <htm> chính là nội dung siêu văn bản. Trong nội dung này chúng ta nhìn bố cục sẽ có hai phần:

  • Phần đầu được khai báo bằng thẻ <head>. Trong phần này, chúng ta có thể khai báo một số vấn đề như:
    • Tiêu đề của văn bản
    • Văn bản sử dụng bảng mã ký tự nào
    • Các thông tin thêm cho văn bản chính (metadata) như thông tin tác giả, mô tả bài viết, từ khóa bài viết…
    • Các file css, javascript có thể chèn vào tại đây.
  • Phần nội dung được khai báo bằng thẻ <body>, đây là phần sẽ hiển thị trên trình duyệt.

Về bố cục một trang HTML bạn có thể nắm được như vậy, khi viết một trang HTML mới, bạn có thể sao chép cấu trúc trang HTML cơ bản này. Tiếp theo chúng ta cùng tìm hiểu cụ thể một số thẻ HTML có trong bố cục.

Thẻ title

Xác định tiêu đề của văn bản, tiêu đề này sẽ được hiển thị trong phần tab của trình duyệt giúp chúng ta nhanh chóng biết được siêu văn bản (trang web) nào đang được mở khi một trình duyệt mở nhiều trang một lúc.

Thẻ title HTML

Thẻ meta

Định nghĩa các thông tin thêm (metadata) cho tài liệu, các thông tin này bao gồm thông tin về tác giả, thông tin mô tả nội dung, thông tin từ khóa… có thể nói rằng thẻ meta mô tả thông tin của thông tin. Các thông tin của thẻ meta không hiển thị trên trình duyệt nhưng các bộ máy khác có thể sử dụng chúng, ví dụ bộ máy tìm kiếm Google, Bing, Facebook sẽ sử dụng các thông tin từ thẻ meta để phân loại nội dung trang web. Có duy nhất thẻ meta nhưng lại khai báo được nhiều các thông tin về metadata là do chúng ta có thể sử dụng các thuộc tính khác nhau:

<meta charset="UTF-8"> <meta name="description" content="HTML5 là phiên bản mới nhất của ngôn ngữ HTML, những bài viết trong khóa học HTML5 cơ bản giúp bạn xây dựng website nhanh chóng."> <meta name="keywords" content="HTML5,khóa học HTML,HTML cơ bản"> <meta name="author" content="FirebirD[Kiên Đặng]"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

Thẻ meta đầu tiên thiết lập bảng mã sử dụng, UTF-8 (8-bit Unicode Transformation Format – Định dạng chuyển đổi Unicode 8-bit) là bộ mã hóa ký tự dành cho Unicode, nó có thể tương thích ngược với bảng mã ASCII. UTF-8 là bộ mã phổ biến và thông dụng cho các nội dung điện tử như các file tài liệu, thư điện tử, trang web và các phần mềm xử lý văn bản. Với phiên bản HTML4 trở xuống, để thiết lập bảng mã ký tự phải sử dụng thuộc tính http-equiv kết hợp với content.

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Ba thẻ meta tiếp theo mô tả thông tin về trang web, nó giúp các bộ máy tìm kiếm như Google, Bing phân loại nội dung, các thẻ này tuy không hiển thị nhưng cực kỳ quan trọng khi bạn muốn website của mình có thứ hạng cao trong kết quả tìm kiếm của Google.

Thẻ meta cuối cùng cho phép các nhà thiết kế điều khiển được khung hiển thị, tính năng này chỉ có ở HTML5. Khung hiển thị là vùng có thể nhìn thấy của người dùng trên một trang web, nó phụ thuộc vào kích thước màn hình các thiết bị khác nhau, ví dụ các thiết bị di động thông minh hiện rất phổ biến nhưng màn hình nó khá nhỏ nên cần trình bày lại sao cho đọc được nội dung dễ dàng.

Tổng hợp 50+ thẻ HTML phổ biến nhất

4. Thành phần thẻ HTML có ngữ nghĩa

Các thẻ HTML được chia ra thành hai loại:

  • Semantic element là các thẻ có ngữ nghĩa, ví dụ thẻ <form>, <table>, <img>…
  • Non-semantic element: các thẻ không có ngữ nghĩa, ví dụ <div>, <span>…

Các phiên bản HTML mới sẽ có nhiều hơn các thẻ có ngữ nghĩa vì khi sử dụng các thẻ này có nhiều lợi ích:

  • Dễ dàng chỉnh sửa và duy trì: Với các thẻ không ngữ nghĩa khó phân tách lại phần đánh dấu bằng các thẻ, do đó rất khó để hiểu được bố cục tổng thể và ý nghĩa các thành phần.
  • Tăng khả năng truy xuất: các trang web hiện đại viết bằng HTML5 có khả năng điều hướng thông qua các liên kết, menu tốt hơn chỉ bằng các công cụ cơ bản do nó đưa ra thành phần HTML mới là <nav> thay cho việc dùng các thẻ <div>.
  • Tốt hơn cho bộ máy tìm kiếm: đây là một trong những lợi ích lớn nhất, bạn muốn trang web của mình được nhiều người biết đến thông qua các kết quả tìm kiếm, việc sử dụng các thẻ có ngữ nghĩa giúp Google nhanh chóng phân tích được nội dung một cách chính xác và tối ưu hóa cho bộ máy tìm kiếm.
  • Thích hợp cho các trình duyệt tương lai: các trình duyệt mới và công cụ thiết kế web mới sẽ tận dụng các thông tin về ngữ nghĩa.

4.1 Sự tiến hóa trong HTML5

Trong HTML5 xuất hiện nhiều hơn các thẻ HTML có ngữ nghĩa, ví dụ như <header>, <footer>, <nav>, <article>… tại sao vậy, sự tiến hóa của HTML là tất yếu khách quan khi mà nhu cầu tạo ra các thành phần cơ bản của một trang HTML ngày càng lớn. Quay ngược lại hơn 10 năm trước, những khảo sát về HTML giúp ta có được câu trả lời.

Năm 2004, một thành viên nhóm soạn thảo đặc tả HTML5, Ian Hickson đã làm một thống kê trên một tỉ trang web thông qua hệ thống chỉ mục của Google để tìm xem thực tế cách tạo ra các trang web. 5 năm sau đó, Opera MAMA cũng thực hiện một việc tương tự nhưng với các thuộc tính class của thẻ HTML từ ngẫu nhiên hơn 2 triệu đường dẫn và kết quả như sau:

STT Giá trị thuộc tính class Tần suất lặp lại
1 footer 179,528
2 menu 146,673
3 style1 138,308
4 msonormal 123,374
5 text 122,911
6 content 113,951
7 title 91,957
8 style2 89,851
9 header 89,274
10 copyright 86,979
11 button 81,503
12 main 69,620
13 style3 69,349
14 small 68,995
15 nav 68,634
16 clear 68,571
17 search 59,802
18 style4 56,032
19 logo 48,831
20 body 48,052

Bảng kết quả tiếp theo khi thống kê thuộc tính id của thẻ HTML từ 1.5 triệu đường dẫn ngẫu nhiên:

STT Giá trị thuộc tính id Tần suất lặp lại
1 footer 288,061
2 content 228,661
3 header 223,726
4 logo 121,352
5 container 119,877
6 main 106,327
7 table1 101,677
8 menu 96,161
9 layer1 93,920
10 autonumber1 77,350
11 search 74,887
12 nav 72,057
13 wrapper 66,730
14 top 66,615
15 table2 57,934
16 layer2 56,823
17 sidebar 52,416
18 image1 48,922
19 banner 44,592
20 navigation 43,664

Từ các thống kê này, trong HTML5 người ta thấy rằng cần thiết phải đưa vào thêm một số các thẻ HTML có ngữ nghĩa mới như nav, header, footer… Những thẻ HTML có ngữ nghĩa mới này đã làm thay đổi cấu trúc trang HTML cơ bản. Nếu các bạn có điều kiện thực hiện các trang web từ những năm đầu của thế kỷ 21 có thể thấy cách cấu trúc đã có những đợt thay đổi như sau:

  • 2000-2005: Sử dụng thẻ table để cấu trúc trang HTML
  • 2005-2010: Sử dụng thẻ div để cấu trúc trang HTML
  • 2010 đến nay: Sử dụng các thẻ HTML có ngữ nghĩa mới trong HTML5 để cấu trúc trang.

Các ví dụ tiếp theo đây cho thấy được những thay đổi đáng kể trong cách cấu trúc trang HTML, đầu tiên chúng ta xem xét cách cấu trúc dùng thẻ div

Cấu trúc trang HTML sử dụng thẻ div

<div id="header"> <h1>Khóa học HTML5 cơ bản</h1> </div> <div id="sidebar"> <h2>Menu</h2> <ul> <li><a href="html5-introduction.html">Chương I: Giới thiệu HTML5</a></li> <li><a href="html5-contruction.html">Chương II: Cấu trúc trang HTML</a></li> <li><a href="html5-form.html">Chương III: Xây dựng form nhập liệu</a></li> </ul> </div> <div class="post"> <h2>HTML5 là gì?</h2> <p>Ngôn ngữ HTML5 giúp tạo ra các trang web một cách nhanh chóng đáp ứng được các nhu cầu thực tế.</p> </div> <div class="post"> <h2>Cấu trúc trang HTML cơ bản</h2> <p>HTML5 đã có những cải tiến thay đổi cách cấu trúc trang HTML bằng semantic element.</p> </div> <div id="footer"> <p><small> Bản quyền thuộc về Allaravel.com. 2018</small></p> </div>

Với việc thêm vào các thẻ HTML có ngữ nghĩa mới trong HTML5, cấu trúc trang HTML đã thay đổi đáng kể:

Cấu trúc trang HTML sử dụng thẻ HTML có ngữ nghĩa

Mã HTML cũng có những thay đổi

<header> <h1>Khóa học HTML5 cơ bản</h1> </header> <nav> <h2>Menu</h2> <ul> <li><a href="html5-introduction.html">Chương I: Giới thiệu HTML5</a></li> <li><a href="html5-contruction.html">Chương II: Cấu trúc trang HTML</a></li> <li><a href="html5-form.html">Chương III: Xây dựng form nhập liệu</a></li> </ul> </nav> <article> <h2>HTML5 là gì?</h2> <p>Ngôn ngữ HTML5 giúp tạo ra các trang web một cách nhanh chóng đáp ứng được các nhu cầu thực tế.</p> </article> <article> <h2>Cấu trúc trang HTML cơ bản</h2> <p>HTML5 đã có những cải tiến thay đổi cách cấu trúc trang HTML bằng semantic element.</p> </article> <footer> <p><small> Bản quyền thuộc về Allaravel.com. 2018</small></p> </footer>

4.2 Trình duyệt không tương thích với HTML5

Thật may là các thẻ HTML có ngữ nghĩa trong HTML5 được hỗ trợ diện rộng trên các trình duyệt web hiện đại, rất khó để có thể tìm thấy các phiên bản Chrome, Firefox, Safari hoặc Opera không hỗ trợ. Nhưng không phải là không có những ngoại lệ, ví dụ các phiên bản Internet Explorer trước IE9 là gặp vấn đề với HTML5.

Khi một trình duyệt không phát hiện ra các thẻ HTML mới, nó sẽ xử lý các thẻ này như một inline element và không hiển thị chúng như các khối (block), để khắc phục vấn đề này, bạn cần thêm một ít code CSS vào:

article, aside, figure, span, footer, header, main, nav, section, summary { display: block; }

Code CSS này không ảnh hưởng gì với các trình duyệt có thể nhận diện được thẻ HTML5. Kỹ thuật này là đủ để giải quyết vấn đề tương thích với hầu hết các trình duyệt, tuy nhiên với IE8 hoặc phiên bản thấp hơn thì có một thách thức khác: Các trình duyệt này từ chối áp dụng định dạng CSS cho các thẻ HTML mà chúng không thể nhận ra. Với vấn đề này chúng ta xử lý bằng cách đưa vào một đoạn mã Javascript giúp IE có thể nhận ra và style các thẻ HTML:

<script> document.createElement(‘header’); document.createElement(‘nav’); document.createElement(‘article’); document.createElement(‘footer’); </script>

Nhóm phát triển Google cũng đưa ra một giải pháp riêng tổng thể hơn với một thư viện Javascript giúp cho mọi trình duyệt không hỗ trợ HTML5 có thể hoạt động được.

<head> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head>

5. Các thẻ HTML mới trong HTML5

5.1 Thẻ HTML5

Thẻ <header> xác định tiêu đề cho một trang hoặc một phần của trang, thẻ được sử dụng như một “khung chứa” cho các nội dung giới thiệu hoặc có thể bao gồm cả các điều hướng trang. Thẻ <header> không bắt buộc phải có trong trang và có thể có nhiều thẻ <header> trong một trang.

Trong hầu hết các trang web, thành phần đầu tiên thường là tiêu đề, nó có thể chứa tiêu đề của website, hình ảnh logo, các liên kết đến trang chủ… Thẻ <header> có thể chứa các thẻ tiêu đề từ h1 đến h6 hoặc một thẻ <hgroup> để nhóm các tiêu đề ở các mức khác nhau nhưng không bắt buộc. Thực tế khi xây dựng website, thành phần <header> có thể được sử dụng để tạo ra bảng nội dung, form tìm kiếm, phần logo trang…

<header> <a href="/"><img src=logo.png alt="Trang chủ"></a> <h1>Khóa học HTML5 cơ bản</h1> </header>

Hoặc bạn có thể sử dụng <hgroup> để nhóm các tiêu đề với nhau:

<header> <a href="/"><img src=logo.png alt="Trang chủ"></a> <hgroup> <h1>Khóa học HTML5 cơ bản</h1> <h2>15 bài lý thuyết, có bài tập thực hành, câu hỏi trắc nghiệm.</h2> </hgroup> </header>

Đôi khi tiêu đề cũng có thể chứa các thành phần điều hướng đặc biệt khi thiết kế website kiểu master template có một mẫu cho tất cả các trang. Ví dụ:

<header> <hgroup> <h1>Khóa học HTML5 cơ bản</h1> <h2>15 bài lý thuyết, có bài tập thực hành, câu hỏi trắc nghiệm.</h2> </hgroup> <nav> <ul> <li><a href="/">Trang chủ</a></li> <li><a href="html5-basic.html">HTML5 cơ bản</a></li> <li><a href="html5-advance.html">HTML5 nâng cao</a></li> </ul> </nav> </header>

Chú ý, thẻ <nav> không bắt buộc phải có trong <header> và hoàn toàn có thể đưa thẻ này ra khỏi thẻ <header>. Nó phụ thuộc vào thiết kế bố cục của website, độ lớn các menu điều hướng. Trong ví dụ tiếp theo, chúng ta không thể đưa thẻ

vào trong <header> do thiết kế menu điều hướng theo chiều dọc và nằm ở phần nội dung trang.

nav ở ngoài header

<header> <hgroup> <h1>Khóa học HTML5 cơ bản</h1> <h2>15 bài lý thuyết, có bài tập thực hành, câu hỏi trắc nghiệm.</h2> </hgroup> </header> <nav> <ul> <li><a href="/">Trang chủ</a></li> <li><a href="html5-basic.html">HTML5 cơ bản</a></li> <li><a href="html5-advance.html">HTML5 nâng cao</a></li> </ul> </nav>

Như vậy việc sử dụng <header> là rất tùy thích miễn sao đó đáp ứng được các nguyên tắc của HTML5 và làm cho trang web dễ dàng duyệt nội dung để người dùng có thể biết được sau phần tiêu đề (header) là đến nội dung trang. Trước khi có HTML5, chúng ta thường sử dụng một thẻ <h1> cho tiêu đề website và sử dụng nhiều thẻ <h2> cho các thành phần khác của trang.

Một câu hỏi nữa mà nhiều người băn khoăn và có thể là một lỗi các lập trình viên web hay gặp: Có nên sử dụng nhiều các tiêu đề ở mức 1 trong một trang? Theo các nguyên tắc của HTML thì bạn hoàn toàn có thể sử dụng nhiều tiêu đề mức 1, tuy nhiên các website thông thường chỉ có một tiêu đề mức 1 cho mỗi trang vì nó làm cho dễ dàng hơn trong bố cục chung cả website, ngoài ra các bộ máy tìm kiếm như Google cũng thích điều này và nó giúp cho tập trung vào các truy vấn tìm kiếm. Điều này đúng ngay cả khi sử dụng <header> kết hợp với các thẻ <h1> đến <h6>, đại ý rằng chỉ nên thiết lập một tiêu đề chung cho trang.

5.2 Thẻ HTML5 <nav> và thẻ html5 <aside>

Trong các trang web, phần sidebar chứa rất nhiều thông tin, nó có thể chứa hệ thống menu điều hướng cho website, các thông tin thêm hoặc có thể là các quảng cáo (ví dụ khi kiếm tiền từ quảng cáo Google AdSense). Theo cách thiết kế truyền thống, toàn bộ phần sidebar này sẽ được đưa vào một thẻ <div> nhưng với HTML5 bạn có thể sử dụng thẻ <aside> hoặc thẻ <nav> hoặc cả hai kết hợp với nhau.

  • Thẻ <aside> có điểm giống với thẻ <header>, một trang có thể có một hoặc nhiều thẻ <aside> để tạo ra các nội dung được đặt về một bên giống như sidebar.
  • Thẻ <nav> để nhóm các liên kết vào thành hệ thống menu điều hướng. Không phải tất cả các liên kết đều cần đến thẻ <nav> mà chỉ những phần điều hướng quan trọng, phổ biến trong trang mới đưa vào.

Cấu trúc sidebar

Có hai cách thường dùng để cấu trúc sidebar cho một trang web, cách nào cũng được chấp nhận và không có một quy tắc nào cho việc này. Tuy nhiên, thực tế người ta thường sử dụng cách bên phải để cấu trúc thành phần sidebar do thường phần sidebar sẽ chứa nhiều các thông tin khác ví dụ như quảng cáo, các thông tin thêm như bài viết được nhiều người đọc, cũng có thể chứa form nhận thông tin.

<aside class="nav-sidebar"> <nav> <h2>Khóa học HTML5 cơ bản</h2> <ul> <li><a href="...">Giới thiệu HTML5</a></li> <li><a href="...">Các thẻ trong HTML5</a></li> ... </ul> </nav> <section> <h2>Allaravel.com</h2> <p>Trang web chia sẻ kiến thức công nghệ thông tin như lập trình, thiết kế web, marketing online, kiếm tiền trực tuyến.</p> </section> <div> <img src="anh-quang-cao.jpg" alt="[QC] Khóa học Laravel miễn phí"> </div> </aside>

5.3 Thẻ HTML5 <section>

Thẻ <section> định nghĩa một khúc, đoạn nội dung và thông thường có một tiêu đề. Ví dụ một trang chủ có thể chia thành các phần như giới thiệu, nội dung, thông tin liên hệ.

Ví dụ thẻ section trong thiết kế web

Phong cách thiết kế trang web hiện nay thường chia trang thành các khúc ngang, mỗi khúc này sẽ được đưa vào một thẻ <section>, ví dụ trong hình trên, trang chủ được chia thành các phần như slider để chiếu các ảnh khác, phần giới thiệu, phần sản phẩm, phần tin bài…, mỗi phần này đều có tiêu đề và nội dung.

<section> <header>Giới thiệu</header> <div>Nội dung giới thiệu</div> </section> <section> <header>Sản phẩm</header> <div>Nội dung sản phẩm</div> </section> <section> <header>Tin tức</header> <div>Nội dung tin bài</div> </section>

Khi khai báo các thẻ <section> có thể kết hợp với thẻ <details> và <summary>. Hai thẻ này tạo thành một khối nội dung có thể ẩn hiện nếu trình duyệt hỗ trợ.

Thẻ HTML5 <details> sử dụng để thêm các chi tiết mà người dùng có thể tùy chọn xem hoặc ẩn. Thẻ này thường dùng để tạo ra các widget (thành phần của ứng dụng), có thể đóng hoặc mở. Mặc định nội dung trong thẻ <details> không được hiển thị trừ khi thuộc tính open được thiết lập.

Thẻ HTML5 <summary> sử dụng để định nghĩa tiêu đề cho phần detail.

<details> <summary>Khóa học HTML5 cơ bản.</summary> <p>Biên soạn: FirebirD [allaravel.com]</p> <p>Nội dung: Cung cấp Kiến thức cơ bản về HTML kết hợp những tính năng mới trong HTML5.</p> </details>

5.4 Thẻ HTML5 <article>

Thẻ <article> sử dụng để tạo ra các nội dung độc lập và tự bao hàm chính nó, nội dung này không phụ thuộc vào các phần khác của trang. Thẻ <article> có thể sử dụng cho các nội dung sau:

  • Các bài đăng trong diễn đàn.
  • Bài viết trong các blog.
  • Các tin tức mới trong phần tin bài.
  • Các bình luận

Trong một trang có thể có một hoặc nhiều thẻ <article>, chúng ta cùng xem cách cấu trúc thường gặp cho phần nội dung.

Cấu trúc trang có 1 article

Cấu trúc trang có nhiều thẻ <article> có thể kết hợp với thẻ

ở phần tiếp theo.

5.5 Thẻ HTML5 <main>

Trong trang web có khá nhiều các thành phần, để có thể nhận diện được phần nội dung chính của trang sử dụng thẻ <main>, một điều chú ý là thẻ <main> sẽ không chứa các thành phần như tiêu đề, sidebar, footer. Phần chú ý này bạn cần hiểu về ngữ nghĩa chứ không phải thẻ <main> không được chứa các thẻ như <header>, <aside>, <footer> mà hàm ý của nó là không được chứa các thành phần (nội dung) liên quan đến tiêu đề, sidebar, footer.

Cấu trúc trang sử dụng thẻ main cho nội dung chính

5.6 Thẻ HTML5 <footer>

Thẻ <footer> định nghĩa phần footer cho một trang hoặc một phần của trang, nó chứa các thông tin xoay quanh về các nội dung chứa bên trong trang hoặc thành phần trang. Thông thường thẻ <footer> thường chứa các thông tin như sau:

  • Thông tin tác quyền
  • Thông tin liên hệ
  • Bản đồ trang web
  • Các tài liệu liên quan
  • Các công cụ mạng xã hội để tương tác với nội dung

Một trang hoặc thành phần của trang có thể có một hoặc nhiều các thẻ <footer>. Hiện nay phần cuối trang thường được thiết kế lớn để chứa thêm nhiều thông tin hơn, lý do là khi người dùng đã đọc xong nội dung thì phần cuối trang sẽ được người dùng rất để ý. Đặc biệt khi tìm kiếm các thông tin liên hệ thông thường người dùng sẽ kéo chuột xuống cuối trang.

Ví dụ về phần cuối trang footer Với cách thiết kế footer dạng “béo” này thì chúng ta hoàn toàn có thể đưa thêm vào các thẻ

Với cách thiết kế footer dạng “béo” này thì chúng ta hoàn toàn có thể đưa thêm vào các thẻ <nav>, <aside>… vào trong thẻ <footer>.

5.7 Một số thẻ HTML5 khác

Chúng ta đã lượt qua các thẻ HTML5 liên quan đến việc cấu trúc trang HTML, còn một số các thẻ HTML có ngữ nghĩa khác cũng mới được gới thiệu trong HTML5 như <time>, <mark>, <figure>, <ficaption> chưa được đề cập đến và tôi nhóm rất các thẻ HTML5 này vào một mục riêng. Chúng ta cùng tìm hiểu thông tin về các thẻ này.

Thẻ HTML5 <time>

Định nghĩa giá trị ngày giờ mà có thể đọc được. Thẻ <time> được sử dụng để mã hóa ngày và giờ giúp cho các bộ máy tìm kiếm có thể đọc được hoặc các ứng dụng như nhắc giờ, các loại lịch biểu có thể sử dụng. Ví dụ sau nói lên sự cần thiết của thẻ <time>.

<p>Kho hàng mở cửa <time>9:00 AM</time> đến <time>5:00 PM</time> hàng ngày.</p> <p>Tôi có cuộc hẹn vào <time datetime="2018-05-01 09:30">ngày Quốc tế lao động</time>.</p> <p>Khóa học HTML5 cơ bản sẽ bắt đầu trong <time datetime="2018-06-01 00:00">tháng sáu năm nay</time>.</p>

Thẻ HTML5 <mark>

Thẻ <mark> dùng để đánh dấu những đoạn văn bản quan trọng.

<p>Trong các ngôn ngữ lập trình web, <mark>HTML5</mark> là ngôn ngữ nền tảng cơ bản nhất</p>

Thẻ HTML5 <ficaption>, <figure>

Thẻ <ficaption> sử dụng khi định nghĩa lời chú thích cho một thành phần sử dụng thẻ <figure>. Thẻ này có thể đặt ở đầu hoặc cuối bên trong thẻ <figure>.

Thẻ <figure> xác định các nội dung tự bao bọc như các hình ảnh, sự minh họa, các biểu đồ, sơ đồ… Nội dung của thẻ <figure> liên quan đến nội dung chính của trang nhưng nó không phụ thuộc chặt chẽ vào nội dung này, nếu có loại bỏ nó thì không ảnh hưởng đến nội dung trang.

<figure> <img src="bieu-do-tang-truong-hoc-vien-khoa-hoc-html-co-ban.jpg" alt="Biểu đồ tăng trưởng học viên Khóa học HTML cơ bản" width="800" height="350"> <span>Hình 1.5 - Biểu đồ tăng trưởng lưu lượng truy cập Khóa học HTML5 cơ bản.</span> </figure>

6. Lời kết

HTML5 đã có nhiều cải tiến bằng việc đưa thêm nhiều các thẻ HTML có ngữ nghĩa, nó giúp cho việc cấu trúc trang trở nên rõ ràng hơn. Một điểm quan trọng nữa là các bộ máy tìm kiếm như Google, Bing có những ưu tiên khi đánh giá các trang được viết bằng HTML5, nó giúp bạn có thứ hạng cao trong kết quả tìm kiếm, đem lại nhiều lưu lượng truy cập trang hơn. HTML5 còn rất nhiều các khái niệm mới mang tính đột phát, trong bài viết này chỉ dừng lại ở những khái niệm cơ bản giúp bạn có thể chuyển đổi cấu trúc trang từ các phiên bản HTML thấp hơn sang HTML5.

Bài viết gốc được đăng tải tại allaravel.com

Xem thêm việc làm Developer hấp dẫn trên TopDev

Từ khóa » Trình Bày Html