The Ultimate HTML Cheat Sheet
- Posted on
- By Mehreen Saeed
- In General,
Table of contents
- What are HTML Document Level Tags?
- What are Document Level Tags in HTML5?
- How do I make Headings on an HTML Page?
- What is Basic HTML Text Formatting?
- How do I Format Paragraphs/Blocks of Text?
- How do I make HTML Lists?
- How do I make HTML Tables?
- What Table Options/Attributes are there?
- What are Different Input Options in HTML Forms?
- What Input Tags In HTML5 are there?
- How do I include Graphics in HTML?
- How Can I Leverage Froala to Create Awesome, Complex, and Stunning Webpages?
HTML is the fabric of the world wide web. It defines the constitution, organization, and structure of every web page. Whether you are a professional graphics designer, developer, or novice web designer, familiarity with the hypertext markup language (HTML) is a must-have skill.
As a result, we’ve created an HTML cheat sheet for you to use when writing HTML documents, and you can refer to it whenever you need to. If you’re learning HTML, you can experiment with the various HTML markups and tags in the Markdown Editor, which is depicted in the figure below.
Use the right-hand window to enter HTML and see it rendered on the left. If you are not too familiar with HTML, then you can edit text directly in the window on the left and see the corresponding HTML in the right window.
What are HTML Document Level Tags?
At the main document level, you need the following tags:
Tag | Purpose |
<html> </html> | Specify the start of a document with type HTML |
<head> </head> | Start of HTML header. Put the title and styles in this section. Anything that goes here would not be displayed. |
<title> </title> | Name displayed in title bar of the HTML page |
<body> </body> | Start of the section of page that is displayed |
What are Document Level Tags in HTML5?
For HTML5, you no longer need <html></html> tags. Just specify <!DOCTYPE html> at the start of the page and you are good to go. It’s also best to specify a title for your HTML page using <title></title>.
How do I make Headings on an HTML Page?
Use the following tags to create various headings in the body of your HTML document.
Tag | Purpose |
<h1> </h1> | Main heading at level 1 |
<h?> </h?> | Replace the ‘?’ with numbers from 2-6 to specify the heading level |
What is Basic HTML Text Formatting?
Here are some important tags for basic text formatting:
Tag | Purpose |
<b> </b> | Bold text |
<i> </i> | Italics text |
<em> </em> | Emphasize text (normally in italics) |
<font color=?> </font> | Specify font color |
<tt> </tt> | Type-writer style text |
<strong> </strong> | Emphasize a word (typically in bold) |
<font face=?> </font> | Specify font |
<font size=?> </font> | Size of font |
How do I Format Paragraphs/Blocks of Text?
You can also use these tags to format blocks of code.
Tag | Purpose |
<p> </p> | Create a new paragraph |
<br> | Insert a line break |
<blockquote> </blockquote> | Display text indented on both sides within quotes |
<div> </div> | Create a division of content |
<span> </span> | Format inline content with CSS |
<cite> </cite> | Create citation (normally displayed in italics) |
How do I make HTML Lists?
Using these tags, you can create different types of lists:
Outer Tag | Tag Nested Inside | Purpose |
<ol start=?> </ol> | Ordered list. Replace ‘?’ by number to start. | |
<li> </li> | Individual list item | |
<ul> </ul> | Unordered bulleted list | |
<li> </li> | Individual list item | |
<dl> </dl> | Definition list | |
<dt> </dt> | Term name | |
<dd> </dd> | Term description |
How do I make HTML Tables?
You can also create HTML tables using these tags:
Outer Tag | Nesting Level 1 | Nesting Level 2 | Purpose |
<table> </table> | Start of table | ||
<tr> </tr> | Start of table row | ||
<th> </th> | Table headers | ||
<td> </td> | Details in each cell |
What Table Options/Attributes are there?
When you create tables, you should know these important attributes:
Tag | Purpose |
<table border=?> </table> | Set the width of table |
<table cellspacing=?> </table> | Establish the space between table cells |
<table width=?> </table> | Set the width of table (specify pixels or percentage) |
What are Different Input Options in HTML Forms?
HTML pages allow you to collect user input using forms. All the tags in the table below should be nested inside <form> </form>.
Tag | Purpose |
<input type=”text” name=? size=?> | For text input (one line textbox) |
<textarea name=? cols=? rows=?></textarea> | Creates a textbox for multiple rows of input. The “cols” attribute sets width and “rows” attribute sets the height. |
<input type=”radio” name=? value=? checked> | Radio button for user input. Include “checked” if the item is to be checked by default. |
<input type=”checkbox” name=? value=? checked> | Checkbox for user input. Include “checked” if the item is to be checked by default. |
<input type=”submit” value=?> | Display a submit button |
<input type=”image” name=? src=? border=? alt=?> | Submit button with an image |
<input type=”reset”> | Reset button |
<select name=?> </select> | Pulldown menu for selecting an item |
<select multiple name=? size=?> </select> (nested tag <option> for each menu item) | Create a scrolling menu. Size option sets the number of visible items before the user starts scrolling. |
What Input Tags In HTML5 are there?
The following are additions in HTML5:
Tag | Purpose |
<input type=”email” name=?> | Input for email addresses |
<input type=”search” name=?> | Textbox for searching |
<input type=”color” name=?> | Allows color input via color picker |
<input type=”number” id=? name=?min=? max=?> | Input field for a number. The number can be input directly or changed via controls. |
<input type=”range” name=?> | Displays a slider control for inputting a number |
How do I include Graphics in HTML?
You can create graphics in the HTML document these tags:
Tag | Nested tag | Purpose |
<hr size=? width=?> | Horizontal line with specified height and width | |
<img src=? /> | Insert an image. The src attribute is normally set to a URL | |
<canvas> </canvas> | Used to draw 2D graphics on the HTML page via Javascript | |
<svg width=? height=?> </svg> | Specifies support vector graphics components | |
<circle cx=? cy=? r=? stroke=? stroke-width=? fill=? /> | Creates a circle at (cx,cy) with radius r using stroke, stroke-width and fill attributes | |
<rect width=? height=? /> | Draws a rectangle of given height and width | |
<polygon points=? style=?” /> | Draws a polygon using the (x,y) coordinates of different points with the given style |
How Can I Leverage Froala to Create Awesome, Complex, and Stunning Webpages?
Froala is a WYSIWYG HTML editor. It is not only a high-performance HTML document creation tool but also a platform, where users can easily and quickly learn HTML. Using Froala you can create stunning, complex, and awesome HTML documents without any HTML knowledge. Developers can also integrate Froala in their software using its APIs in their choice of programming language. Frola supports languages that include Django, Angular, ExtJS, Vue, and more.
What are you waiting for? Take a short tour of all of Froala’s features. You can use the online WYSIWYG HTML editor for free or sign up for a free trial.
Mehreen Saeed
Mehreen Saeeda former writer for Froala, showcased exceptional talent and dedication during their tenure with the company.
No comment yet, add your voice below!