Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
191 views

HTML5 Cheat Sheet

This document provides an overview of HTML and how to get started with front-end web development. It defines what HTML is, how to structure an HTML file, common HTML tags, and examples of basic HTML pages. It also introduces new HTML5 elements and semantic tags. Resources for learning HTML online are listed, including free courses from Codecademy, freeCodeCamp, and Team Treehouse.

Uploaded by

Alan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
191 views

HTML5 Cheat Sheet

This document provides an overview of HTML and how to get started with front-end web development. It defines what HTML is, how to structure an HTML file, common HTML tags, and examples of basic HTML pages. It also introduces new HTML5 elements and semantic tags. Resources for learning HTML online are listed, including free courses from Codecademy, freeCodeCamp, and Team Treehouse.

Uploaded by

Alan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Learn Front-End Web Development:

HTML5
CHEAT
SHEET

mikkegoes.com
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

Please note: This freebie contains affiliate links to products I use and recommend. If you choose to purchase
using these links, I may receive a small commission for referring you. But please, only buy products you
believe will help you achieve your goals faster. Thank you for your support!

mikkegoes.com
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.

mikkegoes.com
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>

mikkegoes.com
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
FORMS
<script> Script resource

<form> Form
HEADINGS, TEXT, FORMATTING <fieldset> Collection of fields
<label> Input label
<h1> ... <h6> Headings <input /> Form input
<p> Paragraph <select> Group of options
<br /> Line break <option> Drop-down options
<hr /> Horizontal line <textarea> Large text input box
<b> or <strong> Bold <button> Button
<i> or <em> Italic
<u> Underline
TABLES
<sup> Superscript
<sub> Subscript
<table> Table
<del> Struck out / Deleted
<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

mikkegoes.com
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

mikkegoes.com
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

mikkegoes.com
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>

mikkegoes.com
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"

mikkegoes.com
Find more free resources
for learning to code:

Read the blog:

TO THE BLOG

Find more courses:

COURSES

Browse useful resources:

RESOURCES

mikkegoes.com
Thanks for reading!

I hope you found this little cheat sheet helpful.


Let me know what you are building with it!

Good luck with your HTML projects!

Cheers,
- Mikke

Come say hi!

mikkegoes.com

You might also like