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

by
The Ultimate HTML Cheatsheet for Beginners | HTML Cheatsheet for Web Developers [Latest Update‼️]
Table of Contents

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

294 thoughts on “The Ultimate HTML Cheatsheet for Beginners | HTML Cheatsheet for Web Developers [Latest Update‼️]”

  1. Great items from you, man. I have be aware your stuff previous to and you are just extremely great. I really like what you’ve obtained right here, really like what you’re saying and the way through which you say it. You make it entertaining and you still take care of to keep it sensible. I can’t wait to read much more from you. That is really a great web site.

    Reply

  2. Thanks for sharing excellent informations. Your web site is very cool. I’m impressed by the details that you?¦ve on this site. It reveals how nicely you understand this subject. Bookmarked this web page, will come back for more articles. You, my friend, ROCK! I found simply the info I already searched everywhere and simply couldn’t come across. What a great site.

    Reply

  4. Hey would you mind letting me know which webhost you’re utilizing? I’ve loaded your blog in 3 different web browsers and I must say this blog loads a lot faster then most. Can you suggest a good hosting provider at a reasonable price? Many thanks, I appreciate it!

    Reply

  5. Hey are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get started and create my own. Do you need any html coding expertise to make your own blog? Any help would be greatly appreciated!

    Reply

  7. Excellent beat ! I wish to apprentice while you amend your website, how can i subscribe for a blog web site? The account aided me a acceptable deal. I had been tiny bit acquainted of this your broadcast offered bright clear concept

    Reply

  8. This website is really a walk-via for all of the data you needed about this and didn’t know who to ask. Glimpse right here, and you’ll positively uncover it.

    Reply

  9. I discovered your weblog site on google and verify a few of your early posts. Proceed to maintain up the very good operate. I simply extra up your RSS feed to my MSN Information Reader. Searching for forward to studying more from you later on!…

    Reply

  66. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.

    Reply

  74. Sweet blog! I found it while browsing on Yahoo News. Do you have any tips on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Many thanks

    Reply

  78. Have you ever thought about creating an e-book or guest authoring on other websites? I have a blog centered on the same information you discuss and would really like to have you share some stories/information. I know my visitors would enjoy your work. If you are even remotely interested, feel free to send me an e-mail.

    Reply

  86. Aw, this was a really nice post. Finding the time and actual effort to create a very good article but what can I say I procrastinate a lot and never seem to get anything done.

    Reply

  90. This is very interesting, You are an overly professional blogger. I have joined your feed and look ahead to seeking more of your fantastic post. Also, I have shared your site in my social networks

    Reply

  100. What i do not realize is in fact how you’re not really a lot more smartly-liked than you may be right now. You are so intelligent. You know therefore significantly relating to this matter, produced me individually consider it from numerous various angles. Its like men and women don’t seem to be interested unless it’s something to accomplish with Lady gaga! Your own stuffs excellent. Always care for it up!

    Reply

  106. Hi there would you mind stating which blog platform you’re working with? I’m planning to start my own blog in the near future but I’m having a difficult time choosing between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design and style seems different then most blogs and I’m looking for something completely unique. P.S Apologies for getting off-topic but I had to ask!

    Reply

  120. An interesting discussion is worth comment. I believe that you ought to write more on this topic, it might not be a taboo subject but usually people do not speak about such subjects. To the next! Cheers!!

    Reply

  123. First off I want to say fantastic blog! I had a quick question that I’d like to ask if you don’t mind. I was curious to know how you center yourself and clear your thoughts before writing. I have had a difficult time clearing my mind in getting my thoughts out. I do enjoy writing but it just seems like the first 10 to 15 minutes are wasted just trying to figure out how to begin. Any ideas or tips? Kudos!

    Reply

  133. I love your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do it for you? Plz reply as I’m looking to create my own blog and would like to know where u got this from. cheers

    Reply

  136. Hi there! This is kind of off topic but I need some help from an established blog. Is it very hard to set up your own blog? I’m not very techincal but I can figure things out pretty fast. I’m thinking about creating my own but I’m not sure where to start. Do you have any points or suggestions? Thank you

    Reply

  142. Hello! Do you know if they make any plugins to help with SEO? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good gains. If you know of any please share. Kudos!

    Reply

  144. First off I want to say awesome blog! I had a quick question that I’d like to ask if you don’t mind. I was curious to know how you center yourself and clear your mind before writing. I have had a hard time clearing my mind in getting my thoughts out. I do enjoy writing but it just seems like the first 10 to 15 minutes are wasted just trying to figure out how to begin. Any ideas or tips? Thank you!

    Reply

  147. hey there and thank you for your information I’ve definitely picked up anything new from right here. I did however expertise a few technical issues using this site, since I experienced to reload the site many times previous to I could get it to load properly. I had been wondering if your hosting is OK? Not that I am complaining, but sluggish loading instances times will often affect your placement in google and can damage your high quality score if advertising and marketing with Adwords. Anyway I’m adding this RSS to my e-mail and can look out for a lot more of your respective fascinating content. Make sure you update this again soon.

    Reply

  154. I have been exploring for a bit for any high quality articles or weblog posts on this sort of space . Exploring in Yahoo I finally stumbled upon this web site. Studying this information So i’m happy to show that I have an incredibly good uncanny feeling I found out just what I needed. I so much certainly will make sure to do not put out of your mind this site and give it a look regularly.

    Reply

  176. Today, I went to the beach with my kids. I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She put the shell to her ear and screamed. There was a hermit crab inside and it pinched her ear. She never wants to go back! LoL I know this is entirely off topic but I had to tell someone!

    Reply

  184. Good day I am so thrilled I found your blog page, I really found you by mistake, while I was searching on Digg for something else, Anyhow I am here now and would just like to say cheers for a remarkable post and a all round thrilling blog (I also love the theme/design), I don’t have time to go through it all at the minute but I have saved it and also included your RSS feeds, so when I have time I will be back to read a lot more, Please do keep up the excellent job.

    Reply

  188. You really make it seem so easy together with your presentation however I find this topic to be really something which I feel I might never understand. It kind of feels too complicated and very wide for me. I am taking a look forward in your next post, I will try to get the hold of it!

    Reply

  200. hey there and thank you for your information I’ve definitely picked up anything new from right here. I did however expertise a few technical issues using this site, since I experienced to reload the web site many times previous to I could get it to load properly. I had been wondering if your web hosting is OK? Not that I am complaining, but sluggish loading instances times will often affect your placement in google and can damage your quality score if advertising and marketing with Adwords. Anyway I’m adding this RSS to my e-mail and can look out for a lot more of your respective intriguing content. Make sure you update this again soon.

    Reply

  208. I’m impressed, I must say. Rarely do I encounter a blog that’s equally educative and engaging, and let me tell you, you have hit the nail on the head. The issue is something not enough people are speaking intelligently about. I am very happy that I found this in my search for something relating to this.

    Reply

  211. hey there and thank you for your information I’ve definitely picked up anything new from right here. I did however expertise a few technical issues using this web site, since I experienced to reload the web site many times previous to I could get it to load properly. I had been wondering if your hosting is OK? Not that I am complaining, but sluggish loading instances times will very frequently affect your placement in google and can damage your high quality score if advertising and marketing with Adwords. Anyway I’m adding this RSS to my e-mail and can look out for a lot more of your respective fascinating content. Make sure you update this again soon.

    Reply

  212. I was wondering if you ever considered changing the page layout of your blog? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having one or two images. Maybe you could space it out better?

    Reply

  229. I don’t know if it’s just me or if everyone else experiencing problems with your blog. It appears as if some of the text on your posts are running off the screen. Can someone else please comment and let me know if this is happening to them too? This could be a problem with my browser because I’ve had this happen before. Appreciate it

    Reply

  234. I am curious to find out what blog system you happen to be working with? I’m experiencing some minor security problems with my latest site and I would like to find something more safeguarded. Do you have any solutions?

    Reply

  240. Хотите получить идеально ровный пол в своей квартире или офисе? Обращайтесь к профессионалам на сайте styazhka-pola24.ru! Мы предоставляем услуги по устройству стяжки пола в Москве и области, а также гарантируем быстрое и качественное выполнение работ.

    Reply

  257. Hmm it seems like your site ate my first comment (it was extremely long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog. I as well am an aspiring blog blogger but I’m still new to the whole thing. Do you have any suggestions for novice blog writers? I’d certainly appreciate it.

    Reply

  258. Технология штукатурки по маякам стен гарантирует великолепный результат. Узнайте больше на mehanizirovannaya-shtukaturka-moscow.ru

    Reply

  272. Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You definitely know what youre talking about, why waste your intelligence on just posting videos to your blog when you could be giving us something enlightening to read?

    Reply

  288. Hello there! Quick question that’s entirely off topic. Do you know how to make your site mobile friendly? My website looks weird when viewing from my iphone. I’m trying to find a theme or plugin that might be able to correct this problem. If you have any suggestions, please share. Cheers!

    Reply

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