HTML Tutorial

HTML Practice & Useful Resources

HTML Cheatsheet

By IncludeHelp Last updated : October 14, 2024

HTML Basics

The HTML basics code contains the <html>, <head>, <meta>, <title>, and <body> tags. The following is the basic HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the Document</title>
</head>
<body>

</body>
</html>

Document Structure

The HTML document structure tags are:

<!DOCTYPE html>: Declares the document type (HTML5).
<html>: Root element of an HTML page.
<head>: Contains meta-information that does not display in the browser. The tags like SEO meta tags, title tags, script tags, etc. are placed under this tag.
<meta charset="UTF-8">: Specifies the character encoding (UTF-8 is standard).
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures responsive design.
<title>: Title of the page (displayed in the browser tab).

HTML Body

The body of the HTML document is defined by the <body> tag. Anything written inside the <body> tag displays on the webpage.

<body>
  <!-- Elements of body tag -->
</body>

Basic HTML Tags

HTML basic tags include the following tags:

Heading tags
Paragraph tag
Link tag
Break tag
Horizonal rule tag
Text formatting tags

Heading Tags

Heading tags are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. These heading tags define the main heading, subheadings, headings under subheadings, etc. Where, <h1> defines the most important heading and the <h6> defines the least important heading.

The following is an example of heading tags:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraph Tag

The <p> tag defines a paragraph. Anything written between <p> and </p> will be a paragraph on the webpage.

Here is an example:

<p>This is first paragraph on the webpage</p>

Comments

Comments can be placed within the  tags.

<!--This is a comment-->
<!--
You can comment 
multiple lines as well
-->

Blockquote

The <blockquote> tag is used to define a text that is quoted.

<blockquote>Nothing is impossible. The word itself says 'I'm possible!</blockquote>

Short Quotation

The <q> tag is used to write an inline short quotation. Text written inside the <q> and </q> tags displays with quotation marks before and after the text.

<p>My name is <q>Alvin Alexander</q> and I lived in the United Kingdom</p>

Non-breaking Spaces

To give non-breaking space, you can use the   entity.

<p>Hello&nbsp;&nbsp;&nbsp;World!</p>

Link Tag

The <a> tag defines a link; it is also known as the anchor tag. Whenever you want to link any page of your website or another website with some text, image, or any HTML element, you can use this tag.

Here is an example:

<a href=https://www.google.com/">Open Google</a>

The following are the attributes that are used with the <a> tag:

href: It defines the page link to be linked.
target: Target defines the target where you want to open the page, like in the same browser tab or a new tab.
title: It defines the text that appears on mouse over on the link.

Here is an example with all attributes:

<a href=https://www.google.com/" target="_blank" title="Click on this link to open Google's page">Open Google</a>

Break Tag

The <br /> tag is used to insert a single line break.

Here is an example:

<p>This is first paragraph</p>
<br />
<p>This is another paragraph after line break.</p>

Horizontal Rule Tag

The <hr /> tag defines a horizontal rule break, it is used to separate the elements and inserts a line with a light color; you can modify it using CSS.

Here is an example:

<p>This is first paragraph</p>
<hr />
<p>This is another paragraph after line break.</p>

Text Formatting Tags

Text formatting tags define the formatting of the text, such as making text bold, italic, underlines, strikethrough, etc. The following are the text formatting tags used in HTML:

<b> Tag: The <b> (bold) tag is used to make text bold.
Example:
```
<b>This text is bold</b>
```
<i> Tag: The <i> (italic) tag is used to italicize text.
Example:
```
<i>This text is italicized</i>
```
<u> Tag: The <u> (underline) tag is used to underline text.
Example:
```
<u>This text is underlined</u>
```
<strong> Tag: The <strong> tag is used to indicate that the enclosed text is important, typically rendering it in bold.
Example:
```
<strong>This text is important and bold</strong>
```
<em> Tag: The <em> (emphasis) tag is used to emphasize text, typically rendering it in italics.
Example:
```
<em>This text is emphasized</em>
```
<small> Tag: The <small> tag is used to display text in a smaller font size than the surrounding text.
Example:
```
<small>This text is smaller</small>
```
<strike> Tag: The <s> or <strike> tag is used to create a strikethrough effect on text, showing that it is no longer relevant or accurate.
Example:
```
<s>This text is struck through</s>
```
<sup> Tag: The <sup> (superscript) tag is used to raise text above the baseline, commonly used in mathematical expressions or citations.
Example:
```
E = mc<sup>2</sup>
```
<sub> Tag: The <sub> (subscript) tag is used to lower text below the baseline, often used in chemical formulas or footnotes.
Example:
```
H<sub>2</sub>O
```

Listing Tags

The <ol> and <ul> tags define ordered and unordered listing, respectively. The <li> tag defines a list item inside these tags.

Below is an example of an ordered listing (<ol> tag):

<p>World's Countries</p>
<ol>
  <li>United States of America</li>
  <li>United Kingdom</li>
  <li>India</li>
  <li>Japan</li>
  <li>And, many more</li>
</ol>

Below is an example of unordered listing (<ul> tag):

<p>World's Countries</p>
<ul>
  <li>United States of America</li>
  <li>United Kingdom</li>
  <li>India</li>
  <li>Japan</li>
  <li>And, many more</li>
</ul>

Nested Listing

The listing tags (<ul> and <ol>) can be nested also. To make nested lists, repeat the listing tag inside the <li> and </li> tags.

Below is an example of a nested listing:

<ol>
  <li>
    Item 1
    <ul>
      <li>Sub-item 1.1</li>
      <li>Sub-item 1.2</li>
    </ul>
  </li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Sub-item 3.1</li>
      <li>Sub-item 3.2</li>
    </ul>
  </li>
</ol>

Forms (<form> Tag)

The forms are defined by the <form> tag in HTML. You can design a form inside an HTML page to get the information from the visitor.

Below is an example of a form (<form> tag) in HTML:

Input Type Tags

Input type tags define the various input types and are used for taking different types of inputs from the visitors.

The following are the input type tags:

<input type="text">: It is used to create a single-line text input field, and the "placeholder" attribute provides a hint of the expected value to the user.
Example:
```
<input type="text" placeholder="Enter your name..." />
```
<input type="password">: It is used to create a password field, where the characters are hidden (masked) for security purposes.
Example:
```
<input type="password" placeholder="Enter your password..." />
```
<input type="email">: It is used to create an input field for email addresses.
Example:
```
<input type="email" placeholder="Enter valid email..." />
```
<input type="number">: It is used to create a field where users can input numbers. You can also use the min and max attributes to restrict the allowed range of numbers.
Example:
```
<input type="number" min="1" max="10" />
```
<input type="checkbox">: It is used to create a checkbox that allows users to select or deselect an option.
Example:
```
<input type="checkbox"> I agree
```
<input type="radio">: It is used to create radio buttons, which allow users to select only one option from a set. The "name" attribute groups radio buttons together.
Example:
```
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
```
<input type="date">: It is used to create a date picker where users can select a date from a calendar interface.
Example:
```
<input type="date">
```
<input type="file">: It is used to allow users to upload files from their computer.
Example:
```
<input type="file">
```
<input type="submit">: It is used to create a submit button that sends the form data to the server when clicked.
Example:
```
<input type="submit">
```

Tables

The <table> tag defines a table in HTML. It creates a table on the webpage. The following are the tags used in the HTML <table> tag.

<table> Tag: It defines a table in HTML. It is the container for all the other table-related elements, such as headers, rows, and cells.
<thead> Tag: It is used to group the header content of a table.
<tbody> Tag: It is used to group the body content of a table.
<th> Tag: It is used to define a header cell in a table.
<tr> Tag: It is used to define a row of cells in a table.
<td> Tag: It is used to define a data cell in a table, and it contains the actual data for the table and is placed inside a <tr>.

Below is an example of a table (<table> tag):

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Occupation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alvin</td>
      <td>30</td>
      <td>Engineer</td>
    </tr>
    <tr>
      <td>Alexander</td>
      <td>28</td>
      <td>Designer</td>
    </tr>
    <tr>
      <td>Sophia Jonson</td>
      <td>35</td>
      <td>Manager</td>
    </tr>
  </tbody>
</table>

Media Tags

The following are the HTML media tags:

<img> Tag: It is used to insert an image on the webpage.
<audio> Tag: It is used to embed a sound or audio stream on the webpage.
<video> Tag: It is used to embed video content on the webpage.
<source> Tag: It is used to define multiple media resources for the <audio> and <video> tags.
<track> Tag: It is used to specify the text tracks for <audio> and <video> tags.
<iframe> Tag: It is used to insert external content on the webpage.
<picture> Tag: It is used to define multiple sources for an image where the browser can choose the most appropriate one based on the various factors.
<embed> Tag: It is used to embed the external content on the webpage, such as media players, PDF files, etc.

Audio Tag

The <audio> tag inserts a sound of an audio stream on the webpage. The following are the attributes used with an <audio> tag:

src: It specifies the audio file source.
controls: It adds audio controls like play, pause, and volume.
autoplay: It defines the start playing the audio as soon as the page loads.
loop: It defines and replays the audio once it ends.

Here is an example of the <audio> tag:

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Video Tag

The <video> tag embeds a video on the webpage. The following attributes are used to <video> tag:

src: It specifies the video file source.
controls: It is used to add video controls like play, pause, and volume.
autoplay: It is used to define play the video automatically when the page loads.
width & height: These are used to set the dimensions of the video player.
poster: It is used to specify an image to show before the video plays, just like a thumbnail.

Here is an example of the <video> tag:

<video width="600" controls>
  <source src="video_file_name1.mp4" type="video/mp4">
  <source src="video_file_name2.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Picture Tag

The <picture> tag defines multiple media sources, where the browser chooses one of them to display based on the various factors.

Below is an example of <picture> tag:

<picture>
  <source media="(min-width: 800px)" srcset="large_image.jpg">
  <source media="(min-width: 500px)" srcset="medium_image.jpg">
  <img src="small_image.jpg" alt="Responsive image">
</picture>

Semantic Tags

The common semantic HTML tags are:

<header> Tag: It defines a header for the webpage. Where you can put the header image, navigational links, etc.
<nav> Tag: It defines a block of navigational links.
<main> Tag: It represents the main content of the document. Inside it you can place other elements.
<article> Tag: It defines an article or blog post on the webpage.
<section> Tag: It defines a section of the document.
<footer> Tag: It defines a footer for a webpage, and you can place all the elements that you want to show on the webpage footer.

Example of semantic Tags

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic Tags Example</title>
</head>
<body>

    <header>
        <h1>Sample Website Using Semantic Tags</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h2>This is our first article</h2>
                <p>Posted on <time datetime="2024-10-13">October 13, 2024</time></p>
            </header>
            <p>Read this article to know more about SEO.</p>
        </article>

        <section>
            <h2>Our Services</h2>
            <ul>
                <li>Web Design</li>
                <li>App Development</li>
                <li>SEO Optimization</li>
            </ul>
        </section>
    </main>

    <aside>
        <h2>Related Articles Link</h2>
        <ul>
            <li><a href="#">How to Build a Website</a></li>
            <li><a href="#">SEO Best Practices</a></li>
        </ul>
    </aside>

    <footer>
        <p>&copy; 2024 My Website. All rights reserved.</p>
    </footer>

</body>
</html>

Multimedia Embeds

You can embed multimedia on the webpage. Below is an example to embed a YouTube video:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

Metadata and SEO Tags

The <meta> tag defines metadata for the SEO purpose. The name attributes define the different parts of it, such as meta "description", meta "keywords", meta "author" etc.

Below is an example of the metadata and SEO tags:

<meta name="description" content="A description of the page for SEO">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Author Name">

HTML Elements

There are basically two types of HTML elements: block-level and inline elements. The block-level elements typically take up full width and define block (or, container) where you can place inline elements. Whereas, the inline elements do not start with a new line and take up width as necessary.

The block-level elements are:

Tag	Description
<address>	Defines contact information.
<article>	Represents a blog post or news story.
<aside>	Defines content that is tangentially related to the main content.
<blockquote>	Represents a section that is quoted.
<canvas>	Used to draw graphics via scripting.
<dd>	Defines the description or value of a term in a description list.
<div>	It is used for grouping elements.
<dl>	Defines a description list.
<dt>	Defines a term in a description list.
<fieldset>	Groups related elements in a form.
<figcaption>	Provides a caption for the <figure> element.
<figure>	Represents self-contained content.
<footer>	Represents a footer for a section or document.
<form>	Defines a form for user input.
<h1> - <h6>	Defines HTML headings.
<header>	Defines a header for a section or document.
<hr>	Represents a horizontal rule.
<li>	Defines a list item in ordered or unordered lists.
<main>	Represents the main content of a document.
<nav>	Defines a set of navigation links.
<noscript>	Defines content that is shown if the browser does not support scripting.
<ol>	Defines an ordered list.
<p>	Represents a paragraph of text.
<pre>	Represents preformatted text (preserves spaces and line breaks).
<section>	Defines a section in a document.
<table>	Defines a table.
<tfoot>	Defines the footer of a table.
<ul>	Defines an unordered list.
<video>	Embeds a video player into the webpage.

The inline elements are:

Tag	Description
<a>	It is used to link to another page or resource.
<abbr>	It represents an abbreviation or acronym, with the full term available.
<acronym>	It represents an acronym.
<b>	Represents bold text.
<bdo>	Overrides the current text direction.
<big>	Displays text in a larger font size.
<br>	Inserts a line break.
<button>	It represents a clickable button in a form.
<cite>	It represents a reference to a creative work.
<code>	It represents a fragment of code.
<dfn>	It represents the defining instance of a term.
<em>	It emphasizes text
<i>	It represents an italic text.
<img>	It embeds an image in the document.
<input>	It represents an input field in a form.
<kbd>	It represents user input, usually keyboard input.
<label>	It associates a label with a form control.
<map>	It defines an image map, with clickable areas.
<object>	It embeds external resources like images, videos, or plug-ins.
<output>	It represents the result of a calculation or user interaction.
<q>	It represents a short inline quotation.
<samp>	It represents sample output from a computer program.
<script>	It embeds a script.
<select>	It defines a drop-down list.
<small>	It defines a text with smaller font size.
<span>	It is used for an inline content.
<strong>	It defines text with bold font weight.
<sub>	It defines subscript text.
<sup>	It defines superscript text.
<textarea>	It defines a multi-line text input field.
<time>	It inserts a specific time or a date.
<tt>	It is a Deprecated tag that Was used to display text in a monospaced typewriter-like font.
<var>	It is used for a variable in a mathematical expression or programming context.

Attributes

The attributes define or change the characteristics of an HTML element. There are various attributes used with HTML elements.

HTML Core Attributes: the attributes that are used with most of the elements. The following are the core attributes:

id
title
class
style

Internationalization Attributes: The following are internationalization attributes that come under XHTML:

dir
lang

Boolean Attributes: These attributes represent "true" or "false" values and do not require any value with the attribute name. The following are the Boolean attributes:

disabled
readonly
required
inert
autocomplete

Generic Attributes: Some of the other attributes are:

data-*
tabindex
hidden
draggable
accesskey
contenteditable
spellcheck
role

HTML Entities

Some of the common HTML entities are:

Name	HTML Entity	Output
Ampersand	&	&
Less Than	<	<
Greater Than	>	>
Double Quote	"	"
Apostrophe	'	'
Non-Breaking Space
Copyright	©	©
Registered Trademark	®	®
Euro Sign	€	€

Arrows Entities

To display different types of arrows on the webpage, you need to use the HTML entities. The following are the different types of arrows and their entities:

Name	HTML Entity	Output
Leftwards Arrow	←	←
Upwards Arrow	↑	↑
Rightwards Arrow	→	→
Downwards Arrow	↓	↓
Left Right Arrow	↔	↔
Up Down Arrow	&varr;	↕
North West Arrow	&nwarr;	↖
North East Arrow	&nearr;	↗
South East Arrow	&searr;	↘
South West Arrow	&swarr;	↙
Leftwards Double Arrow	&DoubleLeftArrow;	⇐
Rightwards Double Arrow	&DoubleRightArrow;	⇒
Upwards Double Arrow	&DoubleUpArrow;	⇑
Downwards Double Arrow	&DoubleDownArrow;	⇓
Leftwards Harpoon with Barb Upwards	&lharu;	↼
Rightwards Harpoon with Barb Upwards	&rharu;	⇀
Leftwards Harpoon with Barb Downwards	&lhard;	↽
Rightwards Harpoon with Barb Downwards	&rhard;	⇁

References

To prepare this cheat sheet, we took the references from the following websites:

Comments and Discussions!

Load comments ↻