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:
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>
<!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
Below, we discuss the most common HTML elements for creating structure and organizing text.
The heading tags represent all levels of headings in HTML. It has six levels,
<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.
<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>
<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.
<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
<p>Hello,<br /> your Educative password has been reset.<br />Please login to resume learning!</p>
All HTML elements for formatting texts are an inline-level element. Some tags used in formatting text in HTML include the following.
<strong>This text is bold and important.</strong>
This text is bold and important
Note that you can also use a
<b> tag here.
<em>This text is italicized for emphasis.</em>
This text is italicized for emphasis.
You can also use the
<small>These words are smaller than</small> the others.<
These words are smaller than the others.
<big> These words are larger than </big> the others.
These words are larger than the others.
<mark> This text is highlighted.</mark>
This text is highlighted.
<strike>This is an example of strikethrough text</strike>
This is an example of strikethrough text
<u>This sentence is underlined.</u>
This sentence is underlined.
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:
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.
<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>
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>
<a href="mailto:firstname.lastname@example.org">Send email</a> <a href="tel:0123492">Call 0123492</a>
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 controls> <source src="url" type="audio/ogg"> <source src="alternate-url" type="audio/mpeg"> </audio>
<img src="path/to/image" alt="alternate text" width="480px" height="360px">
There are several kinds of lists we can create with HTML.
<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>
<ul> defines an unordered list. List items would appear bulleted.
<ul> <li>Rice</li> <li>Vegetables</li> <li>Butter</li> </ul>
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>
|Sarah Hernandez||60||Mexico City|
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>
An HTML form is used to collect user input.
<form action="path/to/register" method="POST"> <input type="text"> <input type="email" placeholder="email@example.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>
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:
Join a community of 500,000 monthly readers. A free, bi-monthly email with a roundup of Educative's top articles and coding tips.