Scribd
Upload
31 views

Web Development Fundamentals: Learn HTML: Elements and Structure Cheatsheet - Codecademy

The document summarizes key HTML elements and their usage including: <li>The <body> element contains the content of a webpage.</li> <li>Elements like <h1>, <p>, <ul>, and <img> provide structure and media to the content.</li> <li>Attributes customize elements, giving them IDs, changing colors, and providing image descriptions.</li>

Uploaded by

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

Web Development Fundamentals: Learn HTML: Elements and Structure Cheatsheet - Codecademy

The document summarizes key HTML elements and their usage including: <li>The <body> element contains the content of a webpage.</li> <li>Elements like <h1>, <p>, <ul>, and <img> provide structure and media to the content.</li> <li>Attributes customize elements, giving them IDs, changing colors, and providing image descriptions.</li>

Uploaded by

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

22/09/23, 22:09

Cheatsheets / Web Development Fundamentals

Learn HTML: Elements and Structure

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 <h1>Codecademy is awesome! ! </h1>
between the opening and closing tags of an
element.

<li> List Item Element


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

<ul>
<li>Cookies</li>
<li>Milk</li>
</ul>

about:srcdoc Página 1 de 10
22/09/23, 22:09

<video> Video Element


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

<em> Emphasis Element


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

<ol> Ordered List Element


The <ol> ordered list element creates a list of <ol>
items in sequential order. Each list item appears
<li>Preheat oven to 325 F " </li>
numbered by default.
<li>Drop cookie dough # </li>
<li>Bake for 15 min ⏰ </li>
</ol>

<div> Div Element


The <div> element is used as a container that <div>
divides an HTML document into sections and is
<h1>A section of grouped elements</h1>
short for “division”. <div> elements can contain
flow content such as headings, paragraphs, links, <p>Here’s some text for the
images, etc. section</p>
</div>
<div>
<h1>Second section of grouped
elements</h1>
<p>Here’s some text</p>
</div>

about:srcdoc Página 2 de 10
22/09/23, 22:09

HTML Structure
HTML is organized into a family tree structure. <body>
HTML elements can have parents, grandparents,
<div>
siblings, children, 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 <body>
an HTML element. The syntax for a closing tag is a
...
left angle bracket < followed by a forward slash
/ then the element name and a right angle </body>
bracket to close > .

Attribute Name and Values


HTML attributes consist of a name and a value <elementName name="value"></elementName>
using the following syntax: name="value" and
can be added to the opening tag of an HTML
element to configure or change the behavior of the
element.

<br> Line Break Element


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

about:srcdoc Página 3 de 10
22/09/23, 22:09

<img> Image Element


HTML image <img> elements embed images in <img src="image.png">
documents. The src attribute contains 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 <h1>Breaking News</h1>
elements. The heading elements are ordered from
<h2>This is the 1st subheading</h2>
the highest level <h1> to the lowest level
<h6> . <h3>This is the 2nd subheading</h3>
...
<h6>This is the 5th subheading</h6>

<p> Paragraph Element


The <p> paragraph element contains and <p>This is a block of text! Lorem ipsum
displays a block of text.
dolor sit amet, consectetur adipisicing
elit.</p>

Unique ID Attributes
In HTML, specific and unique id attributes can <h1 id="A1">Hello World</h1>
be assigned to different elements in order 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 ( . ).

about:srcdoc Página 4 de 10
22/09/23, 22:09

HTML Attributes
HTML attributes are values added to the opening <p id="my-paragraph" style="color:
tag of an element to configure the element or
green;">Here’s some text for a paragraph
change the element’s default behavior. In the
provided example, we are giving the <p> that is being altered by HTML
(paragraph) element a unique identifier using the attributes</p>
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 <ul>
create a list of items in no particular order. Each
<li>Play more music % </li>
individual list item will have a bullet point by
default. <li>Read more books & </li>
</ul>

alt Attribute
An <img> element can have alternative text via <img src="path/to/image" alt="text
the alt attribute. The alternative text will be
describing image" />
displayed if an image fails to render due to 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.

<body> Body Element


The <body> element represents the content of <body>
an HTML document. Content inside <body>
<h1>Learn to code with Codecademy :)
tags are rendered on the web browsers.
Note: There can be only one <body> element in </h1>
a document. </body>

about:srcdoc Página 5 de 10
22/09/23, 22:09

<span> Span Element


The <span> element is an inline container for <p><span>This text</span> may be styled
text and can be used to group text for styling
differently than the surrounding text.
purposes. However, as <span> is a generic
container to separate pieces of text from a larger </p>
body of text, its use should be avoided if a more
semantic element is available.

<strong> Strong Element


The <strong> element highlights important, <p>This is <strong>important</strong>
serious, or urgent text and browsers will normally
text!</p>
render this highlighted text in bold by default.

HTML Element
An HTML element is a piece of content in an HTML <p>Hello World!</p>
document and uses the following 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 <div>
angle bracket < followed by the element name
and a closing angle bracket > . Here is an
example of an opening <div> tag.

about:srcdoc Página 6 de 10
22/09/23, 22:09

<a> Anchor Element


The <a> anchor element is used to create <!-- Creating text links -->
hyperlinks in an HTML document. The hyperlinks
<a
can point to other webpages, files on the same
server, a location on the same page, or any other href="http://www.codecademy.com">Visit
URL via the hyperlink reference attribute, href . this site</a>
The href determines the location the anchor
element points to.
<!-- Creating image links -->
<a href="http://www.codecademy.com">
<img src="logo.jpg">Click this
image
</a>

<head> Head Element


The <head> element contains general <!DOCTYPE html>
information about an HTML page that isn’t
<html>
displayed on the page itself. This information is
called metadata and includes things like the title of <head>
the HTML document and links to stylesheets. <!-- Metadata is contained in this
element-->
</head>
</html>

<target> Target Attribute


The target attribute on an <a> anchor <a href="https://www.google.com"
element specifies where a hyperlink should be
target="_blank">This anchor element
opened. A target value of "_blank" will
tell the browser to open the hyperlink in a new tab links to google and will open in a new
in modern browsers, or in a new window in older tab or window.</a>
browsers or if the browser has had settings
changed to open hyperlinks in a new window.

about:srcdoc Página 7 de 10
22/09/23, 22:09

Indentation
HTML code should be formatted such that the <div>
indentation level of text increases once for each
<h1>Heading</h1>
level of nesting.
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 <div>
different parts of the same HTML document using
<p id="id-of-element-to-link-to">A
the href attribute to point to the desired
location with # followed by the id of the different part of the page!</p>
element to link to. </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 <!DOCTYPE html>
document, should be added after the
<html>
!DOCTYPE declaration. All content/structure for
an HTML document should be contained between <!-- I'm a comment -->
the opening and closing <html> tags. </html>

about:srcdoc Página 8 de 10
22/09/23, 22:09

Comments
In HTML, comments can be added between an <!-- Main site content -->
opening <!-- and closing --> . Content inside
<div>Content</div>
of comments will not be rendered by 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 <p>Test paragraph</p>
HTML document between block-level elements will
generally be ignored by the browser and are not
added to increase spacing on the rendered HTML <!-- The whitespace created by this
page. Rather, whitespace is added for organization line, and above/below this line is
and easier reading of the HTML document itself.
ignored by the browser-->

<p>Another test paragraph, this will sit


right under the first paragraph, no
extra space between.</p>

<title> Title Element


The <title> element contains a text that <!DOCTYPE html>
defines the title of an HTML document. The title is
<html>
displayed in the browser’s title bar or tab in which
the HTML page is displayed. The <title> <head>
element can only be contained inside a <title>Title of the HTML
document’s <head> element.
page</title>
</head>
</html>

about:srcdoc Página 9 de 10
22/09/23, 22:09

File Path
URL paths in HTML can be absolute paths, like a <a
full URL, for example:
href="https://developer.mozilla.org/en-
https://developer.mozilla.org/en-
US/docs/Learn or a relative file path that links US/docs/Web">The URL for this anchor
to a local file in the same folder or on the same element is an absolute file path.</a>
server, for example: ./style.css . Relative file
paths begin with ./ followed by a path to the
<a href="./about.html">The URL for this
local file. ./ tells the browser to look for the file
path from the current folder. anchor element is a relative file path.
</a>

Document Type Declaration


The document type declaration <!DOCTYPE <!DOCTYPE html>
html> is required as the first line of an 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.

Print Share

about:srcdoc Página 10 de 10

You might also like