Scribd
Upload
21 views

HTML

The document discusses various HTML elements including <div>, <span>, <p>, <img>, <video>, <ul>, <ol>, and their uses. It also covers setting up the basic HTML document structure using <!DOCTYPE html>, <html>, <head>, and <body> tags. The <head> contains metadata like the <title> and the <body> contains visible content.

Uploaded by

Laura Rodriguez
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views

HTML

The document discusses various HTML elements including <div>, <span>, <p>, <img>, <video>, <ul>, <ol>, and their uses. It also covers setting up the basic HTML document structure using <!DOCTYPE html>, <html>, <head>, and <body> tags. The <head> contains metadata like the <title> and the <body> contains visible content.

Uploaded by

Laura Rodriguez
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 22

Divs

One of the most popular elements in HTML is the <div> element. <div> is short for
“division” or a container that divides the page into sections. These sections are very
useful for grouping elements in your HTML together.

<body>
<div>
<h1>Why use divs?</h1>
<p>Great for grouping elements!</p>
</div>
</body>

<div>s don’t inherently have a visual representation, but they are very useful when we
want to apply custom styles to our HTML elements. <div>s allow us to group HTML
elements to apply the same styles for all HTML elements inside. We can also style
the <div> element as a whole.

<div>s can contain any text or other HTML elements, such as links, images, or videos.
Remember to always add two spaces of indentation when you nest elements inside
of <div>s for better readability.

Attributes

If we want to expand an element’s tag, we can do so using an attribute. Attributes are


content added to the opening tag of an element and can be used in several different
ways, from providing information to changing styling. Attributes are made up of the
following two parts:

 The name of the attribute

 The value of the attribute

One commonly used attribute is the id. We can use the id attribute to specify different
content (such as <div>s) and is really helpful when you use an element more than
once. ids have several different purposes in HTML, but for now, we’ll focus on how they
can help us identify content on our page.

When we add an id to a <div>, we place it in the opening tag:

<div id="intro">
<h1>Introduction</h1>
</div>
Displaying Text

If you want to display text in HTML, you can use a paragraph or span:

 Paragraphs (<p>) contain a block of plain text.

 <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.

Take a look at each of these elements in action below:

<div>
<h1>Technology</h1>
</div>
<div>
<p><span>Self-driving cars</span> are anticipated to replace up to 2 million jobs over the
next two decades.</p>
</div>

In the example above, there are two different <div>. The second <div> contains
a <p> with <span>Self-driving cars</span>. This <span> element separates “Self-driving
cars” from the rest of the text in the paragraph.

It’s best to use a <span> element when you want to target a specific piece of content
that is inline, or on the same line as other text. If you want to divide your content
into blocks, it’s better to use a <div>.

Styling Text

You can also style text using HTML tags. The <em> tag emphasizes text, while
the <strong> tag highlights important text.

Later, when you begin to style websites, you will decide how you want browsers to
display content within <em> and <strong> tags. Browsers, however, have built-in style
sheets that will generally style these tags in the following ways:

 The <em> tag will generally render as italic emphasis.

 The <strong> will generally render as bold emphasis.

<p><strong>The Nile River</strong> is the <em>longest</em> river in the world, measuring


over 6,850 kilometers long (approximately 4,260 miles).</p>
Line Breaks

The spacing between code in an HTML file doesn’t affect the positioning of elements in
the browser. If you are interested in modifying the spacing in the browser, you can use
HTML’s line break element: <br>.

The line break element is unique because it is only composed of a starting tag. You can
use it anywhere within your HTML code and a line break will be shown in the browser.

<p>The Nile River is the longest river <br> in the world, measuring over 6,850 <br> kilometers
long (approximately 4,260 <br> miles).</p>

Unordered Lists

In addition to organizing text in paragraph form, you can also display content in an
easy-to-read list.

In HTML, you can use an unordered list tag (<ul>) to create a list of items in no
particular order. An unordered list outlines individual list items with a bullet point.

The <ul> element should not hold raw text and won’t automatically format raw text into
an unordered list of items. Individual list items must be added to the unordered list
using the <li> tag. The <li> or list item tag is used to describe an item in a list.

<ul>
<li>Limes</li>
<li>Tortillas</li>
<li>Chicken</li>
</ul>

Ordered Lists

Ordered lists (<ol>) are like unordered lists, except that each list item is numbered. They
are useful when you need to list different steps in a process or rank items for first to
last.

You can create the ordered list with the <ol> tag and then add individual list items to
the list using <li> tags.
<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>

Images

The <img> tag allows you to add an image to a web page. Most elements require both
opening and closing tags, but the <img> tag is a self-closing tag. Note that the end of
the <img> tag has a forward slash /. Self-closing tags may include or omit the final slash
— both will render properly.

<img src="image-location.jpg" />

The <img> tag has a required attribute called src. The src attribute must be set to the
image’s source, or the location of the image. In this case, the value of src must be
the uniform resource locator (URL) of the image. A URL is the web address or local
address where a file is stored.

Image Alts

The alt attribute, which means alternative text, brings meaning to the images on our
sites. The alt attribute can be added to the image tag just like the src attribute. The
value of alt should be a description of the image.

<img src="#" alt="A field of yellow sunflowers" />

The alt attribute also serves the following purposes:

 If an image fails to load on a web page, a user can mouse over the area
originally intended for the image and read a brief description of the image. This
is made possible by the description you provide in the alt attribute.

 Visually impaired users often browse the web with the aid of screen reading
software. When you include the alt attribute, the screen reading software can
read the image’s description out loud to the visually impaired user.

 The alt attribute also plays a role in Search Engine Optimization (SEO), because
search engines cannot “see” the images on websites as they crawl the internet.
Having descriptive alt attributes can improve the ranking of your site.
If the image on the web page is not one that conveys any meaningful information to a
user (visually impaired or otherwise), the alt attribute should be left empty.

Videos

In addition to images, HTML also supports displaying videos. Like the <img> element,
the <video> element requires a src attribute with a link to the video source. Unlike
the <img> element however, the <video> element requires an opening and a closing
tag.

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


Video not supported
</video>

In this example, the video source (src) is "myVideo.mp4". The source can be a video file
that is hosted alongside your webpage, or a URL that points to a video file hosted on
another webpage.

After the src attribute, the width and height attributes are used to set the size of the
video displayed in the browser. The controls attribute instructs the browser to include
basic video controls such as pausing and playing.

The text, Video not supported, between the opening and closing video tags will only be
displayed if the browser is unable to load the video.

Preparing for HTML

HTML files require certain elements to set up the document properly. We can let web
browsers know that we are using HTML by starting our document with a document type
declaration.

The declaration looks like this:

<!DOCTYPE html>

This declaration is an instruction, and it must be the first line of code in your HTML
document. It tells the browser what type of document to expect, along with what
version of HTML is being used in the document. For now, the browser will correctly
assume that the html in <!DOCTYPE html> is referring to HTML5, as it is the current
standard.
In the future, however, a new standard will override HTML5. To make sure your
document is forever interpreted correctly, always include <!DOCTYPE html> at the very
beginning of your HTML documents.

Lastly, HTML code is always saved in a file with an .html extension.

The <html> Tag

The <!DOCTYPE html> declaration provides the browser with two pieces of information
(the type of document and the HTML version to expect), but it doesn’t actually add any
HTML structure or content.

To create HTML structure and content, we must add opening and closing <html> tags
after declaring <!DOCTYPE html>:

<!DOCTYPE html>
<html>

</html>

Anything between the opening <html> and closing </html> tags will be interpreted as
HTML code. Without these tags, it’s possible that browsers could incorrectly interpret
your HTML code.

The Head

Remember the <body> tag? The <head> element is part of this HTML metaphor. It goes
above our <body> element.

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. Unlike the information
inside of the <body> tag, the metadata in the head is information about the page itself.

The opening and closing head tags typically appear as the first item after your first
HTML tag:

<head>
</head>

Page Titles

What kind of metadata about the web page can the <head> element contain?
A browser’s tab displays the title specified in the <title> tag. The <title> tag is always
inside of the <head>.

<!DOCTYPE html>
<html>
<head>
<title>My Coding Journal</title>
</head>
</html>

If we were to open a file containing the HTML code in the example above, the browser
would display the words My Coding Journal in the title bar (or in the tab’s title).

Linking to Other Web Pages

You can add links to a web page by adding an anchor element <a> and including the
text of the link in between the opening and closing tags.

<a>This Is A Link To Wikipedia</a>

The anchor element in the example above is incomplete without the href attribute. This
attribute stands for hyperlink reference and is used to link to a path, or the address to
where a file is located (whether it is on your computer or another location). The paths
provided to the href attribute are often URLs.

<a href="https://www.wikipedia.org/">This Is A Link To Wikipedia</a>

Opening Links in a New Window

Have you ever clicked on a link and observed the resulting web page open in a new
browser window? If so, you can thank the <a> element’s target attribute.

The target attribute specifies how a link should open.

It’s possible that one or more links on your web page link to an entirely different
website. In that case, you may want users to read the linked website, but hope that they
return to your web page. This is exactly when the target attribute is useful!

For a link to open in a new window, the target attribute requires a value of _blank.
The target attribute can be added directly to the opening tag of the anchor element, just
like the href attribute.

<a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">The Brown Bear</a>


Linking to Relative Page

project-folder/
|—— about.html
|—— contact.html
|—— index.html

HTML files are often stored in the same folder, as shown in the example above. If the
browser is currently displaying index.html, it also knows that about.html and
contact.html are in the same folder. Because the files are stored in the same folder, we
can link web pages together using a relative path.

<a href="./contact.html">Contact</a>

In this example, the <a> tag is used with a relative path to link from the current HTML
file to the contact.html file in the same folder. On the web page, Contact will appear as a
link.

A relative path is a filename that shows the path to a local file (a file on the same
website, such as ./index.html) versus an absolute path (a full URL,
like https://www.codecademy.com/learn/learn-html which is stored in a different folder).
The ./ in ./index.html tells the browser to look for the file in the current folder.

Linking At Will

HTML allows you to turn nearly any element into a link by wrapping that element with
an anchor element. With this technique, it’s possible to turn images into links by simply
wrapping the <img> element with an <a> element.

<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"><img


src="https://www.Prickly_Pear_Closeup.jpg" alt="A red prickly pear fruit"/></a>

In the example above, an image of a prickly pear has been turned into a link by
wrapping the outside of the <img> element with an <a> element.

Linking to Same Page

How do we make it easier for a user to jump to different portions of our page? In order
to link to a target on the same page, we must give the target an id, like this:

<p id="top">This is the top of the page!</p>


<h1 id="bottom">This is the bottom! </h1>

In this example, the <p> element is assigned an id of “top” and the <h1> element is
assigned “bottom.” An id can be added to most elements on a webpage.
An id should be descriptive to make it easier to remember the purpose of a link. The
target link is a string containing the # character and the target element’s id.

<ol>
<li><a href="#top">Top</a></li>
<li><a href="#bottom">Bottom</a></li>
</ol>

In the example above, the links to <p id="top"> and <h1 id="bottom"> are embedded in
an ordered list. These links appear in the browser as a numbered list of links.

Create a Table

Before displaying data, we must first create the table that will contain the data by using
the <table> element.

<table>

</table>

The <table> element will contain all of the tabular data we plan on displaying.

Table Rows

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>

In the example above, two rows have been added to the table.

Table Data
Rows aren’t sufficient to add data to a table. Each cell element must also be defined. In
HTML, you can add data using the table data element: <td>.

<table>
<tr>
<td>73</td>
<td>81</td>
</tr>
</table>

In the example above, two data points (73 and 81) were entered in the one row that
exists. By adding two data points, we created two cells of data.

Table Headings

To add titles to rows and columns, you can use the table heading element: <th>.
The table heading element is used just like a table data element, except with a relevant
title. Just like table data, a table heading must be placed within a table row.

<table>
<tr>
<th></th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Temperature</th>
<td>73</td>
<td>81</td>
</tr>
</table>

What happened in the code above? First, a new row was added to hold the three
headings: a blank heading, a Saturday heading, and a Sunday heading. The blank
heading creates the extra table cell necessary to align the table headings correctly over
the data they correspond to.

In the second row, one table heading was added as a row title: Temperature. When
rendered, this code will appear similar to the image below:

Note, also, the use of the scope attribute, which can take one of two values:
1. row - this value makes it clear that the heading is for a row.

2. col - this value makes it clear that the heading is for a column.

Table Borders

In older versions of HTML, a border could be added to a table using the border attribute
and setting it equal to an integer. This integer would represent the thickness of the
border.

<table border="1">
<tr>
<td>73</td>
<td>81</td>
</tr>
</table>

The code in the example above is deprecated, so please don’t use it. It’s meant to
illustrate older conventions you may come across when reading other developers’ code.
We use CSS to add style to HTML documents, because it helps us to separate the
structure of a page from how it looks.

table, td {
border: 1px solid black;
}

The code in the example above uses CSS instead of HTML to show table borders.

Spanning Columns

What if the table contains data that spans multiple columns? For example, a personal
calendar could have events that span across multiple hours, or even multiple days.

Data can span columns using the colspan attribute. The attribute accepts an integer
(greater than or equal to 1) to denote the number of columns it spans across.

<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 appears only under
the Wednesday heading.

Spanning Rows

Data can also span multiple rows using the rowspan attribute. The rowspan attribute is
used for data that spans multiple rows (perhaps an event goes on for multiple hours on
a certain day). It accepts an integer (greater than or equal to 1) to denote the number
of rows it spans across.

<table>
<tr> <!-- Row 1 -->
<th></th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr> <!-- Row 2 -->
<th>Morning</th>
<td rowspan="2">Work</td>
<td rowspan="3">Relax</td>
</tr>
<tr> <!-- Row 3 -->
<th>Afternoon</th>
</tr>
<tr> <!-- Row 4 -->
<th>Evening</th>
<td>Dinner</td>
</tr>
</table>

In the example above, there are four rows:

1. The first row contains an empty cell and the two column headings.

2. The second row contains the Morning row heading, along with Work, which
spans two rows under the Saturday column. The “Relax” entry spans three rows
under the Sunday column.

3. The third row only contains the Afternoon row heading.

4. The fourth row only contains the Dinner entry, since “Relax” spans into the cell
next to it.
Table Body

Over time, a table can grow to contain a lot of data and become very long. When this
happens, the table can be sectioned off so that it is easier to manage. 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.

Table Head

When a table’s body is sectioned off, it makes sense to section off the table’s column
headings using the <thead> element.

<table>
<thead>
<tr>
<th></th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Morning</th>
<td rowspan="2">Work</td>
<td rowspan="3">Relax</td>
</tr>
<tr>
<th scope="row">Afternoon</th>
</tr>
<tr>
<th scope="row">Evening</th>
<td>Dinner</td>
</tr>
</tbody>
</table>

Table Footer

The bottom part of a long table can also be sectioned off using the <tfoot> element.

Styling with CSS


Tables, by default, are very bland. They have no borders, the font color is black, and the
typeface is the same type used for other HTML elements.

CSS, or Cascading Style Sheets, is a language that web developers use to style the
HTML content on a web page. You can use CSS to style tables. Specifically, you can
style the various aspects mentioned above.

table, th, td {
border: 1px solid black;
font-family: Arial, sans-serif;
text-align: center;
}

The code in the example above demonstrates just some of the various table aspects
you can style using CSS properties.

Header and Nav

Let’s take a look at some semantic elements that assist in the structure of a web page.
A <header> is a container usually for either navigational links or introductory content
containing <h1> to <h6> headings.

<header>
<h1>
Everything you need to know about pizza!
</h1>
</header>

This can be compared to the code below which uses a <div> tag instead of
a <header> tag:

<div id="header">
<h1>
Everything you need to know about pizza!
</h1>
</div>

By using a <header> tag, our code becomes easier to read. It is much easier to identify
what is inside of the <h1>‘s parent tags, as opposed to a <div> tag which would provide
no details as to what was inside of the tag.

A <nav> is used to define a block of navigation links such as menus and tables of
contents. It is important to note that <nav> can be used inside of the <header> element
but can also be used on its own.

<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>

By using <nav> as a way to label our navigation links, it will be easier for not only us,
but also for web browsers and screen readers to read the code.

Main and Footer

Two more structural elements are <main> and <footer>. These elements along
with <nav> and <header> help describe where an element is located based on
conventional web development standards.

The element <main> is used to encapsulate the dominant content within a webpage.
This tag is separate from the <footer> and the <nav> of a web page since these
elements don’t contain the principal content. By using <main> as opposed to
a <div> element, screen readers and web browsers are better able to identify that
whatever is inside of the tag is the bulk of the content.

<main>
<header>
<h1>Types of Sports</h1>
</header>
<article>
<h3>Baseball</h3>
<p>
The first game of baseball was played in Cooperstown, New York in the summer of 1839.
</p>
</article>
</main>

As we see above, <main> contains an <article> and <header> tag with child elements
that hold the most important information related to the page.

The content at the bottom of the subject information is known as the footer, indicated
by the <footer> element. The footer contains information such as:

 Contact information

 Copyright information

 Terms of use

 Site Map

 Reference to top of page links


<footer>
<p>Email me at [email protected]</p>
</footer>

In the example above, the footer is used to contain contact information.


The <footer> tag is separate from the <main> element and typically located at the
bottom of the content.

Article and Section

Now that we covered the body of Semantic HTML, let’s focus on what can go in the
body. The two elements we’re going to focus on now are <section> and <article>.

<section> defines elements in a document, such as chapters, headings, or any other area
of the document with the same theme. For example, content with the same theme such
as articles about cricket can go under a single <section>. A website’s home page could
be split into sections for the introduction, news items, and contact information.

<section>
<h2>Fun Facts About Cricket</h2>
</section>

In the code above we created a <section> element to encapsulate the code.


In <section> we added a <h2> element as a heading.

The <article> element holds content that makes sense on its own. <article> can hold
content such as articles, blogs, comments, magazines, etc. An <article> tag would help
someone using a screen reader understand where the article content (that might
contain a combination of text, images, audio, etc.) begins and ends.

<section>
<h2>Fun Facts About Cricket</h2>
<article>
<p>A single match of cricket can last up to 5 days.</p>
</article>
</section>

In the code above, the <article> element containing a fact about cricket was placed
inside of the <section> element. It is important to note that a <section> element could
also be placed in an <article> element depending on the context.

The Aside Element

The <aside> element is used to mark additional information that can enhance another
element but isn’t required in order to understand the main content. This element can
be used alongside other elements such as <article> or <section>. Some common uses of
the <aside> element are for:

 Bibliographies

 Endnotes

 Comments

 Pull quotes

 Editorial sidebars

 Additional information

<article>
<p>The first World Series was played between Pittsburgh and Boston in 1903 and was a nine-
game series.</p>
</article>
<aside>
<p>
Babe Ruth once stated, “Heroes get remembered, but legends never die.”
</p>
</aside>

As shown above, the information within the <article> is the important content.
Meanwhile the information within the <aside> enhances the information in <article> but
is not required in order to understand it.

Figure and Figcaption

With <aside>, we learned that we can put additional information next to a main piece of
content, but what if we wanted to add an image or illustration? That is
where <figure> and <figcaption> come in.

<figure> is an element used to encapsulate media such as an image, illustration,


diagram, code snippet, etc, which is referenced in the main flow of the document.

<figure>
<img src="overwatch.jpg">
</figure>

In this code, we created a <figure> element so that we can encapsulate our <img> tag.
In <figure> we used the <img> tag to insert an image onto the webpage. We used
the src attribute within the <img> tag so that we can link the source of the image.

It’s possible to add a caption to the image by using <figcaption>.


<figcaption> is an element used to describe the media in the <figure> tag.
Usually, <figcaption> will go inside <figure>. This is different than using a <p> element to
describe the content; if we decide to change the location of <figure>, the paragraph tag
may get displaced from the figure while a <figcaption> will move with the figure. This is
useful for grouping an image with a caption.

<figure>
<img src="overwatch.jpg">
<figcaption>This picture shows characters from Overwatch.</figcaption>
</figure>

In the example above, we added a <figcaption> into the <figure> element to describe
the image from the previous example. This helps group the <figure> content with
the <figcaption> content.

While the content in <figure> is related to the main flow of the document, its position is
independent. This means that you can remove it or move it somewhere else without
affecting the flow of the document.

Audio and Attributes

The <audio> element is used to embed audio content into a document.


Like <video>, <audio> uses src to link the audio source.

<audio>
<source src="iAmAnAudioFile.mp3" type="audio/mp3">
</audio>

In this example, we created an <audio> element. Then we created a <source> element to


encapsulate our audio link. In this case, iAmAnAudioFile.mp3 is our audio file. Then we
specified the type by using type and named what kind of audio it is. Although not
always necessary, it’s recommended that we state the type of audio as it helps the
browser identify it more easily and determine if that type of audio file is supported by
the browser.

We linked our audio file into the browser but now we need to give it controls. This is
where attributes come in. Attributes provide additional information about an element.

Attributes allow us to do many different things to our audio file. There are many
attributes for <audio> but today we’re going to be focusing on controls and src.

 controls: automatically displays the audio controls into the browser such as play
and mute.
 src: specifies the URL of the audio file.
As you might have noticed, we already used the src attribute in the example code
above. Most attributes go in the opening tag of <audio>. For example, here’s how we
could add both autoplay functionality and audio controls:
<audio autoplay controls>

Video and Embed

By using a <video> element, we can add videos to our website. The <video> element
makes it clear that a developer is attempting to display a video to the user.

Some attributes that can alter a video playback include:

 controls: When added in, a play/pause button will be added onto the video
along with volume control and a fullscreen option.

 autoplay: The attribute which results in a video automatically playing as soon as


the page is loaded.

 loop: This attribute results in the video continuously playing on repeat.

<video src="coding.mp4" controls>Video not supported</video>

In the code above, a video file named coding.mp4 is being played. The “Video not
supported” will only show up if the browser is unable to display the video.

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. This means that websites that have an embed button have
some form of media content that can be added to other websites. The <embed> tag is a
self-closing tag, unlike the <video> element. Note that <embed> is a deprecated tag and
other alternatives, such as <video>, <audio> and <img>, should be used in its place, but
is being taught for legacy purposes.

<embed src="download.gif"/>

In the example above, <embed> is being used to add in a gif from a local file known
as download.gif. Embed can be used to add local files as well as media content straight
from some other websites.

Where do Breadcrumbs Lead

In the previous examples, if you clicked on any of the breadcrumbs, it wouldn’t take
you to a new page. This is because we have set href="#". With this value, a click on the
link will cause the page to scroll to the top of the current page.

In a full site, these breadcrumbs would link to their respective pages. This is
accomplished by setting the href property to the appropriate page.
Since breadcrumbs are typically relative to the current page, the breadcrumb list on
each page needs to be different. However, as a user moves around the breadcrumb list,
they should expect the breadcrumb style and list to stay consistent.

For example, if the breadcrumb list was:

Fashion > Shoes > Flats > Brown

and a user clicked on “Flats”, the breadcrumb list on that page should look like:

Fashion > Shoes > Flats

It would be confusing for a user if the categories or order of them changed like:

Shoes > Shopping > Flats

Web Fonts Using <link>

Online font services, like Google Fonts, make it easy to find and link to fonts from your
site. You can browse and select fonts that match the style of your website.

When you select a font in Google Fonts, you’ll be shown all of the different styles
available for that particular font. You can then select the styles you want to use on your
site.
When you’re done selecting a font and its styles, you can review your selected font
family, and a <link> element will be automatically generated for you to use on your site!

<head>
<!-- Add the link element for Google Fonts along with other metadata -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"
rel="stylesheet">
</head>

The generated <link> element needs to be added to the <head> element in your HTML
document for it to be ready to be used in your CSS.

p{
font-family: 'Roboto', sans-serif;
}

You can then create font-family declarations in your CSS, just like how you learned to do
with other fonts!

Responsive Web Design

Because websites can be displayed on thousands of different screen sizes, they must be
able to respond to a change in screen size and adapt the content so that users can
access it.

Viewport Meta Tag

Thus far, we have been learning about creating responsive web designs with CSS.
However, in order for us to enable this responsive CSS to work, we need to get familiar
with the HTML viewport meta tag!

Let’s start with the viewport, which is the total viewable area for a user; this area varies
depending on device. The viewport is smaller on a mobile device and larger on a
desktop.
Based on the size of the viewport, the meta tag (<meta>) is used to instruct the browser
on how to render the webpage’s scale and dimensions. For instance, say if a web page
is 960px and the device is 320px wide. Adding the viewport meta tag will squish the
content down until it is 320px — there is no need for the user to zoom out and view
the whole page!

Inside the <head> element, we will find where the <meta> tag syntax is implemented:

<!DOCTYPE html>
<html lang="en">
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>

We can break down the added <meta> tag into the following essential components:

 the name="viewport" attribute: tells the browser to display the web page at the
same width as its screen

 the content attribute: defines the values for the <meta> tag,
including width and initial-scale

 the width=device-width key-value pair: controls the size of the viewport in which
it sets the width of the viewport to equal the width of the device

 the initial-scale=1 key-value pair: sets the initial zoom level (Read more about
scale at MDN’s viewport documentation)

The viewport meta tag allows our web pages to be responsive and adapt a site’s
contents to the users’ screen size.

You might also like