HTML Cheat Sheet: how to implement tables, links, and more
HTML stands for Hyper Text Markup Language. It is the standard markup language for creating web pages. It is used alongside technologies like Cascading Style Sheets (CSS) and JavaScript in modern web development.
Web developers use HTML all the time, so it’s important to be familiar with the common operations and elements. Today, we’ll offer a quick reference to HTML to speed up your learning and coding.
We’ll go over:
- Basic composition of an HTML webpage
- Common HTML elements
- Text formatting
- Links
- Media elements
- Lists
- Tables and Forms
- What to learn next
Master HTML with hands-on projects.
This learning path the perfect place to start your journey as a front-end developer. You will gain a mastery of HTML, CSS, and JavaScript.
Basic composition of a page#
HTML code describes the structure of a web page. It consists of a series of elements that are defined by a start tag, the content, and a closing tag.
Empty elements do not need opening and closing tags, as there is no content to go in between them.
For styling purposes, HTML elements can be classified into Block-level and Inline-level elements. Block-level elements cause a line break to occur, and they take up space and stack down the page. Inline-level elements, however, only take up space as is necessary.
Below is HTML code describing a very simple webpage.
<!DOCTYPE html><html lang="en"><head><!-- This is a comment in HTML --><!-- Elements that contain information about the webpage including the title and links to external resources go here --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- Elements that will be displayed go here --></body></html>
The <!DOCTYPE html> declaration defines that this document is an HTML5 document. There is the <html> tag at the root level, and it consists of two main elements: the <head> and the <body> elements.
Common HTML Elements#
Below, we discuss the most common HTML elements for creating structure and organizing text.
Headings#
The heading tags represent all levels of headings in HTML. It has six levels, <h1> through <h6>, with <h1> denoting the most important with the largest font size and weight.
<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>
Heading tags improve accessibility and help in search engine optimization as information in higher heading levels is given more priority.
Pro tip: It is best practice to use one
<h1>tag per web page.
Paragraphs#
The <p> tag creates a paragraph. Line breaks and whitespaces are usually ignored when paragraphs are rendered in a browser.
<p>Hello, your Educative password has been reset.Please log in to resume learning!</p>
Content Division Element#
The <div> tag represents a division or section in an HTML document, it serves as a container that can be used to group content so they can be easily styled.
This styling can be done inline or by using CSS referencing their class or id attributes.
<div>some content!!!</div>
Line Breaks#
The <br /> tag is a good example of an empty element, it is used to enforce a line break within a <p> tag. It can be written as a self-closing tag <br /> or just the opening tag <br>.
<p>Hello,<br /> your Educative password has been reset.<br />Please login to resume learning!</p>
Text formatting#
All HTML elements for formatting texts are an inline-level element. Some tags used in formatting text in HTML include the following.
Strong text#
<strong>This text is bold and important.</strong>
This text is bold and important
Note that you can also use a <b> tag here.
Emphasized Text#
<em>This text is italicized for emphasis.</em>
This text is italicized for emphasis.
You can also use the <i> tag.
Small Text#
<small>These words are smaller than</small> the others.<
These words are smaller than the others.
Large Text#
<big> These words are larger than </big> the others.
These words are larger than the others.
Highlighted Text#
<mark> This text is highlighted.</mark>
This text is highlighted.
Strikethrough Text#
<strike>This is an example of strikethrough text</strike>
This is an example of strikethrough text
Underlined Text#
<u>This sentence is underlined.</u>
This sentence is underlined.
Superscript and Subscript Text#
An equation with superscript text: X<sup>2</sup>.
An equation with superscript text: X2.
We can also denote a chemical compound using the subscript tag:
CO<sub>2</sub>
CO2
Span tag#
Span tag can be used to <span style="color:red">style</span> section of a text.
Span tag can be used to style section of a text.
Links#
The HTML <a> tag defines a hyperlink for navigation. It is an inline-level element. The href attribute holds the URL that will be navigated to.
This is <a href="url">a link</a>
Link Targets#
The target attribute is used to specify the location document/URL would be displayed. Some of the possible options are:
_blank: opens the linked document in a new browser window or tab
<a href="https://www.educative.io/blog" target="_blank">link</a>
_self: opens the link in the same frame
<a href="https://www.educative.io" target="_self">link </a>
_parent:opens the linked document in the parent frame
<a href="https://www.educative.io/learn" target="_parent">link </a>
_top: opens the document in the full body of the window
<a href="https://www.educative.io/blog" target="_top">link </a>
Special Links#
<a href="mailto:email@example.com">Send email</a>
<a href="tel:0123492">Call 0123492</a>
Keep the learning going.#
Learn HTML for front-end without scrubbing through videos or documentation. Educative’s text-based courses are easy to skim and feature live coding environments, making learning quick and efficient.
<video width="300" height="240" controls><source src="url" type="video/mp4"><source src="alternate-url" type="video/ogg"></video>
Audio#
<audio controls><source src="url" type="audio/ogg"><source src="alternate-url" type="audio/mpeg"></audio>
Image#
<img src="path/to/image" alt="alternate text" width="480px" height="360px">
Lists#
There are several kinds of lists we can create with HTML.
Ordered List#
<ol> defines an ordered list. It is numbered by default. The numbering format can be changed using the type attribute.
<ol>
<li>Water </li>
<li>Tea</li>
<li>Milk</li>
<ol>
- Water
- Tea
- Milk
Unordered List#
<ul> defines an unordered list. List items would appear bulleted.
<ul>
<li>Rice</li>
<li>Vegetables</li>
<li>Butter</li>
</ul>
- Rice
- Vegetables
- Butter
Type and Start attributes#
The type attribute is present in both ordered and unordered lists and is used in changing numbering and bullet style. The start attribute specifies what number/letter/roman numeral the first item in an ordered list should start its count from.
<!-- Unordered List bullet types --><ul type="square"><ul type="disc"><ul type="circle"><!-- Ordered List numbering styles --><ol type="1"> <!-- Default-Case Numerals --><ol type="A"> <!-- Upper-Case Letters --><ol type="a"> <!-- Lower-Case Letters --><ol type="I"> <!-- Upper-Case Numerals --><ol type="i"> <!-- Lower-Case Numerals --><ol type="1" start="3"> <!-- numbering starts from 3 --><ol type="A" start="5"> <!-- Letters starts with E -->
<table><tr><!-- <th> represent a table heading, <tr> defines a table row --><th>Name</th><th>Age</th><th>City</th></tr><tr><!-- <td> element holds table data--><td>Bill Jones</td><td>54</td><td>Nashville</td></tr><tr><td>Sura Keyser</td><td>45</td><td>Berlin</td></tr><tr><td>Sarah Hernandez</td><td>60</td><td>Mexico City</td></tr></table>
| Name | Age | City |
|---|---|---|
| Bill Jones | 54 | Nashville |
| Sura Keyser | 45 | Berlin |
| Sarah Hernandez | 60 | Mexico City |
Cellpadding and Cellspacing Attributes#
Cellpadding and Cellspacing are <table> attributes used to adjust the amount of white space in your table cells.
<table cellspacing="5" cellpadding="5"><!--cellspacing attribute defines space between table cells--><!-- cellpadding represents the distance between cell borders and the content within a cell --><tr><th>Name</th><th>Age</th><th>City</th></tr><tr><td>Bill Jones</td><td>54</td><td>Nashville</td></tr><tr><td>Sura Keyser</td><td>45</td><td>Berlin</td></tr><tr><td>Sarah Hernandez</td><td>60</td><td>Mexico City</td></tr></table>
<form action="path/to/register" method="POST"><input type="text"><input type="email" placeholder="example@email.com"><input type="number"><input type="date"><input type="checkbox"><textarea name="" id="" cols="30" rows="10"></textarea><!--Radio buttons allow selection of only one option --><input type="radio" id="apples" name="favourite-fruit" value="apples"><label for="apples">Apples</label><br><input type="radio" id="oranges" name="favourite-fruit" value="oranges"><label for="oranges">Oranges</label><br><input type="radio" id="other" name="favourite-fruit" value="other"><label for="other">Other</label><button type="submit">Submit Form</button></form>
What to learn next#
This document should come in handy whether you are just getting started in your web development career or you need help remembering HTML syntax. The next things to learn are more advanced HTML syntax, such as:
- Link to the middle of a web page
- Clickable regions within images
- Roll-overs
- Banner ads
- and more
If you’re looking to get ramped up on front-end development and learn advanced HTML, check out Educative’s Learning Path Become a Front end Developer. This is the perfect place to start your journey as a front-end developer. With no prior knowledge needed, you will gain a mastery of HTML, CSS, and JavaScript in just six curated modules.
Happy learning!
Continue reading about HTML#
Free Resources
