first version:
<title>HTML Reference Guide - Elements, Tags & Attributes</title> <style> :root { /* -- Dark Theme -- */ --bg-opt1-color: #1a1a1a; /* Background color for dark mode */ --bg-color: #16161d; /* Eigenrau Eigengrau */ --bg-opt2-color: #4A4A4A; /* Charcoal Grey */ --text-color: #f0f0f0; /* General text color */ --accent-opt1-color: #7986cb; /* Accent color for highlights and icons */ --accent-color: #CBFFFA; --border-color: #333; /* Default border color */ --card-bg: var(--glass-bg); --card-border: var(--glass-border); --glass-bg: rgba(30, 30, 30, 0.6); /* Glass background effect for modals, cards */ --glass-border: #444; /* Glass border color */ --neon-blue: rgba(70, 120, 255, 0.9); /* Neon hover or accent glow */ --hover-neon-blue: rgba(70, 120, 255, 1); /* Brighter hover */ --active-neon-blue: rgba(70, 120, 255, 0.5); /* Dull active state */ --font-family: 'Inter', sans-serif; --box-shadow-glow: 0 0 15px var(--neon-blue); --modal-backdrop: rgba(0, 0, 0, 0.7); /* === Golden Ratio-Based Spacing === */
--spacing-xs: 0.618rem;
--spacing-sm: 1rem;
--spacing-md: 1.618rem;
--spacing-lg: 2.618rem;
--spacing-xl: 4.236rem;
--font-sm: 0.618rem;
--font-base: 1rem;
--font-md: 1.618rem;
--font-lg: 2.618rem;
--font-xl: 4.236rem;
}
[data-theme="light"] {
/* -- Light Theme (optional backup) -- */
--bg-color: #f0f0f0;
--easyOnEyes: #f9ecb6;
--easy-opt1: #fdfdfd; /* (253,253,253) */
--easy-opt2: #fbfbfb; /* (251,251,251) */
--easy-opt3: #f9f9f9; /* (249,249,249) */
--easy-opt4: #f6f6f6; /* (246,246,246) */
--easy-opt5: #f2f2f2; /* (242,242,242) */
--text-color: #1a1a1a;
--accent-color: #3f51b5;
--border-color: #ccc;
--card-bg: var(--glass-bg);
--card-border: var(--glass-border);
--glass-bg: rgba(220, 220, 220, 0.6);
--glass-border: #aaa;
--neon-blue: rgba(30, 50, 120, 0.9);
--hover-neon-blue: rgba(30, 50, 120, 1);
--active-neon-blue: rgba(30, 50, 120, 0.5);
--box-shadow-glow: 0 0 15px var(--neon-blue);
--modal-backdrop: rgba(0, 0, 0, 0.5);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-family);
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
transition: all 0.3s ease;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
/* Header & Navigation */
header {
background: var(--card-bg);
border-bottom: 2px solid var(--border-color);
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(10px);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-md) 0;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: var(--accent-color);
text-decoration: none;
}
.nav-links {
display: flex;
list-style: none;
gap: var(--spacing-lg);
}
.nav-links a {
color: var(--text-color);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: var(--accent-color);
}
.theme-toggle {
background: var(--accent-color);
color: var(--bg-color);
border: none;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.theme-toggle:hover {
box-shadow: var(--box-shadow-glow);
transform: translateY(-2px);
}
.mobile-menu-btn {
display: none;
background: none;
border: none;
color: var(--text-color);
font-size: 1.5rem;
cursor: pointer;
}
/* Tool Tabs */
.tool-tabs {
background: var(--bg-color);
border-bottom: 1px solid var(--border-color);
overflow-x: auto;
}
.tabs-container {
display: flex;
gap: 2px;
padding: 0 var(--spacing-md);
}
.tab {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-bottom: none;
border-radius: 8px 8px 0 0;
padding: var(--spacing-sm) var(--spacing-md);
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
position: relative;
top: 1px;
}
.tab.active {
background: var(--bg-color);
color: var(--accent-color);
border-color: var(--accent-color);
}
.tab:hover:not(.active) {
background: var(--border-color);
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, var(--card-bg), var(--bg-color));
padding: 4rem 0;
text-align: center;
border-bottom: 1px solid var(--border-color);
}
.hero h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: var(--spacing-md);
background: linear-gradient(135deg, var(--text-color), var(--accent-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto var(--spacing-lg);
opacity: 0.9;
}
.hero-cta {
display: inline-block;
background: var(--accent-color);
color: var(--bg-color);
padding: var(--spacing-md) var(--spacing-lg);
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.hero-cta:hover {
box-shadow: var(--box-shadow-glow);
transform: translateY(-3px);
}
/* Main Content */
.main-content {
padding: 3rem 0;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.content-section {
margin-bottom: 3rem;
}
.section-title {
font-size: 2rem;
font-weight: 600;
margin-bottom: var(--spacing-lg);
color: var(--accent-color);
border-bottom: 2px solid var(--border-color);
padding-bottom: var(--spacing-sm);
}
.card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 12px;
padding: var(--spacing-lg);
margin-bottom: var(--spacing-md);
transition: all 0.3s ease;
}
.card:hover {
border-color: var(--accent-color);
box-shadow: 0 4px 20px rgba(69, 162, 158, 0.1);
transform: translateY(-2px);
}
.attribute-list {
list-style: none;
display: grid;
gap: var(--spacing-sm);
}
.attribute-list li {
background: var(--bg-color);
padding: var(--spacing-md);
border-radius: 8px;
border-left: 4px solid var(--accent-color);
}
.code-example {
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: var(--spacing-md);
font-family: 'Courier New', monospace;
margin: var(--spacing-md) 0;
overflow-x: auto;
}
.tag-table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
border-radius: 8px;
overflow: hidden;
margin: var(--spacing-md) 0;
}
.tag-table th {
background: var(--accent-color);
color: var(--bg-color);
padding: var(--spacing-md);
text-align: left;
font-weight: 600;
}
.tag-table td {
padding: var(--spacing-md);
border-bottom: 1px solid var(--border-color);
}
.tag-table tr:hover {
background: var(--border-color);
}
.flowchart {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-md);
margin: var(--spacing-lg) 0;
}
.flowchart-item {
background: var(--card-bg);
border: 2px solid var(--border-color);
border-radius: 12px;
padding: var(--spacing-lg);
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
}
.flowchart-item:hover {
border-color: var(--accent-color);
box-shadow: var(--box-shadow-glow);
}
.flowchart-item h3 {
color: var(--accent-color);
margin-bottom: var(--spacing-sm);
}
/* Footer */
footer {
background: var(--card-bg);
border-top: 1px solid var(--border-color);
padding: 2rem 0;
text-align: center;
margin-top: 3rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--card-bg);
border-top: 1px solid var(--border-color);
flex-direction: column;
padding: var(--spacing-md);
}
.nav-links.active {
display: flex;
}
.mobile-menu-btn {
display: block;
}
.hero h1 {
font-size: 2rem;
}
.tabs-container {
flex-wrap: nowrap;
overflow-x: auto;
}
.container {
padding: 0 var(--spacing-sm);
}
}
@media (max-width: 480px) {
.hero {
padding: 2rem 0;
}
.hero h1 {
font-size: 1.5rem;
}
.section-title {
font-size: 1.5rem;
}
}
</style>
<div class="tool-tabs">
<div class="tabs-container container">
<div class="tab active" onclick="showTab('overview')">Overview</div>
<div class="tab" onclick="showTab('body')">Body</div>
<div class="tab" onclick="showTab('header')">Header</div>
<div class="tab" onclick="showTab('main')">Main</div>
<div class="tab" onclick="showTab('page')">Page</div>
<div class="tab" onclick="showTab('widget')">Widget</div>
<div class="tab" onclick="showTab('content')">Content</div>
<div class="tab" onclick="showTab('footer')">Footer</div>
</div>
</div>
<section class="hero">
<div class="container">
<h1>HTML References: Elements, Tags, and Attributes</h1>
<p>A complete reference for HTML elements, tags, and attributes with interactive examples and flowcharts</p>
<a href="#content" class="hero-cta">Explore HTML Guide</a>
</div>
</section>
<main class="main-content container" id="content">
<div class="tab-content active" id="overview">
<div class="content-section">
<h2 class="section-title">HTML Element Flowchart</h2>
<div class="flowchart">
<div class="flowchart-item">
<h3>Document Structure</h3>
<p>html, head, body, title, meta</p>
</div>
<div class="flowchart-item">
<h3>Text Content</h3>
<p>h1-h6, p, div, span, pre</p>
</div>
<div class="flowchart-item">
<h3>Lists</h3>
<p>ul, ol, li, dl, dt, dd</p>
</div>
<div class="flowchart-item">
<h3>Links & Media</h3>
<p>a, img, video, audio, source</p>
</div>
<div class="flowchart-item">
<h3>Tables</h3>
<p>table, tr, td, th, thead, tbody</p>
</div>
<div class="flowchart-item">
<h3>Forms</h3>
<p>form, input, textarea, select, button</p>
</div>
</div>
</div>
<div class="content-section">
<h2 class="section-title">HTML Attributes</h2>
<div class="card">
<h3>All HTML elements can have attributes</h3>
<ul class="attribute-list">
<li>The <strong>href attribute of <a></strong> specifies the URL of the page the link goes to</li>
<li>The <strong>src attribute of <img></strong> specifies the path to the image to be displayed</li>
<li>The <strong>width and height attributes</strong> of <img> provide size information for images</li>
<li>The <strong>alt attribute of <img></strong> provides an alternate text for an image</li>
<li>The <strong>style attribute</strong> is used to add styles to an element, such as color, font, size, and more</li>
<li>The <strong>lang attribute of <html></strong> declares the language of the Web page</li>
<li>The <strong>title attribute</strong> defines some extra information about an element</li>
</ul>
</div>
<div class="code-example">
<strong>Example:</strong><br>
<a href="https://google.com">Google</a><br>
<img src="image.jpg" width="300" height="500" alt="a man dressed to impress">
</div>
</div>
<div class="content-section">
<h2 class="section-title">HTML Styles</h2>
<div class="card">
<ul class="attribute-list">
<li>Use the <strong>style</strong> attribute for styling HTML elements</li>
<li>Use <strong>background-color</strong> for background color</li>
<li>Use <strong>color</strong> for text colors</li>
<li>Use <strong>font-family</strong> for text fonts</li>
<li>Use <strong>font-size</strong> for text sizes</li>
<li>Use <strong>text-align</strong> for text alignment</li>
</ul>
</div>
</div>
<div class="content-section">
<h2 class="section-title">HTML Formatting Elements</h2>
<div class="card">
<ul class="attribute-list">
<li><strong><b></strong> - Bold text</li>
<li><strong><strong></strong> - Important text</li>
<li><strong><i></strong> - Italic text</li>
<li><strong><em></strong> - Emphasized text</li>
<li><strong><mark></strong> - Marked text</li>
<li><strong><small></strong> - Smaller text</li>
<li><strong><ins></strong> - Inserted text</li>
<li><strong><sub></strong> - Subscript text</li>
<li><strong><sup></strong> - Superscript text</li>
<li><strong><del></strong> - Deleted text</li>
</ul>
</div>
<div class="card">
<h3>The <pre> tag preserves both spaces and line breaks:</h3>
<div class="code-example">
My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.
</div>
</div>
</div>
<div class="content-section">
<h2 class="section-title">HTML Tag Reference</h2>
<div class="card">
<h3>W3Schools' tag reference contains additional information about HTML elements and their attributes.</h3>
<table class="tag-table">
<thead>
<tr>
<th>Tag</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><p></td>
<td>Defines a paragraph</td>
</tr>
<tr>
<td><hr></td>
<td>Defines a thematic change in the content</td>
</tr>
<tr>
<td><br></td>
<td>Inserts a single line break</td>
</tr>
<tr>
<td><pre></td>
<td>Defines pre-formatted text</td>
</tr>
<tr>
<td><div></td>
<td>Defines a division or section</td>
</tr>
<tr>
<td><span></td>
<td>Defines an inline section</td>
</tr>
<tr>
<td><h1> - <h6></td>
<td>Defines HTML headings</td>
</tr>
<tr>
<td><a></td>
<td>Defines a hyperlink</td>
</tr>
<tr>
<td><img></td>
<td>Defines an image</td>
</tr>
<tr>
<td><ul></td>
<td>Defines an unordered list</td>
</tr>
<tr>
<td><ol></td>
<td>Defines an ordered list</td>
</tr>
<tr>
<td><li></td>
<td>Defines a list item</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-content" id="body">
<div class="content-section">
<h2 class="section-title">Body Element Structure</h2>
<div class="flowchart">
<div class="flowchart-item">
<h3><body></h3>
<p>Main content container</p>
</div>
<div class="flowchart-item">
<h3>Global Attributes</h3>
<p>class, id, style, data-*</p>
</div>
<div class="flowchart-item">
<h3>Event Handlers</h3>
<p>onload, onunload, onresize</p>
</div>
</div>
<div class="card">
<h3>Body Element Examples</h3>
<div class="code-example">
<body style="background-color: powderblue;"> <h1>Welcome to HTML</h1> <p>This is the body content.</p> </body>
<div class="tab-content" id="header">
<div class="content-section">
<h2 class="section-title">Header Elements</h2>
<div class="flowchart">
<div class="flowchart-item">
<h3><header></h3>
<p>Page or section header</p>
</div>
<div class="flowchart-item">
<h3><nav></h3>
<p>Navigation links</p>
</div>
<div class="flowchart-item">
<h3><h1> - <h6></h3>
<p>Heading levels</p>
</div>
</div>
</div>
</div>
<div class="tab-content" id="main">
<div class="content-section">
<h2 class="section-title">Main Content Elements</h2>
<div class="flowchart">
<div class="flowchart-item">
<h3><main></h3>
<p>Primary content area</p>
</div>
<div class="flowchart-item">
<h3><article></h3>
<p>Independent content</p>
</div>
<div class="flowchart-item">
<h3><section></h3>
<p>Thematic content grouping</p>
</div>
</div>
</div>
</div>
<div class="tab-content" id="page">
<div class="content-section">
<h2 class="section-title">Page Structure Elements</h2>
<div class="flowchart">
<div class="flowchart-item">
<h3><html></h3>
<p>Root element</p>
</div>
<div class="flowchart-item">
<h3><head></h3>
<p>Document metadata</p>
</div>
<div class="flowchart-item">
<h3><meta></h3>
<p>Document information</p>
</div>
</div>
</div>
</div>
<div class="tab-content" id="widget">
<div class="content-section">
<h2 class="section-title">Interactive Widgets</h2>
<div class="flowchart">
<div class="flowchart-item">
<h3><button></h3>
<p>Clickable button</p>
</div>
<div class="flowchart-item">
<h3><input></h3>
<p>Form input field</p>
</div>
<div class="flowchart-item">
<h3><select></h3>
<p>Dropdown selection</p>
</div>
</div>
</div>
</div>
<div class="tab-content" id="content">
<div class="content-section">
<h2 class="section-title">Content Elements</h2>
<div class="flowchart">
<div class="flowchart-item">
<h3><p></h3>
<p>Paragraph text</p>
</div>
<div class="flowchart-item">
<h3><blockquote></h3>
<p>Quoted content</p>
</div>
<div class="flowchart-item">
<h3><code></h3>
<p>Code snippets</p>
</div>
</div>
</div>
</div>
<div class="tab-content" id="footer">
<div class="content-section">
<h2 class="section-title">Footer Elements</h2>
<div class="flowchart">
<div class="flowchart-item">
<h3><footer></h3>
<p>Page or section footer</p>
</div>
<div class="flowchart-item">
<h3><address></h3>
<p>Contact information</p>
</div>
<div class="flowchart-item">
<h3><small></h3>
<p>Fine print text</p>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="container">
<p>© 2025 HTML Reference Guide. A comprehensive resource for web developers.</p>
</div>
</footer>
<script>
// Theme toggle functionality
function toggleTheme() {
const body = document.body;
const currentTheme = body.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
body.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
const button = document.querySelector('.theme-toggle');
button.textContent = newTheme === 'light' ? '🌙 Dark' : '☀️ Light';
}
// Initialize theme
function initTheme() {
const savedTheme = localStorage.getItem('theme') || 'dark';
document.body.setAttribute('data-theme', savedTheme);
const button = document.querySelector('.theme-toggle');
button.textContent = savedTheme === 'light' ? '🌙 Dark' : '☀️ Light';
}
// Tab functionality
function showTab(tabName) {
// Hide all tab contents
const tabContents = document.querySelectorAll('.tab-content');
tabContents.forEach(content => content.classList.remove('active'));
// Remove active class from all tabs
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => tab.classList.remove('active'));
// Show selected tab content
const selectedContent = document.getElementById(tabName);
if (selectedContent) {
selectedContent.classList.add('active');
}
// Add active class to clicked tab
event.target.classList.add('active');
}
// Mobile menu toggle
function toggleMobileMenu() {
const navLinks = document.querySelector('.nav-links');
navLinks.classList.toggle('active');
}
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Initialize the page
document.addEventListener('DOMContentLoaded', function() {
initTheme();
// Add click handlers for flowchart items
document.querySelectorAll('.flowchart-item').forEach(item => {
item.addEventListener('click', function() {
this.style.transform = 'scale(1.05)';
setTimeout(() => {
this.style.transform = 'scale(1)';
}, 200);
});
});
});
// Add some interactive features
document.querySelectorAll('.tag-table tr').forEach(row => {
row.addEventListener('click', function() {
const tag = this.cells[0]?.textContent;
if (tag && tag !== 'Tag') {
alert(`Clicked on ${tag} - In a real application, this could show more details about this HTML tag.`);
}
});
});
</script>