HTML Cheat Sheet: A Quick Guide To HTML

If you never have studied HTML before or need a quick recap of what you have understood. Even if you are experienced in HTML, it's easy to get confused between the references. So, we have created a basic cheat sheet that will help you understand at a rapid rate.

Paperub.com suggest you go through the uniquely crafted cheat sheet to give you a thorough understanding of how to use and implement necessary HTML tags and attributes. Due to the extensive nature of the material presented here, we recommend that you bookmark this page and return to it whenever you find yourself in need of a refresher course in HTML.

1. Document Overview

<html> ... </html>

The whole HTML page may be encapsulated inside the html element. The opening and closing HTML tags show the document's base element, HTML.

<head> ... </head>

The title tags, links to style sheets and scripts, and Metadata are all included in the head of an HTML page, which is captured by the head tag.

<title> text </title>

The title of the page is shown inside the title tag. This tag is shown in the address bar of the browser and may also be saved as a bookmark. Similarly, it's used by search engines.

<body> ... </body>

HTML documents show their content, such as text and images, inside the body element.

2. Document Info

<base/>

All links in an HTML page have a default starting point and destination that are set by the base tag. It's a helpful tool for sites that have a lot of connections to themselves.

<meta/>

An HTML document's metadata is described using the meta element. It defines extra information on HTML. Information such as when it was written and what it was about.

<link/>

The link tag establishes a connection to a remote style sheet, as well as other remote sites and documents.

<style>... /style>

In an HTML document, style information is delimited by the style element.

<script>...</script>

Script statements or links to external scripts are included in the script tag.

3. Document Structure

<h1..h6>..</h1..h6>

In HTML, headings are indicated by the elements <h1> through <h6>. It should come as no surprise that h1 is the most crucial heading and h6 the least. They often have divisions to denote distinct parts of an HTML page's structure.

<p>...</p>

Paragraph tags are widely used in HTML and may be seen here.

<br/>

The line break is marked with the break tag. It works well for separating content that has to be read on separate lines. Please take note that there is no closing line break tag since the line is blank.

<div>...</div>

Highlighting a section of an HTML page, the div element serves as a division.

<span>...</span>

A web page's inline components may be put together using the span tag. Its primary function is to bring together disparate design components into a unified whole.

<hr/>

An excellent new feature that indicates a shift in the page's topic is the horizontal rule tag.

4. HTML5 Tags

With the introduction of HTML 5 new tags are introduced with some new functionalities.

<article>...</article>

Using the article tag, you may specify that a piece of text is an article.

<aside>...</aside>

In a document, the aside tag denotes the outline of a sidebar.

<bdi>...</bdi>

The bdi tag delineates certain passages, allowing for more flexible text manipulation in a variety of contexts.

<details>...</details>

Additional information that the user might choose to display or conceal is indicated by the details tag.

<dialog>...</dialog>

An interactive window for gathering user input is designated by the dialogue element.

<figure>...</figure>

Graphics, photos, charts, graphs, etc. are all welcome in the figure tag, which is an independent content extension.

<figcaption>...</figcaption>

The figure> element is used in the fig caption tag to provide context for the figure, which is often an image.

<footer>...</footer>

The footer tag displays the document's or section's footer.

<header>...</header>

Like the h1 element, the header tag displays the section or document's heading.

<main>...</main>

The main tag defines the primary focus of an HTML document.

<mark>...</mark>

The emphasis tag in content indicates the percentage of marked text that is emphasized.

<menuitem>...</menuitem>

When clicked, the menu item tag brings up a context menu from which the user may choose several options.

<meter>...</meter>

A scalar measurement inside a specified series may be described using the meter tag as a gauge.

<nav>...</nav>

User navigation links are sent using the nav tag.

<progress>...</progress>

As its name implies, the progress symbol indicates that work on a job has advanced.

<rp>...</rp>

If a piece of text does not support ruby annotations, use the RP tag to indicate such.

<rt>...</rt>

East Asian characters are described under the rt tag.

<ruby>...</ruby>

Ruby annotation is shown for East Asian Typography inside the ruby tag.

<section>...</section>

Chapters, titles, headers, footers, and so on are all examples of sections that may be defined with the section tag.

<summary>...</summary>

When used in conjunction with details> components, the summary tag serves as a visible heading.

<time>...</time>

Time and date may be easily expressed using the time tag.

<wbr>

Line breaks inside the text are indicated by the "word-break" tag.

5. Formatting

(a) Text Formatting

<strong>.....</strong>

The strong tag is a phrase tag, used to emphasize essential phrases. Because of its significance, browsers often bold it.

<b>...</b>

When used properly, the b tag may serve as a replacement for the b tag to produce bold text. This tag should be used for regular, non-emphasized text, words, and phrases, as opposed to the strong tag up above.

<font>...</font>

Using the font element to specify text size, spacing, and color is an outmoded technique in HTML5.

<abbr>...</abbr>

Use this abbreviation to make it clear when you're using an abbreviation, but still include a link to the full version if necessary. As an example, abbr title="UnitedNations"> UN</abbr>

<acronym>...</acronym>

Although it functions similarly to the abbreviation tag, the acronym tag is not yet implemented in HTML5.

<q>...</q>

A quick quote is indicated by the q tag.

<sub>...</sub>

To indicate smaller content that is half a line below the preceding text, use the sub tag.

(b) Image Formatting

<img />

With this tag, it's easy to display pictures.

src=” URL”

When you click on this tag, you'll be sent directly to the image's URL.

ALT= "text"

To better explain the context of a picture to the viewer, this element shows alternative text.

height=”"

This element allows you to specify a height in either a percentage or an absolute number of pixels.

width=””

With this tag, you may provide the width as either a percentage or a fixed number of pixels.

align=””

The text-to-image ratio is specified by this tag.

border=””

The border's width is indicated by this tag.

vspace=””

This tag denotes white space before and after the picture.

Conclusion

With guidance and effort, one can easily comprehend the tags, attributes, and code snippets. Paperub’s HTML cheat sheet is the perfect way to learn or revise in a few minutes. All the necessary elements have been discussed in brief. So indulge in a quick guide to HTML.

World-class blogs, articles, delivered weekly.

Subscription implies consent to our privacy policy

HTML Cheat Sheet: A Quick Guide to HTML

Freelancers Scams: Basic Red Flags You Should Know

HTML Cheat Sheet: A Quick Guide to HTML

Becoming a Freelance Accountant: Advantages, Disadvantages, and Success Strategies

16 Programming Languages You Should Learn If You Want To Create An App

Freelancers Scams: Basic Red Flags You Should Know