Do not miss this exclusive book on Binary Tree Problems. Get it now for free.

HTML, or Hypertext Markup Language, is the standard language used to create web pages and web applications. HTML provides a set of markup tags and attributes that define the structure and content of a web page. By using HTML, developers can create text, images, videos, forms, and other media, and define their layout and presentation on the web.

Learning HTML is a crucial first step for anyone interested in web development, as it forms the foundation upon which the rest of the web technologies, such as CSS and JavaScript, are built. With HTML, you can create basic static websites, as well as more complex dynamic web applications.

This HTML cheat sheet at OpenGenus provides a comprehensive list of all the essential HTML tags and their attributes, making it an excellent resource for both beginners and experienced developers. The cheat sheet covers everything from the basics, such as headings, paragraphs, and lists, to more advanced topics, such as tables, forms, and multimedia.

To give you an idea of what working with HTML looks like, here's an example of how to create a basic web page:

<!DOCTYPE html>
<html>
<head>
	<title>My First Web Page</title>
</head>
<body>
	<h1>Welcome to My First Web Page</h1>
	<p>This is the content of my web page.</p>
</body>
</html>

This HTML code creates a simple web page with a heading and a paragraph of text.

If you are a beignner to HTML you would love to hear that if you place the above text in a notepad file - .txt and save it as name.html you just now created a web page. try opening the file using a browser, just double click it. Here you have it, your first Webpage!

Whether you're a beginner or an experienced developer, mastering HTML is an essential part of creating successful web projects. So, let's dive into the world of HTML and explore all the powerful tools it has to offer!

Format

Doctype Tag

declares the document type for browsers

<!DOCTYPE html>

html Tag

prime tag to start writing html file code

<html>contains all data and tags of the html file</html>

Head Tag

Container for metadata

<head>Head text</head>

example:

Head Text

Title Tag

The title of your project - present inside Head tag

<title>title text</title>

Body Tag

Container for data and context

<body>body text</body>

example:

body Text

meta Tag

specify the character set, page description, keywords, author of the document, and viewport settings for SEO

<meta />

example:

link Tag

link to external style sheets and files

<link rel="stylesheet" href="" />

example:

text

style Tag

used to define style information for a single document - inline css

<style>/*CSS commands*/</style>

HTML Semantics

header Tag

Specifies a header for a document or section

<header>header text</header>

main Tag

Specifies the main content of a document

<main>contents</main>

footer Tag

Defines a footer for a document or section

<footer>footer text</footer>

article Tag

Defines independent, self-contained content

<article>article context</article>

navigation Tag

Defines navigation links

<nav><a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a></nav>

section Tag

Defines a section in a document

<section>section context</section>

aside Tag

Defines content aside from the page content

<aside>aside context</aside>

figure Tag

Specifies self-contained content - Embeds annotated images, illustrations, photos, code, etc.

<figure></figure>

figure Tag

For adding a caption/annotation to the figure tag

<figcaption></figcaption>

picture tag

Responsive image insertion,allows developers to provide different images for different contexts.

<picture><source></source></picture>

Image Tag

just like picture tag it ios used to add images

You can add image if it is stored in your working space like this:
```html
<img src="img_girl.jpg" width="400" height="400" />

Or you can add image directly from your browser like this:

<img
  src="https://some-website-URL/opengenus.jpg"
  width="400"
  height="400"
/>

SVG

Container for SVG graphics

<svg src=""></svg>

video tag

For embedding videos into a website.

<video poster=" " autoplay loop controls ><source></source></video>

poster is the path to an image that’s displayed before the video plays.

example:

<video controls src="movie.mp4" type="video/mp4">Video type not supported by this browser!</video>

audio tag

For embedding audio into a website.

<audio><source></source></audio>

source tag

used to add source location in picture, audio or video tags.

<source></source>

Anchor

Link to url/a section of webpage/

<a href="url">link text</a> 
<a href="#yourSection">link text</a>

to open as a new tab:

<a href="url" target="_blanl">link text</a>

Headings

Heading 1 - strongest

<h1>heading1</h1>

example:

heading1

Heading 2

<h2>heading2</h2>

example:

heading2

Heading 3

<h3>heading3</h3>

example:

heading3

Heading 4

<h4>heading4</h4>

example:

heading4

Heading 5

<h5>heading5</h5>

example:

heading5

Heading 6

<h6>heading6</h6>

example:

heading6

Font

emphasize

<em> emphaize </em>

examples: emphaize

italic

<i> italics </i>

examples: italics

bold

<b> bold </b>

examples: bold

underlined

<u> underlined </u>

examples: underlined

strong

<strong> strong </strong>

examples: strong

small

<small>small</small>

examples: small

strikethrough

<strike> striked text </strike>

examples: ~~striked text~~

Break

used to break to the next line

<br />

Horizontal Ruler

used to add a horizontal ray as a devidor

<hr />

Form

Forms Tag

container to create HTML forms

<form action="" method="" target=""></form>

inputs Tag

defines input control - depending on the attribute 'type' (covered below)

<input type="" />

Label

defines a label for a form element, according to 'for' attribute

<label for=""></label>

fieldset

group related elements in a form

<fieldset></fieldset>

legend

defines caption for fieldset tag

<legend></legend>

datalist

specifies list of pre-defined options for an input tag <output></output> used to represent result of a calculation (for using this tag, you will have to use oninput attribute within form tag)

<datalist><option value="">..</option></datalist>

optgroups

used to group related options

<optgroup></optgroup>

Inputs

Text input

Defines single line text input field

<input type="text" />

Text input

defines a multiple line input field

<textarea rows="" cols=""></textarea>

number input

defines numeric input field

<input type="number" />

Password - Protected input

Defines password field

<input type="password" />

defines dropdown list in the form OR defines an option in the dropdown list

<select></select> 
OR
<option value=""></option>

Button

Defines a clickable button

<button></button>

Checkbox input

Defines a checkbox

<input type="checkbox" />

radio input

defines a radio button

<input type="radio" />

slider input

slider control

<input type="range" />

color input

used for input fields that should contain a color

<input type="color" />

Date input

input field should contain date

<input type="date" />

Month input

select month and year

<input type="month" />

week input

select week and year

<input type="week" />

time input

select time(without timezone)

<input type="time" />

Email input

email type input field

<input type="email" />

telephone no. input

defines telephone number field

<input type="tel" />

link input

url address type input field

<input type="url" />

file input

defines file select field and browse button

<input type="file" />

image input

upload image

<input type="image" />

search bar input

define search field

<input type="search" />

reset input

defines a reset button that will reset all form values to their default values

<input type="reset" />

submit input

defines button for submitting form data

<input type="submit" />

Table

Table elements

used to create a tabular data format

<table></table> - Define a table

<tr></tr> - Define a table row

<th></th> - Define a table heading

<td></td> - Define a table data

Table implementation

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Febuary</td>
    <td>$200</td>
  </tr>
</table>

example:

Month	Savings
January	$100
Febuary	$200

Lists

List elements

<ul></ul> - Defines an unordered list

<ol></ol> - Defines an ordered list

<li></li> - Defines a list item

<dl></dl> - Defines a description list

<dt></dt> - Defines a term in a description list

<dd></dd> - Describes the term in a description list

Unordered List

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

examples:

Item 1
Item 2
Item 3

Ordered List

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

examples:

Item 1
Item 2
Item 3

Scripting Tags

Canvas Tag

Used with either the canvas scripting API or the WebGL API to draw graphics and animations.

<canvas></canvas>

noscript tag

Defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.

<noscript></noscript>

Bonus:

Emojis

<p style="font-size:48px">&#128512; &#128516; &#128525; &#128151;</p>

example:

😀 😄 😍 💗

With this article at OpenGenus, you must have a strong idea of different HTML tags.

Format

Doctype Tag

html Tag

Head Tag

Title Tag

Body Tag

meta Tag

link Tag

style Tag

HTML Semantics

header Tag

main Tag

footer Tag

article Tag

navigation Tag

section Tag

aside Tag

figure Tag

figure Tag

picture tag

Image Tag

SVG

video tag

audio tag

source tag

Anchor

Headings

Heading 1 - strongest

heading1

Heading 2

heading2

Heading 3

heading3

Heading 4

heading4

Heading 5

heading5

Heading 6

heading6

Font

emphasize

italic

bold

underlined

strong

small

strikethrough

Break

Horizontal Ruler

Form

Forms Tag

inputs Tag

Label

fieldset

legend

datalist

optgroups

Inputs

Text input

Text input

number input

Password - Protected input

Dropdown

Button

Checkbox input

radio input

slider input

color input

Date input

Month input

week input

time input

Email input

telephone no. input

link input

file input

image input

search bar input

reset input

submit input