Scribd
Upload
6 views

Fundamentals of HTML_ Learn HTML_ Structure Cheatsheet _ Codecademy

The document is a cheatsheet for the fundamentals of HTML, covering key elements such as the anchor element, head element, and document type declaration. It explains how to create hyperlinks, structure HTML documents, and use attributes like target and href. Additionally, it discusses best practices for indentation, comments, whitespace, and file paths in HTML.

Uploaded by

Michael Okocha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Fundamentals of HTML_ Learn HTML_ Structure Cheatsheet _ Codecademy

The document is a cheatsheet for the fundamentals of HTML, covering key elements such as the anchor element, head element, and document type declaration. It explains how to create hyperlinks, structure HTML documents, and use attributes like target and href. Additionally, it discusses best practices for indentation, comments, whitespace, and file paths in HTML.

Uploaded by

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

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

You might also like