Cấu trúc trang HTML cơ bản

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ẻ