Scribd
Upload
7 views

A Comprehensive Chart of HTML Tags

Uploaded by

makuvisemichael43
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

A Comprehensive Chart of HTML Tags

Uploaded by

makuvisemichael43
Copyright
© © All Rights Reserved
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