Scribd
Upload
10 views

A Comprehensive Chart of HTML Tags

Uploaded by

makuvisemichael43
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

A Comprehensive Chart of HTML Tags

Uploaded by

makuvisemichael43
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

A Comprehensive Chart of HTML Tags

Basic Structure Tags

Tag Description Example

<html> Defines the root of an HTML <html></html>


document.

<head> Contains meta-information about the <head><title>My


HTML document, such as title, style, Website</title></head>
and scripts.

<title> Specifies the title of the document, <title>My


displayed in the browser's tab. Website</title>

<body> Contains the visible content of the <body><h1>Hello,


HTML document. world!</h1></body>

Text Formatting Tags

Tag Description Example

<h1> to Defines headings of <h1>Heading 1</h1>


<h6> different levels.

<p> Defines a paragraph. <p>This is a paragraph.</p>

<br> Inserts a line break. <br>

<b> Makes text bold. <b>Bold text</b>

<i> Makes text italic. <i>Italic text</i>

<u> Underlines text. <u>Underlined text</u>


<span> Defines an inline element <span style="color:
for styling. red;">Red text</span>

List Tags

Tag Description Example

<ul> Defines an unordered <ul><li>Item 1</li><li>Item


list. 2</li></ul>

<ol> Defines an ordered list. <ol><li>Item 1</li><li>Item


2</li></ol>

<li> Defines a list item. <li>Item 1</li>

Table Tags

Tag Description Example

<table> Defines a table. <table><tr><td>Data</td></tr></t


able>

<tr> Defines a table row. <tr><td>Data</td></tr>

<td> Defines a table data cell. <td>Data</td>

<th> Defines a table header <th>Header</th>


cell.

Image and Video Tags


Tag Description Example

<img> Defines an <img src="image.jpg" alt="Image">


image.

<video> Defines a <video controls><source


video. src="video.mp4"
type="video/mp4"></video>

Link Tags

Tag Description Example

<a> Defines a hyperlink. <a


href="https://example.com">Link</a>

Form Tags

Tag Description Example

<form> Defines an HTML form <form action="/submit"


for collecting user method="post">
input.

<input> Defines an input field. <input type="text"


name="username">

<label> Defines a label for an <label


<input> element. for="username">Username:</labe
l>

<button> Defines a button. <button


type="submit">Submit</button>
<select> Defines a drop-down <select><option>Option
list. 1</option></select>

<textarea> Defines a multi-line <textarea></textarea>


text area.

Other Tags

Tag Description Example

<div> Defines a division or section <div>This is a


in an HTML document. division.</div>

<span> Defines an inline element for <span style="color:


styling. red;">Red text</span>

<header> Defines a header for a <header><h1>My


document or section. Website</h1></header>

<nav> Defines a navigation section. <nav><ul><li><a


href="/">Home</a></li></ul
></nav>

<section> Defines a section in a <section><h2>About


document. Us</h2><p>...</p></section
>

<article> Defines an independent item <article><h2>Article


of content, like a blog post or Title</h2><p>...</p></arti
article. cle>

<aside> Defines content aside from <aside><h2>Sidebar</h2><p>


the main content. ...</p></aside>

<footer> Defines a footer for a <footer>&copy; 2023 My


document or section. Website</footer>
A Comprehensive Chart of HTML Tags and Attributes

Basic Structure Tags

Tag Description Attributes Example

<html> Defines the root of an lang <html lang="en">


HTML document. (language
code)

<head> Contains charset <head><meta


meta-information about (character charset="UTF-8"></
the HTML document. encoding) head>

<title> Specifies the title of None <title>My


the document, Website</title>
displayed in the
browser's tab.

<body> Contains the visible None <body><h1>Hello,


content of the HTML world!</h1></body>
document.

Text Formatting Tags

Tag Description Attributes Example

<h1> to Defines align (alignment), <h1>Heading


<h6> headings of style (inline styles) 1</h1>
different levels.

<p> Defines a align (alignment), <p>This is a


paragraph. style (inline styles) paragraph.</p>
<br> Inserts a line None <br>
break.

<b> Makes text bold. style (inline styles) <b>Bold text</b>

<i> Makes text italic. style (inline styles) <i>Italic


text</i>

<u> Underlines text. style (inline styles) <u>Underlined


text</u>

<span> Defines an inline style (inline styles), <span


element for class (class name), style="color:
styling. id (ID attribute) red;">Red
text</span>

List Tags

Tag Description Attributes Example

<ul> Defines an type (list item type), <ul


unordered list. style (inline styles) type="circle"><li>I
tem 1</li></ul>

<ol> Defines an type (list item type), <ol type="A"


ordered list. start (starting start="3"><li>Item

number), style (inline 1</li></ol>

styles)

<li> Defines a list value (list item value), <li value="2">Item


item. style (inline styles) 2</li>

Table Tags
Tag Description Attributes Example

<table> Defines a border, <table><tr><th>Head


table. cellspacing, er</th></tr><tr><td

cellpadding, >Data</td></tr></ta
ble>
style, width,
height

<tr> Defines a style (inline styles) <tr><td>Data</td></


table row. tr>

<td> Defines a colspan, rowspan, <td>Data</td>


table data style, align,
cell. valign

<th> Defines a colspan, rowspan, <th>Header</th>


table header style, align,
cell. valign

Image and Video Tags

Tag Description Attributes Example

<img> Defines an src (image source), <img


image. alt (alternative text), src="image.jpg"

width, height, alt="Image">

style

<video> Defines a src (video source), <video


video. controls, width, controls><source

height, autoplay, src="video.mp4"


type="video/mp4"></
loop, muted,
video>
poster (image to
display before video
starts)

Link Tags

Tag Descriptio Attributes Example


n

<a> Defines a href (link <a


hyperlink. destination) href="https://example.com">Link<
, target /a>

(target
window),
title
(tooltip
text),
style

Form Tags

Tag Descriptio Attributes Example


n

<form> Defines an action (URL <form action="/submit"


HTML form to submit form method="post">
for collecting data), method
user input. (HTTP
method), name,
id
<input> Defines an type (input <input type="text"
input field. type), name, name="username"

value, id, placeholder="Username">

class,
placeholder,
required,
disabled,
readonly

<label> Defines a for (ID of the <label


label for an corresponding for="username">Username:</l
<input> <input> abel>
element. element)

<button> Defines a type (button <button


button. type), value, type="submit">Submit</butto

name, id, n>

class,
disabled

<select> Defines a name, id, <select><option>Option


drop-down multiple 1</option></select>
list. (allow multiple
selections),
disabled

<textarea> Defines a name, id, <textarea></textarea>


multi-line rows, cols,
text area. placeholder,
disabled

Other Tags

Tag Description Attributes Example


<div> Defines a division style, <div
or section in an class, id, style="background-col
HTML document. align or: #f0f0f0;">This is
a division.</div>

<span> Defines an inline style, <span style="color:


element for class, id red;">Red text</span>
styling.

<header> Defines a header style, <header><h1>My


for a document or class, id Website</h1></header>
section.

<nav> Defines a style, <nav><ul><li><a


navigation class, id href="/">Home</a></li
section. ></ul></nav>

<section> Defines a section style, <section><h2>About


in a document. class, id Us</h2><p>...</p></se
ction>

<article> Defines an style, <article><h2>Article


independent item class, id Title</h2><p>...</p><
of content, like a /article>
blog post or
article.

<aside> Defines content style, <aside><h2>Sidebar</h


aside from the class, id 2><p>...</p></aside>
main content.

<footer> Defines a footer style, <footer>&copy; 2023


for a document or class, id My Website</footer>
section.

You might also like