Scribd
Upload
386 views12 pages

HTML5 Cheat Sheet - MikkeGoes

HTML

Uploaded by

Keerthi Peravali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
386 views12 pages

HTML5 Cheat Sheet - MikkeGoes

HTML

Uploaded by

Keerthi Peravali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

HTML5

CHEAT
SHEET
Your quick cheat sheet to use HTML5
the right way and build front-end web
development projects faster.

BY MIKKE HELSINGIUS
Copyright & Disclaimer
Copyright Affiliate disclaimer
© Copyright by Mikke Helsingius This guide contains affiliate links. If you choose to
purchase a product through an affiliate link, at no
All right reserved, including resale rights. This guide extra cost to you I may earn a small commission
or any portion thereof may not be reproduced or for referring you.
used in any manner whatsoever without the express
written permission of the publisher. Regardless of whether or not I receive a commission,
I only recommend products and resources that I
https://mikkegoes.com personally pay for, use, and trust. Everything I
[email protected] recommend in this guide has helped me grow my
online business faster.
Disclaimer
This guide is for your personal use only. You are not Should you choose to opt for these tools, too, I want
allowed to give or sell it to anyone else. Any portion to thank you for supporting me and making this
thereof may not be reproduced or used in any guide possible!
manner whatsoever without the express written
permission of the publisher.

Please note that this guide is based on personal


experience and anecdotal evidence. Although the
author has made every reasonable attempt to
achieve complete accuracy of the content of this
document, they assume no responsibility for errors
or omissions. You should use this information as you
see fit, and at your own risk.

Your specific situation may not be exactly suited to


the examples and results illustrated in this
document. It's likely that the results you will achieve
will not be identical.

Copyright © mikkegoes.com – All rights reserved.


What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language
for creating web pages. HTML defines and describes the structure of a web page.

Just like you see headings, paragraphs, lists, quotes, and sections in a magazine,
HTML helps you organize your web page with a logical structure in a similar way.

HTML stands for HyperText Markup Language.


It was released in 1993.
HTML describes the structure of a web page, dividing the page into sections and
series of elements.
HTML elements tell the web browser how to display the content.
But: It doesn’t style the content. (That is what CSS, Cascading Style Sheets are for.)

How to create an HTML file?

To create an HTML file, you need to use a code or text editor and save your file with
the extension .html. You can open your file in your web browser to see the output of
your HTML markup.

Please note: You can’t use standard text processors like Google Docs or MS Word for
this. They don’t output clean HTML markup code.

Here are a few popular text editors:


Brackets
Notepad++
VS Code
Sublime Text
Atom

Copyright © mikkegoes.com – All rights reserved.


HTML tags

HTML elements are represented by tags, which are characters you place inside
angled brackets, < and >. Browsers do not display the HTML tags, but use them to
render the content of the page.

Each tag is like a container for HTML code. HTML tags label pieces of content such as
"heading", "paragraph", "table", and so on.

Most tags come in pairs: an opening tag denotes the start of an element, a closing
tag ends it. However, some tags are self-closing and they don’t need a closing tag.

<p> </p>
OPENING TAG CLOSING TAG

Opening tags often carry attributes. They allow you to add even more information
about the contents of an element. Each attribute requires a name and a value.

For example, the <a> tag defines a hyperlink. The href attribute specifies the URL of
the page the link goes to:

<a href="https://mikkegoes.com">My website</a>


ATTRIBUTE: HREF

Copyright © mikkegoes.com – All rights reserved.


HTML document: A simple example

Defines this document to be HTML5


<!DOCTYPE html>
The root element of an HTML page
<html>
Meta information about the document
<head>
Specifies a title for the document
<title>Page Title</title>
</head> 
Contains the visible page content
<body>
Defines a large heading
<h1>Your Main Heading</h1>
Defines a paragraph
<p>The first paragraph.</p>
Defines a sub-heading
<h2>Your first Sub-Heading</h2>
<p>The second paragraph.</p>
</body>
</html>

Copyright © mikkegoes.com – All rights reserved.


Common HTML elements

DOCUMENT OUTLINE LINKS

<!DOCTYPE> Version of HTML <a href=""> Page link


<html> HTML document <a href="mailto:"> Email link
<head> Page information <a href="#name"> Anchor link
<body> Page contents

IMAGES
PAGE INFORMATION
<img src="" /> Image

<title> Document title


<style> Style resource (CSS)
FORMS
<script> Script resource

<form> Form
HEADINGS, TEXT, FORMATTING <fieldset> Collection of fields
<legend> Caption for <fieldset>
<h1> ... <h6> Headings <label> Input label
<p> Paragraph <input /> Form input
<br /> Line break <select> Group of options
<hr /> Horizontal line <option> Drop-down options
<b> or <strong> Bold <textarea> Large text input box
<i> or <em> Italic <button> Button
<u> Underline
<sup> Superscript
TABLES
<sub> Subscript
<del> Struck oput / Deleted
<!----> Comment <table> Table
<caption> Caption
<thead> Table header
LISTS <tbody> Table body
<tfoot> Table footer
<ol> Ordered list <col /> Column
<ul> Unordered list
<tr> Table row
<li> List item
<th> Header cell
<td> Table cell

Copyright © mikkegoes.com – All rights reserved.


New HTML5 elements

NEW STRUCTURAL/SEMANTIC ELEMENTS

<article> An article in the document

<aside> Content aside from the page content

<bdi> Part of text that might be formatted in a different direction from other text
outside it

<details> Additional details that the user can view or hide

<dialog> A dialog box or window

<figcaption> A caption for a <figure> element

<figure> Self-contained content like diagrams, illustrations, etc.

<footer> A footer for the document or section

<header> A header for the document or section

<main> The main content of the document

<mark> Marked or highlighted text

<menuitem> A menu item that user can invoke from a pop-up menu

<meter> A scalar measurement within a known range (a gauge)

<nav> Navigation links

<progress> Represents the progress of a task

<rp> An explanation of characters (for East Asian typography)

<ruby> A ruby annotation (for East Asian Typography)

<section> A section in the document

<summary> A visible heading for a <details> element

<time> A date/time

<wbr> A possible line-break

Copyright © mikkegoes.com – All rights reserved.


New HTML5 elements

NEW MEDIA ELEMENTS

<audio> Sound or music content

<embed> Containers for external non-HTML applications (like plug-ins)

<source> Multiple media resources for <video> and <audio> elements

<track> Text tracks for <video> and <audio> elements

<video> Video or movie content

NEW GRAPHICS TAGS

<canvas> Graphic drawing using Javascript

<svg> Draw scalable vector graphics

NEW FORM ELEMENTS

<datalist> Predefined options for input controls

<output> The result of a calculation

Copyright © mikkegoes.com – All rights reserved.


HTML5 semantic elements: Page structure

HTML5 offers a few new semantic elements to define different parts of the web page.
You can use these semantic elements instead of creating <div> elements for your
header, navigation, or footer.

<body>

<header>

<nav>

<article> <aside>

<section>

<section>

<section>

<footer>

Copyright © mikkegoes.com – All rights reserved.


Where to learn HTML online?

Codecademy.com freeCodeCamp.org

HTML & CSS Basic HTML and HTML5

Udemy Udemy

The Complete Web The Web Developer


Developer Course 2.0 Bootcamp

Team Treehouse w3schools.com

Introduction to HTML HTML Tutorial


and CSS

Copyright © mikkegoes.com – All rights reserved.


More free resources to learn to code:

Discover free guides:

TO THE BLOG

Find more courses:

COURSES

Browse helpful resources:

RESOURCES

Copyright © mikkegoes.com – All rights reserved.


Thanks for reading!

I hope you found this little HTML5 cheat sheet helpful. HTML really is one of the
easiest languages out there – and it's so much fun to start experimenting with it once
you learn your first HTML elements, tags and attributes.

If you're not sure what to create, start by building a very simple website for yourself.
Choose a topic you like, such as a hobby you enjoy spending time with.

Remember: your first HTML web page will look super basic and simple, but that's OK.
We all have to start somewhere!

Later on, when your HTML skills improve and you learn CSS (Cascading Style Sheets),
you can start improving your website step-by-step. You can add new elements,
adjust your HTML page structure, and most importantly: make it look beautiful with
some very easy CSS styling.

With that said, check out The Complete Web Developer Course 2.0 and combine it
with the tutorials at freeCodeCamp – that's an unbeatable combo for learning all the
basics and then some!

Good luck with your HTML5 projects!

Mikke
Founder and Creator, Mikke Goes Coding

https://mikkegoes.com

Copyright © mikkegoes.com – All rights reserved.

You might also like