HTML Full Notes

What is HTML?
A Brief Overview of HTML's Purpose in Creating Web Pages.
Context
Think of a document that you would create in a word processor like Microsoft Word or Google
Docs. They usually consist of more than one style. They use different font sizes to indicate
different sections of the text, like headers, main content, footers, table of contents, captions, etc.
Whereas a human can simply look at a document and understand the difference between a
heading and a paragraph, computers have no such intuition. For a browser to correctly render a
web page, it must be explicitly told what each piece of content is.
Defining structure using HTML elements
So how exactly do we tell the browser what’s what? This is where Hyper Text Markup
Language (or HTML for short) comes in handy. HTML is a markup language that provides a
description of the structure/layout of your web page. We define this structure by wrapping
content in HTML elements.
An HTML element is formed using a tag, which serves as a descriptor for each piece of content
on your page. As an example, the <p> tag is used to describe a paragraph HTML element.
Some other examples of HTML elements include:
• <h1>: Highest-level heading

• <h6>: Lowest-level heading
• <img>: An image
• <a>: An anchor which creates a hyperlink to things like other HTML pages, files, email
addresses, and more
Most HTML elements contain both opening and closing tags to indicate where an element starts
and ends, like so:
This is a paragraph element.
There are a few exceptions, such as the <img> tag, which we will describe in subsequent lessons.
A Basic HTML File# Let’s examine a basic HTML file to get a better understanding of how to use
markup to define the structure of a web page:
<!DOCTYPE html>
<html>
<head>
<title>A Basic Web Page</title>
</head>
<body>
<h1>My First HTML File</h1>
<p>Congratulations! You're well on your way to creating your own web pages.</p>
</body>
</html>
The first line, <!DOCTYPE html>, is referred as a doctype declaration. This is used to indicate to a
browser what HTML version the file is written in. For this file, specifying html indicates that the
file is written in HTML5.
For the second line, take particular note of how the closing tag for the is on the last line of the
file. One of the properties of HTML elements is their ability to be nested. In other words, HTML
elements can exist within other HTML elements. This gives rise to an interesting structure,
referred to most commonly as a tree data structure in computer science lingo.
In an HTML file, we indicate the root element with the tag . Within this root element, there are
multiple elements, that can be considered branches of the root node:
To properly define an HTML file, we must place and elements within the root element.
The element contains supporting information about the file, commonly referred to as metadata.
There must be a
The element contains the main content of an HTML file. This is the element that holds the
information that is rendered by your web browser. There can be only one element within an
HTML file, and most of the HTML you write will exist within this element.
Within the element of this file, we have a high-level heading (
) and a paragraph (
).
Rendering the HTML file in the browser
Now, let’s take a look at how this web page is rendered by the browser:
<!DOCTYPE html>
<html>
<head>
<title>A Basic Web Page</title>
</head>
<body>
<h1>My First HTML File</h1>
<p>Congratulations! You're well on your way to creating your own web pages.</p>
</body>
</html>
Attributes + Hyperlinking
Using HTML Attributes and Linking to Other HTML Pages.
Now that you understand the context in which HTML is used, we can begin to go over more
details of HTML usage.
HTML attributes
HTML attributes provide additional information about an HTML element. Attributes can be
considered as properties of the element. An element may have a single attribute, many attributes,
or no attributes at all.
Let’s take a look at an example heading with a title attribute:
Hello, World!
Attributes are placed in the opening tag, with a space after the element declaration (or another
attribute, if there are multiple) and are defined using the following format:
The attribute name is always followed by an = sign and the attribute value is always wrapped in
quotation marks. There are no spaces between the attribute name, = sign, and the attribute value.
Anchor elements / hyperlinking

One of the most important aspects of the World Wide Web is the ability to link to other parts of
the web. Without a way to redirect our HTML page to other web addresses, there really wouldn’t
be a “web” at all!
We can connect a HTML page to other web pages by creating a hyperlink using the anchor tag,
like so:
Google
The href attribute refers to Hypertext Reference, whose value is a Uniform Resource Locator
(URL). A URL is basically fancy lingo for a web address, or the destination the link is pointing to.
The href attribute can also refer to things like:
• Email Addresses (mailto:someone@educative.io)
• Phone Numbers (tel:+18004444444)
• Documents/Files (Give the URL of the file instead of a web page)
• Another different location on the same web page the browser is currently on
# Relative vs absolute URL paths

It’s important to understand how file paths play a role in how your hyperlinks will operate.
An absolute URL points to a single address that will direct to the same place regardless of where
the original page is coming from. It looks something like this: http://www.github.com/google.
In an absolute URL path there are three main components:
1. The Protocol: What you most often see as http:// or https:// when you browse websites,
but can be other things, like file:// or ftp://
2. The Domain: The name of the website (in this example, www.github.com)
3. The Path: The directory (or folder) we wish to navigate to. This field is not always
necessary, and generally allows us to navigate to a more specific portion of a domain (in
this case, Google’s profile on Github)
An absolute URL provides all the information necessary for a browser with an internet connection
to reach the desired address. Furthermore, an absolute URL will not change its destination if used
on different devices/browsers.
Relative URLs provide less information than absolute URLs and generally refer to pages on the
same domain. Relative URLs are useful when you start to deal with multiple web pages on your
site, and want a way to navigate between them.
Let’s take a look at a quick example of a directory named website with:
• a main index.html page
• an about section, named about.html
• a nested directory named blogPosts, with three article HTML files named:
o article1.html
o article2.html
o article3.html
If we started in the website directory on the index.html file, we could redirect to the About
section by including the anchor tag:
About
Now, say we want to navigate to an article in our blogPost folder. The relative URL path would
then include the directory name: blogPost/article2.html. The entire anchor element would then
be:
Article 2
Now, how would we navigate back to the index.html page if we are in the blogPost directory? We
can accomplish this by indicating the path to the file is one direct level up, like so: ../index.html.
Headings + Lists
HTML Headers and List Elements.
Headings
We’ve already seen the h1 element in use in the previous two lessons. The HTML standard has
five additional text heading elements, appropriately named h2 through h6.
It should be noted that heading elements should not be used to manipulate the font size of a
heading. Rather, the levels represent semantically the difference between a main header, sub-
header, etc. We will learn more about HTML semantics, as well as how to change an element’s
font size with Cascading Style Sheets (CSS), in subsequent sections.
To practice good style, you shouldn’t skip heading levels when structuring your HTML pages. In
other words, an h2 element should be used for a header one level below an h1 element,
an h3 element should be used a level below h2, and so on.
Code:
html
<html>
<head>
<title>h1 - h6 elements</title>
</head>
<body>
<h1>Heading Level 1</h1>
</body>
</html>
Lists
Often times we will want to include a bulleted or numbered list in web page content. This can be
accomplished with HTML lists.
Unordered lists
We could create an unordered list to represent things like a list of to-dos or a list of grocery
items. To do this, we must use the
tag, with nested
• tags for the list items.

html
<html>
<head>
<title>Things to Get from Grocery Store</title>
</head>
<body>
<h1>Grocery Items</h1>
<ul>
<li>Butter</li>
<li>Milk</li>
<li>Eggs</li>
<li>Cereal</li>
</ul>
</body>
</html>
Ordered lists
An ordered list should be used when the items in the list go in a particular order, like
turn-by-turn instructions on a navigation system, or steps in a recipe. An ordered list is
fairly similar to an unordered list, except we will want to use the
tag to declare the list. List items are still wrapped in an
i. tag. The list items will be numbered, rather than the bulleted items we saw
previously.
html
<html>
<head>
<title>How to Brush Your Teeth</title>
</head>
<body>
<h1>Brushing Instructions</h1>
<ol>
<li>Acquire toothbrush and toothpaste</li>
<li>Squeeze a small amount of paste onto the toothbrush bristles</li>
<li>Lightly rinse brush + paste with water</li>
<li>Move brush against teeth in a back and forth motion</li>
</ol>
</body>
</html>
List element attributes: type and start
The type attribute allows us to change the style of either the bullets for
unordered lists or the numbering scheme for ordered lists.
Unordered list type values include circle, disc, and square.
Code:
<html>
<head>
<title>Things to Get from Grocery Store</title>
</head>
<body>
<h1>Grocery Items</h1>


<ul type="disc">
<li>Butter</li>
<li>Milk</li>
<li>Eggs</li>
<li>Cereal</li>
</ul>


<ul type="square">
<li>Butter</li>
<li>Milk</li>
<li>Eggs</li>
<li>Cereal</li>
</ul>
</body>
</html>
Ordered list type values can be used to change the numbering scheme, and
include the following:
▪ 1: Default numeric scheme

▪ I: Upper-case Roman numerals
▪ i: Lower-case Roman numerals
▪ A: Upper-case Alphabet
▪ a: Lower-case Alphabet
Ordered lists have an additional start attribute, that can be used to start the
numbering at a value other than the default of 1.
Code:
<html>
<head>
<title>How to Brush Your Teeth</title>
</head>
<body>
<h1>Brushing Instructions</h1>


<ol type="I">
</ol>


<ol type="a">
</ol>


<ol type="1" start="5">
</ol>
</body>
</html>
Inline vs. Block Elements + Divs

Understanding how HTML Elements are Rendered in the Browser
Inline vs. block-level elements
Each HTML element is interpreted in a specific way by your web browser. Now that you’ve started
to learn about structuring your web pages, we should discuss the differences in block-
level and inline HTML elements to gain a better understanding of how content is rendered.
Block-level elements
Block-level HTML elements take up the full width of a web page, essentially creating a “block”
around the content you place within that element. Block-level elements, by default, also start on
a new line. Most of the elements we have dealt with so far are block-level elements, including:
• Headings (<h1>-<h6>)
• Ordered and Unordered Lists (<ol>, <ul>)
• List Items (<li>)
• Paragraphs (<p>)
Inline elements
Inline elements, like the name suggests, do not take up the full width of a webpage and are
generally in-line with text content. Inline elements also do not start a new line when rendered in
the browser. Examples of inline elements include:
• Anchors (<a>)
• Images (<img>)
• Bolding Text (<strong>)
• Emphasizing Text (<em>)
The coding example below helps illustrate the differences between block-level and inline HTML
elements:
Code:
<html>
<head>
<title>Block-level vs Inline HTML Element Rendering</title>
</head>
<body>
<p>This is a block-level element. It takes up the width of the page</p>
<p>This element (also block-level), is rendered a line below the previous element</p>
<p>
<strong>Inline elements</strong> often times exist <em>within</em> block-level
elements
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements">and they
do not start on a new line of the web page.</a>
</p>
</body>
</html>
Divs
The <div>, a block-level element, allows you to section into separate, logical divisions. Code:
<html>
<head>
<title>Grouping Content with Divs</title>
</head>
<body>
<div>
<h1>Group A</h1>
</div>
<div>
<h1>Group B</h1>
</div>
</body>
</html>
As you can see, the
element does not render as anything special on the web page and is mainly used to separate
content into distinct groups for organization or styling purposes. Generally, you will nest other
HTML elements within
elements to provide the proper structure to your page.
id + class Attributes
Identifying HTML Elements on your Page using ID and Class Attributes
id + class attributes
The id and class attributes can be used to identify specific HTML elements across your HTML
page.
The id attribute provides you with the ability to give any element a unique identifier. This
identifier can later be used for things like applying specific styles with CSS or capturing input with
some Javascript code.
Educative.io
Some notes about id usage:
• an id value should only be used for a single element (you will get unexpected behavior if
you use the same id value for multiple elements)
• an id value must not contain any whitespace
• a single element cannot have multiple id values
The class attribute is similar to the id attribute in that it is used to identify specific elements. The
main distinctions are:
• the same class value can be used across multiple elements
• an element can have multiple class values, separated by whitespaces
In the example below, the id and class attributes are used to apply CSS styles (hidden) to our
HTML document. Take note of the main differences between the two attributes. Code:
<html>
<head>
<title>id vs class attributes</title>
</head>
<body>

<h1 id="pageTitle">id and class attributes</h1>

<p class="bordered">This element has a border.</p>

<p class="bordered">This element also has a border.</p>

<p class="red bordered">This element has red text and a border.</p>
<p class="blue bordered">This element has blue text and a border.</p>
</body>
</html>
The img Element

Embedding Photos onto Your Web Pages
Images
Use the <img> tag to embed an image into your web page with an src attribute that contains a
file path to the image you want to be included. Use the alt attribute to provide alternative text
with a description of the image in case it doesn’t load, or is being read by a screen reader for
people with disabilities.
Unlike most of the elements we have encountered thus far, the img element does not have a
closing tag :

<img src="path/to/image/cat.jpg" alt="A cat"></img>


<img src="path/to/image/cat.jpg" alt="A cat">
Code:
<html>
<head>
<title>Waterfall Photography 101</title>
</head>
<body>
<h1>Waterfall Photography 101</h1>
<div class="imgContainer">
<img src="/udata/DErqVR5q0Pv/longexposurewaterfall1.jpg" alt="Long Exposure
Waterfall">
<h4 class="caption">Learn how to take stunning waterfall pictures!</h4>
</div>
</body>
</html>
Delving into Semantics

Overview
Let’s take look at the definition of semantic, according to dictionary.com:
Semantic [si-man-tik]: adjective
1. of, relating to, or arising from the different meanings of words or other symbols
2. of or relating to semantics
In this lesson, we will address the importance of considering semantics when structuring your
HTML pages.
So far, we have focused on using HTML to structure our web pages and provide a certain
presentation of the content. With the HTML5 standard, many elements were introduced that
moved HTML from a presentation-centric markup to a more semantic-centric approach.
What exactly do we mean by this? Referring back to the definition, the goal of semantic HTML is
to clearly indicate the meaning of each piece of your web page’s content.
Case study
A good illustration of the difference between presentational elements and semantic elements can
be found in the differences between the style-centric HTML4 <i> and <b> elements vs. the
semantic <em> and <strong> tags.
In the HTML4 world, the <i> element was used to italisize text, and the <b> element was used
to bold text.
Code:
<html>
<head>
<title>HTML4 Font Style Elements</title>
</head>
<body>
<p>In the HTML4 standard, several elements were provided to provide font stylization,
such as <i>italisized text</i> and <b>bold text</b>.</p>
</body>
</html>
However, in this scenario, the elements do not tell us anything about the meaning of this content.
Contrast this with the newer HTML5 standard, where the <em> element can be used to place
emphasis on content, while the <strong> element can be used to place strong emphasis on
content. Code:
<html>
<head>
<title>HTML5 Semantic Tags</title>
</head>
<body>
<p>With HTML5, many elements were introduced to better indicate meaning of the
content.</p>
<p>The <code>em</code> element to <em>indicates emphasized</em> content.</p>
<p>The <code>strong</code> element <strong>indicates strongly emphasized</strong>
content.</p>
</body>
</html>
Take careful note as to how the HTML5 elements do not inherently indicate anything about the
font style associated with the text. With HTML5, there is a clear separation of concerns between
content meaning and the content’s stylization. Focusing on using HTML to semantically structure
your web content provides several benefits, including:
• making your web content vastly more accessible to readers with disabilities
• applying styles with CSS will become more consistent and predictable
• search engines will use the semantic information to better understand your web pages
Structural semantic elements
In the previous lesson, we learned how to use div elements to separate content into different
sections. However, div elements do not provide any inherent semantic meaning and are used
most often as generic containers for styling content. With HTML5, several structural
elements were introduced to separate content into more semantically appropriate containers.
hgroup
<hgroup> elements can be used to group heading elements that are semantically part of the same
heading. Code:
<hgroup>
<h1>My Amazing Website</h1>
<h2>More information about my website</h2>
</hgroup>
header
The <header> element can be used to represent content that is similar to the main header in a text
document.
Many web page <header> elements contain logos and large headings identifying the site.
Generally, the <header> remains consistent across pages (if your site contains multiple
pages). <header> elements often also contain navigational elements that direct users to different
parts of your web page.
nav
<nav> elements should be used to house components of your web page that are used to navigate
to different parts of your web page.
A <nav> element is often found inside a <header> element. It is not necessary to follow this
convention if you wish to place your navigation elements elsewhere on the web page.
<header>
<hgroup>
<h1>My Amazing Website</h1>
<h2>More information about my website</h2>
</hgroup>
<nav>

<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#contact">Contace</a></li>
</ul>
</nav>
</header>
footer
The <footer> element, as its name suggests, is used to house content that would be considered
to be the footer of your page.
A footer can store things like the website’s author, copyright information, or even navigational
elements to other pages on your website. Code:
<footer>
<h3>© My Company Name, 2017</h3>
</footer>
article
<article> elements should be used to house individual pieces of content that are unique to an
individual page. A blog entry, a news/scholarly article, and a forum post are all good examples of
content that would be semantically appropriate to store in an <article> element.
<article> elements should have a heading to indicate what the article's content is about.
Code:
<article>
<h1>Cryptocurrency: What is it?</h1>

</article>
section
<section> elements represent thematic groupings of content on your web page. For example, if
your web page housed the contents of a book, <section> elements could be used for the book’s
chapters.
<section> elements should also have a heading element to indicate what
the <section's> contents are about.
In general, <section> elements should be used when you need to place your content into
semantic groupings that don’t fit the description of any other semantic element.
<section> elements can also be used to break up content in an <article> element into
semantically discrete components. Code:
<section>
<h2>Chapter 1</h2>

</section>
<section>
<h2>Chapter 2</h2>
</section>
<section>
<h2>Chapter 3</h2>
</section>
<section>
<h2>Chapter 4</h2>
</section>
Code:
<article>
<h1>How to Make Lasagna</h1>
<section>
<h2>Overview</h2>

</section>
<section>
<h2>Ingredients</h2>
</section>
<section>
<h2>Instructions</h2>
</section>
</article>
Sections can be also used within an article to create semantically-relevant groups
time
Use the <time> element to provide a machine-readable timestamp for parts of your content
that indicate a specific time or date. The <time> element has a datetime attribute that takes as
input the date/time in a variety of formats.
<time> should be used for things like the time of an event or the date a blog post is published to
a website. <time> elements are not rendered any differently than regular text, but it provides a
way to semantically indicate to a computer what content is to be considered a time or date.

<p>The party begins at <time datetime="19:00">seven o'clock</time>!</p>


<h1>My Blog Entry</h1>
<h2><time datetime="2015-05-07">May 7, 2015</time></h2>
Use the time element to provide a machine-readable time stamp for your web content
aside
<aside> elements are generally used to house information that is not part of your main content,
but is in some way related to it.
<aside> elements could be used for things like supporting information in an article, or a sidebar
with navigational elements.
HTML Tables
Structuring Tabular Data in HTML There are plenty of instances where you’ll want to present a
table of data on your web page. Let’s dive straight in and convert the table below into HTML.
If you haven’t worked with tabular data before, it will be useful to know that a table consists of
rows and columns. Each row/column pair has a piece of data associated with it, referred to as a
table cell.
In the table above, the first row is used to declare the data type for each column, and serves as
the table header. For the rest of the rows, we have a piece of data for each column (the cells),
which has the data type specified in the header.
So how do we apply these concepts into HTML? First, we need to declare an HTML table by using
the
tag.
To add a row to our table, use the tag.
<table>
<tr></tr>
</table>
To add individual pieces of data (the cells) corresponding to the columns, use the tag.
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</table>
To indicate that a cell is part of the header use the tag instead of .
HTML Forms
How to receive input from your web page's users
Overview
HTML forms are how we receive user input on our web pages. If you’ve ever visited a blog and
left a comment or used your credit card online to purchase something, you have used HTML
forms to interact with the web page you were visiting.
Say we’re trying to create a login page. We will need an HTML form to get the user’s username
and password. Let’s first create a form element using the <form> tag:
<html>
<head>
<title>Working with HTML Forms</title>
</head>
<body>
<h1>Login Page</h1>
<form>
</form>
</body>
</html>
As you may have noticed, the only thing present in the output is the h1 element. This is because
the <form> element only declares the HTML form.
To start accepting user input, let’s add an <input> element that accepts text:
<html>
<head>
</head>
<body>
<h1>Login Page</h1>
<form>
<input type="text" id="firstTextInput" name="firstTextInput">
</form>
</body>
</html>
You should now notice that there is an empty text box that you can click (or focus on) that
accepts text input. Also, take note that <input> elements do not have a closing tag.
But having just a text box doesn’t indicate what the input is used for. Let’s add a <label> element
to better indicate the <input>'s meaning:
<html>
<head>
</head>
<body>
<h1>Login Page</h1>
<form>
<label for="username">
Username:
<input type="text" id="username" name="username">
</label>
</form>
</body>
</html>
The element has a for attribute that associates the with a specific element. The for
attribute’s value should match that of the element’s id value. elements are useful as
they allow your elements to be identified by screen readers.
We can now add an additional element that will accept the user’s password, and a to
indicate the input’s meaning.
<html>
<head>
</head>
<body>
<h1>Login Page</h1>
<form>
<label for="username">
Username:
<input type="text" id="username" name="username">
</label>
<label for="password">
Password:
<input type="password" id="password" name="password">
</label>
</form>
</body>
</html>
Notice if you write in the password field, the text is obscured since we’ve indicated the
's type attribute has a value of password.
With this example in mind, let’s dive in and look at the variety of inputs we can use with HTML
forms.
Text inputs
input
We’ve seen how the element can accept text values. There are several different type
values that can be used, including:
• text: for plain text

• password: to obscure a password input field
• search: to indicate the text field is used for searching a page/multiple pages
• url: validates input as a URL address
• tel: for inputting phone numbers
• email: validates input as an email address
In the case of url and email, the browser will check to see if the input is a valid URL or email
address.
<html>
<head>
<title>Email Validation</title>
</head>
<body>
<form>
<p>Try inputting text that isn't email and press 'Enter'</p>
<label for="email">
E-mail Address:
<input type="email" id="email" name="email">
</label>
</form>
</body>
</html>
<html>
<head>
<title>URL Validation</title>
</head>
<body>
<form>
<p>Try inputting text that isn't a valid URL and press 'Enter'</p>
<label for="url">
URL:
<input type="url" id="url" name="url">
</label>
</form>
</body>
</html>
textarea
If you want your user to be able to include new lines (by pressing return) in their text input, you
can use a
<html>
<head>
<title>Textarea Elements</title>
</head>
<body>
<form>
<label for="multiLineInput">
<p>This is an input element that can include new lines:</p>
<textarea id="multiLineInput"></textarea>
</label>
</form>
</body>
</html>
Notice how
<html>
<head>
<title>Textarea Elements</title>
</head>
<body>
<form>
<label for="multiLineInput">
<p>This is an input element that can include new lines:</p>
<textarea rows="5" cols="50" id="multiLineInput"></textarea>
</label>
</form>
</body>
</html>
Buttons
A <button> element should be used whenever you want to create a clickable button to perform
some action on the page.
<button> elements are simple to define, and have three different type values:
• submit: submits form data to a server
• reset: resets all the data in the current form
• button: no default behavior. This type of button will be more useful when we begin our
discussion of Javascript.
<html>
<head>
<title>Submit Button</title>
</head>
<body>
<form>
<label for="firstName">First Name:</label>
<input type="text" name="firstName" id="firstName">
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" id="lastName">

<button type="submit">Submit Name</button>
</form>
</body>
</html>
<html>
<head>
<title>Reset Button</title>
</head>
<body>
<form>

<button type="reset">Reset Name</button>
</form>
</body>
</html>
<html>
<head>
<title>No-Default Button</title>
</head>
<body>
<form>

<button type="button">Do Nothing</button>
</form>
</body>
</html>
Selection inputs
select
You can use element has other type values that accept inputs
other than text. For instance, radio buttons can be used to create a list of options where you
only want one option selected:
<html>
<head>
<title>Radio Buttons</title>
</head>
<body>
<form>
<h3>What time is best to give you a call?</h3>
<label for="morning">
Morning
<input type="radio" id="morning" name="callTime" checked>
</label>
<label for="afternoon">
Afternoon
<input type="radio" id="afternoon" name="callTime">
</label>
<label for="evening">
Evening
<input type="radio" id="evening" name="callTime">
</label>
</form>
</body>
</html>
To group the radio buttons into one selection, each <input> element’s name attribute must have
the same value. The optional checked attribute will select one of the radio buttons when the page
loads.
<html>
<head>
</head>
<body>

<form>
<h3>What time is best to give you a call?</h3>
Morning
<input type="radio" id="morning">
</label>
Afternoon
<input type="radio" id="afternoon">
</label>
Evening
<input type="radio" id="evening">
</label>
</form>
</body>
</html>
If you want to create a list where the user can select multiple options, you can use checkboxes. A
checkbox can be specified by using an <input> element with a type value checkbox:
<html>
<head>
</head>
<body>
<form>
<h3>Select all the times that you are available:</h3>
Morning
<input type="checkbox" id="morning" name="callTime" checked>
</label>
Afternoon
<input type="checkbox" id="afternoon" name="callTime">
</label>
Evening
<input type="checkbox" id="evening" name="callTime">
</label>
</form>
</body>
</html>
Like radio <input> elements, checkboxes must have the same value for the name attribute to be
considered part of the same group. The main difference is that multiple checkboxes within the
same group can be selected.

HTML Full Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Full Notes

Uploaded by

Copyright:

Available Formats

What is HTML?

A Brief Overview of HTML's Purpose in Creating Web Pages.

Defining structure using HTML elements

• <h1>: Highest-level heading

This is a paragraph element.

Within the element of this file, we have a high-level heading (

Anchor elements / hyperlinking

# Relative vs absolute URL paths

• tags for the list items.

tag to declare the list. List items are still wrapped in an

List element attributes: type and start

Unordered list type values include circle, disc, and square.

▪ 1: Default numeric scheme

Inline vs. Block Elements + Divs

Inline vs. block-level elements

As you can see, the

The img Element

Delving into Semantics

Let’s take look at the definition of semantic, according to dictionary.com:

Semantic [si-man-tik]: adjective

Structural semantic elements

• text: for plain text

You might also like