[Học HTML] Các thẻ khai báo thông tin web cơ bản [NEW]

Như phần trước các bạn đã hiểu một tài liệu web HTML hoàn chỉnh sẽ bao gồm 4 phần chính là thẻ khai báo kiểu tệp. <!DOCTYPE>Thẻ <html>thẻ khai báo thông tin website <head> và thẻ <body>.



Và bên trong cặp bài <html> Trong tài liệu, thẻ đầu tiên sẽ là một cặp thẻ <head>, cặp thẻ này sẽ có nhiệm vụ để bạn khai báo thông tin tài liệu website mà bạn đang tạo như tên tài liệu, tên tác giả, mô tả, khai báo CSS, khai báo Javascript,… rất nhiều. Nhưng trước mắt, bạn chỉ cần biết qua một số thẻ khai báo thông tin web cơ bản được đặt bên trong thẻ cặp. <head> mà bạn sẽ sử dụng trong hầu hết mọi dự án.

Trước khi bắt đầu, hãy viết một tài liệu HTML giống như tài liệu dưới đây.

Khai báo tên tài liệu với . cặp thẻ</span></h3> <p>Thẻ <code><title> </title></code> có tác dụng khai báo tên tài liệu web mà bạn đang soạn thảo. Ứng dụng thực tế của thẻ này là giúp trình duyệt hiển thị tên tài liệu khi mở ra, đồng thời các công cụ tìm kiếm như Google cũng hiển thị nội dung trong cặp thẻ này để lấy tên tài liệu.</p> <p>Ví dụ, với HTML ở trên, tôi sẽ đặt tên tài liệu này thành <em>Thạch Phạm Blog – www.thachpham.com</em>cố gắng lưu nó và mở nó bằng trình duyệt, bạn sẽ thấy kết quả sau.</p> <p><img fifu-featured="1" loading="lazy" class="aligncenter size-full wp-image-23412" src="https://thachpham.com/wp-content/uploads/2015/04/html-the-head-01.png" alt="[Học HTML] Các thẻ khai báo thông tin web cơ bản [NEW]" width="509" height="234" title="[Học HTML] Các thẻ khai báo thông tin web cơ bản 15"></p> <h3><span id="Khai_bao_du_lieu_macro_voi__nhan">Khai báo dữ liệu macro với <meta> . nhãn</span></h3> <p>Thẻ <code><meta></code> là một thẻ đặc biệt vì nó không có thẻ đóng như các thẻ khác mà sẽ có dấu gạch chéo như <code>/</code> trước mặt nhân vật <code>></code> cuối cùng. Thẻ này có mục đích khai báo dữ liệu macro trong tài liệu web HTML của bạn như mô tả, từ khóa, tên tác giả, mã hóa ký tự được sử dụng, v.v.</p> <p>Thẻ meta luôn được khai báo với ít nhất một thuộc tính và mỗi thuộc tính phải luôn có một giá trị. Ví dụ:</p> <p>[html]<meta charset="utf-8" />[/html]</p> <p>Trong đó, <code>charset</code> là tên thuộc tính và <code>utf-8</code> là giá trị của thuộc tính <code>charset</code>.</p> <h4><span id="bang_ma_thuoc_tinh">bảng mã. thuộc tính</span></h4> <p>Đặc tính <code>charset</code> trong thẻ <code><meta></code> chịu trách nhiệm cho trình duyệt biết mã hóa của các ký tự siêu văn bản bên trong tài liệu là gì. Và bây giờ hầu hết chúng ta sử dụng bảng mã UTF-8 cho tất cả các ngôn ngữ bao gồm ngôn ngữ latin, kanji – Nôm và các ngôn ngữ đọc từ phải sang trái (phải sang trái – RTL) như tiếng Ả Rập chẳng hạn.</p> <h4><span id="Ten_thuoc_tinh">Tên thuộc tính</span></h4> <p>Đối với thuộc tính tên, thẻ meta của bạn phải có hai thuộc tính, thuộc tính tên và thuộc tính nội dung, trong đó thuộc tính nội dung được coi là cài đặt nội dung cho thuộc tính tên. Ví dụ:</p> <p>[html]<meta name="author" content="Thach Pham" />[/html]</p> <p>Trong đó, giá trị của thuộc tính name là một giá trị có sẵn vì thuộc tính name hiện hỗ trợ một số giá trị như:</p> <ul> <li><code>author</code>: Khai báo tên tác giả của tài liệu.</li> <li><code>description</code>: Khai báo phần mô tả của tài liệu.</li> <li><code>keyword</code>: Khai báo các từ khóa của tài liệu, các từ khóa này sẽ đóng vai trò hỗ trợ các công cụ tìm kiếm văn bản hoặc công cụ tìm kiếm website.</li> </ul> <p>Đó là những giá trị quan trọng thường được sử dụng, ngoài ra còn có một số giá trị khác như:</p> <ul> <li><code>application-name</code>: Tên ứng dụng đại diện của tài liệu web.</li> <li><code>generator</code>: Khai báo tên ứng dụng tạo tài liệu.</li> </ul> <h3><span id="Phan_ket">Phần kết</span></h3> <p>Như mình đã nói ở đầu bài, các thẻ khai báo thông tin quan trọng cho tài liệu HTML vẫn còn khá nhiều, nhưng dù sao thì những thẻ đó bây giờ bạn sẽ không sử dụng nữa nên mình sẽ đề cập ở loạt bài khác. Nhưng trước tiên, bạn nên hiểu ý nghĩa của các thẻ khác để khi nhìn vào mã nguồn HTML, bạn có thể hiểu được ý nghĩa của chúng.</p> <div class="kk-star-ratings kksr-auto kksr-align-center kksr-valign-bottom" data-payload='{"align":"center","id":"23411","slug":"default","valign":"bottom","reference":"auto","class":"","count":"4","readonly":"","score":"5","best":"5","gap":"4","greet":"u0110u00e1nh giu00e1 nu1ed9i dung nu00e0y","legend":"5/5 - (4 bu00ecnh chu1ecdn)","size":"24","width":"138","_legend":"{score}/{best} - ({count} {votes})","font_factor":"1.25"}'> <div class="kksr-stars"> <div class="kksr-stars-inactive"> <div class="kksr-star" data-star="1" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> <div class="kksr-star" data-star="2" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> <div class="kksr-star" data-star="3" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> <div class="kksr-star" data-star="4" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> <div class="kksr-star" data-star="5" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> </p></div> <div class="kksr-stars-active" style="width: 138px;"> <div class="kksr-star" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> <div class="kksr-star" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> <div class="kksr-star" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> <div class="kksr-star" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> <div class="kksr-star" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> </p></div> </div> <div class="kksr-legend" style="font-size: 19.2px;"> <p> 5/5 – (4 phiếu bầu) </p></div> </div> <div class="serie-list"> <h4><span id="Tiep_tuc_doc_trong_bo_truyen">Tiếp tục đọc trong bộ truyện</span></h4> <p><span class="series-nav-left"></span><span class="series-nav-right"></span></div> <div class="post-tags"> <p> htmlhtmlnewbie cơ bản </p></div> </p></div> <!-- Start Tags --> <div class="tags"></div> <!-- End Tags --> </div><!-- End Content --> <div class="related-posts"><div class="postauthor-top"><h3>Related Posts</h3></div> <article class="post excerpt "> <a href="https://wordpresstipsaz.com/lam-the-nao-de-tim-wordpress-plugin-ma-mot-website-dang-dung-new/" title="Làm thế nào để tìm WordPress Plugin mà một website đang dùng [NEW]" id="featured-thumbnail"> <div class="featured-thumbnail"> <img fifu-featured="1" width="210" height="150" src="https://dieuhau.com/wp-content/uploads/2017/03/WpScan-command-Kali-find-plugins-1.png" class="attachment-schema-lite-related size-schema-lite-related wp-post-image" alt="Làm thế nào để tìm WordPress Plugin mà một website đang dùng [NEW]" loading="lazy" title="Làm thế nào để tìm WordPress Plugin mà một website đang dùng [NEW] 1"> </div> <header> <h4 class="title front-view-title">Làm thế nào để tìm WordPress Plugin mà một website đang dùng [NEW]</h4> </header> </a> </article><!--.post.excerpt--> <article class="post excerpt "> <a href="https://wordpresstipsaz.com/huong-dan-cach-thay-doi-background-tren-zoom-new/" title="Hướng dẫn cách thay đổi Background trên Zoom [NEW]" id="featured-thumbnail"> <div class="featured-thumbnail"> <img fifu-featured="1" width="210" height="150" src="https://dieuhau.com/wp-content/uploads/2021/11/Zoom_app_0.webp" class="attachment-schema-lite-related size-schema-lite-related wp-post-image" alt="Hướng dẫn cách thay đổi Background trên Zoom [NEW]" loading="lazy" title="Hướng dẫn cách thay đổi Background trên Zoom [NEW] 2"> </div> <header> <h4 class="title front-view-title">Hướng dẫn cách thay đổi Background trên Zoom [NEW]</h4> </header> </a> </article><!--.post.excerpt--> <article class="post excerpt last"> <a href="https://wordpresstipsaz.com/them-anh-dai-dien-cho-category-new/" title="Thêm ảnh đại diện cho category [NEW]" id="featured-thumbnail"> <div class="featured-thumbnail"> <img fifu-featured="1" width="210" height="150" src="https://thachpham.com/wp-content/uploads/2014/08/categories-images-backend.jpg" class="attachment-schema-lite-related size-schema-lite-related wp-post-image" alt="Thêm ảnh đại diện cho category [NEW]" loading="lazy" title="Thêm ảnh đại diện cho category [NEW] 3"> </div> <header> <h4 class="title front-view-title">Thêm ảnh đại diện cho category [NEW]</h4> </header> </a> </article><!--.post.excerpt--> </div> <!-- You can start editing here. --> </div> </div> </article> <aside class="sidebar c-4-12"> <div id="sidebars" class="sidebar"> <div class="sidebar_list"> <div id="search-2" class="widget widget_search"><form method="get" id="searchform" class="search-form" action="https://wordpresstipsaz.com" _lpchecked="1"> <fieldset> <input type="text" name="s" id="s" value=""> <input type="submit" value="Search" /> </fieldset> </form> </div><div id="block-3" class="widget widget_block"><div class="wp-container-1 wp-block-group"><div class="wp-block-group__inner-container"><h2>Bài viết mới</h2><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://wordpresstipsaz.com/lam-the-nao-de-xoa-tinh-nang-tu-dong-xoa-rac-trong-thu-muc-rac-new/">Làm thế nào để xoá tính năng tự động xóa rác trong thư mục Rác [NEW]</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://wordpresstipsaz.com/11-loi-email-marketing-ma-nguoi-dung-wordpress-nen-tranh-new/">11 Lỗi Email Marketing mà người dùng WordPress nên tránh [NEW]</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://wordpresstipsaz.com/10-ly-do-ban-khong-nen-tu-host-video-cua-chinh-minh-new/">10 lý do bạn không nên tự host video của chính mình [NEW]</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://wordpresstipsaz.com/lam-the-nao-sua-loi-upload-failed-to-write-file-to-disk-new/">Làm thế nào sửa lỗi Upload: Failed to write file to disk [NEW]</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://wordpresstipsaz.com/nhung-cach-don-gian-de-bao-ve-trang-wordpress-cua-ban-new/">Những cách đơn giản để bảo vệ trang WordPress của bạn [NEW]</a></li> </ul></div></div></div><div id="block-5" class="widget widget_block"><div class="wp-container-2 wp-block-group"><div class="wp-block-group__inner-container"><h2>Lưu trữ</h2><ul class=" wp-block-archives-list wp-block-archives"> <li><a href='https://wordpresstipsaz.com/2022/07/'>Tháng Bảy 2022</a></li> </ul></div></div></div><div id="block-6" class="widget widget_block"><div class="wp-container-3 wp-block-group"><div class="wp-block-group__inner-container"><h2>Chuyên mục</h2><ul class="wp-block-categories-list wp-block-categories"> <li class="cat-item cat-item-1"><a href="https://wordpresstipsaz.com/blog/">Blog</a> </li> </ul></div></div></div> </div> </div><!--sidebars--> </aside> </div> </div> <footer id="site-footer" role="contentinfo" itemscope itemtype="http://schema.org/WPFooter"> <!--start copyrights--> <div class="copyrights"> <div class="container"> <div class="row" id="copyright-note"> <span><a href="https://wordpresstipsaz.com/" title="">wordpresstipsaz.com</a> Copyright © 2022.</span> <div class="top"> <a href="//www.dmca.com/Protection/Status.aspx?ID=2968cbe5-7a7e-4bcb-935e-43e86744dddc" title="DMCA.com Protection Status" class="dmca-badge"> <img src="https://images.dmca.com/Badges/dmca_protected_sml_120l.png?ID=2968cbe5-7a7e-4bcb-935e-43e86744dddc" alt="DMCA.com Protection Status" /></a> <a href="#top" class="toplink">Back to Top ↑</a> </div> </div> </div> </div> <!--end copyrights--> </footer><!-- #site-footer --> <style>.wp-container-1 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-1 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-1 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style> <style>.wp-container-2 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-2 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-2 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style> <style>.wp-container-3 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-3 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-3 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style> <script type='text/javascript' id='toc-front-js-extra'> /* <![CDATA[ */ var tocplus = {"visibility_show":"show","visibility_hide":"hide","width":"Auto"}; /* ]]> */ </script> <script type='text/javascript' src='https://wordpresstipsaz.com/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2106' id='toc-front-js'></script> <script type='text/javascript' id='fifu-image-js-js-extra'> /* <![CDATA[ */ var fifuImageVars = {"fifu_lazy":"","fifu_woo_lbox_enabled":"1","fifu_woo_zoom":"inline","fifu_is_product":"","fifu_is_flatsome_active":"","fifu_rest_url":"https:\/\/wordpresstipsaz.com\/wp-json\/","fifu_nonce":"2f4b3cf857"}; /* ]]> */ </script> <script type='text/javascript' src='https://wordpresstipsaz.com/wp-content/plugins/featured-image-from-url/includes/html/js/image.js?ver=4.0.6' id='fifu-image-js-js'></script> </body> </html>