- Trang chủ
- Hướng dẫn học
- Hướng dẫn học HTML/HTML5
- Cấu trúc cơ bản của trang HTML
Cấu trúc cơ bản của trang HTML
Cấu trúc cơ bản của trang HTML có dạng như sau, thường gồm 3 phần:
- : Phần khai báo chuẩn của html hay xhtml.
- : Phần khai báo ban đầu, khai báo về meta, title, css, javascript…
- : Phần chứa nội dung của trang web, nơi hiển thị nội dung.
Cấu trúc cơ bản
Tiêu đề trang web
...Phần thân viết ở đây...
Cấu trúc cơ bản của trang web
Mỗi trang web đều có cách thể hiện cấu trúc khác nhau, có trang 1 cột, có trang 2 và cũng có trang chứa nhiều cột, bên dưới đây chúng ta tham khảo một trang đơn giản sử dụng 2 cột để layout.
- Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các button, đoạn flash, hoặc các form ngắn như form tìm kiếm,...
- Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến những trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con [sub navigation].
- Phần thân của trang: page body, phần này chứa phần nội dung chính [content] và phần nội dung phụ [sidebar].
- Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho người dùng xem.
- Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang [local navigation], hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng cáo,...
- Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên công ty, địa chỉ, số điện thoại, mail liên hệ,... và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner liên kết,...
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.
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:
Ví dụ HTML đầu tiên - Chào mừng đến với Khóa học HTML cơ bản
Khóa học HTML cơ bản
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.
Kết quả khi chạy file hello-world.html chúng ta được như sau:
[jsfiddle url=”//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.
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ẻ ] và chỗ nào là đoạn văn mô tả [thẻ ].
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.
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 Khóa học HTML căn bản
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ẻ h2, 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.
Tiêu đề của trang
Đầ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ẻ , 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:
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:
Tiếp theo, toàn bộ nội dung trong thẻ 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ẻ
. 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ẻ
, đâ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ẻ 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:
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.
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.
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ẻ
,,
Khóa học HTML5 cơ bản Menu Chương I: Giới thiệu HTML5 Chương II: Cấu trúc trang HTML Chương III: Xây dựng form nhập liệu HTML5 là gì? 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ế. Cấu trúc trang HTML cơ bản HTML5 đã có những cải tiến thay đổi cách cấu trúc trang HTML bằng semantic element. Bản quyền thuộc về Allaravel.com. 2018Vớ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ể:
Mã HTML cũng có những thay đổi
Khóa học HTML5 cơ bản Menu Chương I: Giới thiệu HTML5 Chương II: Cấu trúc trang HTML Chương III: Xây dựng form nhập liệu HTML5 là gì? 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ế. Cấu trúc trang HTML cơ bản HTML5 đã có những cải tiến thay đổi cách cấu trúc trang HTML bằng semantic element. Bản quyền thuộc về Allaravel.com. 20184.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, figcaption, 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:
document.createElement[‘header’]; document.createElement[‘nav’]; document.createElement[‘article’]; document.createElement[‘footer’];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.
5. Các thẻ HTML mới trong HTML5
5.1 Thẻ HTML5 `
Thẻ
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ẻkhông bắt buộc phải có trong trang và có thể có nhiều thẻ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ẻ
có thể chứa các thẻ tiêu đề từ h2 đến h6 hoặc một thẻđể 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ầncó thể được sử dụng để tạo ra bảng nội dung, form tìm kiếm, phần logo trang…Khóa học HTML5 cơ bảnHoặc bạn có thể sử dụng
để nhóm các tiêu đề với nhau:Khóa học HTML5 cơ bản 15 bài lý thuyết, có bài tập thực hành, câu hỏi trắc nghiệm.Đô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ụ:
Khóa học HTML5 cơ bản 15 bài lý thuyết, có bài tập thực hành, câu hỏi trắc nghiệm. Trang chủ HTML5 cơ bản HTML5 nâng caoChú ý, thẻ
vào trongkhông bắt buộc phải có trongvà hoàn toàn có thể đưa thẻ này ra khỏi thẻ. 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ẻdo thiết kế menu điều hướng theo chiều dọc và nằm ở phần nội dung trang.Khóa học HTML5 cơ bản 15 bài lý thuyết, có bài tập thực hành, câu hỏi trắc nghiệm. Trang chủ HTML5 cơ bản HTML5 nâng caoNhư vậy việc sử dụng
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ẻcho tiêu đề website và sử dụng nhiều thẻ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
kết hợp với các thẻđến, đại ý rằng chỉ nên thiết lập một tiêu đề chung cho trang.5.2 Thẻ HTML5
và thẻ html5Trong 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ẻ
nhưng với HTML5 bạn có thể sử dụng thẻhoặc thẻhoặc cả hai kết hợp với nhau.- Thẻ
có điểm giống với thẻ, một trang có thể có một hoặc nhiều thẻđể tạo ra các nội dung được đặt về một bên giống như sidebar. - Thẻ
để 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ẻmà chỉ những phần điều hướng quan trọng, phổ biến trong trang mới đưa vào.
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.
Khóa học HTML5 cơ bản Giới thiệu HTML5 Các thẻ trong HTML5 ... Allaravel.com 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.5.3 Thẻ HTML5
Thẻ
đị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ệ.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ẻ
, 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.Giới thiệu Nội dung giới thiệu Sản phẩm Nội dung sản phẩm Tin tức Nội dung tin bàiKhi khai báo các thẻ
có thể kết hợp với thẻvà. 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
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ẻkhông được hiển thị trừ khi thuộc tính open được thiết lập.Thẻ HTML5
sử dụng để định nghĩa tiêu đề cho phần detail.Khóa học HTML5 cơ bản. Biên soạn: FirebirD [allaravel.com] 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.5.4 Thẻ HTML5
Thẻ
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ẻ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ẻ
, 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ó nhiều thẻ
ở phần tiếp theo.có thể kết hợp với thẻ5.5 Thẻ HTML5
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ẻ
, một điều chú ý là thẻ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ẻkhông được chứa các thẻ như,,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.5.6 Thẻ HTML5
Thẻ
đị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ẻ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ẻ
. 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ớ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ẻ
,… vào trong thẻ.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ư
,,,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
Định nghĩa giá trị ngày giờ mà có thể đọc được. Thẻ
đượ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ẻ.Kho hàng mở cửa 9:00 AM đến 5:00 PM hàng ngày. Tôi có cuộc hẹn vào ngày Quốc tế lao động. Khóa học HTML5 cơ bản sẽ bắt đầu trong tháng sáu năm nay.Thẻ HTML5
Thẻ
dùng để đánh dấu những đoạn văn bản quan trọng.Trong các ngôn ngữ lập trình web, HTML5 là ngôn ngữ nền tảng cơ bản nhấtThẻ HTML5
,Thẻ
sử dụng khi định nghĩa lời chú thích cho một thành phần sử dụng thẻ. Thẻ này có thể đặt ở đầu hoặc cuối bên trong thẻ.Thẻ
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ẻ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.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.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
Có thể bạn quan tâm:
- HTML là gì? Tại sao nên dùng HTML5?
- HTML5 khác HTML như thế nào?
- HTML là gì?
Xem thêm Việc làm Developer hấp dẫn trên TopDev
Chủ Đề
- Thẻ