Answer

Skeleton of all the web pages:
HTML provides structure to the content appearing on a

website, such as images, text, or videos. HyperText
Markup Language:
 A markup language is a computer language that

defines the structure and presentation of raw text.
 In HTML, the computer can interpret raw text that is
wrapped in HTML elements.
 HyperText is text displayed on a computer or device
that provides access to other text through links, also
known as hyperlinks.

 When an element is contained inside another element, it is
considered the child of that element. The child element is said
to be nested inside of the parent element.e.g. <p> in <body>
 The relationship between elements and their ancestor and
descendent elements is known as hierarchy.
 <body>-grandfather,<div>-father,<h1>,<p>-child(siblings)
 In html there are 6 types of headings<h1><h2>…<h6>
Is it correct to say that the <body> element is nested within the <html> element?
Answer
That is correct! The <html> tag is the root element of every page and it should always
have <head> and <body> child elements. The <head> and <body> elements are
siblings to each other and children to the <html> parent.
In steps 1 and 2 of this exercise, both <p> elements display in the same exact way. As
it doesn’t seem like anything special happened here, what is the point of nesting the
<p> element in a <div> element?
Answer
In this case, this is done purely for demonstrative purpose. In the future you will find
that <div> elements are often used to group related content. This can serve to give a
page some added structure and to allow for more modular styling.
This exercise 96 says that child elements can inherit from their parents. What sorts of
things can child elements inherit from their parents?
Answer
When you dive into our CSS course you will learn that child elements inherit most of
their styling from their parent elements. In other words, most styles cascade down
from parents to children.
 <div> divisions{great for groouping elements}

 Heading elements should be chosen in a way that reflects how
the content of our page should be organized.
 the benefit is that if we create a thoughtful HTML structure we
can more readily parse and target related content. In other
words, there is often a trade-off between complexity and either
readability or targetability. As developers, we want to find
the right balance between creating enough coherent structure to
enhance readability and targetability without venturing into
“divitis 8.1k” territory.
div (short for division) allows us to divide our page into different sections, to position
this sections. Divs are very useful. The change might not be the most visual one,
doesn’t make it less useful.
if we only used text, everything would just be from top to bottom

<h1>MEDHA</h1>
ME
DH
A
<body> Whats
<p> Whats up, doc?</p> up,
doc?
</body>
<body>
<h1>Hello World</h1>
<div>
<p>This paragraph is a child of the div element and a grandchil
d of the body element</p>
</div>
</body>
<div id="intro">
<h1>Introduction</h1></div>
 ATTRIBUTE [ID]they can help us identify content

on our page1.The name of the attribute 2.The value of the attribute
<em> tag emphasizes text, while the <strong> tag highlights

important text.
· <em> tag will generally render as italic emphasis.
· The <strong> will generally render as bold emphasis.
line break element: <br>.
<ul>
<li>Limes</li>
<li>Tortillas</li>
<li>Chicken</li></ul>
<ol>
<li>Preheat the oven to 350 degrees.</li>
<li>Mix whole wheat flour, baking soda, and salt.</li>
<li>Cream the butter, sugar in separate bowl.</li>
<li>Add eggs and vanilla extract to bowl.</li></ol>
<img src="image-location.jpg" />
<img src="#" alt="A field of yellow sunflowers" />
<video src="myVideo.mp4" width="320" height="240" controls>

Video not supported</video>
<video src="https://content.codecademy.com/courses/freelance-
1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4">
</video>
1. <span> contains short pieces of text or other HTML. They are used
to separate small pieces of content that are on the same line as
other content.
<span> has no physical appearance.
It is like the <p> tag in that it is intended for displaying text, but unlike it in that it
does not start a new line. (in other words, it is inline)
<span> is mainly used to help you once you get to CSS so that you can style one part
of a paragraph differently than the rest.
It is also used as an element that is only there to let you style the contents.
I hope that answers your question!
 HTML stands for HyperText Markup Language and is used to create the structure and
content of a webpage.
 Most HTML elements contain opening and closing tags with raw text or other HTML tags
between them.
 HTML elements can be nested inside other elements. The enclosed element is the child of
the enclosing parent element.
 Any visible content should be placed within the opening and closing <body> tags.
 Headings and sub-headings, <h1> to <h6> tags, are used to enlarge text.
 <p>, <span> and <div> tags specify text or blocks.
 The <em> and <strong> tags are used to emphasize text.
 Line breaks are created with the <br> tag.
 Ordered lists (<ol>) are numbered and unordered lists (<ul>) are bulleted.
 Images (<img>) and videos (<video>) can be added by linking to an existing source.
html> a document type

<!DOCTYPE html> declaration.
</html>
<html>
<head>
<title>My Coding Journal</title>
</head></html>
<a href="https://www.wikipedia.org/">This Is You can add links to a
A Link To Wikipedia</a> web page by adding an
anchor element <a> and
including the text of
the link in between the
opening and closing
tags.
<a href="https://en.wikipedia.org/wiki/Brown_ The target attribute
bear" target="_blank">Learn More</a> specifies how a link
should open.link opens
in new tab
Blank=refers to open in new window
<a href="./index.html">Brown Bear</a> Contact,homeetc
<a href="./aboutme.html">About Me</a>
<a href="https://en.wikipedia.org/wiki/Brown Image in new
_bear" target="_blank"> <img src="https://s3. window
amazonaws.com/codecademy-content/courses/web-
101/web101-image_brownbear.jpg" /></a> <p id="top">This is the
top of the page!</p><h1
An id should be descriptive to make it id="bottom">This is the
easier to remember the purpose of a link. bottom! </h1>
<ul><li><a href="#introduction">Introduction<
/a></li>
<li><a href="#habitat">Habitat</a></li>
<li><a href="#media">Media</a></li>
</ul>
2. The <head> element contains the metadata for a web page. Metadata
is information about the page that isn’t displayed directly on
the web page.
<!DOCTYPE html>
<html>
<head>
<body>
<h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
<p>The brown bear (<em>Ursus arctos</em>) is native to parts of n
orthern Eurasia and North America. Its conservation status is currently
<strong>Least Concern</strong>.<br /><br /> There are many subspecies w
ithin the brown bear species, including the
Atlas bear and the Himalayan brown bear.</p>
<h3>Species</h3>
<ul>
<li>Arctos</li>
<li>Collarus</li>
<li>Horribilis</li>
<li>Nelsoni (extinct)</li>
</ul>
<h3>Features</h3>
<p>Brown bears are not always completely brown. Some can be reddi
sh or yellowish. They have very large, curved claws and huge paws. Male
brown bears are often 30% larger than female brown bears. They can rang
e from 5 feet to 9 feet from head to toe.</p>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<ol>
<li>Russia</li>
<li>United States</li>
<li>Canada</li>
</ol>
<h3>Countries with Small Brown Bear Populations</h3>
<p>Some countries with smaller brown bear populations include Arm
enia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan,
Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
<img src="https://s3.amazonaws.com/codecademy-
content/courses/web-101/web101-image_brownbear.jpg" />
<video src="https://s3.amazonaws.com/codecademy-
content/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-
bear.mp4" width="320" height="240" controls>Video not supported</video>
</div>
</body>
</head>
</html>
3. The content of the <title> element is metadata about the page. It

is displayed within a window tab and is used for page indexing.
On the other hand, the content of the <h1> element is used to
create a heading hierarchy. <h1> content is usually very
prominently displayed on the site itself.
4. The second tool web developers use to make the structure of code
easier to read is indentation. The spaces are inserted using the
space and tab bars on your keyboard. First was whitespace
5. The World Wide Web Consortium, or W3C, is responsible for
maintaining the style standards of HTML.
<body>
<p>Paragraph 1</p>
<div>
<p>Paragraph 2</p>
</div></body>
6. Example of identation:
<body>
<h1>Whitespace</h1>
<div>
<p>Whitespace and indentation make html documents easier to read.</
p>
</div>
</body>
7. Comments begin with . Any characters in
between will be ignored by your browser.

8.
<title>Favorite Quotes</title>

</head>
The first step in entering data into the table is to add rows using the table row
element: <tr><table>
<tr>
</tr>
<tr>
</tr></table>
<table>
<tr>
</tr>
<tr>
<td>Adam’s Greenworks</td>
<td>14</td>
<td>Package Items</td>
</tr>
</table>
<table>
<tr>
<th>Company Name</th>Number of Items to Ship<th></th><th>Next Act
ion</th>
</tr>
<tr>
<td>Adam’s Greenworks</td>
<td>14</td>
</tr>
</table>
table, td {
border: 1px solid black;
}
<table>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<td colspan="2">Out of Town</td>
<td>Back in Town</td>
</tr></table>
In the example above, the data Out of Town spans the Monday and Tuesday table
headings using the value 2 (two columns). The data Back in Town appear only under
the Wednesday heading.
<table>
<tr> 
<th></th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr> 
<th>Morning</th>
<td rowspan="2">Work</td>
<td rowspan="3">Relax</td>
</tr>
<tr> 
<th>Afternoon</th>
</tr>
<tr> 
<th>Evening</th>
<td>Dinner</td>
</tr></table>
Long tables can be sectioned off using the table body element: <tbody>.
The <tbody> element should contain all of the table’s data, excluding the table
headings
<thead>. The table headings are contained inside of this element.only

the column headings go under the <thead> element
<table>
<tbody>
<thead>
<tr>
ion</th>
</tr>
</thead>
<tr>
The bottom part of a long table can also be sectioned off using the
<tfoot> element.
<tfoot>
<td>Total</td>
<td>28</td>
</tfoot>
</table>
Cascading Style Sheets, is a language that web developers use to

style the HTML content on a web page.
<!DOCTYPE html>
<html>
<head>
<title>Ship To It - Company Packing List</title>
<table>
<tbody>
<thead>
<tr>
ion</th>
</tr>
</thead>
<tr>
<td colspan="2">Adam’s Greenworks</td>
<td rowspan="2">14</td>
</tr>
<tr>
<td>Davie's Burgers</td>
<td>2</td>
<td>Send Invoice</td>
</tr>
<tr>
<td>Baker's Bike Shop</td>
<td>3</td>
<td>Send Invoice</td>
</tr>
<tr>
<td>Miss Sally's Southern</td>
<td>4</td>
<td>Ship</td>
</tr>
<tr>
<td>Summit Resort Rentals</td>
<td>4</td>
<td>Ship</td>
</tr>
<tr>
<td>Strike Fitness</td>
<td>1</td>
<td>Enter Order</td>
</tr>
</tbody>
<tfoot>
<td>Total</td>
<td>28</td>
</tfoot>
</table>
</html>
Computers need an HTTP request to know how to communicate. The HTTP

request instructs the receiving computer how to handle the incoming
information. More information can be found in our article about HTTP
requests.
The <form> element is a great tool for collecting information, but
then we need to send that information somewhere else for processing.
We need to supply the <form> element with both the location of where
the <form>‘s information goes and what HTTP request to make.
<form action="/example.html" method="POST"></form>
 The action attribute determines where the information is sent.

 The method attribute is assigned a HTTP verb that is included in the HTTP request.
<form action="/example.html" method="POST">

<h1>Creating a form</h1>
<p>Looks like you want to learn how to create an HTML form. Well,
the best way to learn is to play around with it.</p></form>
The <form> element can also contain child elements. For instance, it
would be helpful to provide a header so that users know what this
<form> is about. We could also add a paragraph to provide even more
detail. Let’s see an example of this in code:
<form action="/practice.html" method="POST">
<h1>Creating a form</h1>
<p>Looks like you want to learn how to create an HTML form. Well,
the best way to learn is to play around with it.</p>
</form>
Text input <form>

<h1>Login to start creating a
If we want to create an input field in our burger!</h1>

<form>, we’ll need the help of the <input> 
element. <input type="text" name="user
name" value="Davie">
The <input> element has a type attribute
which determines how it renders on the web
</form>
page and what kind of data it can accept.
1. First value in type attribute is “text” <input

type="text" name="first-text-field">
2. Name attribute: without it the info. In
<input> wont sent when <form> submit.
3. The value of the value attribute is
paired with the value of the name
attribute and sent as text when the
form is submitted
<input type="text" name="first-text-

field" value="already pre-filled">
For a user to properly identify an <form action="/example.html"
<input> we use the appropriately method="POST">
named <label> element. <label for="meal">What do you want
1. to eat?</label>
<br>
<input type="text" name="food"
id="meal"></form>
Password input: <input <form>

type”password”> element will <h1>Login to start creating a
replace input text with another char
burger!</h1>
like $ or %
<label for="username">Usernam
e:</label>
<input type="text" name="user
name" id="username">
<br>
<label for="user-
pw">Password:</label>

<input type="password" id="us
er-pw" name="user-pw">

</form>
By setting type="number" for an <form>

<input> we can restrict what users <h1>Create a burger!</h1>
type into the input field to just
<section class="protein">
numbers (and a few special characters
like -, +, and .). We can also <label for="patty">What typ
provide a step attribute which e of protein would you like?</label>
creates arrows inside the input field <input type="text" name="pa
to increase or decrease by the value tty" id="patty" value="beef">
of the step attribute
</section>
<hr>
<section class="patties">
<label for="amount">How man
y patties would you like?</label>
<input id="amount" name="am
ount" type="number" step="1">

</section>
</form>
Range Input: <span>Rare</span>

To set the minimum and maximum values 
of the slider we assign values to the
<input id="doneness" name=
min and max attribute of the <input>.
We could also control how smooth and "doneness" type="range" min="0" max="
fluid the slider works by assigning 5" step="0.5">
the step attribute a value. Smaller
step values will make the slider more
fluidly, whereas larger step values
<span>Well-Done</span>
will make the slider move more
noticeably.
· <section> - An element used to represent a

standalone section for which a more specific element
can’t be found. This usually has a heading as a child
element. A section should make sense in the outline of
a document, whereas <div> is used for styling. This is
a semantic element you’ll learn more about in a later
lesson.
· class - A global attribute that has a list of
classes pertaining to an element. You’ll see this used
with <section> in the practice.
· <hr> - An element that is used to a break
between paragraph-level elements. It is displayed as a
horizontal line. This is also a semantic element
Checkbox : <section class="toppings">
<span>What toppings would y
ou like?</span>
<br>

<input id="lettuce" name="t
opping" type="checkbox" value="lettuc
e">
<label for="lettuce">Lettuc
e</label>
the second checkbox-->
<input id="tomato" name="to
pping" type="checkbox" value="tomato"
>
<label for="tomato">Tomato<
/label>
the third checkbox-->
<input id="onion" name="top
ping" type="checkbox" value="onion">
<label for="onion">Onion</l
abel>
</section>

</form>
Radio Button Input <br>


<input type="radio" id="ye
s" name="cheese" value="yes">
<label for="Yes">Yes</label
>

<input type="radio" id="no
" name="cheese" value="no">
<label for="no">No</label>
Dropdown list:
<section class="bun-type">
<label for="bun">What type
of bun would you like?</label>
<select id="bun" name="bun"
>
<option value="sesame">Sesame</op
tion>
<option value="potato">Potato</op
tion>
<option value="tacos">Tacos</opti
on>
</select>

</section>
<section class="sauce-selection">
<label for="sauce">What typ
e of sauce would you like?</label>
<input list="sauces" id="sa
uce" name="sauce">

<datalist id="sauces">
<option value="ketchup"></option>
<option value="mayo"></option>

<option value="Mexician"></option
>

</datalist>

</section>
Textarea element <textarea id="extra" name="extra" row

s="3" cols="40">
The <textarea> element is used to
</textarea>
create a bigger text field for users
to write more text. We can add the <textarea>Adding default te
attributes rows and cols to determine xt</textarea>
the amount of rows and columns for </section>
the <textarea>
submit
<section class="submission
">
<input type="submit" val
ue="Submit">
Checkbox:
Form: whole code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Rubik" re
l="stylesheet">
<title>Forms Review</title>
</head>
<body>
<section id="overlay">
<img src="https://s3.amazonaws.com/codecademy-
content/courses/web-101/unit-6/htmlcss1-img_burger-logo.svg" al
t="Davie's Burgers Logo" id="logo">
<hr>
<form action="submission.html" method="POST">
<h1>Create a burger!</h1>
<section class="protein">
<label for="patty">What type of protein would you like?
</label>
<input type="text" name="patty" id="patty">
</section>
<hr>

<section class="patties">
<label for="amount">How many patties would you like?</label>
<input type="number" name="amount" id="amount">
</section>
<hr>

<section class="cooked">
<label for="doneness">How do you want your patty cooked</labe
l>
<br>
<span>Rare</span>
<input type="range" name="doneness" id="doneness" value="3" m
in="1" max="5">
<span>Well-Done</span>
</section>
<hr>

<section class="toppings">
<span>What toppings would you like?</span>
<br>
<input type="checkbox" name="topping" id="lettuce" value="let
tuce">
<label for="lettuce">Lettuce</label>
<input type="checkbox" name="topping" id="tomato" value="toma
to">
<label for="tomato">Tomato</label>
<input type="checkbox" name="topping" id="onion" value="onion
">
<label for="onion">Onion</label>
</section>
<hr>

<section class="cheesy">
<span>Would you like to add cheese?</span>
<br>
<input type="radio" name="cheese" id="yes" value="yes">
<label for="yes">Yes</label>
<input type="radio" name="cheese" id="no" value="yes">
<label for="no">No</label>
</section>
<hr>

<section class="bun-type">
<label for="bun">What type of bun would you like?</label>
<select name="bun" id="bun">
<option value="sesame">Sesame</option>
<option value="potatoe">Potato</option>
<option value="pretzel">Pretzel</option>
</select>
</section>
<hr>

<section class="sauce-selection">
<label for="sauce">What type of sauce would you like?</label>
<input list="sauces" id="sauce" name="sauce">
<datalist id="sauces">
<option value="ketchup"></option>
<option value="mayo"></option>
<option value="mustard"></option>
</datalist>
</section>
<hr>
<section class="extra-info">
<label for="extra">Anything else you want to add?</label>
<br>
<textarea id="extra" name="extra" rows="3" cols="40"></textar
ea>
</section>
<hr>
<section class="submission">
<input type="submit" value="Submit">
</section>
</form>
</section>
</body>
</html>
Form validation:
The Validation is the concept of checking user provided data against the required data.
1. Server-side validation :happens when data is sent to another machine for validation.eg. Logine
page
2. Client side validation: if we want to check the data data on the browser(the client) this validation
occurs before data is sent to the server.
Shared among the different browsers are the benefits of using

HTML5’s built-in client-side validation.
It saves us time from having to send information to the server and
wait for the server to send back confirmation or rejection of the
data. This can also help us protect our server from malicious code or
data from a malicious user
Requiring an input: 
out <form> which are not
<label for="guess">Enter a nu
optional.
mber between 1-10:</label>
<form action="/example.html" <br>
method="POST"> <input type="number" name="gu
<label for="allergies">Do you ess" id="guess" required>
have any dietary restrictions?
<br>
</label>
<br> <input type="submit" id="subm
<input id="allergies" ission" value="Submit" required>
name="allergies" type="text"
required>
<br>
<input type="submit"
value="Submit"></form>
<form action="/example.html" <form action="check.html" method="GET

method="POST"> ">
<label for="guests">Enter #

name="guests" type="number" <label for="guess">Enter a nu
min="1" max="4"> mber between 1-10:</label>
<input type="submit" <br>
value="Submit"></form>
<input type="number" name="gu
ess" id="guess" min="1" max="10" requ
ired>
<br>
<input type="submit" id="subm
ission" value="Submit" required>
</form>
Checking Text Length <input id="username" name="username"

type="text" minlength="3" maxlength="
<input id="summary"
15" required>
name="summary" type="text"
<br>
minlength="5" maxlength="250"
required> <label for="pw">Password:</la
bel>
<br>
<input id="pw" name="pw" type
="password" minlength="8" maxlength="
15" required>
Matching a Pattern <input id="username" name="username"
type="text" required minlength="3" ma
we use the pattern attribute
xlength="15" pattern="[a-zA-Z0-9]+">
and assign it a regular
expression, or regex. Regular
expressions are a sequence of
characters that make up a
search pattern.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sign Up Page</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" re
l="stylesheet">
</head>
<body>
<section class="overlay">
<h1>Sign Up</h1>
<p>Create an account:</p>
<form action="submission.html" method="GET">
<label for="username">Username:</label>
<br>
<input id="username" name="username" type="text" required minle
ngth="3" maxlength="15">
<br>
<label for="pw">Password:</label>
<br>

<input id="pw" name="pw" type="password" required minlength="8"
maxlength="15">
<br>
<input type="submit" value="Submit">
</form>
</section>
</body>
</html>
When building web pages, we use a combination of non-semantic HTML
and Semantic HTML. The word semantic means “relating to meaning,”
so semantic elements provide information about the content between
the opening and closing tags.
Elements such as <div> and <span> are not semantic elements since
they provide no context as to what is inside of those tags.
Why use Semantic HTML?
Accessibility: Semantic HTML makes webpages accessible for mobile

devices and for people with disabilities as well. This is because screen readers
and browsers are able to interpret the code better.


SEO: It improves the website SEO, or Search Engine Optimization, which is

the process of increasing the number of people that visit your webpage. With
better SEO, search engines are better able to identify the content of your
website and weight the most important content appropriately.


Easy to Understand: Semantic HTML also makes the website’s source code
easier to read for other web developers.
Header and Nav

<div id="nav">
A <header> is a container

usually for either
navigational links or <!DOCTYPE html>
introductory content <html>
containing <h1> to <h6> <body>
headings. <header>
<h1>Navigational Links</h1>
<nav>
<ul>
<li><a href="#home">Home</a><
/li>
<li><a href="#posts">Posts</a
></li>
<li><a href="#contact">Contac
t</a></li>
</ul>
</nav>
</header>
</body>
</html>
Main and foooter <!DOCTYPE html>

<html>
The element <main> is used to
<body>
encapsulate the dominant
content within a webpage. <header>
This tag is separate from the <h1>Navigational Links</h1>
<footer> and the <nav> of a <nav>
web page since these elements <ul>
don’t contain the principal
<li><a href="#home">Home</a><
content. By using <main> as
opposed to a <div> element, /li>
screen readers and web <li><a href="#posts">Posts</a
browsers are better able to ></li>
identify that whatever is <li><a href="#contact">Contac
inside of the tag is the bulk
t</a></li>
of the content.
</ul>
</nav>
</header>
<main>
<p>This is where the main content
will go once the page is built out!</p>
</main>

<footer>
<p>Contact me at +1 234 567 8910
</p>
</footer>

</body>
</html>
Article and section <section>

<article>
section> defines elements in
<h2>Facts About Dogs</h2>
a document, such as chapters,
headings, or any other area <p>
of the document with the same Dogs have a sense of time. It's
theme. been proven that they know the differen
ce between a hour and five. If conditio
The <article> element holds
ned to, they can predict future events,
content that makes sense on such as regular walk times.
its own. <article> can hold
</p>
content such as articles,
blogs, comments, magazines, </article>
etc. An <article> tag would </section>
help someone using a screen
reader understand where the
article content
The aside element aside>
<p>A study was conducted on d
The <aside> element is used
ogs being away from their owners for va
to mark additional
information that can enhance rying hours and the studies show that d
another element but isn’t ogs who were away from their owners the
required in order to longest showed the greatest amount of a
understand the main ffection!
content.Some common uses of the
</p>
<aside> element are for:
</aside>
 Bibliographies
 Endnotes
 Comments
 Pull quotes
 Editorial sidebars/additional info
Figure and figcation:<figure> is <figure>

an element used to <img src="https://content.codec
encapsulate media such as an
ademy.com/courses/SemanticHTML/dogimage
image, illustration, diagram,
code snippet, etc, which is .jpeg">
referenced in the main flow <figcaption>This picture shows
of the document. characters from Overwatch.</figcaption>
</figure>
<figure>

<img src="overwatch.jpg"/>
<figcaption>This picture
shows characters from
Overwatch.</figcaption>
</figure>
Audio and Attributes <audio controls>

<source src="https://content.co
<audio>
decademy.com/courses/SemanticHTML/dogBa
<source
src="iAmAnAudioFile.mp3" rking.mp3" type="audio/mp3">
type="audio/mp3"></audio> </audio>
controls: automatically displays
the audio controls into the browser
such as play and mute.
src:specifies the URL of

the audio file.
Video and embed <video src="https://content.codecademy
.com/courses/SemanticHTML/dog-
Some attributes that can alter a
video.mp4" controls>Video not supported
video playback include:
</video>
 controls: When added in, a
play/pause button will be added <embed src="https://content.codec
onto the video along with volume
control and a fullscreen option. ademy.com/courses/SemanticHTML/dog-on-
 autoplay: The attribute which beach.gif">
results in a video automatically
playing as soon as the page is
loaded.
 loop: This attribute results in the
video continuously playing on
repeat.
Another tag that can be used

to incorporate media content
into a page is the <embed>
tag, which can embed any
media content including
videos, audio files, and gifs
from an external source.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Navigational Links</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section>
<article>
<h2>Facts About Dogs</h2>
<p>
Dogs have a sense of time. It's been proven that they know th
e difference between a hour and five. If conditioned to, they can predi
ct future events, such as regular walk times.
</p>
</article>
<aside>
<p>A study was conducted on dogs being away from their owners
for varying hours and the studies show that dogs who were away from the
ir owners the longest showed the greatest amount of affection!
</p>
</aside>
</section>
<figure>
<img src="https://content.codecademy.com/courses/SemanticHTML/d
ogimage.jpeg"/>
<figcaption>A cute dog.</figcaption>
</figure>
<audio controls>
<source src="https://content.codecademy.com/courses/SemanticHTM
L/dogBarking.mp3" type="audio/mp3">
</audio>
<video src="https://content.codecademy.com/courses/SemanticHTML/d
og-video.mp4" controls>
</video>
<embed src="https://content.codecademy.com/courses/SemanticHTML/d
og-on-beach.gif"/>

</main>

<footer>
<p>Contact me at +1 234 567 8910 </p>
</footer>

</body>
</html>

Answer

Uploaded by

Document Information

Original Description:

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

Answer

Uploaded by

Copyright:

Available Formats

Skeleton of all the web pages:

HTML provides structure to the content appearing on a

 A markup language is a computer language that

 <div> divisions{great for groouping elements}

if we only used text, everything would just be from top to bottom

 ATTRIBUTE [ID]they can help us identify content

<em> tag emphasizes text, while the <strong> tag highlights

<video src="myVideo.mp4" width="320" height="240" controls>

<span> has no physical appearance.

html> a document type

3. The content of the <title> element is metadata about the page. It

<thead>. The table headings are contained inside of this element.only

Cascading Style Sheets, is a language that web developers use to

Computers need an HTTP request to know how to communicate. The HTTP

 The action attribute determines where the information is sent.

<form action="/example.html" method="POST">

Text input <form>

If we want to create an input field in our burger!</h1>

1. First value in type attribute is “text” <input

<input type="text" name="first-text-

Password input: <input <form>

By setting type="number" for an <form>

Range Input: <span>Rare</span>

· <section> - An element used to represent a

Radio Button Input <br>

Textarea element <textarea id="extra" name="extra" row

Shared among the different browsers are the benefits of using

Requiring an input: <!--Add a required attribute to the

<form action="/example.html" <form action="check.html" method="GET

Checking Text Length <input id="username" name="username"

Why use Semantic HTML?

Accessibility: Semantic HTML makes webpages accessible for mobile

SEO: It improves the website SEO, or Search Engine Optimization, which is

Header and Nav

Main and foooter <!DOCTYPE html>

Article and section <section>

Figure and figcation:<figure> is <figure>

Audio and Attributes <audio controls>

src:specifies the URL of

Another tag that can be used

You might also like