TÓM TẮT
- 1 1. Giới thiệu chung về Header và Footer
- 2 2. Những yếu tố quan trọng cần cân nhắc khi thiết kế Header
- 3 3. Các yếu tố quan trọng khi thiết kế Footer
- 4 4. Quy trình thiết kế và phát triển Header & Footer
- 5 5. Các lưu ý quan trọng về SEO cho Header & Footer
- 6 6. Kiểm thử và tối ưu hoá
- 7 7. Các ví dụ thực tế và mẫu thiết kế
- 8 8. Tổng kết: Những điểm “không thể bỏ qua” khi vẽ Header & Footer
Header (đầu trang) và Footer (chân trang) là hai thành phần quan trọng nhất của bất kỳ website nào, dù là trang tĩnh, blog cá nhân hay hệ thống thương mại điện tử phức tạp. Chúng không chỉ giúp người dùng dễ dàng điều hướng, mà còn ảnh hưởng lớn đến trải nghiệm người dùng (UX), tốc độ tải trang, và thậm chí là thứ hạng SEO trên các công cụ tìm kiếm.
- Header thường chứa logo, menu điều hướng, thanh tìm kiếm, và các liên kết quan trọng như đăng nhập, giỏ hàng.
- Footer chứa thông tin liên hệ, bản quyền, liên kết chính sách, mạng xã hội, và các liên kết phụ trợ khác.
Việc vẽ (tức là thiết kế và lập trình) header và footer một cách hợp lý không chỉ giúp website trông chuyên nghiệp mà còn tối ưu hoá cho các công cụ tìm kiếm và tăng tỷ lệ chuyển đổi. Bài viết này sẽ cung cấp hướng dẫn chi tiết, từ khái niệm cơ bản, quy trình thiết kế, lựa chọn công cụ, cho tới cách triển khai thực tế bằng HTML, CSS, và một số framework phổ biến như Bootstrap, TailwindCSS, hoặc React.
2. Những yếu tố quan trọng cần cân nhắc khi thiết kế Header
2.1. Độ rộng và vị trí cố định (Fixed vs. Sticky)
- Fixed Header: Header luôn hiển thị trên cùng màn hình ngay cả khi người dùng scroll xuống. Thích hợp cho các trang có nhiều nội dung dài, giúp người dùng luôn có thể truy cập menu nhanh chóng.
- Sticky Header: Header xuất hiện khi người dùng scroll lên, ẩn khi scroll xuống. Giảm chiếm không gian màn hình, cải thiện trải nghiệm trên thiết bị di động.
2.2. Logo và thương hiệu
Có thể bạn quan tâm: Cách Vẽ Hermione Granger: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao
- Đặt logo ở góc trái là chuẩn mực, vì mắt người dùng thường bắt đầu từ trái sang phải.
- Kích thước logo nên linh hoạt (responsive), thường từ 120px – 200px chiều rộng trên desktop, 80px – 120px trên mobile.
- Sử dụng định dạng vector (SVG) để tránh mất nét khi phóng to.
- Cấu trúc: Sử dụng danh sách không thứ tự (
<ul><li>) để tạo menu, giúp SEO và truy cập bằng bàn phím. - Dropdown: Khi có nhiều mục con, sử dụng dropdown để giữ giao diện gọn gàng.
- Mega Menu: Đối với các trang thương mại điện tử lớn, mega menu cho phép hiển thị nhiều danh mục một cách trực quan.
2.4. Thanh tìm kiếm
- Đặt ở vị trí trung tâm hoặc góc phải, tùy thuộc vào layout.
- Sử dụng thẻ
<input type="search">để hỗ trợ các tính năng như autocomplete và bảo mật.
2.5. Các liên kết hành động (CTA)
- Nút “Đăng ký”, “Mua ngay”, “Liên hệ” nên nổi bật bằng màu sắc tương phản.
- Sử dụng thuộc tính
aria-labelđể tăng tính truy cập.
2.6. Tối ưu hóa cho thiết bị di động (Responsive)
- Hamburger Menu: Khi màn hình thu hẹp, chuyển menu sang dạng biểu tượng ba gạch.
- Breakpoints: Xác định các điểm ngắt (breakpoints) phù hợp với Bootstrap (xs, sm, md, lg, xl) hoặc TailwindCSS.
3.1. Nội dung cơ bản
Có thể bạn quan tâm: Cách Vẽ Nhân Vật Ngồi Anime Đẹp, Tỉm Tắc Và Thú Vị
- Thông tin liên hệ: Địa chỉ, số điện thoại, email.
- Liên kết nhanh: Giới thiệu, Chính sách bảo mật, Điều khoản sử dụng.
- Mạng xã hội: Icon Facebook, Instagram, LinkedIn, Twitter.
- Bản quyền: Năm hiện tại và tên công ty.
- Newsletter: Form đăng ký nhận tin.
3.2. Cấu trúc và bố cục
- Grid System: Sử dụng lưới 12 cột để chia footer thành các phần (ví dụ: 4 cột 3-3-3-3 hoặc 5-7).
- Sắp xếp: Đặt các liên kết quan trọng ở phía trái, thông tin liên hệ ở giữa, mạng xã hội và newsletter ở phía phải.
3.3. Tính năng hỗ trợ SEO
- Thêm schema.org markup cho địa chỉ (
<address>), doanh nghiệp (<Organization>), và liên kết xã hội (<sameAs>). - Sử dụng tiêu đề (
<h2>hoặc<h3>) cho mỗi cột để giúp công cụ tìm kiếm hiểu cấu trúc.
3.4. Tối ưu tốc độ tải
- Lazy Load cho hình ảnh icon.
- Nén CSS/JS, sử dụng CDN cho các thư viện.
4.1. Bước 1: Nghiên cứu và lập kế hoạch
Có thể bạn quan tâm: Cách Vẽ Hình Chữ Nhật (hcn) Trong Autocad: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao
- Phân tích đối tượng người dùng: Độ tuổi, thiết bị sử dụng, mục tiêu.
- Đối thủ cạnh tranh: Xem xét cách họ bố trí header/footer.
- Wireframe: Vẽ khung sơ bộ bằng công cụ Figma, Sketch hoặc Adobe XD.
4.2. Bước 2: Thiết kế UI/UX
- Màu sắc: Đảm bảo tương phản đủ cho đọc được (WCAG AA/AAA).
- Kiểu chữ: Độ lớn chữ (14px – 16px cho body, 18px – 24px cho tiêu đề).
- Khoảng cách (spacing): Padding, margin hợp lý để tránh “đông đúc”.
4.3. Bước 3: Chuyển đổi thành mã HTML/CSS
4.3.1. Cấu trúc HTML cơ bản cho Header
<header class="site-header"> <div class="container"> <div class="logo"> <a href="/"> <img src="/assets/logo.svg" alt="Tên công ty"> </a> </div> <nav class="main-nav"> <ul> <li><a href="/">Trang chủ</a></li> <li><a href="/about">Giới thiệu</a></li> <li class="has-dropdown"> <a href="/products">Sản phẩm</a> <ul class="dropdown"> <li><a href="/products/category1">Danh mục 1</a></li> <li><a href="/products/category2">Danh mục 2</a></li> <li><a href="/products/category3">Danh mục 3</a></li> </ul> </li> <li><a href="/contact">Liên hệ</a></li> </ul> </nav> <div class="header-actions"> <form action="/search" method="GET" class="search-form"> <input type="search" name="q" placeholder="Tìm kiếm..." aria-label="Tìm kiếm"> <button type="submit">🔍</button> </form> <a href="/cart" class="cart-link">🛒 <span class="cart-count">0</span></a> </div> </div>
</header>
4.3.2. CSS (Sử dụng Flexbox)
/ Reset một số thuộc tính cơ bản /
,
::before,
::after { box-sizing: border-box; margin: 0; padding: 0;
} / Container để căn giữa nội dung /
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px;
} / Header /
.site-header { background-color: #fff; border-bottom: 1px solid #eaeaea; position: sticky; / Hoặc fixed tùy nhu cầu / top: 0; z-index: 1000;
} / Flex layout /
.site-header .container { display: flex; align-items: center; justify-content: space-between;
} / Logo /
.logo img { height: 48px; / Tự điều chỉnh /
} / Navigation /
.main-nav ul { list-style: none; display: flex; gap: 30px;
} .main-nav a { text-decoration: none; color: #333; font-weight: 500; transition: color .2s;
} .main-nav a:hover,
.main-nav a:focus { color: #007bff;
} / Dropdown /
.has-dropdown { position: relative;
} .has-dropdown .dropdown { position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #eaeaea; padding: 10px 0; min-width: 180px; display: none; flex-direction: column; box-shadow: 0 4px 6px rgba(0,0,0,.1);
} .has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: flex;
} / Header actions /
.header-actions { display: flex; align-items: center; gap: 15px;
} / Search /
.search-form { display: flex; border: 1px solid #ccc; border-radius: 4px; overflow: hidden;
} .search-form input { border: none; padding: 5px 10px; outline: none;
} .search-form button { background: #007bff; color: #fff; border: none; padding: 5px 10px; cursor: pointer;
} / Cart /
.cart-link { font-size: 1.2rem; position: relative;
} .cart-count { position: absolute; top: -5px; right: -10px; background: #ff3b30; color: #fff; border-radius: 50%; padding: 2px 5px; font-size: 0.75rem;
}
4.3.3. Responsive (Media Queries)
@media (max-width: 768px) { .site-header .container { flex-wrap: wrap; } .main-nav { width: 100%; order: 3; display: none; / Ẩn menu, sẽ hiện khi click hamburger / } .main-nav ul { flex-direction: column; gap: 10px; } .header-actions { order: 2; } .hamburger { display: block; cursor: pointer; }
} / Hiển thị menu khi click hamburger (JS sẽ toggle class .open) /
.main-nav.open { display: block;
}
<footer class="site-footer"> <div class="container"> <div class="footer-grid"> <!-- Cột 1: Giới thiệu --> <div class="footer-col"> <h3>Về chúng tôi</h3> <p>Công ty XYZ chuyên cung cấp các giải pháp công nghệ hiện đại, giúp doanh nghiệp phát triển bền vững.</p> <a href="/about" class="read-more">Xem thêm →</a> </div> <!-- Cột 2: Liên kết nhanh --> <div class="footer-col"> <h3>Liên kết nhanh</h3> <ul> <li><a href="/">Trang chủ</a></li> <li><a href="/products">Sản phẩm</a></li> <li><a href="/blog">Blog</a></li> <li><a href="/contact">Liên hệ</a></li> </ul> </div> <!-- Cột 3: Chính sách --> <div class="footer-col"> <h3>Chính sách</h3> <ul> <li><a href="/privacy">Chính sách bảo mật</a></li> <li><a href="/terms">Điều khoản dịch vụ</a></li> <li><a href="/refund">Chính sách hoàn trả</a></li> </ul> </div> <!-- Cột 4: Kết nối --> <div class="footer-col"> <h3>Kết nối với chúng tôi</h3> <div class="social-icons"> <a href="https://facebook.com" aria-label="Facebook" target="_blank">📘</a> <a href="https://instagram.com" aria-label="Instagram" target="_blank">📸</a> <a href="https://twitter.com" aria-label="Twitter" target="_blank">🐦</a> <a href="https://linkedin.com" aria-label="LinkedIn" target="_blank">💼</a> </div> <form class="newsletter-form" action="/subscribe" method="POST"> <label for="footer-newsletter">Đăng ký nhận tin</label> <input type="email" id="footer-newsletter" name="email" placeholder="Email của bạn" required> <button type="submit">Đăng ký</button> </form> </div> </div> <div class="footer-bottom"> <p>© <span id="current-year"></span> Công ty XYZ. All rights reserved.</p> </div> </div>
</footer>
.site-footer { background-color: #222; color: #ddd; padding: 40px 0; font-size: 0.9rem;
} .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-bottom: 30px;
} .footer-col h3 { color: #fff; margin-bottom: 15px; font-size: 1.1rem;
} .footer-col ul { list-style: none;
} .footer-col a { color: #bbb; text-decoration: none; transition: color .2s;
} .footer-col a:hover,
.footer-col a:focus { color: #fff;
} / Social icons /
.social-icons a { font-size: 1.5rem; margin-right: 10px; color: #bbb; transition: color .2s;
} .social-icons a:hover { color: #fff;
} / Newsletter /
.newsletter-form { margin-top: 15px; display: flex; flex-direction: column;
} .newsletter-form input { padding: 8px; border: none; border-radius: 4px; margin-bottom: 8px;
} .newsletter-form button { background: #007bff; color: #fff; border: none; padding: 8px; border-radius: 4px; cursor: pointer;
} / Bottom line /
.footer-bottom { border-top: 1px solid #444; padding-top: 15px; text-align: center; font-size: 0.85rem;
} / Responsive adjustments /
@media (max-width: 768px) { .site-footer { padding: 30px 0; } .footer-grid { grid-template-columns: 1fr; } .newsletter-form { flex-direction: column; }
}
4.6. Thêm JavaScript cho Hamburger và Sticky Header
// Toggle menu trên thiết bị di động
document.addEventListener('DOMContentLoaded', function () { const hamburger = document.querySelector('.hamburger'); const nav = document.querySelector('.main-nav'); if (hamburger && nav) { hamburger.addEventListener('click', function () { nav.classList.toggle('open'); }); } // Cập nhật năm hiện tại cho Footer const yearSpan = document.getElementById('current-year'); if (yearSpan) { yearSpan.textContent = new Date().getFullYear(); }
});
4.7. Sử dụng Framework (Bootstrap 5) – Ví dụ nhanh
Nếu bạn muốn giảm thời gian phát triển, có thể tận dụng các lớp có sẵn của Bootstrap:
<header class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm"> <div class="container"> <a class="navbar-brand" href="/"> <img src="/assets/logo.svg" alt="Logo" height="40"> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"><a class="nav-link active" href="/">Trang chủ</a></li> <li class="nav-item"><a class="nav-link" href="/about">Giới thiệu</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="productDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Sản phẩm </a> <ul class="dropdown-menu" aria-labelledby="productDropdown"> <li><a class="dropdown-item" href="/products/category1">Danh mục 1</a></li> <li><a class="dropdown-item" href="/products/category2">Danh mục 2</a></li> </ul> </li> <li class="nav-item"><a class="nav-link" href="/contact">Liên hệ</a></li> </ul> <form class="d-flex" role="search" action="/search" method="GET"> <input class="form-control me-2" type="search" name="q" placeholder="Tìm kiếm..." aria-label="Search"> <button class="btn btn-outline-primary" type="submit">Tìm</button> </form> </div> </div>
</header>
Với Bootstrap, phần CSS và JavaScript đã được tích hợp, chỉ cần tải CDN hoặc cài đặt qua npm.
- Sử dụng thẻ heading hợp lý: Header thường chứa
<h1>cho tiêu đề trang (trong nội dung chính) và<nav>cho menu. Footer dùng<h2>hoặc<h3>cho các tiêu đề cột. - Kết cấu liên kết nội bộ: Đảm bảo các liên kết trong header và footer đều có
rel="noopener noreferrer"khi mở ra tab mới, và không có thuộc tínhnofollownếu không cần. - Schema Markup: Thêm JSON‑LD cho
Organization,ContactPoint, vàSocialProfile. - Tốc độ tải: Header và Footer xuất hiện trên mọi trang, vì vậy bất kỳ file CSS/JS nặng nào cũng sẽ ảnh hưởng tới toàn site. Sử dụng critical CSS để inline các style cần thiết cho header/footer, sau đó tải phần còn lại bất đồng bộ.
- Accessibility (A11Y):
- Đặt
role="navigation"cho<nav>. - Thêm
aria-labelcho các biểu tượng và nút. - Đảm bảo màu tương phản tối thiểu 4.5:1 (WCAG AA).
6. Kiểm thử và tối ưu hoá
Có thể bạn quan tâm: Cách Vẽ Happy Fairy Tail: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao
6.1. Kiểm thử trên đa thiết bị
- BrowserStack hoặc Sauce Labs: Kiểm tra trên Chrome, Safari, Edge, Firefox, và các trình duyệt di động.
- Responsive Design Mode trong Chrome DevTools: Kiểm tra các breakpoint (320px, 480px, 768px, 1024px, 1440px).
6.2. Kiểm tra tốc độ
- Google PageSpeed Insights: Đánh giá thời gian tải và đề xuất tối ưu.
- Lighthouse: Kiểm tra SEO, Accessibility, Best Practices.
6.3. Kiểm tra SEO
- Screaming Frog: Đọc các liên kết trong header/footer, kiểm tra lỗi 404.
- Google Search Console: Xem báo cáo “Coverage” để chắc chắn các trang quan trọng được crawl.
6.4. Kiểm tra Accessibility
- axe DevTools hoặc WAVE: Phát hiện các lỗi ARIA, màu sắc, và cấu trúc heading.
7. Các ví dụ thực tế và mẫu thiết kế
7.1. Ví dụ 1: Header tối giản cho blog cá nhân
- Logo ở giữa, menu 3 mục (Home, About, Contact) ở hai bên.
- Sticky: Khi scroll, header thu gọn lại còn chỉ logo và hamburger.
- 5 cột: (1) Giới thiệu, (2) Danh mục sản phẩm, (3) Hỗ trợ khách hàng, (4) Thanh toán & vận chuyển, (5) Kết nối xã hội + newsletter.
- Thêm badge “Secure Payment” và “Free Shipping”.
7.3. Mẫu code mẫu (TailwindCSS)
<header class="bg-white shadow sticky top-0 z-50"> <div class="max-w-7xl mx-auto px-4 flex items-center justify-between h-16"> <a href="/" class="flex-shrink-0"> <img src="/logo.svg" alt="Logo" class="h-8 w-auto"> </a> <nav class="hidden md:flex space-x-8"> <a href="/" class="text-gray-700 hover:text-indigo-600">Trang chủ</a> <a href="/about" class="text-gray-700 hover:text-indigo-600">Giới thiệu</a> <a href="/contact" class="text-gray-700 hover:text-indigo-600">Liên hệ</a> </nav> <div class="flex items-center space-x-4"> <button class="md:hidden text-gray-500" id="mobile-menu-toggle"> <svg class="h-6 w-6" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg> </button> <a href="/cart" class="relative text-gray-700"> <svg class="h-6 w-6" fill="none" stroke="currentColor"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4"/></svg> <span class="absolute -top-2 -right-2 bg-red-600 text-white rounded-full text-xs w-4 h-4 flex items-center justify-center">0</span> </a> </div> </div>
</header>
Tailwind giúp giảm lượng CSS viết tay, đồng thời hỗ trợ responsive qua các prefix md:.
| Thành phần | Lưu ý quan trọng | Công cụ đề xuất |
|---|---|---|
| Logo | Định dạng SVG, kích thước responsive | Illustrator, Figma |
| Menu | Sử dụng <ul> + ARIA, hỗ trợ dropdown/mega |
Bootstrap, Tailwind |
| Sticky/Fixed | Kiểm tra trên mobile, tránh che nội dung | CSS position: sticky |
| Search | <input type="search">, hỗ trợ autocomplete |
Algolia, ElasticSearch |
| CTA | Màu sắc tương phản, aria-label |
CSS Variables |
| Footer Grid | Grid/Flex, tối thiểu 3 cột, tối đa 5 | CSS Grid, Bootstrap |
| Social Icons | SVG, lazy load, rel="noopener" |
FontAwesome, Simple Icons |
| Newsletter | Form validation, anti‑spam (reCAPTCHA) | HTML5 validation, Netlify Forms |
| SEO | Schema markup, internal linking, tốc độ | JSON‑LD, Google PageSpeed |
| Accessibility | role, aria, contrast |
axe, WAVE |
| Performance | Inline critical CSS, defer JS | Critical, Webpack, Vite |
Với những kiến thức và mẫu code trên, bạn đã sở hữu một “bộ công cụ” toàn diện để vẽ (tức là thiết kế và lập trình) header và footer cho mọi loại website, từ blog cá nhân đến dự án thương mại điện tử quy mô lớn. Hãy luôn nhớ rằng, dù giao diện có đẹp đến đâu, nếu không tối ưu cho tốc độ, SEO và truy cập, giá trị thực của nó sẽ bị giảm sút. Vì vậy, hãy kết hợp thiết kế sáng tạo với kỹ thuật tối ưu để tạo ra trải nghiệm người dùng mượt mà và thân thiện với công cụ tìm kiếm.
Chúc bạn thành công trong việc xây dựng những header và footer chuẩn SEO, hiện đại và hiệu quả!