The Ultimate HTML Cheatsheet for Beginners | HTML Cheatsheet for Web Developers [Latest Update‼️]

In this article, we are going to discuss HTML tags, elements, and properties that are used frequently. In addition to this, we will look at some working examples of various tags, elements, and attributes.

Whether you are just starting out as a developer or have years of experience under your belt, you may use this article as a reference tool.

HTML

HTML (HyperText Markup Language) is used to give content to a web page and instructs web browsers on how to structure that content.

By generating a basis, it gives the content that appears on a website, such as photographs, text, or videos, a sense of organisation and structure. HTML is still widely used in the modern world for the simple reason that its output will always be rendered in HTML, regardless of the framework or programming language that was used to construct a website.

What Makes Up an HTML Document?

The following tags define the basic HTML document structure:

  • <html> tag – This tag acts as a container for every other element in the document except the <!DOCTYPE html> tag.
  • <head> tag– Includes all the document’s metadata.
  • <title> tag – Defines the title of the document which is displayed in the browser’s title bar.
  • <body> tag – Acts as a container for the document’s content that gets displayed on the browser.

Here’s what all that looks like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> My HTML Cheat Sheet </title>
  </head>
  <body></body>
</html>

<!DOCTYPE html> specifies that we are working with an HTML5 document.

The following tags give additional information to the HTML document:

  • <meta> tag – This tag can be used to define additional information about the webpage.
  • <link> tag – Used to link the document to an external resource.
  • <style> tag – Used for defining styles for the document.
  • <script> tag – Used to write code snippets (usually JavaScript) or to link the document to an external script.
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>My HTML Cheat Sheet</title>

    <style>
      * {
        font-size: 100px;
      }
    </style>

    <script>
      alert('This is an alert');
    </script>
 </head>

Headings

There are six headings available in HTML, H1 is the largest among all, and H6 is the smallest.

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

Output-

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5
This is Heading 6

Container

Container tags are the tags that contain some data such as text, image, etc. There are several container tags in HTML.

div tag

div tag or division tag is used to make blocks or divisions in the document.

<div> This is div block </div>

span tag

span is a container for inline content

<span> This is span block </span>

p tag

Paragraph

<p> This is a paragraph </p>

pre tag

pre tag represents pre-formatted text

<pre> Hello World </pre>

code tag

code tag is used to represent source codes

<code>
import python
</code>

Text formatting and Inline text semantics: 

Text formatting is used in HTML to make the document look more comprehensive and attractive. The HTML inline text semantics is used to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.

TagsDescriptionSyntax
<b>The <b> tag is used to make the text enclosed within these tags bold.<b>…</b>
<i>The <i> tag is used to make the style text enclosed within these tags italics.<i>…</i>
<em>The <em> tag is used to put stress on some text or show some degree of emphasis. The <em> element can be nested as well, where each level of nesting indicates a greater degree of emphasis.<em>…</em>
<strong>The <strong> tag is used to indicate that content enclosed within these tags has strong importance or urgency. Typically, browsers render their content in bold.<strong>…</strong>
<sub>The <sub> tag is used when we need to write the text as subscript.<sub>…</sub>
<sup>The <sup> tag is used when we need to write the text as superscript.<sup>…</sup>
<abbr>The <abbr> element is used to represent an abbreviation or acronym. The optional title attribute can be used to add description of the abbreviation.<abbr>… </abbr>
<mark>The <mark> tag is used to mark or highlight important text for reference or notation purposes.<mark>…</mark>
<citie>The <cite> element is used to describe the title of a creative work (For ex. a book, a paper, an essay, a poem, a song, a painting etc. )<cite>…</cite>
<time>The <time> element is used to represent a specific period of time.<time>…</time>
<p><i> italic text </i></p>
<p><b>bold text </b></p>
<p><strong> strong text </strong></p>
<p><em> strong text </em></p>
<p><sub> subscripted text </sub></p>
<p><sup> superscripted text </sup></p>
<p><small> small text </small></p>
<p><del> deleted text </del></p>
<p><ins> inserted text </ins></p>
<p><blockquote> quoted text </blockquote></p>
<p><q> short quoted text </q></p>
<p><cite> cited text </cite></p>
<p><address> address </address></p>
<p><abbr> inserted text </abbr></p>
<p><code> code snippet </code></p>
<p><mark> marked text </mark></p>

Lists

Lists can be either numerical, alphabetic, bullet, or other symbols. You can specify list type and list items in HTML for the clean document.

<ol> tag

Ordered list starts with <ol> tag and each list item starts with <li> tag

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

<ul> tag

<ul>
    <li>Your Data</li>
    <li>Your Data</li>
</ul>

Images in HTML

In HTML, we use the <img/> tag to display images.

Here are some attributes of the <img/> tag:

  • src is used to specify the path to the location of the image on your computer or the web.
  • alt defines an alternate text that displays if the image cannot be rendered. The alt text is also good for screen readers.
  • height specifies the height of the image.
  • width specifies the width of the image.
  • border specifies the thickness of the borders, which is set to 0 if no border is added.
<img src="ihechikara.png" alt="a picture of Ihechikara" width="300" height="300">

<video> Video Element

The <video> element embeds a media player for video playback. The src attribute will contain the URL to the video. Adding the controls attribute will display video controls in the media player.

Note: The content inside the opening and closing tag is shown as a fallback in browsers that don’t support the element.

<video src="test-video.mp4" controls>
  Video not supported
</video>

The <a> tag, also known as the anchor tag, is used to define hyperlinks that link to other pages (external web pages included) or to a section of the same page.

Here are some attributes of the <a> tag:

  • href specifies the URL the link takes the user to when clicked.
  • download specifies that the target or resource clicked is downloadable.
  • target specifies where the link is to be opened. This could be in the same or separate window.
<a href="https://www.technorj.com/" target="_blank"> Build With Technical </a>

Forms

The <form> tag is used to create a form in HTML. Forms are used to get user inputs. Here are some attributes associated with the <form> element:

  • action specifies where the form information goes when submitted.
  • target specifies where to display the form’s response.
  • autocomplete can have a value of on or off.
  • novalidate specifies that the form should not be validated.
  • method specifies the HTTP method used when sending form data.
  • name  specifies the name of the form.
  • required specifies that an input element cannot be left empty.
  • autofocus gives focus to the input elements when the page loads.
  • disabled disables an input element so the user can longer interact with it.
  • placeholder is used to give users a hint on what information is required for an input element.

Here are other input elements associated with forms:

  • <textarea> for getting user text input with multiple lines.
  • <select> specifies a list of options the user can choose from.
  • <option> creates an option under the select element.
  • <input> specifies an input field where the user can enter data. This has a type attribute that specifies what type of data the user can input.
  • <button> creates a button.
<form action="/info_url/" method="post">

    <label for="firstName"> First name: </label>
    <input type="text" 
           name="firstName" 
           placeholder="first name" 
           required
    >
    
    <label for="lastName"> Last name: </label>
    <input type="text" 
           name="lastName" 
           placeholder="last name" 
           required
    >

    <label for="bio"> Bio: </label>
    <textarea name="bio"></textarea>

    <select id="age">
      <option value="15-18">15-18</option>
      <option value="19-25">19-25</option>
      <option value="26-30">26-30</option>
      <option value="31-36">31-36</option>
    </select>

    <input type="submit" value="Submit">
    
  </form>

Tables

  • The <table> tag defines a HTML table.
  • <thead> specifies information for each column in a table.
  • <tbody> specifies the body or content of the table.
  • <tfoot> specifies the footer information of the table.
  • <tr> denotes a row in the table.
  • <td> denotes a single cell in the table.
  • <th> denotes the value column’s heading.
<table>
    
  <thead>
    <tr>
      <th> Course </th>
      <th> Progress </th>
    </tr>
  </thead>
    
  <tbody>
    <tr>
      <td> HTML </td>
      <td> 90% </td>
    </tr>
    <tr>
      <td> CSS </td>
      <td> 80% </td>
    </tr>
  </tbody>
    
  <tfoot>
    <tr>
      <td> JavaScript </td>
      <td> 95% </td>
    </tr>
  </tfoot>
    
</table>

Characters and Symbols: Some characters are reserved in HTML and they have special meaning when used in HTML documents. HTML provides a wide range of characters and symbols involving arrows, currency, letters, maths, punctuation, and symbols. Some of the most commonly used ones are:

SymbolDescriptionEntity NameNumber Code
©Copyright&copy;&#169;
&Ampersand&amp;&#38;
>Greater than&gt;&#62;
<Less than&lt;&#60;
$Dollar&dollar;&#36;
Quotation mark&quot;&#34;
Apostrophe&apos;&#39;

Conclusion

Thank you for taking the time to explore this HTML cheat sheet with examples or guide to html. It will help you learn how to make money on the internet and learn about html.

Best regards,
Techno-RJ

Look for More Cheatsheets:

Checkout Other Articles:

Checkout Coursera Quiz Answers – All Coursera Quiz Answers | 100% Correct Answers

Checkout Linkedin Assessment Answers – All LinkedIn Skill Assessment Answers | 100% Correct Answers | Free Quiz With LinkedIn Badge

Checkout Cognitive Classes Quiz Answers – All Cognitive Classes Answers | Free Course With Certificate | Free Cognitive Class Certification 2021

Checkout IBM Data Science Professional Certificate Answers – IBM Data Science Professional Certificate All Courses Answers | Free Data Science Certification 2021

Checkout Google Course Answers – All Google Quiz Answers | 100% Correct Answers | Free Google Certification

Checkout Hubspot Course Certification Answers – All Hubspot Quiz Answers | 100% Correct Answers | Hubspot Certification 2021

Checkout Hackerrank SQL Programming Solutions –Hackerrank SQL Programming Solutions | All SQL Programming Solutions in Single Post

Checkout Hackerrank Python Programming Solutions – Hackerrank Python Programming Solutions | All Python Programming Solutions in Single Post

Checkout Hackerrank Java Programming Solutions – Hackerrank JAVA Programming Solutions | All JAVA Programming Solutions in Single Post

Checkout Hackerrank C++ Programming Solutions – Hackerrank C++ Programming Solutions | All C++ Programming Solutions in Single Post

Checkout Hackerrank C Programming Solutions Certification Answers –Hackerrank C Programming Solutions | All C Programming Solutions in Single Post

Leave a Comment

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker🙏.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock