02-11-2023 17:40 Fundamentals of HTML: Learn HTML: Structure Cheatsheet | Codecademy
Cheatsheets / Fundamentals of HTML
Learn HTML: Structure
<a> Anchor Element
The <a> anchor element is used to create hyperlinks <!-- Creating text links -->
in an HTML document. The hyperlinks can point to
<a href="http://www.codecademy.com">Visit
other webpages, files on the same server, a location on
the same page, or any other URL via the hyperlink this site</a>
reference attribute, 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 <!DOCTYPE html>
about an HTML page that isn’t displayed on the page
<html>
itself. This information is called metadata and includes
things like the title of the HTML document and links to <head>
stylesheets. <!-- Metadata is contained in this
element-->
</head>
</html>
<target> Target Attribute
The target attribute on an <a> anchor element <a href="https://www.google.com"
specifies where a hyperlink should be opened. A
target="_blank">This anchor element links
target value of "_blank" will tell the browser to open
the hyperlink in a new tab in modern browsers, or in a to google and will open in a new tab or
new window in older browsers or if the browser has had window.</a>
settings changed to open hyperlinks in a new window.
https://www.codecademy.com/learn/paths/fscj-22-web-development-foundations/tracks/fscj-22-fundamentals-of-html/modules/wdcp-22-learn-html… 1/4
02-11-2023 17:40 Fundamentals of HTML: Learn HTML: Structure Cheatsheet | Codecademy
Indentation
HTML code should be formatted such that the <div>
indentation level of text increases once for each level
<h1>Heading</h1>
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 the
<p id="id-of-element-to-link-to">A
href attribute 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> <!-- I'm a comment -->
tags. </html>
Comments
In HTML, comments can be added between an opening <!-- Main site content -->
<!-- and closing --> . Content inside of comments
<div>Content</div>
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.
-->
https://www.codecademy.com/learn/paths/fscj-22-web-development-foundations/tracks/fscj-22-fundamentals-of-html/modules/wdcp-22-learn-html… 2/4
02-11-2023 17:40 Fundamentals of HTML: Learn HTML: Structure Cheatsheet | Codecademy
Whitespace
Whitespace, such as line breaks, added to an HTML <p>Test paragraph</p>
document between block-level elements will generally
be ignored by the browser and are not added to
increase spacing on the rendered HTML page. Rather,
<!-- The whitespace created by this line,
whitespace is added for organization and easier reading and above/below this line is ignored by
of the HTML document itself. 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 <!DOCTYPE html>
title of an HTML document. The title is displayed in the
<html>
browser’s title bar or tab in which the HTML page is
displayed. The <title> element can only be contained
<head>
inside a document’s <head> element. <title>Title of the HTML page</title>
</head>
</html>
File Path
URL paths in HTML can be absolute paths, like a full <a
URL, for example: https://developer.mozilla.org/en-
href="https://developer.mozilla.org/en-
US/docs/Learn or a relative file path that links to a local
file in the same folder or on the same server, for US/docs/Web">The URL for this anchor
example: ./style.css . Relative file paths begin with element is an absolute file path.</a>
./ followed by 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 this
folder.
anchor element is a relative file path.
</a>
https://www.codecademy.com/learn/paths/fscj-22-web-development-foundations/tracks/fscj-22-fundamentals-of-html/modules/wdcp-22-learn-html… 3/4
02-11-2023 17:40 Fundamentals of HTML: Learn HTML: Structure Cheatsheet | Codecademy
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.
Print Share
https://www.codecademy.com/learn/paths/fscj-22-web-development-foundations/tracks/fscj-22-fundamentals-of-html/modules/wdcp-22-learn-html… 4/4
