Modern Web Development | CSS Animations, UI/UX And JavaScript

All 115+ HTML Tags List (A-Z) | The Ultimate 2026 Master Guide

SCROLL TO DISCOVER

115+ HTML
ELEMENTS

By FAMOUSCODE.DEV

<!DOCTYPE>

Document Type

<html>

Root element

<head>

Metadata

<title>

Page Title

<body>

Visible content

<link>

Resource link

<meta>

Meta info

<style>

CSS styling

JS script

No-JS backup

<base>

Base URL

<div>

Generic div

<span>

Inline wrap

Top section

Bottom section

<main>

Main content

Page section

Article post

<aside>

Sidebar

<nav>

Nav links

Headings

<p>

Paragraph

<br>

Line break

<hr>

Horizontal rule

<a>

Hyperlink

<img>

Image

<audio>

Sound file

<video>

Video player

Media source

<track>

Media track

<ul>

Bullet list

<ol>

Numbered list

<li>

List item

<dl>

Desc. list

<dt>

Desc. term

<dd>

Desc. detail

<table>

Table box

<tr>

Table row

<td>

Table data

<th>

Table head

<thead>

Table header

<tbody>

Table body

<tfoot>

Table footer

Table caption

<form>

User form

<input>

Input field

Text area

Button click

Dropdown

Select option

<label>

Input label

Form group

Group title

Input list

Result

Drawing area

<svg>

Vector img

<math>

Math formula

Web frame

<embed>

External app

External obj

<param>

Obj param

Expand block

Block title

Modal box

HTML fragment

<slot>

Web component

Bold text

<em>

Italic text

Block quote

<q>

Short quote

<abbr>

Short form

Contact info

<cite>

Work cite

<code>

Code snip

<pre>

Pre-format

<kbd>

Key input

<samp>

Sample output

<var>

Variable

<mark>

Highlight

<ruby>

Ruby annot.

<rt>

Ruby text

<rp>

Ruby paren.

<bdi>

Bi-di isol.

<bdo>

Bi-di over.

<time>

Date/Time

<data>

Machine value

<wbr>

Word break

<small>

Fine print

<s>

Strike-thru

<u>

Underline

<ins>

Inserted

<del>

Deleted

<sub>

Subscript

<sup>

Superscript

Progress bar

<meter>

Gauge

Media fig

Fig caption

Resp. images

<area>

Map area

<map>

Image map

<col>

Table col

Col group

<dfn>

Def. term

Head group

Search area

Web portal

Moving text

Centering

<font>

Font style

<big>

Large text

Old strike

<tt>

Teletype

Old abbr.

Create Password Toggle Button using HTML CSS | Show/Hide Password Input

Modern Password Show/Hide Toggle | HTML and CSS Tutorial - FAMOUSCODE.DEV Modern Password Show/Hide Toggle (HTML & CSS) Boost your login form UX with this simple yet powerful visibility toggle component. ✨ Live Preview FAMOUSCODE Show Password 💻 Full Source Code Copy the production-ready code for your next project. Copy Code Password Toggle - FamousCode FAMOUSCODE Show Password 🔍 How it Works? The logic is simple but effective. We use a JavaScript event listener to detect changes on the checkbox. When the state is checked , we dynamically change the input's type attribute from password to text . This reveals the characters to the user, ensuring they've typed the correct credentials. ...

3D Social Media Icons Hover Effect using HTML CSS

Premium 3D Social Media Icons Hover Effect | HTML And CSS - FAMOUSCODE.DEV UI/UX DESIGN 3D Social Media Icons Hover Effect Create premium 3D social icons with smooth isometric animation. 🖼️ Visual Preview 💻 Complete Source Code Copy Full Code 📖 Technical Explanation In this project, we utilize the CSS Transform property combined with perspective to create a depth effect. The 3D walls are created using ::before and ::after pseudo-elements, which are skewed to match the isometric angle of the main icon box. Want more premium UI code? Follow @famouscode.dev Article curated by Mohd Rihan

How to Add a Modern Reading Progress Bar to Blogger (HTML & CSS)

Custom Scroll Progress Box | FAMOUSCODE.DEV UI Architecture Scroll-Sync Progress Container Enhance your user interface by syncing scroll position with a sticky progress indicator. Interactive Preview Scroll down to see the magic... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Neque porro quisquam est, qui d...

HTML Popover Modal – No JavaScript (2026) | Live Preview & VS Code Style

The Future of Modals: HTML Popover API Eliminate JavaScript bloat. Build ultra-fast, accessible, and native popups using the latest HTML5 standards . 🚀 Performance: 100/100 🔥 No JS Required What is the HTML Popover API? In 2026, web performance is everything. The HTML Popover API allows developers to create UI elements like modals, tooltips, and menus that float above the rest of the page content without the need for complex JavaScript or Z-index hacks. By using the popover attribute, the browser automatically places the element in the "Top Layer," ensuring it's never cut off by parent containers or hidden behind other elements. ✨ Experience the Native Modal Open Modal ...

Ultimate Free AI Tools Directory 2026 | Best AI Websites & Tools List

Ultimate Free AI Tools Directory 2026 Ultimate Free AI Tools Directory 2026 The biggest collection of free AI tools for coding, image generation, video editing, voice cloning, productivity, automation, design, music creation and more. Perfect for developers, creators, students, bloggers and businesses. Best Free AI Chatbots ChatGPT Popular AI chatbot for writing, coding and learning. Visit Gemini Google AI assistant with multimodal features. Visit Claude AI Excellent for long conversations and documents. Visit Meta AI Fast free AI assistant by Meta. Visit Copilot Microsoft AI assistant with web access. Visit Perplexity AI AI-powered search engine with sources. Visit Poe Access multiple AI models in one platform. Visit You.com AI search and productivity assistant. Visit Best Free AI Coding Tools Lovable Create full-stack apps with AI prompts. Visit Bol...

How to Create Pure CSS Dark Mode Toggle (No JavaScript)

Modern Frontend Tutorial How to Build a Pure CSS Dark Mode Toggle (No JavaScript) Maximize performance by leveraging the native power of the CSS :has() selector. In 2026, web performance is the top ranking factor on Google. Heavy JavaScript theme switchers can slow down your site and cause layout shifts. At FAMOUSCODE.DEV , we believe in lightweight solutions. Today, we will use the breakthrough :has() selector to create a flicker-free Dark Mode toggle. 1. Live Interactive Demo Try It Out 2. The Complete Source Code Copy the code below to implement a production-ready dark mode on your blog or website. index.html Copy Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport...

How to Create a Modern Toggle Navigation Menu with Pure HTML & CSS

Full Project Code Responsive Toggle Navigation Menu Copy and paste this complete code into your project for a professional floating menu. Home About Contact Click the icon to test the toggle complete-source-code.html Copy Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Toggle Menu - FamousCode</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } body { background: #f0f2f5; display: flex; justify-content: center; padding-top: 100px; } .navbar { position: relative; } .toggle-btn { background: #fff; border: 1px solid #ddd; width: 50px; height: 50px; border-radius: 10px; cursor: ...

Pure CSS Form Validation using :has() Selector (2026 Guide)

Advanced Pure CSS Form Validation Revolutionize your Web UI with the power of :has() and :invalid selectors. No JavaScript required! Why Pure CSS Validation is Trending in 2026 Web performance is the number one ranking factor today. By eliminating heavy JavaScript for simple tasks like form validation, you significantly reduce the First Input Delay (FID) and improve your site's SEO score. The :has() selector is a game-changer, allowing us to style parent elements based on input states effortlessly. ⚡ Lightning Fast Instant validation feedback without waiting for scripts to load. 🔒 Secure & Reliable Built-in browser logic ensures consistent behavior across modern platforms. 📱 Mobile Optimized Perfect fo...

Glassmorphism Dashboard UI Free Code (HTML CSS JS) | Viral UI Design 2026

Glassmorphism Dashboard UI Free Code (HTML CSS JS) | Viral UI Design 2026 🔥 Trending UI 2026 Glassmorphism Dashboard UI Download modern dashboard UI with dark mode, sidebar navigation and smooth animations using HTML CSS & JavaScript. 🚀 Download Source Code Glassmorphism Dashboard UI Free Code using HTML CSS JavaScript. This modern UI design gives your website a premium look with blur effects and transparency. This dashboard includes dark mode, sidebar navigation, and responsive layout. It is perfect for admin panels, portfolios, and modern web applications. ✨ Features Modern Glassmorphism Design Dark Mode Support Sidebar Navigation Responsive Layout Smooth UI Experience If you are learning web development or want to build a professional UI, this project is perfect for you.

Create a Custom Right-Click Context Menu: Modern HTML & CSS Tutorial

UI Masterclass Custom Right-Click Context Menu Replace the boring browser menu with a premium, animated custom menu using simple CSS. Right-Click anywhere inside this box! ✨ Refresh Page 📂 View Source 🔒 Close Menu custom-menu.html Copy Code  <div id="container" style="height: 100vh;"> <ul id="menu" style="display: none; position: absolute;"> <li>Refresh</li> <li>Copy</li> </ul> </div> <script> const menu = document.getElementById('menu'); // 1. Detect Right Click window.addEventListener('contextmenu', (e) => { e.preventDefault(); // Stop default menu menu.style.display = 'block'; menu.style.left = e.pageX + 'px'; menu.style.top = e.pageY + 'px';...

Famouscode dev

Search This Blog