Common HTML Tags
HTML (Hypertext Markup Language) is the standard markup language used to create and structure web pages. It provides a set of tags that define the different elements and components of a web page. Here are some of the most common HTML tags:
-
Basic Structure Tags:
<html>: Defines the root of an HTML document.<head>: Contains metadata about the document, such as the title, scripts, and stylesheets.<body>: Defines the document's body, which contains the visible content.
-
Heading Tags:
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>: Represent different levels of headings, with<h1>being the largest and most important.
-
Paragraph and Text Tags:
<p>: Defines a paragraph of text.<a>: Creates a hyperlink to another web page or section within the same page.<span>: Used to group inline-level elements.<strong>and<em>: Represent important and emphasized text, respectively.
-
List Tags:
<ul>(unordered list) and<ol>(ordered list): Used to create lists.<li>: Represents a list item within an unordered or ordered list.
-
Image and Media Tags:
<img>: Inserts an image into the web page.<video>and<audio>: Used to embed video and audio content, respectively.
-
Form Tags:
<form>: Defines a form for user input.<input>: Represents various types of input fields, such as text, checkbox, radio buttons, and more.<label>: Associates a label with an input field.<button>: Defines a clickable button.
-
Structural Tags:
<div>: Used to create a division or a section in the document.<header>,<nav>,<main>,<article>,<section>,<aside>,<footer>: Semantic tags that provide a clear structure and meaning to the content.
-
Meta Tags:
<meta>: Provides metadata about the web page, such as character encoding, viewport settings, and description.
Here's a Mermaid diagram that illustrates the core HTML tags and their relationships:
graph TD
HTML --> HEAD
HTML --> BODY
HEAD --> TITLE
HEAD --> STYLE
HEAD --> SCRIPT
BODY --> HEADING
BODY --> PARAGRAPH
BODY --> LIST
BODY --> IMAGE
BODY --> FORM
BODY --> STRUCTURE
HEADING --> H1
HEADING --> H2
HEADING --> H3
HEADING --> H4
HEADING --> H5
HEADING --> H6
PARAGRAPH --> P
PARAGRAPH --> A
PARAGRAPH --> SPAN
PARAGRAPH --> STRONG
PARAGRAPH --> EM
LIST --> UL
LIST --> OL
LIST --> LI
IMAGE --> IMG
FORM --> FORM
FORM --> INPUT
FORM --> LABEL
FORM --> BUTTON
STRUCTURE --> DIV
STRUCTURE --> HEADER
STRUCTURE --> NAV
STRUCTURE --> MAIN
STRUCTURE --> ARTICLE
STRUCTURE --> SECTION
STRUCTURE --> ASIDE
STRUCTURE --> FOOTER
This diagram shows the hierarchical relationship between the various HTML tags and how they can be used to structure and organize the content of a web page.
