HTML Tags, Attributes, and Examples
Head
<head>
<title>Page Title</title>
</head>
Body
<body>
<h1>Welcome</h1>
</body>
Paragraph
<p>This is a paragraph.</p>
Font (via CSS)
<p style="font-family: Arial; font-size: 16px;">Styled text</p>
Table
<table border="1">
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>25</td></tr>
</table>
Div
<div class="container">Content here</div>
Section
<section>
<h2>Section Title</h2>
</section>
Color (via CSS)
<p style="color: red;">Red text</p>
Links
<a href="[Link] Example</a>
Images
<img src="[Link]" alt="Sample Image">
Navigation
<nav>
<a href="#home">Home</a>
</nav>
Header
<header>
<h1>Site Header</h1>
</header>
Footer
<footer>
<p>© 2025 All rights reserved.</p>
</footer>
HTML Form Tags
Form
<form action="[Link]" method="post"></form>
Input (text)
<input type="text" name="username">
Input (password)
<input type="password" name="password">
Input (email)
<input type="email" name="email">
Input (number)
<input type="number" name="age">
Input (radio)
<input type="radio" name="gender" value="male"> Male
Input (checkbox)
<input type="checkbox" name="subscribe" checked> Subscribe
Textarea
<textarea rows="4" cols="30"></textarea>
Select
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
Button
<button type="submit">Submit</button>
Label
<label for="name">Name:</label>
Fieldset
<fieldset>
<legend>Personal Info</legend>
</fieldset>
Datalist
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
</datalist>
Output
<output name="result">0</output>
CSS Styling for Form Fields
Highlight Input Field on Focus
input:focus {
border-color: blue;
background-color: #eef;
}
Rounded Input Fields
input, textarea {
border-radius: 8px;
padding: 10px;
border: 1px solid #aaa;
}
Animated Hover Effect
input:hover, button:hover {
transform: scale(1.05);
}
Styled Submit Button
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
Below are simple and clear code examples that demonstrate common HCI Navigation
Patterns using HTML/CSS/JavaScript.
These examples can be used in courses, assignments, or UI prototypes.
1. Navigation Bar (Global Navigation Pattern)
A global navigation bar appears on all pages and helps users move between main sections.
HTML + CSS Example
<!DOCTYPE html>
<html>
<head>
<title>Global Navigation Example</title>
<style>
body { font-family: Arial; margin: 0; }
.navbar {
background-color: #0a74da;
padding: 15px;
.navbar a {
color: white;
padding: 14px;
text-decoration: none;
font-weight: bold;
.navbar a:hover {
background-color: #005bb5;
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#products">Products</a>
<a href="#services">Services</a>
<a href="#contact">Contact Us</a>
</div>
<h2>Global Navigation Pattern</h2>
<p>This shows a simple HCI global navigation system.</p>
</body>
</html>
2. Breadcrumb Navigation Pattern
Breadcrumbs show the user’s current location within a hierarchy.
HTML Example
<!DOCTYPE html>
<html>
<head>
<title>Breadcrumb Example</title>
<style>
.breadcrumb {
padding: 10px;
background: #f2f2f2;
font-family: Arial;
.breadcrumb a {
text-decoration: none;
color: #0077cc;
</style>
</head>
<body>
<div class="breadcrumb">
<a href="#">Home</a> >
<a href="#">Electronics</a> >
<a href="#">Mobile Phones</a> >
Samsung Galaxy S22
</div>
<h2>Breadcrumb Navigation Pattern</h2>
<p>This helps users understand where they are in the hierarchy.</p>
</body>
</html>
3. Tab Navigation Pattern
Tabs allow switching between multiple related sections easily.
HTML + CSS + JS Example
<!DOCTYPE html>
<html>
<head>
<title>Tabs Example</title>
<style>
body { font-family: Arial; }
.tab { overflow: hidden; background: #ddd; }
.tab button {
background: inherit;
border: none;
padding: 14px 16px;
cursor: pointer;
font-size: 16px;
.tab button:hover { background: #bbb; }
.tabcontent {
display: none;
padding: 20px;
background: #f9f9f9;
</style>
</head>
<body>
<h2>Tab Navigation Pattern</h2>
<div class="tab">
<button onclick="openTab('Profile')">Profile</button>
<button onclick="openTab('Settings')">Settings</button>
<button onclick="openTab('Messages')">Messages</button>
</div>
<div id="Profile" class="tabcontent">
<h3>Profile</h3>
<p>User profile information goes here.</p>
</div>
<div id="Settings" class="tabcontent">
<h3>Settings</h3>
<p>User settings appear here.</p>
</div>
<div id="Messages" class="tabcontent">
<h3>Messages</h3>
<p>Inbox and notifications.</p>
</div>
<script>
function openTab(tabName) {
var contents = [Link]("tabcontent");
for (let c of contents) [Link] = "none";
[Link](tabName).[Link] = "block";
</script>
</body>
</html>
4. Hamburger Menu (Mobile Navigation Pattern)
Commonly used in mobile or compact interfaces.
HTML + CSS + JS Example
<!DOCTYPE html>
<html>
<head>
<title>Hamburger Menu Example</title>
<style>
body { font-family: Arial; margin:0; }
.menu-icon {
background-color: #333;
padding: 15px;
color: white;
font-size: 18px;
cursor: pointer;
.nav-links {
display: none;
background: #444;
padding: 10px;
.nav-links a {
color: white;
display: block;
padding: 8px;
text-decoration: none;
</style>
</head>
<body>
<div class="menu-icon" onclick="toggleMenu()">☰ Menu</div>
<div class="nav-links" id="nav">
<a href="#">Dashboard</a>
<a href="#">Reports</a>
<a href="#">Settings</a>
</div>
<script>
function toggleMenu() {
var nav = [Link]("nav");
[Link] = [Link] === "block" ? "none" : "block";
</script>
</body>
</html>
⭐ 1. Global Navigation (Top Menu Bar)
📌 What it is:
A navigation bar seen on every page. Helps the user move between main sections.
✔ Example Code
<nav style="background:#0066cc; padding:15px;">
<a href="#home" style="color:white; margin-right:20px;">Home</a>
<a href="#about" style="color:white; margin-right:20px;">About</a>
<a href="#services" style="color:white; margin-right:20px;">Services</a>
<a href="#contact" style="color:white;">Contact</a>
</nav>
⭐ 2. Breadcrumb Navigation
📌 What it is:
Shows user location in a hierarchy. Common in e-commerce and learning sites.
✔ Example Code
<div style="padding:10px; background:#f1f1f1;">
Home > Category > Laptops > Dell Inspiron
</div>
⭐ 3. Tab Navigation
📌 What it is:
Switches between different content without leaving the page.
✔ Example Code
<div>
<button onclick="showTab('profile')">Profile</button>
<button onclick="showTab('settings')">Settings</button>
</div>
<div id="profile">This is Profile content</div>
<div id="settings" style="display:none;">This is Settings content</div>
<script>
function showTab(tab){
[Link]("profile").[Link] = "none";
[Link]("settings").[Link] = "none";
[Link](tab).[Link] = "block";
</script>
⭐ 4. Hamburger Menu (Mobile Navigation)
📌 What it is:
Collapsible navigation, used on mobile screens.
✔ Example Code
<div onclick="menu()" style="background:black; color:white; padding:12px;
cursor:pointer;">
☰ Menu
</div>
<div id="nav" style="display:none;">
<a href="#">Dashboard</a><br>
<a href="#">Reports</a><br>
<a href="#">Settings</a>
</div>
<script>
function menu(){
let n = [Link]("nav");
[Link] = [Link] === "block" ? "none" : "block";
</script>
⭐ 5. Sidebar Navigation
📌 What it is:
Vertical navigation usually on left side, common in dashboards.
✔ Example Code
<div style="width:200px; background:#333; height:100vh; padding:10px;">
<a href="#" style="color:white; display:block; padding:10px;">Home</a>
<a href="#" style="color:white; display:block; padding:10px;">Analytics</a>
<a href="#" style="color:white; display:block; padding:10px;">Settings</a>
</div>
⭐ 6. Card-Based Navigation
📌 What it is:
Users navigate by clicking cards or tiles.
✔ Example Code
<div style="display:flex; gap:20px;">
<div style="border:1px solid #ccc; padding:20px; width:150px;">
<h3>Profile</h3>
</div>
<div style="border:1px solid #ccc; padding:20px; width:150px;">
<h3>Messages</h3>
</div>
<div style="border:1px solid #ccc; padding:20px; width:150px;">
<h3>Settings</h3>
</div>
</div>
⭐ 7. Step-by-Step Navigation (Wizard)
📌 What it is:
Used in forms, setup processes, registration, checkout.
✔ Example Code
<div>Step 1 → Step 2 → Step 3</div>
<p>You're on Step 1: Enter Personal Details</p>
⭐ 8. Mega Menu Navigation
📌 What it is:
Big dropdown menu with grouped categories (like Amazon or Walmart).
✔ Example Code (simple)
<div style="background:#0066cc; padding:15px; color:white;">
Categories
<div style="background:white; color:black; padding:10px; display:block;">
<strong>Electronics</strong><br> Mobiles, Laptops, Cameras<br><br>
<strong>Fashion</strong><br> Men, Women, Kids
</div>
</div>