HTML Common Elements List

Document Structure

<html>: Represents the root element of an HTML document.
<head>: Contains metadata about the document.
<title>: Sets the title of the webpage, displayed in the browser's title bar or tab.
<meta>: Provides metadata information about the document, such as character encoding and authorship.
<link>: Links to external resources like stylesheets and icons.
<style>: Contains internal CSS styles for the document.
<script>: Embeds or links to JavaScript code.
<base>: Specifies the base URL for relative URLs within the document.

Content Structure:

<body>: Contains the main content of the webpage.
<h1> to <h6>: Headings, with <h1> being the highest level and <h6> the lowest.
<p>: Defines a paragraph.
<br>: Creates a line break.
<hr>: Represents a thematic break or horizontal rule.
<div>: A generic container for grouping content.
<span>: Inline container for styling or scripting purposes.
<blockquote>: Indicates a block of quoted text.
<pre>: Renders preformatted text.
<code>: Represents a snippet of code within text.
<em>: Emphasizes text (usually italic).
<strong>: Indicates strong importance (usually bold).
<mark>: Highlights text with a specific meaning or context.
<small>: Makes text appear smaller.
<sub>: Specifies subscript text.
<sup>: Specifies superscript text.

Lists

<ul>: Defines an unordered (bulleted) list.
<ol>: Defines an ordered (numbered) list.
<li>: Represents a list item within <ul> or <ol>.
<dl>: Defines a description list.
<dt>: Specifies a term in a description list.
<dd>: Provides the description for a term in a description list.

Links and Anchors

<a>: Creates hyperlinks.
<link>: Defines a hyperlink relation.

Images and Media

<img>: Embeds images.
<audio>: Embeds audio content.
<video>: Embeds video content.
<figure>: Contains media elements and captions.
<figcaption>: Provides a caption for a <figure>.

Tables

<table>: Defines a table.
<thead>, <tbody>, <tfoot>: Groups table header, body, and footer content.
<tr>: Represents a table row.
<th>: Defines a table header cell.
<td>: Specifies a table data cell.
<colgroup>: Groups columns in a table.
<col>: Specifies column properties.

Forms

<form>: Contains form elements.
<input>: Represents various input types (text, password, radio, checkbox, etc.).
<button>: Defines a clickable button.
<textarea>: Specifies a multi-line text input area.
<fieldset>: Groups related form controls.
<legend>: Provides a caption for a <fieldset>.
<optgroup>: Groups related <option> elements within a <select>.

Semantic Elements

<article>: Represents a self-contained composition.
<section>: Defines a thematic grouping within a document.
<header>: Contains introductory content or a set of navigational links.
<footer>: Represents the footer of a document or a section.
<aside>: Contains content that is tangentially related to the content around it.
<main>: Specifies the main content of the document.
<nav>: Marks a section with navigation links.
<time>: Represents a specific time or date.

HTML Attributes

Every HTML element can have attributes. Attributes give extra information about elements. They are always mentioned in the starting tag and typically come in pairs, like: name="value".

Let's see some examples

class: Specifies one or more class names for an element (used with CSS).
id: Specifies a unique ID for an element.
src: Specifies the source URL of a resource, such as an image or script.
alt: Provides alternative text for an image, to be displayed if the image cannot be loaded.
href: Specifies the URL of a linked resource, such as a hyperlink or stylesheet.
style: Allows inline CSS styles to be applied to an element.
width: Sets the width of an element, often used with images or tables.
placeholder: Specifies a short hint that describes the expected value of an input field.

If you want to look at the more info about these html elements you can visit the below link.

1. MDN web docs 2. Geek for Geeks

<h1 id="main-heading" class="highlight">Welcome to my Website!</h1>
<p>This is a simple example demonstrating the use of HTML attributes.</p>
<img src="example-image.jpg" alt="An example image" width="300" height="200">
<a href="https://www.example.com" target="_blank" style="text-decoration: none;">Visit Example Website</a>
<input type="text" placeholder="Enter your name" disabled>

Previous Next