HTML Codecademy
HTML Codecademy
The <a> anchor element is used to create hyperlinks in <!-- Creating text links -->
an 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 this site</a>
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>
<a href="#id-of-element-to-link-to">Take
me to a different part of the page</a>
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.
-->
Whitespace
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 <head>
contained 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 URL, <a href="https://developer.mozilla.org/en-
for example:
US/docs/Web">The URL for this anchor
https://developer.mozilla.org/en-
US/docs/Learn or a relative file path that links to a element is an absolute file path.</a>
local file in the same folder or on the same server, for
example: ./style.css . Relative file paths begin
<a href="./about.html">The URL for this
with ./ followed by a path to the local file. ./ tells
the browser to look for the file path from the current anchor element is a relative file path.
folder. </a>
HTML
Element Content
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>
The <video> element embeds a media player for <video src="test-video.mp4" controls>
video playback. The src attribute will contain the URL
Video not supported
to the video. 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.
The <em> element emphasizes text and browsers will <p>This <em>word</em> will be emphasized
usually italicize the emphasized text by default.
in italics.</p>
HTML Structure
Closing Tag
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 A line break haiku.<br>
text and is especially useful where a division of text is
Poems are a great use case.<br>
required, like in a postal address. The line break element
requires only an opening tag and must not have a closing Oh joy! A line break.
tag.
HTML can use six different levels of heading elements. <h1>Breaking News</h1>
The heading elements are ordered from the highest level
<h2>This is the 1st subheading</h2>
<h1> to the lowest level <h6> .
<h3>This is the 2nd subheading</h3>
...
<h6>This is the 5th subheading</h6>
The <p> paragraph element contains and displays a <p>This is a block of text! Lorem ipsum
block of text.
dolor sit amet, consectetur adipisicing
elit.</p>
Unique ID Attributes
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
green;">Here’s some text for a paragraph
element’s default behavior. In the provided example, we
are giving the <p> (paragraph) element a unique that is being altered by HTML
identifier using the id attribute and changing the color attributes</p>
of the default text using the style attribute.
</ul>
alt Attribute
An <img> element can have alternative text via the <img src="path/to/image" alt="text
alt attribute. The alternative text will be displayed if an
describing image" />
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.
The <span> element is an inline container for text and <p><span>This text</span> may be styled
can be used to group text for styling purposes. However,
differently than the surrounding text.</p>
as <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.
HTML Tag
Print Share
Become a full stack developer in just 5 months. Register at 50% off today.
REGISTER NOW
Tables
Print Share
Cheatsheets / Learn HTML
Forms
<textarea> Element
The textarea element is used when creating a text- <textarea rows="10" cols="30"
box for multi-line input (e.g. a comment section). The
name="comment"></textarea>
element supports the rows and cols attributes
which determine the height and width, respectively, of
the element.
When rendered by the browser, textarea fields can
be stretched/shrunk in size by the user, but the rows
and cols attributes determine the initial size.
Unlike the input element, the <textarea>
element has both opening and closing tags. The value
of the element is the content in between these tags
(much like a <p> element). The code block shows a
<textarea> of size 10x30 and with a name of
"comment" .
<form> Element
The HTML <form> element is used to collect and send <form method="post"
information to an external source.
action="http://server1">
<form> can contain various input elements. When a
user submits the form, information in these input Enter your name:
elements is passed to the source which is named in the <input type="text" name="fname">
action attribute of the form.
<br/>
Enter your age:
<input type="text" name="age">
<br/>
<input type="submit" value="Submit">
</form>
HTML input elements can be of type number . These <input type="number" name="balance" />
input fields allow the user to enter only numbers and a
few special characters inside the field.
The example code block shows an input with a type of
number and a name of balance . When the input
field is a part of a form, the form will receive a key-value
pair with the format: name: value after form
submission.
<input> Element
<select> Element
Submitting a Form
HTML <input> elements can support text input by <input type="text" name="username">
setting the attribute type="text" . This renders a
single row input field that users can type text inside.
The value of the <input> ‘s name and value
attribute of the element are sent as a key-value pair when
the form is submitted.
<datalist> Element
In order for a form to send data, it needs to be able to put <input name="username" id="username" />
it into key-value pairs. This is achieved by setting the
<input id="address" />
name attribute of the input element. The name
will become the key and the value of the input will
become the value the form submits corresponding to
the key.
It’s important to remember that the name is not the same
as the ID in terms of form submission. The ID and the
name of the input may be the same, but the value will
only be submitted if the name attribute is specified.
In the code example, the first input will be submitted by
the form, but the second one will not.
<label> Element
The HTML <input> element can have the attribute <input type="text" name="username" />
type="password" that renders a single row input
<input type="password" name="password" />
field which allows the user to type censored text inside
the field. It is used to type in sensitive information.
The value of this <input> ’s name and value
(actual value and not the censored version) attribute of
this element are sent as a key-value pair when the form is
submitted.
The code block shows an example of the fields for a basic
login form - the username and password fields.
required Attribute
max Attribute
maxlength Attribute
In HTML, input fields with type text have an attribute <input type="text" name="tweet"
called maxlength that specifies the maximum
maxlength="140">
number of characters that can be entered into the field.
The code block shows an input text field that accepts text
that has a maximum length of 140 characters.
pattern Attribute
minlength Attribute
In HTML, an input field of type text has an attribute <input type="text" name="username"
that supports minimum length validation. To check that
minlength="6" />
the input text has a minimum length, add the
minlength attribute with the character count.
The example code block shows an example of a text field
that has a minimum length of 6 .
min Attribute
In HTML, input fields with type number have an <input type="number" name="rating" min="1"
attribute called min that specifies the minimum value
max="10">
that can be entered into the field. The code block
provided shows an input number field that accepts a
number with minimum value 1.
Print Share
Cheatsheets / Learn HTML
Semantic HTML
Semantic HTML
Semantic HTML introduces meaning to the code we write. <!--Non Semantic HTML-->
Before Semantic HTML the elements didn’t have any
<div id="footer">
meaning as to what it does or what content goes in it. An
element such as <div> was used as a general-purpose <p>this is a footer</p>
element to create things from headers to footers to </div>
articles. With Semantic HTML we were introduced to
elements that tell developers and browsers exactly what it
does and what content should go in it. <!--Semantic HTML-->
<footer>
<p>this is a footer</p>
</footer>
Element Placement
Print Share