Basic HTML code exampling

1. Document Structure Tags

<!DOCTYPE html> : Declares the HTML document type (usually HTML5) to the browser.

<html> : The root element of an HTML document; all other elements are nested inside.

<head> : Contains metadata for the document like title, links to stylesheets, and scripts.

<title> : Sets the title of the web page shown on the browser tab.

<body> : Contains all the visible content on the web page, such as text, images, and links. tab.

2. Headings and Text Tags

<h1> : to <h6>: Heading tags, where <h1> is the highest (main heading) and <h6> is the lowest.

<p> : Defines a paragraph of text.

<br> : Inserts a line break within text.

<hr> : Adds a horizontal line for section separation.

3. Formatting Tags

<strong> : Highlights important text, often rendered in bold.

<em> : Emphasizes text, usually rendered in italics

<b> :Makes text bold (without semantic meaning).

<i> :Italicizes text (without semantic meaning).

<u> : Underlines text (not commonly used in modern web design).

<mark> : Highlights text with a background color.

4. List Tags

<ul> :Creates an unordered (bulleted) list.

<ol> : Createoptionss an ordered (numbered) list.

<li> :Represents each item in a list, used within <ul> and <ol> tags.

<dl> :Defines a description list (often used for terms and definitions).

<dt> : Defines a term in a description list.

<dd> : Defines the description for the term in a description list.

5. Link and Media Tags

<a href="URL"> : Anchor tag, used to create a hyperlink. The href attribute specifies the link's destination.

<img src="URL" alt="Description"> : Embeds an image on the page. src specifies the image's location, and alt provides a description for accessibility.

<video src="URL" controls> : Embeds a video player. controls enables play, pause, and volume buttons.

<audio src="URL" controls> : Embeds an audio player.

<iframe src="URL"> :Embeds another webpage or video into the current document, often used for embedding YouTube videos.

6. Table Tags

<table> : Creates a table to display data in rows and columns.

<tr> : Table row, used within <table> to create rows.

<th> : Table header cell, typically bold and centered.

<td> :Table data cell, represents standard cells within a row.

<coption> : Adds a caption to a table, usually displayed at the top.

7. Form Tags

<form action="URL" method="POST/GET"> : Starts a form that collects user input. action defines where the data will be sent, and method defines how.

<input type="text"> : Basic input field for single-line text.

<input type="email"> : Input field for email addresses, with built-in validation.

<input type="password"> : Input field that hides text for passwords.

<textarea> : Multi-line text input.

<button> : Clickable button, often used for form submission.

<select> : Dropdown list.

<option > :Represents an item in a dropdown list within <select>.

<label> :Defines a label for form elements, linking to them with the for attribute.

<fieldset> : Groups related form elements.

<legend> : Adds a caption for <fieldset>.

8. Semantic and Structural Tags

<header> :Defines the header section of a page or section.

<footer> : Defines the footer section, often used for copyright, links, and information at the bottom.

<nav> :Used for navigation links, like menus.

<section> : Groups related content, creating logical sections.

<article> : Self-contained content like blog posts or news articles.

<aside> :Side content, often used for ads, sidebars, or related links.

<main> :Represents the main content of the document, unique to the page.

<div> :A generic container for grouping elements, often styled with CSS.

<span> : Inline container for styling a small part of text.

9. Metadata and Script Tags

<meta charset="UTF-8"> :Sets the character encoding of the document.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> :Sets viewport for responsive design.

<link rel="stylesheet" href="style.css"> :Links to an external CSS file.

<script src="script.js"> :Embeds or links an external JavaScript file for interactivity.

<style> :Adds CSS styling directly within the HTML document.

10. Miscellaneous Tags

<canvas> : A container for graphics, often used with JavaScript for drawing shapes or animations.

<svg> :Scalable Vector Graphics, allows for embedding vector-based images.

<details> : Creates a disclosure widget that the user can open and close.

<summary> : Provides a summary or title for the <details> element.