Binary Farm

Innovating Technology Solutions for a Better Future

Semantic HTML Markups Tags

Here are all the semantic HTML elements, grouped by their general purpose:

Document Structure:
<header> - Document or section header
<main> - Main content area
<footer> - Document or section footer
<article> - Self-contained contentv <section> - Thematic grouping of content
<aside> - Sidebar content
<nav> - Navigation links
<div> - Generic container (technically not semantic but included for context)

Text Content:
<p> - Paragraph
<blockquote> - Extended quotation
<pre> - Preformatted text
<figure> - Self-contained content with optional caption
<figcaption> - Caption for figure element
<address> - Contact information
<hr> - Thematic break
<details> - Additional details
<summary> - Summary for details element

Lists:
<ul> - Unordered list
<ol> - Ordered list
<li> - List item
<dl> - Description list
<dt> - Description term
<dd> - Description details

Text-Level Semantics:
<a>c - Hyperlink
<em> - Emphasized text
<strong> - Important text
<small> - Side comments
<cite> - Citation
<q> - Short quotation
<abbr> - Abbreviation
<time> - Date/time
<code> - Computer code
<var> - Variable

The <samp> tag is used to identify text that is a sample output from a computer program, like error messages, response text, or terminal output. This helps distinguish it from regular text or user input.

Error Message: Error 404: File not found
Console Output: Hello, World!
Command Response: Directory successfully created.

The <kbd> (keyboard) tag is used to represent user keyboard input or keyboard keys in HTML. It's particularly useful when writing documentation, tutorials, or any content that needs to show keyboard shortcuts or commands.

Keyboard Shortcuts Press Ctrl + C to copy
System Commands Enter cd documents in the terminal
Gaming Controls Press W to move forward
<sub> - Subscript text
<sup> - Superscript text
<mark> - Highlighted text
<dfn> - Definition term
<ruby> - Ruby annotation
<rt> - Ruby text
<rp> - Ruby parentheses

Embedded Content:
<picture> - Container for multiple image sources
<figure> - Self-contained content
<figcaption> - Caption for figure
<audio> - Sound content
<video> - Video content
<track> - Text track for media elements
<map> - Image map
<area> - Area in image map

Tables:
<table> - Table
<caption> - Table caption
<thead> - Table header group
<tbody> - Table body
<tfoot> - Table footer group
<tr> - Table row
<th> - Table header cell
<td> - Table data cell
<col> - Table column
<colgroup> - Table column group

Forms:
<form> - Form
<fieldset> - Group of form controls
<legend> - Caption for fieldset
<label> - Label for form control
<input> - Input control
<button> - Clickable button
<select>- Selection control
<datalist> - Predefined options for input
<optgroup> - Group of options
<option> - Option in select/datalist
<textarea> - Multiline text input
<output> - Calculation result

Unlike <meter>, <progress> is specifically for showing the completion of a task, rather than a static measurement. Most browsers display it as a progress bar that fills from left to right.

Download Progress: 70%
Video Loading: 60% loaded
Task Completion: 3 of 10 tasks completed

Most browsers will display this as a gauge or progress bar with different colors based on the thresholds.

Disk Usage: 80% full
Quiz Score: 75 out of 100
Battery Level: 30%
Interactive Elements:
<details> - Disclosure widget
<summary> - Summary/caption for details
<dialog>> - Dialog box/window
<menu> - Menu list