The Ultimate HTML Cheat-Sheet!
There are over 110 HTML tags. You shouldn't however fear the number. It is just facts. It is also a fact that you may not be able to remember all the tags (even HTML gurus do not). We tend to remember the commonly used tags, but struggle with lesser used ones. Not just the tags, but also, it's appropriate use scenarios.
As a beginner web developer, or even an expert, the best you can do is to have a cheat sheet handy which you can refer to when you're stuck.
In this article, we present a comprehensive list of HTML5 tags. Parent tags have their sub tags and attributes. This cheat sheet is structured to also help you understand HTML5 flow and outline. Think of it as a crash course in HTML5 that got everything you need.
Table of contents
- Document Summary
- Document information
- Text formatting
- Document structure
- Anchor tags (links)
- Lists
- Measurements
- Table
- Objects and iFrames
- Forms
- Images
- Media
- Layout and Styles
- Conclusion
Document Summary
<html>
This is the root of the document. It is the beginning and end of every html document. Every other thing within the document - APIs, external links, meta descriptions, scripts, and content to be displayed on a browser page is contained within this tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>A new title</title>
</head>
<body>
<div>
<!-- div stuff goes here -->
</div>
<img/>
<p>
<!-- paragraphs-->
</p>
</body>
</html><head>
The head contains specific information about a particular page. The following tags - title, meta, script, link, base and style are all found within the head tag.
The head tag also contains global attributes. External links to stylesheets, APIs, scripts, fonts and frameworks are all contained within the head tag.
<title>
This is simply the tag that defines the name of a particular webpage. This name appears in the browser's tab and tells the user and browser what the webpage is about.
<body>
Body tag defines the main body of a html page. It holds everything displayed on the browser.
Document information
<!doctype>
This is the first line written on every HTML5 document. It is an information to the browser, telling it the HTML document is written in HTML5 and ensures that all formats and tags for HTML5 are displayed as expected.
The doctype for HTML5 is simply <!Doctype> and it is case insensitive. It can be written as <!Doctype html>, <!doctype html>, <!DocType html>, <docType html> or any other variation
<link>
This tag is found within the head tag and it defines the relationship of a document with external pages, links, fonts, or stylesheets.
It has attributes like rel (which stands for relationship), href and preconnect. Rel defines relationships with the links, href specifies the URL, and preconnect tells the browser the document needs to establish connection with another page (mainly to include external resources like JavaScript or CSS files).
<head>
<title>Head links </title>
<!-- links to google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<!-- link to external css -->
<link rel="stylesheet" href="homepage.css" type="text/css">
</head><base>
This tag specifies the base URL for sites with many internal links. When a base url is specified, the links within the document do not have to be absolute - meaning typed out in full.
<!DOCTYPE html>
<html>
<head>
<title>Base URL</title>
<base href="https://www.codecoda.com/en/" target="_blank">
</head>
<body>
<p>As part of its services, CodeCoda has <a href="tech-expertise/business-intelligence-bi">business intelligence</a> section which helps
companies with their business intelligence. The includes <a href="/shopware-ecommerce">ecommerce</a></p>
</body>
</html><script>
This tag links an external JavaScript file to the document. It uses the src, and type attributes primarily to do this.
This tag also appears within the body of a html document, and it is used to embed JavaScript within the document.
<script src="animationjs.js"></script><noscript>
This tag is for users who have disabled their JS script in their browsers. The content of this script will be displayed on their browser instead of the Javascript content.
Just like <script>, it can be used in the head or body of a document.
<html>
<body>
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<!-- For browsers with their javascript displayed, the text between <noscript></noscript> will display.-->
</body>
</html><style>
This defines head styling information for CSS
<!DOCTYPE html>
<html>
<head>
<title>Styling </title>
<style>
h3{
color: blue;
font-family: "Tahoma"
}
</style>
</head>
<body>
<h3>
This is codecoda website
</h3>
</body>
</html><meta>
This is a description markup that describes the main/additional information about a page. It is very useful to search engines in getting key information like character encoding, author, keywords, and page description of a page. It also sets the viewport and initial scale of a webpage.
<head>
<meta charset="UTF-8">
<meta name="description" content="CodeCode website">
<meta name="keywords" content="HTML,CSS,AI,JavaScript, Technology and web development">
<meta name="author" content="Andreas Maier">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>Text formatting
<strong>
This indicates strong emphasis or importance to a text. The text is displayed in bold.
<em>
This is an emphasis markup which places emphasis on a text. The text is usually displayed in italics.
<b>
This makes a text bold. The difference between <b> and <strong> is that <b> only makes a text bold and does not place emphasis on it.
<i>
This adds italics to a text. Unlike <em>, <i> does not add emphasis to the italicized text.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text formatting</title>
</head>
<body>
<div>
<strong> This is a text with importance </strong><br/>
<em> This is a text with emphasis. It is usually italicized </em><br>
<b> This is a bold text </b><br/>
<i> This is a text with italics </i><br/>
</div>
</body>
</html><s>
This defines a text that is no longer correct or relevant. Text with <s> appears striked through.
<del>
This defines a text deleted from a document. Just like <s>, it has a strikethrough. It can be used with <ins> to insert new text in place of the deleted ones.
<ins>
<ins> stands for insert and it inserts new text to a document. The new text is usually underlined.
<!DOCTYPE html>
<html>
<head>
<title>Text formatting</title>
</head>
<body>
<div>
<s>PROMO</s> Now $10 per shirt
<p>You can only get a certificate from <del>a prestigious university</del> taking notable online courses to earn good money.</p>
<p>Ronaldo is a <del>Manchester</del> <ins>Juventus</ins> player.</p>
</div>
</body>
</html><cite>
Defines a text that references external creative works and cites it's authors or publishers. It must include the title of the work.
Cite is different from quotes because it notes a creative work and needs <q> and <blockquote> to include references to the quoted material.
Creative works that can be cited included
- A book
- Research papers
- A Facebook post
- A web page
- A blog
- Written or oral statement
- A painting etc.
Cited text is generally italicized.
<q>
This defines a short, inline quote from another source. Unlike <blockquote>, it doesn't cause a break and is not indented.
<blockquote>
This defines a long quoted text from a different source. The text is generally indented into a block by the browser.
Blockquote is often used with <cite> to quote a source and cite it's author or publisher.
<!DOCTYPE html>
<html>
<head>
<title>Text formatting</title>
</head>
<body>
<div>
<!--blockquote-->
<h4>This is what CodeCoda had to say about their solutions </h4>
<blockquote cite = "https://codecoda.com/en">CodeCoda is a "do-it-differently" eCommerce House and Custom Software Developer for online e-businesses. We diversify with projects tailored for traditional as well as digital-savvy customers. We partner with technology businesses globally, helping them build successful and innovative digital products in the eCommerce, Fintech, Banking, Medical, Trade, and AI vertical.</blockquote>
<blockquote>I personally guarantee our customers full satisfaction.
<cite>- Dr. Andreas Maier, CEO</cite>
</blockquote>
<!-- using quotes -->
<p><strong>CodeCoda on Building Blockchains:</strong>
<q>We build the world's most exciting blockchain and cryptocurrency.</q></p>
<!-- cite -->
<p>Whether it's custom web design for your corporate presence, or an online wallet for your banking service, our web experts will analyze, mock, design, build, test and deploy it.</p>
<cite> - CodeCoda </cite>
<!--example two -->
<h5>Who's there?</h5>
<p>The opening lines in <cite>Hamlet</cite> by Shakespare is itself a
great question to the context of the play</p>
</div>
</body>
</html><abbr>
Defines abbreviation or an acronym along with the full form.
<body>
<!--abbreviated text -->
<abbr title = "Cascading Style Sheet"> CSS </abbr> is a stylesheet for styling HTML documents
<!-- hover over the CSS -->
</body><pre>
This defines preformatted text. It automatically causes a line break when used. Line breaks, and spaces are preserved and displayed as in the source code.
<body>
<!--preformatted text -->
<p>This is to show you <pre>how a preformatted text looks like</pre></p>
<pre>One of the ways we could
over achieve major things in life
is to stop doing too much.
I cannot stress this enough.</pre>
</body><bdo>
This stands for Bi Directional Override. It displays text in the opposite direction overriding the current direction. It has an attribute 'dir', which has two values, rtl (right to left) and ltr (left to right).
<body>
<h4> This is a bidirectional text going from left to right </h4>
<h4><bdo dir="rtl">This is a bidirectional text going from right to left.</bdo></h4>
</body><code>
It defines computer code.
<body>
<p>The HTML <code>button</code> tag defines a clickable button.</p>
<h5>Python uses <code>for if else </code> for loops.</h5>
<h5> This <code>text will display like a computer code</code>. Isn't that cool? </h5>
</body><address>
This tag displays contact information. Text is usually italicized.
<body>
<h3> Address </h3>
<address>
Author: Slyvester Mormon.<br>
Visit us at: <a href="#">Codecoda.com</a><br>
Tel:
<p>Main Office </p>
Vladaya 3 <br>
BG - 4006 Plovdiv <br>
Bulgaria
</address>
</body><small>
Defines a text that is reduced in size and smaller than other text around it. It is usually used for text like copyright and side comments.
<body>
<p>This is some normal text.</p>
<p style="font-size: 25px;">This too <small>but with a smaller text</small> in between</p>
</body><sup>
Defines a superscript text. This is text that appears above the text line and smaller than the text around it. It is used in footnotes and mathematical equations.
<body>
<p>This is a <sup>superscript</sup> text.</p>
<p> What is the value of X in X<sup>4</sup>Y<sup>2</sup>0.
</body><sub>
The opposite of <sup>. It defines a subscript text. This text appears below the text line and is smaller than the text around it. Mathematical formulas also have good examples of subscripts.
<body>
<p>This is a <sub>subscript</sub> text.</p>
<p>The formula for water is H<sub>2</sub>0.</p>
</body><dfn>
Defines the definition of a term within the document.
<body>
<h2>dfn</h2>
<dfn>A noun is the name of a person, animal, place or thing</dfn><br>
<!-- dfn with the title attribute -->
<dfn title="noun">A noun</dfn> can be a location like America or Estonia.
<!-- dfn with abbr -->
<p><dfn><abbr title="United States of America">USA</abbr></dfn>is an example of a place. It is a nice place to visit. </p>
<!-- dfn with an id attribute -->
<!-- an internal bookmark that takes users back to the definition -->
<p><dfn id="usa">USA</dfn> is a country in North America.</p>
<p>It has 50 states. It is the birth country of singer Beyonce Knowles-Carter. The presidential residence and offices is called the White House</p>
<p>Visit <a href="#usa">USA</a> today.</p>
</body><samp>
A sample output element that represents the sample output from a computer program. The browser uses it's default monospace font to display it.
<body>
<p>Whenever I try to access the internet with bad network, i get a</p>
<p><samp>404 Error <br>Click to learn more.</samp></p>
</body><u>
Defines an underlined text
<body>
<p>Take note of your <strong><u>Personal Unlocking Number</u></strong> and your bag.
</body><details>
This specifies an interactive widget on a webpage that hides additional information on a particular text section. The widget is usually closed or hidden.
Details has a key sub-tag called summary. The summary contains the text that is clicked to open or expand the widget.
<summary>
This defines a text that summarizes a longer text and hides them. It is the first child of the <details> element.
<!DOCTYPE html>
<html>
<head>
<title>Summary</title>
</head>
<body>
<h1>Summary and Details</h1>
<details>
<summary>About Code Coda</summary>
<p>CodeCoda is an innovative global IT and BPO service, eCommerce Solutions, and Advanced Software Development, provider. As part of one of the fastest-growing industries worldwide, we help online businesses grow, utilizing best practices in the field, coupled with a multi-channel approach and focused on delivering superior customer experience.</p>
</details>
</body>
</html><var>
This represents text as variables used in programming languages or mathematical expressions. It is usually displayed in italics.
<body>
<h1> The var element </h1>
<p>The perimeter of a rectangle is P = <var>2L</var> + <var>2W</var>, where <var>L</var> is the length, and <var>W</var> the width of the rectangle.</p>
</body><data>
This tag adds a machine-readable translation to a link or tag. It has a mandatory attribute called value which specifies the machine-readable translation of the content of the element.
Related Articles
<body>
<h2>Grocery list:</h2>
<ul>
<li><data value="4421"> Tissue </data></li>
<li><data value="4422"> Toothpaste </data></li>
<li><data value="4423">Ketchup</data></li>
</ul>
</body><wbr>
Stands for 'Word Break Opportunity'. wbr element defines a spot in a long text where it is okay for a browser to add a line-break especially in smaller screens.
<body>
<h3>Resize your screen to see the break</h3>
<p>The longest word in English is pneumonoultramicroscopic<wbr>silicovolcanoconiosis</p>
</body><bdi>
Stands for Bi-Directional Isolate. It tells the browser to isolate the text it contains from the text around it.
<body>
<ul>
<li><bdi>Aria</bdi>: 20 points</li>
<li><bdi>إيان</bdi>: 43 points</li>
<li><bdi>الرجل القوي إيان</bdi>: 1st place</li>
</ul>
</body><mark>
This represents a highlight text. By default, the highlight is in yellow. This can be changed with css.
<body>
<h1>The mark element</h1>
<p>The intelligence of man lies in his <mark>quest for knowledge</mark> and ability to <mark> process </mark> information.</p>
</body><template>
This holds HTML reusable hidden content that can only be displayed unless the user clicks on it. To open the content, we need to use Javascript.
<body>
<h1>The template Element</h1>
<button onclick="showContent()">Open content</button>
<template>
<p>Nature has always been lovely. It creates beautiful sceneries that are wonderful to behold. </p>
<figure>
<img src="https://pixy.org/src/21/219269.jpg" width="300" height="300"/><br>
<figcaption> Nature </figcaption>
</figure>
</template>
<script>
function showContent() {
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
</body><kbd>
This defines a text as keyboard input.
<body>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
</body><ruby>
Represents annotation to show the pronunciation of East Asian names.
<rp>
A child element of ruby and a fallback parentheses for browsers that cannot display <ruby>.
<rt>
Specifies the ruby text component of a ruby annotation.
<body>
<h1> Ruby, Rt and Rp</h1>
<ruby>
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>
</body><dialog>
Defines an interactive widget that opens a dialog box or sub window in a document. It is usually attached to a script.
<body>
<dialog>
<p>This is an HTML dialog! Click the button to close it.</p>
<button id="close">Close Dialog</button>
</dialog>
<button id="show">Open dialog box!</button>
<script>
var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
dialog.show();
};
document.querySelector('#close').onclick = function() {
dialog.close();
};
</script>
</body>Document structure
<h1> to <h6>
These are different heading levels. They are used as headlines to either draw attention to text or as section within HTML documents. They take a down-top approach as h1 is the largest and h6 the smallest. There are additional aspects to the use of H elements with a document, as they provide gradual hierarchy to documents, defining the importance and indentation of content blocks to search engines. H elements can be styled using CSS to additional differentiation as required by the respective webpage.
<body>
<h1>
Text with h1
</h1>
<h2>
Text with h2
</h2>
<h3>
Text with h3
</h3>
<h4>
Text with h4
</h4>
<h5>
Text with h5
</h5>
<h6>
Text with h6
</h6>
</body><p>
This defines a text paragraph. It does not follow the formatting in the source code and displays as one long line of text and only breaks at the end of the closing tag.
Compare these codes
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni si ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body><body>
<p> Life is all about choices,
People say life is pre-destined,
But it is not.
Life is what you make it to be
</p>
</body><body>
<p>Life is all about choices, </p>
<p>People say life is pre-destined </p>
<p>But it is not </p>
<p>Life is what you make it to be
</body><div>
Div is one of the most popular and widely used tags. It is used to divide a document into sections, blocks and it can be styled to create the layout of a document.
Div contains every other element that can be displayed within the browser, including other divs. Thus <div> elements can be nested in a literally undefined depth. Divs are responsible for most modern Layouts found in web design.
<span>
Span is an inline form of div. It is used to style, inject or markup other parts of a document but without a break in formatting.
<br/>
This is a line break. It doesn't have a closing tag.
<hr/>
This defines a horizontal line anywhere in the body of the document.
<body>
<div class="main_container">
<!--divs -->
<div>
<img src="https://cdn.codecoda.com/images/made/themes/user/site/default/asset/img/common/andreas-maier-500x740-2_300_443_90.jpg">
<figcaption> This is the CEO of CodeCoda </figcaption>
</div>
<!--span -->
<p>When you see a <span style="color:red; font-size:20px;">text like this one</span> understand it means urgency.
<!-- line breaks -->
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. cillum dolore eu
fugiat nulla pariatur. <br/>Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<hr>
<p>Look at that horizontal line</p>
</div>
</body>Anchor tags (links)
Links are usually written with anchor <a> tags but with different attributes, which we will look at. By default anchor tags are displayed with a blue font and underlined. Please refer to this separate tutorial to style Links.
<a href=" ">
This is a hyperlink tag that takes a user to the page specified on the link. The href is an attribute of the anchor tag and it defines the actual link or URL.
The anchor tag is wrapped around any other tag - image, text, buttons or objects that are expected to be clickable.
Anchor tags can have titles as attributes which displays when the mouse is hovered over the link.
<!doctype html>
<body>
<div>
<a href="https://codecoda.com/en">Visit us at CodeCoda</a><br/>
<!-- clickable button -->
<button><a href="">Submit</a><button>
<!--images with links are clickable and can take you to the url specified in the anchor tag -->
<a href="#"><img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/></a>
<!-- a link with title -->
<a href="#" title="CodeCoda home page">Visit us</a><br/>
</div>
</body>
</html><a href="mailto">
The mailto is a type of link specifically for email addresses. Email address links can contain subject and even body.
Note that: these extra features are designed to send emails from installed email clients like Outlook. Browser based email will neither nor send the emails directly from the link.
<html>
<body>
<div>
<a href="mailto:info@codecoda.com">Send us an email</a><br/>
<!--to add a subject to the email -->
<a href="mailto:info@codecoda.com?subject=Testing this mailto subject line">Email with subject</a><br/>
<!-- to add a body to the email -->
<a href="mailto:info@codecoda.com?subject=Testing this mailto subject line&body=Testing the body!">Email with subject line and body</a><br/>
</div>
</body>
</html><a href="tel:">
This makes telephone numbers clickable. If a web page is accessed from a mobile, a user could dial the number instantly from their phone dial app.
<html>
<body>
<div>
Call us <a href="tel:+123 335 992 43">+123 335 992 43</a>
</div>
</body>
</html><a name=" "> and <a href="#name">
<a name=""> creates a named anchor link that links to specific sections of a page. <a href="#name"> is the name attached to the specific section of that page, and on which users will be redirected to.
This style of linking is called a bookmark and done on a page with very long text, but distinct headlines or sections. They are popularly used for Table of Contents, where the entire content is one one page, but the links point to different topics.
Instead of a name, they could also be used with an id.
<html>
<body>
<div>
<h3> Table of Contents </h3>
<ul>
<li><a href="#html">HTML. What is it?</a></li>
<li><a href="#css">CSS. Stylesheets</a></li>
<li><a href="#js">Javascript. The language of the web</a></li>
<li><a href="#python">Python. Data science</a></li>
</ul>
<h2><a name="html">HTML</h2>
So html ... "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<h2><a name="css">CSS</h2>
Now CSS... "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<h2><a name="js">Javascript</h2>
Everyday Javascript ... "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<h2><a name="python">Python</a></h2>
Python can be ... "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</body>
</html>Lists
<li>
<li> defines a list. It is usually used within an ordered list <ol> or unordered list <ul>. It is displayed with bullet points in an unordered list in a list style format or with numbers or alphabets in an ordered list.
<ul>
Unordered list. This defines a list without sequential numbering. It uses bullet points instead.
<p>Grocery list</p>
<ul>
<li> Tissues </li>
<li> Paint </li>
<li> Rice </li>
</ul><ol>
Ordered list. This defines a list that is numbered sequentially either by numbers (including roman numerals), or letters. It has values like start, reversed and type.
<h3>How to start a career in web development</h3>
<ol>
<li> Get a computer </li>
<li> Learn HTML </li>
<li> Learn CSS </li>
</ol><h3>5 important things to do during a pandemic</h3>
<ol reversed>
<li> Watch the news </li>
<li> Keep in touch with your friends </li>
<li> Keep supplies </li>
<li> Stay indoors </li>
<li> Wear a mask if you are going out </li>
</ol><h3>5 technologies of 21st century</h3>
<ol type="a">
<li> Virtual Reality </li>
<li> Self driving cars </li>
<li> Intelligent personal assistants </li>
<li> AI </li>
<li> Robots </li>
</ol><dl>
This is a description list. It is used with <dt> and <dd>
<dt>
It states a name in the description. It is used with <dl> and <dd>
<dd>
It elaborates on names or statements stated in the <dt>. It is contained within the <dl> tag.
<dl>
<dt> 2 pair of black sneakers </dt>
<dd> For Lily and Sunny </dd>
<dt> A bottle of whiskey <dt>
<dd> For dad and his friends </dd>
</dl>Measurements
<progress>
Shows the progress of an activity or task going on in the browser, usually like a progress bar. It is best used with <label> and an id for better results.
<h2>Download Progress Bar</h2>
<label for="download">Downloading progress:</label>
<progress id="download" value="62" max="100"> 62% </progress>
</div><meter>
It is associated with a gauge. It is the tag for measuring scalar quantities and fractional values. It shouldn't be used to measure the progress of an activity like a download.
<h3>The meter tag</h3>
<label for="disk_e">Disk usage C:</label>
<meter id="disk_e" value="5" min="0" max="10">2 out of 10</meter><br>
<label for="external_disk">Disk usage for external disk:</label>
<meter id="external_disk" value="0.3">30%</meter>Table
<table>
Defines an HTML table within the document. It is the parent element to other table elements in the document. <table> </table> is used for only one table within the document.
<thead>
Defines and groups the header content of a table
<tbody>
Used to define and group the body content of an HTML table.
<tfoot>
Defines and groups the footer content of an HTML table.
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Foodstuff</td>
<td>$120</td>
</tr>
<tr>
<td>Utilities</td>
<td>$230</td>
</tr>
<tr>
<td>Rent</td>
<td>$300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$650</td>
</tr>
</tfoot>
</table><caption>
This element gives a caption to an HTML table and must be inserted first before the rows and columns. By default, it is centered across the width of a table.
<th>
It defines the header of each column in a table. It is bold and centered by default.
<tr>
This tag defines the rows in an HTML table.
<td>
This defines a cell in a table. The td tag belongs hierarchically within the <tr> tag.
<body>
<div>
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Foodstuff</td>
<td>$120</td>
</tr>
<tr>
<td>Utilities</td>
<td>$230</td>
</tr>
<tr>
<td>Rent</td>
<td>$300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$650</td>
</tr>
</tfoot>
</table>
</div>
</body><col>
Col defines the properties for columns within a colgroup in a table. It has an attribute -span that specifies the number of columns a <col> element should span across.
<colgroup>
A colgroup is the parent element of <col>. It defines the styling to be done on a group of columns in a table.
<table>
<caption> Price list </caption>
<colgroup>
<col span="2" style="background-color:pink;">
<col style="background-color:green">
</colgroup>
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Shoes</td>
<td>$100</td>
<td>5</td>
</tr>
<tr>
<td>Tshirts</td>
<td>$80</td>
<td>12</td>
</tr>
<tr>
<td>Wristbands</td>
<td>$20</td>
<td>33</td>
</tr>
</table>Objects and iframes
<embed>
This defines a tag that acts as a container for an external media. For eg, a plug-in application, a video, audio or html web page.
It isn't outdated, but isn't a standard for use anymore for the following reasons.
- Each of the media for which it acts as a container has it's their own tags and attributes, like <video> for videos and <audio> for audio
- Modern browsers no longer support ActiveX, Java Applets and Shockwave Flash.
<body>
<h1>The embed element</h1>
<!-- embedding an image-->
<embed type="image/jpg" src="image 4.jpg" width="300" height="200">
<!--embedding another html document-->
<embed type="text/html" src="demopage.html" width="500" height="200">
<!--embedding an html page on the web-->
<embed type="text/html" src="https://learn.shayhowe.com/html-css/building-your-first-web-page/" width="500" height="200">
</body><object>
Defines a container for an external resource.
<param>
This represents the parameters of an <object> element. It has a name and value attribute.
<body>
<h1>The object and param element</h1>
<object data="video sample2.mp4">
<param name="autoplay" value="true">
</object>
</body><iframe>
This replaces the frame and frameset tags from HTML4 which are obsolete in HTML5. It embeds an external document within a HTML document.
<body>
<h1>The iframe element</h1>
<iframe src="https://learn.shayhowe.com/html-css/getting-to-know-html/" title="Learning how to build a website">
</iframe>
</body>Forms
<form>
For creating HTML forms. It takes other elements like input, button, fieldset, legend, button etc.
<legend>
Defines a caption for the fieldset element.
<fieldset>
Groups together related elements in a form and draws a rectangular box around them.
<body>
<h1>Form, Fieldset and Legend</h1>
<form>
<fieldset>
<legend>Login details:</legend>
<label for="fname">First name:</label>
<input type="text" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" name="password"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body><label>
It defines a title or title for a number of elements. The for attribute of the label should be the same as the id attribute of the element the label is tied to.
<input> and types
The most important and popular form element. It defines an input area for the user to input data. It takes on different types.
It also has attributes like 'required' which specifies if an input control can be skipped or not, and value which is the value of the data inputted.
Input types
- <input type = "text"> - Defines a single line of text. Also the default for input if no type is specified.
- <input type = "hidden"> - This defines an input value that is hidden from the user and on the browser page, but whose value will be submitted alongside other details.
- <input type = "password"> - Defines a password input
- <input type = "email"> - Defines an email input.
- <input type = "tel"> - Defines an input field for entering telephone numbers.
- <input type = "date"> - Defines a date picker. It takes day, month and year
- <input type = "month"> - Defines a month and year picker.
- <input type = "number"> - Defines a field for selecting numbers
- <input type = "time"> - Defines an input control for entering time.
- <input type = "week"> - Defines a week and year control.
- <input type = "datetime-local"> - Defines a date, time picker that selects time, day, month and year.
- <input type = "button"> - Defines a clickable button.
- <input type = "checkbox"> - Defines a checkbox.
- <input type = "radio"> - Defines a radio button.
- <input type = "color"> - Defines a color picker
- <input type = "range"> - Defines a slider for choosing a numerical value.
- <input type = "url"> - Defines a text control for entering valid urls.
- <input type = "search"> - Defines a control to input search text
- <input type = "image"> - Defines an image as a submit button.
- <input type = "file"> - Defines a file upload control.
- <input type = "reset"> - Defines a reset button that clears all previous entries.
- <input type = "submit"> - Defines a submit button.
<body>
<h1>Label with input types</h1>
<h1>Tell us about yourself</h1>
<form>
<!--input type text-->
<label for="pwd">Your name</label>
<input type="text" required /><br /><br />
<!--input type hidden-->
<input type="hidden" name="applicantid" value="RS1020">
<!--input type password-->
<label for="pwd">Password:</label>
<input type="password" name="pwd" required /><br /><br />
<!--input type email-->
<label for="email">Email:</label>
<input type="email" name="email" /><br><br>
<!-- input type for tel-->
<label for="phone">Enter your phone number</label><br><br>
<input type="tel" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
<!--input type date -->
<label for="birthday">Birthday:</label>
<input type="date" name="birthday" /><br /><br />
<!--input type month-->
<label for="jobmonth">When did you start your current job</label>
<input type="month" name="jobmonth" /><br /><br />
<!--input type number-->
<label for="work">How many hours a day are you willing to work?</label>
<br />
<input type="number" name="work" min="1" max="12"><br /><br />
<!--input type time-->
<label for="time">What time is convienient for you?</label>
<br />
<input type="time" name="time" /><br /><br />
<!-- input type week-->
<label for="week">What week are you expecting?</label>
<br />
<input type="week" name="week" /><br /><br />
<!--input type datetime-local-->
<label for="mombday">When is your mother's birth day?</label>
<br />
<input type="datetime-local" name="mombday" /><br /><br />
<!--input type button-->
<p> Will you like to continue this application? </p>
<input type="button" value="Yes" onclick="#">
<input type="button" value="No" onclick="#"><br /><br />
<!--input type checkbox-->
<legend> Which type of food do you like. Check all that apply </legend>
<input type="checkbox" name="spicy">
<label for="spicy"> Spicy food </label>
<br>
<input type="checkbox" name="sweet">
<label for="sweet"> Sweet food</label>
<br>
<input type="checkbox" name="salty">
<label for="salty"> Salty food</label>
<br>
<input type="checkbox" name="sour">
<label for="sour"> Sour food</label>
<br>
<br>
<!-- input type radio -->
<p>Gender:</p>
<input type="radio" name="male">
<label for="male">Male</label>
<br />
<input type="radio" name="female">
<label for="female">Female</label>
<br />
<input type="radio" name="others">
<label for="others">Others</label>
<br />
<br />
<!--input type color-->
<label for="moodcol">Choose a color that suits your mood</label><br /><br />
<input type="color" name="moodcol" value="#000000"><br /><br />
<!--input type range-->
<label for="products">On a scale of 1 to 10; how well do you like our products?</label>
<br />
<input type="range" name="products" min="1" max="10"><br /><br />
<!--input type url-->
<label for="website">What is your website address?</label>
<br />
<input type="url" name="website" /><br /><br />
<!--input type search-->
<label for="search">Search Online</label>
<br />
<input type="search" name="search" /><br /><br />
<!--input type image-->
<input type="image" src="https://th.bing.com/th/id/OIP.rXds8ZHRs7UiVcgvlOshEgHaHa?w=202&h=201&c=7&o=5&dpr=1.25&pid=1.7" alt="Submit" width="48" height="48"><br /><br>
<!--input type file-->
<label for="profilepic">Upload your profile picture </label>
<br />
<input type="file" name="profilepic"><br><br>
<!--input type reset-->
<p>Would you like to reset this application and change your answers? </p>
<input type="reset" value="Reset">
<br />
<!--input type submit-->
<input type="submit" value="Submit">
</form>
</body>
<select>
This creates a drop down list. It has a name attribute as a key attribute for reference. It's child element is <option>. It is best used with <label> for better accessibility.
<option>
A child element of <select>, <datalist> and <optgroup> that defines the option lists of the drop down.
<body>
<h1>The select and option element</h1>
<form>
<label for="sites">Writing Sites</label>
<select name="sites" id="sites">
<option value="medium">Medium</option>
<option value="blogger">Blogger</option>
<option value="hubpages">Hubpages</option>
<option value="devto">DevTo</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body><optgroup>
This groups <options> in a <select> dropdown. It usually needs a value which specifies the value to be sent to the server.
<h1>The optgroup element</h1>
<form>
<label for="techcomp">Your favorite tech companies by country:</label>
<br /><br />
<select name="techcomp" id="techcomp">
<optgroup label="Nigeria">
<option value="pv">PiggyVest</option>
<option value="fw">FlutterWave</option>
<option value="it">Iroko TV</option>
</optgroup>
<optgroup label="America">
<option value="pp">Paypal</option>
<option value="nf">Netflix</option>
<option value="gg">Google</option>
</optgroup>
</select>
<br /><br />
<input type="submit" value="Submit">
</form>
</body><datalist>
A datalist represents an autocomplete or recommended option from a list of options available within other controls.
It also specifies a list of pre-defined options for an input list element.
Datalist uses a list attribute with <input> element. This list attribute refers to the datalist containing the recommended options for that input element.
Datalist is tied to the input with it's list attribute and their ids must be the same.
<body>
<h1>The datalist element</h1>
<form>
<label for="techcomp">Which tech company do you want to work for:</label>
<br /><br />
<input list="techcompanies" name="tech" id="techcomp">
<datalist id="techcompanies">
<option value="Google">
<option value="FaceBook">
<option value="Amazon">
<option value="CodeCoda">
<option value="Apple">
<option value="Netflix">
</datalist>
<input type="submit">
</form>
</body><textarea>
This is a multiline text input control. It takes unlimited text and is used mostly to take long text like reviews and comments.
By standard, it is wider and bigger than the input text box, but it's width and height can also be increased or decreased by using the rows and cols attributes.
It has a name attribute that should be specified, else data in the form won't be sent to the server. It is best used with a <label> for best accessibility.
<body>
<h1>The textarea element</h1>
<form>
<label for="comment">Leave a comment below:</label>
<br /><br />
<textarea id="comment" name="comment" rows="10" cols="50">I used this site as a HTML resource because I was having difficulties with HTML. I am glad I did.
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</body><output>
The result of a calculation.
<body>
<h1>The output element</h1>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)*parseInt(c.value)">
<input type="range" id="a" value="55"> +
<input type="number" id="b" value="22"> *
<input type="text" id="c" value=""> =
<output name="x" for="a b c"></output>
</form>
</body><button>
This defines a button that can be clicked. Images can be added to a button.
<body>
<h1>Button Element</h1>
<!-- A simple button -->
<button> Submit </button>
<!-- image with button -->
<button>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png" alt="html5logo" />
</button>
</body>Images
<img>
This defines an image embedded into the document. It has two required attributes- src and alt which are the source URL and alternative text for the image respectively.
<body>
<h3>Image </h3>
<img src="image 5.jpg" alt="a neighbourhood" />
</body><figcaption>
Adds a caption to a <figure>
<figure>
Defines a container for images, pictures, illustrations, diagrams, codelistings etc.
The <img> element is usually a child of a figure although <img> can stand alone.
<body>
<h1>Figure and Figcaption</h1>
<figure>
<img src="https://th.bing.com/th/id/OIP.kVMd4fPaKYoPLcC79b2YiwHaE8?pid=ImgDet&rs=1" width="600px">
<figcaption>A beautiful bridge, Europe</figcaption>
</figure>
</body><map>
Creates an image map with clickable areas. The clickable areas are determined by the coordinates.
The name given to the name attribute of the map must be the same as the usemap of the <img>. This binds them together.
<area>
A child element of <map>. It defines the clickable areas of the map.
<body>
<h1>The map and area elements</h1>
<p>Click the bicycle and road and bottom right corners of the image to go to another page</p>
<img src="image 5.jpg" alt="trees" usemap="#lonelyroad" width="400" height="379">
<map name="lonelyroad">
<area shape="rect" coords="34,44,270,350" alt="road" href="https://th.bing.com/th/id/OIP.s4rVcLq85jilsz0jopBnjwHaHa?pid=ImgDet&rs=1">
<area shape="rect" coords="290,172,333,250" alt="bike" href="https://th.bing.com/th/id/OIP.63wRzWxdledZpU8yp3xlQAHaET?pid=ImgDet&rs=1">
<area shape="circle" coords="337,300,44" alt="bicycle rider" href="https://th.bing.com/th/id/OIP.84GItSrqXADTWOD_ZnracgHaE7?pid=ImgDet&rs=1">
</map>
</body><svg>
This represents a tag for svg drawings. It has attributes and methods for drawing paths, shapes, texts and graphic images.
<body>
<h1>The svg element</h1>
<!-- a rectangle shape -->
<svg width="300" height="200">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:pink;stroke:black;stroke-width:5;opacity:1" />
<!--for browsers that do not support svg --> Sorry, your browser does not support inline SVG.
</svg>
<!-- a circle -->
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="blue" />
</svg>
</body><canvas>
Defines a tag for drawing graphics with scripting. These drawings are usually done with Javascript, but canvas acts as a container.
<body>
<h1>The canvas element</h1>
<canvas id="newcanvas">Your browser does not support the canvas tag.</canvas>
<script>
var c = document.getElementById("newcanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#A4D844";
ctx.fillRect(0, 0, 190, 1020);
</script>
</body>Media
<video>
Inserts a video into a document from external sources.
This tag takes more than one <source> tag with different videos with different formats and sources of which the browser can decide to play.
HTML5 supports three video formats - MP4, WebM, and OGG.
<body>
<h1>The video element</h1>
<video width="320" height="240" controls>
<source src="video sample1.mp4" type="video/mp4">
<source src="video sample2.mp4" type="video/mp4">
</video>
</body><audio>
This inserts an audio sound into a document. It could embed audio from external sources like the web or the audios on the computer.
Audio elements take more than one <source> tag with different formats and sources of which the browser can decide which to play.
HTML5 supports three audio formats - MP3, WAV and OGG.
<body>
<h1>The audio element</h1>
<audio controls>
<source src="audio sample2.wav" type="audio/wav">
<source src="audio sample1.ogg" type="audio/ogg">
<source src="audio sample3.mp3" type="audio/mpeg">
</audio>
</body>The media element, video and audio has the following attributes
- Autoplay: this specifies if an audio or video should start playing on load
- Control: specifies what control (eg pause/play) should be shown
- Src: source URL of media
- Height & Width: to set the height and width of the player.
- Muted: specifies if a player should be muted
- Loop: specifies if the video or audio should be repeated when it finishes playing.
- Poster: specifies the image to be shown as a placeholder when a video is not playing. This attribute is not in audio.
- Preload: specifies how the video or audio should be loaded when the page loads
<track>
This is a child element of media elements audio, video. It adds subtitles and captions to the media. The only accepted track file format is .vtt formatted in WebVTT format.
It takes attributes like default, kind, label, src and srclang which are the default user preferences, kind of text track, title of the text track, source URL and language of the track respectively.
<body>
<video width="500" height="500" controls>
<source src="video sample2.mp4" type="video/mp4">
<track default src="testscript.vtt" kind="subtitles" srclang="en" label="English" />
</video>
</body><picture>
This defines a tag that acts as a container to display images or pictures. Picture is a step up to just using the more popular <img> alone.
Rather than have one image adjusted repeatedly, it allows the inclusion of multiple images using the <source> tag. The browser then selects which picture to display based on the viewport and screen size specified.
<img> is the last child of the picture element as this displays the actual image if none in source matches.
<body>
<h1>The picture element</h1>
<p>Resize the browser window to load different images.</p>
<picture>
<source media="(min-width:650px)" srcset="https://pixy.org/src/21/219269.jpg">
<source media="(min-width:465px)" srcset="https://pixy.org/src/19/193722.jpg">
<img src="https://th.bing.com/th/id/OIP.kVMd4fPaKYoPLcC79b2YiwHaE8?pid=ImgDet&rs=1" alt="Flowers" style="width:auto;">
</picture>
</body>Layout and styles
<header>
This defines the heading information of various sections of the content of a document. It separates the different headings and subheadings (h1-h6) on a webpage.
It also acts as introductory or navigational aid for content within a document.
<body>
<header>
<h1>Building your first site.</h1>
<h4>What you need </h>
</header>
<p>This paragraph gives more information</p>
</body><footer>
This defines the footer or end section of a document. It usually contains the copyright and authorship information and related links.
<body>
<h1>The footer element</h1>
<footer style="background:black; color:white; text-align:center;padding:1px;">
<h3>Lorem Beauty Cosmetics </a>
<br />
<br />
<p>Copyright: © lorem beauty 2021 </p>
</footer>
</body><nav>
This defines a set or block of links. The nav is mostly used for menu links at the top or bottom of a page or by the side (as sidebar links).
<body>
<h1>The nav</h1>
<nav>
<a href="#">Home</a> |
<a href="#">Blog</a> |
<a href="#">Portfolio</a> |
<a href="#">About Us</a> |
<a href="#">Contact Us</a>
</nav>
</body><article>
Article represents an independent component that is particularly used for publications, blog posts, newspaper articles section of a document.
<main>
The main section of a page. Every web page should contain only one main tag which contains unique features. Features of a webpage like nav, footer, header, logos etc are used repeatedly across pages cannot be contained in a <main>.
<aside>
These are like sidebars or or callout boxes in a document. They contain content that is not directly related to a main.
<section>
Defines a section in a document.
<body>
<h3>Main, article, section and aside elements</h3>
<main>
<h1>Horror movies; the lure.</h1>
<h4>Why is the horror genre suddenly revived?</h4>
<section>
<article>
<h2>Halloween</h2>
<p>As people do more outrageous things and wear outrageous costumes during halloween, they turn to horror movies for inspiration</p>
</article>
<aside style="float:right; width: 150px; margin-right: 30px; background: yellow; padding:13px;"> Do you know that the world's top horror movie lovers are actually nice people? </aside>
<article>
<h2>The thrill</h2>
<p>Remember the thrill you felt when you first went to a themed horror park? Even though it was scary? People need to feel that way</p>
</article>
</section>
<section>
<h2>Where you can buy Halloween costumes</h2>
<ul>
<li> Ebay </li>
<li> Amazon </li>
<li> Alibaba </li>
<li> Dealsday </li>
</ul>
</section>
</main>
</body>Conclusion
Now we know the basics of the structure of an HTML Page. Refer to this HTML Cheat Sheet whenever you wish to check out tags, or remember ones you've forgotten.
HTML Tags alone make no nice-looking HTML pages. To make nice-looking websites and pages, you need to have some basic understanding of CSS Layouts. There is more to it – and this can only be the beginning of your journey into HTML, CSS, and JavaScript. Once you start mastering the 3 of them, you'll build nicer – better looking – and faster websites!
For more learning resources about Programming check out the “Programming Category!”
