Xây dựng bố cục trang web sử dụng HTML
Mỗi phần tử trong tài liệu HTML mang một ngữ nghĩa riêng mà các công cụ tìm kiếm dựa vào đó để hiểu được nội dung trên trang web của bạn. Trong đó, việc phân chia bố cục nội dung trang web đóng một vai trò đặc biệt quan trọng. Do đó từ phiên bản HTML 5, W3C giới thiệu nhiều phần tử bố cục mới, góp phần định nghĩa thành phần bố cục ngữ nghĩa mỗi trang web. Nội dung của nhóm phần tử bố cục bao gồm tập hợp nhóm phần tử khác để dựng lên giao diện hiển thị giao diện đồ họa website trên màn hình trình duyệt.
Phần tử header
Phần tử header được sử dụng để định nghĩa phần đầu của website hoặc phần đầu của một mục phần tử section. Nội dung phần tử này để giới thiệu chung hoặc tập hợp các liên kết điều hướng.
Ví dụ dưới đây minh họa xây dựng phần nội dung trên cùng của website:
<header id="header" role="banner" itemscope itemtype="http://schema.org/WPHeader">
<!-- Thông tin Logo website -->
<section itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="https://topwebviet.com/">
<figure role="img" aria-labelledby="caption">
<img role="presentation" itemprop="logo" src="https://topwebviet.com/images/logo.png" alt="Dịch vụ thiết kế website" />
<figcaption id="caption">Dịch vụ thiết kế website</figcaption>
</figure>
</a>
</section>
<!-- Thông tin thanh tìm kiếm -->
<section id="sitelookup" role="search" itemscope itemtype="http://schema.org/WebSite">
<link itemprop="url" href="https://topwebviet.com/"/>
<form role="form" itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
<meta itemprop="target" content="https://topwebviet.com/search?q={query}"/>
<input role="textbox" aria-required="true" itemprop="query-input" type="text" name="query"/>
<input role="button" aria-presse="true" type="submit" value="Xác nhận"/>
</form>
</section>
</header>
Trong ví dụ ở trên còn có sự xuất hiện của phần tử sau:
❶ Phần tử section: được sử dụng để chia website thành từng bộ phận của website thành từng phần nhỏ có liên quan tới nhau. Nội dung của phần tử này thông thường bắt đầu bởi một phần tử header để định nghĩa phần đầu của mục, thường đi kèm với một thẻ chủ đề ở đầu (từ h1 đến h6) và được kết thúc bởi phần tử footer để định nghĩa thông tin bản quyền tác giả.
❷ Phần tử figure: được sử dụng để tạo ra luồng độc lập với luồng chính nhưng vẫn liên quan đến luồng chính. Phần tử này thường được sử dụng để đánh dấu hình ảnh, sơ đồ, danh sách mã, ảnh minh họa… và nếu loại bỏ nó sẽ không ảnh hưởng đến luồng tài liệu. Phần tử figcaption được sử dụng ở đầu hoặc cuối nội dung phần tử figure để chú thích cho phần tử figure.
Phần tử footer
Phần tử footer được sử dụng để định nghĩa phần cuối của website hoặc phần cuối của một mục phần tử section. Nội dung phần tử này để khai báo thông tin tác giả, bản quyền, thông tin liên hệ, sơ đồ trang web, các liên kết điều hướng liên quan và nút quay về đầu mục hoặc trang.
Ví dụ dưới đây minh họa xây dựng phần nội dung cuối cùng của website:
<footer id="footer" role="contentinfo" itemscope itemtype="http://schema.org/WPFooter">
<div role="contentinfo" class="vcard" itemscope itemtype="http://schema.org/Organization">
<!-- Thông tin giới thiệu website -->
<section class="infocompany">
<img class="u-logo" itemprop="logo" src="https://topwebviet.com/images/logo.png" alt="Dịch vụ thiết kế website" />
<h3 class="p-org" itemprop="name">DỊCH VỤ PHÁT TRIỂN WEBSITE TOÀN DIỆN TOPWEBVIET</h3>
<p class="p-note">Topwebviet là đơn vị chuyên cung cấp các giải pháp phát triển website toàn diện cho khách hàng. Với nhiều năm kinh nghiệm hoạt động trong lĩnh vực công nghệ, Topwebviet tự hào mang đến các giải pháp kinh doanh hiệu quả nhất hiện nay.</p>
</section>
<!-- Thông tin liên hệ công ty -->
<section class="h-adr">
<h3 itemprop="name">THÔNG TIN LIÊN HỆ</h3>
<address>
<span>Địa chỉ:</span>
<span class="p-street-address” itemprop="address">
<span class="p-street-address">Số 32/14, Ngõ 110, Đường 32</span>,
<span class="p-locality">Phúc Diễn, Bắc Từ Liêm </span>,
<span class="p-region">Hà Nội </span>,
<span class="p-country-name">Việt Nam</span>,
<span class="p-postal-code">100000</span>
</span><br/>
<span class="h-geo">
<span class="p-latitude" value="21.116667">21.116667o</span><br/>
<span class="p-longitude" value="108.366667">108.366667o</span><br/>
<span class="p-altitude">12</span>
</span>
</address>
<div><span>Hotline:</span> <a href="tel:0962229450" itemprop="telephone">096 222 9450</a></div>
<div><span>Website:</span> <a href="https://topwebviet.com" itemprop="url">https://topwebviet.com</a></div>
<div><span>Email hỗ trợ:</span> <a href="mailto:mai0214cs@gmail.com">mai0214cs@gmail.com</a></div>
</section>
<!-- Thông tin người đại diện công ty -->
<section itemscope itemtype="http://schema.org/Person">
<h3 itemprop="name">NGƯỜI ĐẠI DIỆN</h3>
<p>
<a class="u-url" rel="author" itemprop="name" href=”https://topwebviet.com/user/mai0214cs”>
<span class="p-honorific-prefix">Ông</span>
<span class="p-family-name">Mai</span>
<span class="p-additional-name">Đức</span>
<span class="p-given-name">Thạch</span>
</a>
</p>
<p><img class="u-name u-photo" src="https://topwebviet.com/images/avatar.jpg" alt="Mai Đức Thạch" /> </p>
<p><cite class="u-uid" itemprop="jobTitle">Tổng trưởng dự án</cite></p>
<address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">Hải Hậu</span> -
<span itemprop="addressRegion">Nam Định</span> -
<span itemprop="addressCountry">Việt Nam</span>
</address>
<p>
Biệt danh: <span class="p-nickname">mai0214cs</span><br/>
Email: <a class="u-email" href="mailto:mai0214cs@gmail.com"> mai0214cs@gmail.com </a><br/>
Giới tính: <span class="p-sex" value="M">Nam</span><br/>
Ngày sinh: <span class="dt-bday">13/07/1989</span><br/>
Điện thoại: <a class="p-tel" href=”tel:0962229450”>0962229450</a>
</p>
</section>
<!-- Thông tin kết nối thông tin trang mạng xã hội-->
<section class="connectsocial">
<h3>KẾT NỐI VỚI TOPWEBVIET</h3>
<ul class="navbar-social">
<li><a itemprop="sameAs" href="https://www.facebook.com/topwebviet" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a></li>
<li><a itemprop="sameAs" href="https://www.twitter.com/topwebviet" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a></li>
<li><a itemprop="sameAs" href="https://plus.google.com/u/mai0214cs" target="_blank" rel="nofollow"><i class="fa fa-google"></i></a></li>
<li><a itemprop="sameAs" href="https://www.youtube.com/channel/topwebviet" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i></a></li>
</ul>
</section>
</div>
<!-- Thông tin đơn vị thiết kế website -->
<detail>
<summary>Thiết kế năm <span itemprop="copyrightYear">2016</span></summary>
<p>Thiết kế bởi <a href="https://topwebviet.com" target="_blank" itemprop="copyrightHolder">Topwebviet</a></p>
</detail>
</footer>
Trong ví dụ ở trên còn có sự xuất hiện của các phần tử sau:
❶ Phần tử detail: được sử dụng để đưa thêm thông tin chi tiết có thể được ẩn hoặc hiện đối với người dùng. Nó còn được sử dụng để tạo các tiện ích tương tác cho phép người dùng mở hoặc đóng. Nội dung của phần tử này sẽ không được hiển thị trừ khi nội dung của nó bao gồm phần tử summary để định nghĩa một tiêu đề, mà khi người dùng kích hoạt nó, toàn bộ nội dung của phần tử detail sẽ được hiển thị.
❷ Phần tử address: được sử dụng để xác định thông tin liên hệ của tác giả/ chủ sở hữu website hoặc của phần chi tiết của nội dung trang web.
Phần tử nav
Phần tử nav được sử dụng để định nghĩa khối các liên kết điều hướng cùng loại với nhau. Thường nó gắn với việc xây dựng các danh sách trong HTML thường được sử dụng trong việc xây dựng các trình đơn lựa chọn hay việc xây dựng các trình diễn ảnh. Khi sử dụng phần tử này, ta thường sử dụng kết hợp với các phần tử danh sách. Các phần tử danh sách này có thể kết hợp lồng nhau hay kết hợp các loại danh sách với nhau.
❶ Danh sách không thứ tự (unordered list): là danh sách liệt kê các mục bằng ký hiệu chấm tròn trước mỗi mục. Phần tử ul (ul – unordered list)đánh dấu việc bắt đầu và kết thúc danh sách. Phần tử li (li – list item) có tác dụng thể hiện việc bắt đầu và kết thúc mỗi mục bằng dấu chấm tròn. Ta có thể thay đổi dấu chấm tròn bằng các ký hiệu khác bằng cách sử dụng thuộc tính type (dấu ■ là square, dấu ● là disc, dấu ○ là circle).
Ví dụ dưới đây sử dụng danh sách không thứ tự để xây dựng phần trình đơn chính của website:
<nav id="nav" role="navigation" aria-label="Primary" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li><a href="https://topwebviet.com" itemprop="url"><span itemprop="name">Trang chủ</span></a></li>
<li><a href="https://topwebviet.com/gioi-thieu" itemprop="url"><span itemprop="name">Giới thiệu</span></a></li>
<li><a href="https://topwebviet.com/san-pham" itemprop="url"><span itemprop="name">Sản phẩm</span></a></li>
<li><a href="https://topwebviet.com/tin-tuc" itemprop="url"><span itemprop="name">Tin tức</span></a></li>
<li><a href="https://topwebviet.com/lien-he" itemprop="url"><span itemprop="name">Liên hệ</span></a></li>
</ul>
</nav>
❷ Danh sách có thứ tự (ordered list): là danh sách các mục theo thứ tự số thay đổi qua các mục. Phần tử ol (ol – ordered list) đánh dấu việc bắt đầu và kết thúc danh sách. Phần tử li (li – list item) có tác dụng thể hiện việc bắt đầu và kết thúc mỗi mục bằng số thứ tự. Thay ký tự thứ tự bằng ký hiệu khác bằng cách sử dụng thuộc tính type (chữ hoa là A, chữ thường là a, số La Mã hoa là I, số La Mã thường là i). Để bắt đầu từ số n trở lên ta dùng <ol start=n>…</ol>.
Ví dụ dưới đây sử dụng danh sách có thứ tự để xây dựng phần điều hướng phân cấp trang web:
<nav id="Breadcrumb">
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://topwebviet.com"><span itemprop="name">Trang chủ</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://topwebviet.com/kien-thuc/"><span itemprop="name">Kiến thức</span></a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://topwebviet.com/kien-thuc/co-ban-ve-css"><span itemprop="name">Giới thiệu về CSS</span></a>
<meta itemprop="position" content="3" />
</li>
</ol>
</nav>
❸ Danh sách mô tả (description list): là một danh sách giống như một bảng từ vựng và bảng giải thích thuật ngữ lùi vào trong. Phần tử dl (dl – description list)đánh dấu bắt đầu và kết thúc danh sách. Phần tử dt (dt – description term) chỉ ra thuật ngữ cần định nghĩa. Phần tử dd (dd – describe description) chỉ thuật ngữ dùng để định nghĩa.
Ví dụ dưới đây sử dụng danh sách có thứ tự để xây dựng phần danh sách thành phần dịch vụ cung cấp:
<nav itemscope itemtype="http://schema.org/ItemList">
<dl itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<dt><a itemprop="url" href="https://topwebviet.com/hosting/">Dịch vụ Hosting</a><meta itemprop="position" content="1" /></dt>
<dd>Các trang web được lưu trữ trong các máy tính có công suất cao; được kết nối với mạng tốc độ cao và hoạt động liên tục 24/7. Do đó, khi bạn mua một dịch vụ lưu trữ web, chính là việc bạn thuê một không gian web cho bạn trên các máy chủ này.</dd>
</dl>
<dl itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<dt><a itemprop="url" href="https://topwebviet.com/domain/">Dịch vụ Domain</a><meta itemprop="position" content="2" /></dt>
<dd>Khi bạn bắt đầu nghĩ đến việc kinh doanh trực tuyến trên Internet, điều đầu tiên mà bạn cần phải lưu ý đến là lựa chọn tên miền để xây dựng hình ảnh và thương hiệu của bạn.</dd>
</dl>
<dl itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<dt><a itemprop="url" href="https://topwebviet.com/website/">Thiết kế website</a><meta itemprop="position" content="3" /></dt>
<dd>Đội ngũ kỹ thuật sẽ thiết kế web dựa trên yêu cầu của Quý khách. Kết quả từng công đoạn sẽ được gửi đến Quý Khách để phê duyệt và chỉnh sửa kịp thời.</dd>
</dl>
<dl itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<dt><a itemprop="url" href="https://topwebviet.com/developer/">Phát triển website</a><meta itemprop="position" content="4" /></dt>
<dd>Topwebviet luôn tâm niệm mỗi sản phẩm như một đứa con tinh thần do mình tạo ra, do đó website đến tay Quý khách phải thực sự hoàn hảo đến từng chi tiết dù là nhỏ nhất.</dd>
</dl>
<dl itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<dt><a itemprop="url" href="https://topwebviet.com/adversite/">Quảng cáo website</a><meta itemprop="position" content="5" /></dt>
<dd>Triển khai và hỗ trợ khách hàng vận hành website một cách chuyên nghiệp, cung cấp đầy đủ các hướng dẫn và cách thức quản trị website. Topwebviet cam kết bảo hành website trọn đời.</dd>
</dl>
</nav>
Phần tử aside
Phần tử aside được sử dụng để trình bày một phần của trang web mà nội dung của nó hỗ trợ, tham khảo, liên quan nội dung chính của trang (hay nói cách khác là nó nằm tách biệt với nội dung của trang). Trong nhiều trang web, nó trình bày phần trang bên (sidebar) của trang web bao gồm như trình đơn danh mục, tin tức hay sản phẩm liên quan, thông tin văn bản hoặc hình ảnh quảng cáo.
Ví dụ sau đây trình bày cách trình bày sidebar gồm một số modul:
<aside id="sidebar" role="complementary">
<figure role="img" aria-labelledby="caption" itemscope itemtype="http://schema.org/ImageGallery">
<img role="presentation" src="https://topwebviet.com/images/slider1.jpg" alt="Slider ảnh 1" itemprop="image" />
<img role="presentation" src="https://topwebviet.com/images/slider2.jpg" alt="Slider ảnh 2" itemprop="image" />
</figure>
<section itemscope itemtype="http://schema.org/WPAdBlock">
<h2>ẢNH QUẢNG CÁO</h2>
<figure role="img" aria-labelledby="caption" itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://topwebviet.com" itemprop="contentUrl">
<img role="presentation" src="https://topwebviet.com/images/ads.png" width="600" height="300" alt="Dịch vụ quảng cáo" itemprop="thumbnailUrl" />
</a>
<figcaption id="caption" itemprop="caption">Mô tả ảnh</figcaption>
</figure>
</section>
<section itemscope itemtype="http://schema.org/VideoObject">
<h2>VIDEO GIỚI THIỆU</h2>
<figure role="img" aria-labelledby="caption">
<img role="presentation" src="https://topwebviet.com/images/ads.png" width="600" height="300" alt="Mô tả ảnh" itemprop="thumbnailUrl" />
</figure>
<a itemprop="embedUrl" href="https://topwebviet.com/videoplayer.swf?video=214"><h3 itemprop="name">Quy trình phát triển website</h3></a>
<p itemprop="description">Quy trình xây dựng và phát triển website toàn diện với công nghệ tiên tiến hiện đại hàng đầu của topwebviet.</p>
<time itemprop="uploadDate" datetime="2018-06-20">20/06/2018</time>
<meta itemprop="contentUrl" content="https://topwebviet.com/video/about.flv" />
<meta itemprop="duration" content="PT1M33S" />
<meta itemprop="interactionCount" content="1234" />
</section>
</aside>
Phần tử main
Phần tử mainđược sử dụng để định nghĩa phần nội dung chính của tài liệu. Nó chỉ định rằng đây là nội dung duy nhất và không lặp lại trong bất kỳ nơi nào trong tài liệu HTML.
Ví dụ sau đây minh họa việc trình bày chi tiết 1 sản phẩm:
<main role="main" aria-labelledby="titlemain" class=” h-product” vocab="http://schema.org/" typeof="Product">
<h1 id=” titlemain” class=” p-name” property="name">ĐÈN LED TR140N1/50W</h1>
<address class="p-brand h-card" property="brand">Rạng Đông</address>
<img class=” u-photo” property="image" src="http://ledquang.com/images/tr140n1-50w.png" alt="Đèn led TR140N1/50W" />
<p class=”e-description” property="description">Đèn led TR140N1/50W có thể dễ dàng điều khiển độ sáng tối bằng phương pháp điều chế độ rộng xung hoặc tăng giảm dòng điện tác động.</p>
<div>Mã sản phẩm: <span property="mpn">TR140N1/50W</span></div>
<div property="aggregateRating" typeof="AggregateRating"><span property="ratingValue">4.5</span> sao / <span property="reviewCount">89</span> lượt xem</div>
<div property="offers" typeof="Offer">
<p>Giá bán: <data class=”p-price” property="price" value=”28000”>28000</data><span property="priceCurrency">VND</span></p>
<p>(Hạn bán hàng đến <time property="priceValidUntil" datetime="2020-11-05">05/11/2020</time>)</p>
<p>Đại lý bán: <span property="seller" typeof="Organization"><span property="name">Ledquang</span></span></p>
<p>Điều kiện sử dụng: <link property="itemCondition" href="http://schema.org/UsedCondition"/>Bảo quản thoáng mát, không ẩm mốc.</p>
<link property="availability" href="http://schema.org/InStock"/><button onclick=”CartProduct()”>Đặt hàng ngay</button>
</div>
</main>
Phần tử article:
Phần tử article được sử dụng để định nghĩa một tin tức. Nó có thể là một bài viết trên diễn đàn, trang thương mại điện tử, blog hay một trang review.
Ví dụ sau đây trình bày chi tiết một tin tức:
<main role="main" aria-labelledby="titlemain">
<article class="h-entry" vocab="http://schema.org/" typeof="NewsArticle">
<header>
<meta property="mainEntityOfPage" typeof="WebPage" content="https://topwebviet.com/tag-head-html" />
<h1 id=” titlemain” class="p-name" property="headline">Trình bày phần head trong HTML</h1>
<img property="image" src="https://topwebviet.com/images/tag-head-html.png" alt="Trình bày phần head trong HTML" />
<p class="p-summary" property="description">Nhóm phần tử siêu dữ liệu là những phần tử được sử dụng chủ yếu trong nội dung phần tử head của tài liệu HTML.</p>
</header>
<div class=" e-content">Nội dung chi tiết của trang...</div>
<footer>
<span class="p-author h-card" property="author" typeof="Person"><span property="name">Mai Đức Thạch</span></span>
<span><time class="dt-published" property="datePublished" datetime="2018-05-05">05/05/2018</time></span>
<span><time class="dt-modified" property="dateModified" datetime="2018-06-20">20/06/2018</time></span>
<span property="publisher" typeof="Organization">
<span property="logo" typeof="ImageObject"><img property="url" src="https://topwebviet.com/images/favicon.png" alt="Topwebviet" /></span>
<span property="name">Topwebviet</span>
</span>
<span class="comments" property="aggregateRating" typeof="AggregateRating">
<span property="ratingValue">4.5</span> sao /
<span property="reviewCount">89</span> lượt xem
</span>
</footer>
<article>
</main>