Scribd
Upload
18 views

Learn HTML_ Elements and Structure Cheatsheet _ Codecademy

This document serves as a comprehensive cheatsheet for HTML, detailing various elements, their structure, and usage. It covers elements such as <em>, <p>, <div>, <img>, and <a>, explaining their functions and providing examples. Additionally, it discusses attributes, indentation, and the importance of the document type declaration in HTML5.

Uploaded by

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

Learn HTML_ Elements and Structure Cheatsheet _ Codecademy

This document serves as a comprehensive cheatsheet for HTML, detailing various elements, their structure, and usage. It covers elements such as <em>, <p>, <div>, <img>, and <a>, explaining their functions and providing examples. Additionally, it discusses attributes, indentation, and the importance of the document type declaration in HTML5.

Uploaded by

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

Cheatsheets / Learn HTML

Elements and Structure


<em> Emphasis Element
The <em> emphasis element emphasizes text
and browsers will usually italicize the <p>This <em>word</em> will be
emphasized text by default. emphasized in italics.</p>

HTML
HTML (HyperText Markup Language) is used to
give content to a web page and instructs web
browsers on how to structure that content.
Element Content
The content of an HTML element is the
information between the opening and closing <h1>Codecademy is awesome! 🙂</h1>
tags of an element.

<li> List Item Element


The <li> list item element create list items
inside: <ol>
<li>Head east on Prince St</li>
● Ordered lists <ol>
<li>Turn left on Elizabeth</li>
● Unordered lists <ul> </ol>

<ul>
<li>Cookies</li>
<li>Milk</li>
</ul>
<video> Video Element
The <video> element embeds a media player
for video playback. The src attribute will <video src="test-video.mp4"
contain the URL to the video. Adding the controls>
controls attribute will display video controls Video not supported
in the media player. </video>
Note: The content inside the opening and
closing tag is shown as a fallback in browsers
that don’t support the element.

<ol> Ordered List Element


The <ol> ordered list element creates a list
of items in sequential order. Each list item <ol>
appears numbered by default. <li>Preheat oven to 325 F 👩‍🍳
</li>
<li>Drop cookie dough 🍪</li>
<li>Bake for 15 min ⏰</li>
</ol>
<div> Div Element
The <div> element is used as a container
that divides an HTML document into sections <div>
and is short for “division”. <div> elements <h1>A section of grouped
can contain flow content such as headings, elements</h1>
paragraphs, links, images, etc. <p>Here’s some text for the
section</p>
</div>
<div>
<h1>Second section of grouped
elements</h1>
<p>Here’s some text</p>
</div>
HTML Structure
HTML is organized into a family tree structure.
HTML elements can have parents, <body>
grandparents, siblings, children, <div>
grandchildren, etc. <h1>It's div's child and
body's grandchild</h1>
<h2>It's h1's sibling</h2>
</div>
</body>

Closing Tag
An HTML closing tag is used to denote the end
of an HTML element. The syntax for a closing <body>
tag is a left angle bracket < followed by a ...
forward slash / then the element name and </body>
a right angle bracket to close > .
Attribute Name and Values
HTML attributes consist of a name and a value
using the following syntax: name="value" and <elementName name="value">
can be added to the opening tag of an HTML </elementName>
element to configure or change the behavior
of the element.

<br> Line Break Element


The <br> line break element will create a line
break in text and is especially useful where a A line break haiku.<br>
division of text is required, like in a postal Poems are a great use case.<br>
address. The line break element requires only Oh joy! A line break.
an opening tag and must not have a closing
tag.

<img> Image Element


HTML image <img> elements embed images
in documents. The src attribute contains <img src="image.png">
the image URL and is mandatory. <img> is an
empty element meaning it should not have a
closing tag.
<h1>-<h6> Heading Elements
HTML can use six different levels of heading
elements. The heading elements are ordered <h1>Breaking News</h1>
from the highest level <h1> to the lowest <h2>This is the 1st
level <h6> . subheading</h2>
<h3>This is the 2nd
subheading</h3>
...
<h6>This is the 5th
subheading</h6>

<p> Paragraph Element


The <p> paragraph element contains and
displays a block of text. <p>This is a block of text! Lorem
ipsum dolor sit amet, consectetur
adipisicing elit.</p>
HTML Attributes
HTML attributes are values added to the
opening tag of an element to configure the <p id="my-paragraph" style="color:
element or change the element’s default green;">Here’s some text for
behavior. In the provided example, we are a paragraph that is being altered
giving the <p> (paragraph) element a unique by HTML attributes</p>
identifier using the id attribute and
changing the color of the default text using
the style attribute.

<ul> Unordered List Element


The <ul> unordered list element is used to
create a list of items in no particular order. <ul>
Each individual list item will have a bullet point <li>Play more music 🎸</li>
by default. <li>Read more books 📚</li>
</ul>
alt Attribute
An <img> element can have alternative text
via the alt attribute. The alternative text will <img src="path/to/image" alt="text
be displayed if an image fails to render due to describing image" />
an incorrect URL, if the image format is not
supported by the browser, if the image is
blocked from being displayed, or if the image
has not been received from the URL.
The text will be read aloud if screen reading
software is used and helps support visually
impaired users by providing a text descriptor
for the image content on a webpage.
Unique ID Attributes
In HTML, specific and unique id attributes
can be assigned to different elements in order <h1 id="A1">Hello World</h1>
to differentiate between them.
When needed, the id value can be called
upon by CSS and JavaScript to manipulate,
format, and perform specific instructions on
that element and that element only. Valid id
attributes should begin with a letter and
should only contain letters ( a-Z ), digits ( 0-
9 ), hyphens ( - ), underscores ( _ ), and
periods ( . ).

<body> Body Element


The <body> element represents the content
of an HTML document. Content inside <body>
<body> tags are rendered on the web <h1>Learn to code with
browsers. Codecademy :)</h1>
Note: There can be only one <body> element </body>
in a document.
<span> Span Element
The <span> element is an inline container for
text and can be used to group text for styling <p><span>This text</span> may be
purposes. However, as <span> is a generic styled differently than the
container to separate pieces of text from a surrounding text.</p>
larger body of text, its use should be avoided
if a more semantic element is available.

<strong> Strong Element


The <strong> element highlights important,
serious, or urgent text and browsers will <p>This is
normally render this highlighted text in bold <strong>important</strong> text!
by default. </p>
HTML Element
An HTML element is a piece of content in an
HTML document and uses the following <p>Hello World!</p>
syntax: opening tag + content + closing tag. In
the code provided:

● <p> is the opening tag.

● Hello World! is the content.

● </p> is the closing tag.

HTML Tag
The syntax for a single HTML tag is an opening
angle bracket < followed by the element <div>
name and a closing angle bracket > . Here is
an example of an opening <div> tag.
<a> Anchor Element
The <a> anchor element is used to create
hyperlinks in an HTML document. The <!-- Creating text links -->
hyperlinks can point to other webpages, files <a
on the same server, a location on the same href="http://www.codecademy.com">V
page, or any other URL via the hyperlink isit this site</a>
reference attribute, href . The href
determines the location the anchor element
<!-- Creating image links -->
points to.
<a
href="http://www.codecademy.com">
<img src="logo.jpg">Click this
image
</a>
<head> Head Element
The <head> element contains general
information about an HTML page that isn’t <!DOCTYPE html>
displayed on the page itself. This information <html>
is called metadata and includes things like the <head>
title of the HTML document and links to <!-- Metadata is contained in
stylesheets.
this element-->
</head>
</html>

<target> Target Attribute


The target attribute on an <a> anchor
element specifies where a hyperlink should <a href="https://www.google.com"
be opened. A target value of "_blank" will target="_blank">This anchor
tell the browser to open the hyperlink in a element links to google and will
new tab in modern browsers, or in a new open in a new tab or window.</a>
window in older browsers or if the browser
has had settings changed to open hyperlinks
in a new window.
Indentation
HTML code should be formatted such that the
indentation level of text increases once for <div>
each level of nesting. <h1>Heading</h1>
It is a common convention to use two or four

space per level of nesting. <ul>


<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
Link to a Different Part of the Page #
The anchor element <a> can create
hyperlinks to different parts of the same <div>
HTML document using the href attribute to <p id="id-of-element-to-link-
point to the desired location with # followed to">A different part of the page!
by the id of the element to link to. </p>
</div>

<a href="#id-of-element-to-link-
to">Take me to a different part of
the page</a>

<html> HTML Element


The <html> element, the root of an HTML
document, should be added after the <!DOCTYPE html>
!DOCTYPE declaration. All content/structure <html>
for an HTML document should be contained <!-- I'm a comment -->
between the opening and closing <html>
</html>
tags.
Comments
In HTML, comments can be added between
an opening <!-- and closing --> . Content <!-- Main site content -->
inside of comments will not be rendered by <div>Content</div>
browsers, and are usually used to describe a
part of code or provide other details. <!--
Comments can span single or multiple lines.
Comments can be
multiple lines long.
-->
Whitespace
Whitespace, such as line breaks, added to an
HTML document between block-level <p>Test paragraph</p>
elements will generally be ignored by the
browser and are not added to increase <!-- The whitespace created by
spacing on the rendered HTML page. Rather,
this line, and above/below this
whitespace is added for organization and
line is ignored by the browser-->
easier reading of the HTML document itself.

<p>Another test paragraph, this


will sit right under the first
paragraph, no extra space between.
</p>
Document Type Declaration
The document type declaration <!DOCTYPE
html> is required as the first line of an HTML <!DOCTYPE html>
document. The doctype declaration is an
instruction to the browser about what type of
document to expect and which version of
HTML is being used, in this case it’s HTML5.

<title> Title Element


The <title> element contains a text that
defines the title of an HTML document. The <!DOCTYPE html>
title is displayed in the browser’s title bar or <html>
tab in which the HTML page is displayed. The <head>
<title> element can only be contained
<title>Title of the HTML
inside a document’s <head> element.
page</title>
</head>
</html>
File Path
URL paths in HTML can be absolute paths, like
a full URL, for example: <a
https://developer.mozilla.org/en- href="https://developer.mozilla.or
US/docs/Learn or a relative file path that links
g/en-US/docs/Web">The URL for this
to a local file in the same folder or on the
anchor element is an absolute file
same server, for example: ./style.css .
Relative file paths begin with ./ followed by
path.</a>
a path to the local file. ./ tells the browser
to look for the file path from the current <a href="./about.html">The URL for
folder. this anchor element is a relative
file path.</a>

You might also like