Scribd
Upload
7 views

Learn HTML - Elements and Structure Cheatsheet - Codecademy

This document provides information about HTML elements and their usage. It defines elements like <a>, <head>, <target>, and others and describes how to properly structure and format HTML code. The document also explains concepts like comments, whitespace, and file paths in HTML.

Uploaded by

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

Learn HTML - Elements and Structure Cheatsheet - Codecademy

This document provides information about HTML elements and their usage. It defines elements like <a>, <head>, <target>, and others and describes how to properly structure and format HTML code. The document also explains concepts like comments, whitespace, and file paths in HTML.

Uploaded by

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

Cheatsheets / Learn HTML

Elements and Structure

<a> Anchor Element

The <a> anchor element is used to create hyperlinks in an <!-- Creating text links -->
HTML document. The hyperlinks can point to other
<a href="http://www.codecademy.com">Visit
webpages, files on the same server, a location on the same
page, or any other URL via the hyperlink reference attribute, this site</a>
href . 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 information about an <!DOCTYPE html>


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

<target> Target Attribute

The target attribute on an <a> anchor element specifies <a href="https://www.google.com"


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

HTML code should be formatted such that the indentation <div>


level of text increases once for 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 <div>


parts of the same HTML document using the href attribute
<p id="id-of-element-to-link-to">A
to point to the desired location with # followed by the id
of the element to link to. different part of the page!</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, <!DOCTYPE html>


should be added after the !DOCTYPE declaration. All
<html>
content/structure for an HTML document should be
contained between the opening and closing <html> tags. <!-- I'm a comment -->
</html>

Comments

In HTML, comments can be added between an opening <!-- <!-- Main site content -->
and closing --> . Content inside of comments will not be
<div>Content</div>
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 HTML document <p>Test paragraph</p>


between block-level elements will generally be ignored by the
browser and are not added to increase spacing on the
rendered HTML page. Rather, whitespace is added for <!-- The whitespace created by this line, and
organization and easier reading of the HTML document itself. above/below this line is 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 defines the title of <!DOCTYPE html>
an HTML document. The title is displayed in the browser’s title
<html>
bar or tab in which the HTML page is displayed. The <title>
element can only be contained inside a document’s <head> <head>
element. <title>Title of the HTML page</title>
</head>
</html>

File Path

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

Document Type Declaration

The document type declaration <!DOCTYPE html> is <!DOCTYPE html>


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

<li> List Item Element

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

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

<video> Video Element

The <video> element embeds a media player for video <video src="test-video.mp4" controls>
playback. The src attribute will contain the URL to the video.
Video not supported
Adding the controls attribute will display video controls 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.

<em> Emphasis Element

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

The <ol> ordered list element creates a list of items in <ol>


sequential order. Each list item 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 <div>


HTML document into sections and is short for “division”.
<h1>A section of grouped elements</h1>
<div> elements can contain flow content such as headings,
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 <body>


can have parents, 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 <body>


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 bracket to close > . </body>
Attribute Name and Values

HTML attributes consist of a name and a value using the <elementName name="value"></elementName>
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 break in text A line break haiku.<br>
and is especially useful where a division of text is required,
Poems are a great use case.<br>
like in a postal address. The line break element requires only
an opening tag and must not have a closing tag. Oh joy! A line break.

<img> Image Element

HTML image <img> elements embed images in documents. <img src="image.png">


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 elements. The <h1>Breaking News</h1>
heading elements are ordered from the highest level <h1>
<h2>This is the 1st subheading</h2>
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 displays a block of <p>This is a block of text! Lorem ipsum dolor
text.
sit amet, consectetur adipisicing elit.</p>
Unique ID Attributes

In HTML, specific and unique id attributes can be assigned <h1 id="A1">Hello World</h1>
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 ( . ).

HTML Attributes

HTML attributes are values added to the opening tag of an <p id="my-paragraph" style="color:
element to configure the element or change the element’s
green;">Here’s some text for a paragraph that
default behavior. In the provided example, we are giving the
<p> (paragraph) element a unique identifier using the id is being altered by HTML attributes</p>
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 <ul>


items in no particular order. Each individual list item will have
a bullet point by default.
<li>Play more music 🎸</li>
<li>Read more books 📚</li>
</ul>

alt Attribute

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


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

<span> Span Element

The <span> element is an inline container for text and can <p><span>This text</span> may be styled
be used to group text for styling purposes. However, as
differently than the surrounding text.</p>
<span> is a generic container to separate pieces of text
from a 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 <p>This is <strong>important</strong> text!


urgent text and browsers will normally render this highlighted
</p>
text in bold by default.

HTML Element

An HTML element is a piece of content in an HTML document <p>Hello World!</p>


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 angle bracket <div>
< followed by the element name and a closing angle bracket
> . Here is an example of an opening <div> tag.
Print Share

You might also like