html

codeacademy

HTML is the skeleton of all web pages.

is core to front-end development work.

So what exactly is HTML? HTML provides structure to the content appearing on a website, such as images, text, or videos. Right-click on any page on the internet, choose “Inspect,” and you’ll see HTML in a panel of your screen.

HTML stands for 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. You probably clicked on a couple of hyperlinks on your way to this Codecademy course.
Learning HTML is the first step in creating websites, but even a bit of knowledge can help you inject code snippets into newsletter, blog or website templates.

<h1>

https://www.youtube.com/watch?v=r5kfkpYtOiw

https://discuss.codecademy.com/t/why-would-raw-text-need-a-structure/288409/1

https://discuss.codecademy.com/t/doesnt-css-define-presentation-of-web-content/289088/1


HTML Anatomy
HTML is composed of elements. These elements structure the webpage and define its content. Let’s take a look at how they’re written.

The diagram to the right displays an HTML paragraph element. As we can see, the paragraph element is made up of one opening tag (<p>), the content (“Hello World!” text), and a closing tag (</p>). A tag and the content between it is called an HTML element. There are many tags that we can use to organize and display text and other types of content, like images.

Let’s quickly review each part of the element pictured:

HTML element (or simply, element) — a unit of content in an HTML document formed by HTML tags and the text or media it contains.

HTML Tag — the element name, surrounded by an opening (<) and closing (>) angle bracket.

Opening Tag — the first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets.

Content — The information (text or other elements) contained between the opening and closing tags of an HTML element.

Closing tag — the second HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them, directly after the left angle bracket.

https://discuss.codecademy.com/t/what-type-of-content-might-an-html-element-contain/297268
https://discuss.codecademy.com/t/do-tags-themselves-count-as-content/297271
https://discuss.codecademy.com/t/is-there-a-sentence-or-a-word-element/297274

The Body
One of the key HTML elements we use to build a webpage is the body element. Only content inside the opening and closing body tags can be displayed to the screen. Here’s what opening and closing body tags look like:

<body>

</body>
Once the file has a body, many different types of content – including text, images, and buttons – can be added to the body.

<body>
  <p>What's up, doc?</p>
</body>


https://discuss.codecademy.com/t/why-doesnt-the-sites-title-appear-on-the-page/297276
https://discuss.codecademy.com/t/what-is-a-web-browser/297280
https://discuss.codecademy.com/t/i-added-body-to-my-page-as-instructed-but-i-am-not-passing-step-one-why/297281

HTML Structure
HTML is organized as a collection of family tree relationships. As you saw in the last exercise, we placed <p> tags within <body> tags. 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.

<body>
  <p>This paragraph is a child of the body</p>
</body>
In the example above, the <p> element is nested inside the <body> element. The <p> element is considered a child of the <body> element, and the <body> element is considered the parent. You can also see that we’ve added two spaces of indentation (using the space bar) for better readability.

Since there can be multiple levels of nesting, this analogy can be extended to grandchildren, great-grandchildren, and beyond. The relationship between elements and their ancestor and descendent elements is known as hierarchy.

Let’s consider a more complicated example that uses some new tags:

<body>
  <div>
    <h1>Sibling to p, but also grandchild of body</h1>
    <p>Sibling to h1, but also grandchild of body</p>
  </div>
</body>
In this example, the <body> element is the parent of the <div> element. Both the <h1> and <p> elements are children of the <div> element. Because the <h1> and <p> elements are at the same level, they are considered siblings and are both grandchildren of the <body> element.

Understanding HTML hierarchy is important because child elements can inherit behavior and styling from their parent element. You’ll learn more about webpage hierarchy when you start digging into CSS.


https://discuss.codecademy.com/t/is-it-correct-to-say-that-the-body-element-is-nested-within-the-html-element/297347
https://discuss.codecademy.com/t/what-is-the-point-of-nesting-the-p-element-in-a-div-element/297355
https://discuss.codecademy.com/t/what-sorts-of-things-can-child-elements-inherit-from-their-parents/297359


##########

Headings
Headings in HTML are similar to headings in other types of media. For example, in newspapers, large headings are typically used to capture a reader’s attention. Other times, headings are used to describe content, like the title of a movie or an educational article.

HTML follows a similar pattern. In HTML, there are six different headings, or heading elements. Headings can be used for a variety of purposes, like titling sections, articles, or other forms of content.

The following is the list of heading elements available in HTML. They are ordered from largest to smallest in size.

<h1> — used for main headings. All other smaller headings are used for subheadings.
<h2>
<h3>
<h4>
<h5>
<h6>
The following example code uses a headline intended to capture a reader’s attention. It uses the largest heading available, the main heading element:

<h1>BREAKING NEWS</h1>


https://discuss.codecademy.com/t/how-do-we-know-which-heading-element-to-pick/297365
https://discuss.codecademy.com/t/isnt-font-size-more-presentation-than-structure/298146
https://www.youtube.com/watch?v=h01U6uDhNk4&feature=youtu.be

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.

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


https://discuss.codecademy.com/t/dont-div-elements-increase-the-complexity-of-our-html-structure/300405
https://discuss.codecademy.com/t/why-should-we-use-divs-if-they-dont-change-things-visually/330860
https://discuss.codecademy.com/t/is-two-space-indentation-for-nested-elements-standard-practice/300330

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>


https://discuss.codecademy.com/t/can-id-attributes-only-be-used-on-div-tags/299836/1
https://discuss.codecademy.com/t/what-kind-of-information-do-attributes-provide/299839
https://discuss.codecademy.com/t/are-there-other-attributes-aside-from-the-id-attribute/299840


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.


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

https://discuss.codecademy.com/t/what-exactly-is-span-used-for/399175
https://discuss.codecademy.com/t/what-is-the-difference-between-content-that-is-inline-vs-blocks-of-content/298154
https://discuss.codecademy.com/t/why-would-we-want-to-separate-small-pieces-of-content/298157


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.


As we can see, “The Nile River” is bolded and “longest” is in italics.

https://discuss.codecademy.com/t/why-does-the-content-of-a-web-page-need-to-be-described-with-tags/297385
https://discuss.codecademy.com/t/what-does-it-mean-for-a-tag-to-be-rendered/297387
https://discuss.codecademy.com/t/what-is-a-style-sheet/297388


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.


https://discuss.codecademy.com/t/why-do-we-need-to-use-2-space-indentations/297392/1
https://discuss.codecademy.com/t/if-both-br-and-br-are-valid-syntaxes-which-one-should-i-use/297872/1
https://discuss.codecademy.com/t/are-line-breaks-the-standard-way-of-manipulating-the-position-of-html-elements/297873


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.

https://discuss.codecademy.com/t/what-happens-if-we-put-raw-text-directly-in-the-ul-element/297396
https://discuss.codecademy.com/t/does-the-li-tag-always-have-to-be-nested-within-the-ul-tag/297397
https://discuss.codecademy.com/t/is-there-a-way-to-have-the-list-items-sit-flush-against-the-page-like-the-rest-of-the-text/297402


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.


https://discuss.codecademy.com/t/can-the-li-element-contain-content-other-than-text/297762
https://discuss.codecademy.com/t/can-we-only-display-either-numbers-or-bullet-point-lists/297763
https://discuss.codecademy.com/t/is-there-a-way-to-increase-the-space-between-the-number-and-the-text-of-each-li/297765


mages
All of the elements you’ve learned about so far (headings, paragraphs, lists, and spans) share one thing in common: they’re composed entirely of text! What if you want to add content to your web page that isn’t composed of text, like 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.


https://discuss.codecademy.com/t/what-is-a-local-address-and-how-does-it-differ-from-a-web-address/297766
https://discuss.codecademy.com/t/can-i-link-to-images-that-are-stored-locally-on-my-own-computer/297769
https://discuss.codecademy.com/t/how-can-i-store-my-own-images-online/297771

Image Alts
Part of being an exceptional web developer is making your site accessible to users of all backgrounds. In order to make the Web more inclusive, we need to consider what happens when assistive technologies such as screen readers come across image tags.

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.

https://discuss.codecademy.com/t/what-is-good-alt-text-to-use/297776/1
https://discuss.codecademy.com/t/how-long-or-detailed-should-our-alternative-text-be/297777
https://discuss.codecademy.com/t/is-there-free-screen-reading-software-i-can-use/297779


Videos
In addition to images, HTML also supports displaying videos. Like the <img> tag, the <video> tag requires a src attribute with a link to the video source. Unlike the <img> tag 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: pause, play and skip.

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.


https://discuss.codecademy.com/t/why-doesn-t-the-controls-attribute-need-a-value/300320/1
https://discuss.codecademy.com/t/can-we-use-an-alt-attribute-with-the-video-tag/300322
https://discuss.codecademy.com/t/why-are-some-tags-self-closing-but-others-are-not/300323

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.
In the next lesson, we’ll take the content that you’ve added to this website and transform it into an HTML document that’s ready to go on the web.

Download the Elements: Cheat Sheet to help you remember the content covered in this lesson.


https://youtu.be/uxmB8MlO3m8

<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 northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within 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 reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range 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 Armenia, 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" alt="A Brown Bear"/>
    <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>

https://discuss.codecademy.com/t/div-and-p-elements-seem-to-do-the-same-thing-what-are-the-differences-between-the-two/300314/1
https://www.youtube.com/watch?v=ZpMbgfJO5js
https://discuss.codecademy.com/t/could-i-use-a-src-attribute-on-a-p-tag-to-load-in-raw-text/300318

###########################################################################


HTML files require certain elements to set up the document properly. You can let web browsers know that you are using HTML by starting your 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.

https://discuss.codecademy.com/t/how-does-the-browser-know-what-language-other-documents-are-written-in-for-example-why-doesn-t-css-need-a-doctype/341021
https://discuss.codecademy.com/t/what-does-document-type-mean/358740

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>:


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.


https://discuss.codecademy.com/t/without-the-html-tags-mentioned-in-this-lesson-in-what-ways-might-the-browser-misinterpret-our-html-code/341023
https://discuss.codecademy.com/t/why-is-the-doctype-a-different-color-from-the-html-tags/341024
https://discuss.codecademy.com/t/why-do-we-need-the-tag-after-the-declaration/366428

The Head
So far you’ve done two things to set up the file properly:

Declared to the browser that your code is HTML with <!DOCTYPE html>
Added the HTML element (<html>) that will contain the rest of your code.
We have added these elements to the Brown Bears page you previously created. Now, let’s also give the browser some information about the page itself. We can do this by adding a <head> element.

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. You’ll see an example of this in the next exercise.

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

https://discuss.codecademy.com/t/why-does-the-browser-need-metadata-about-the-page/341026

Page Titles
A browser’s tab displays the title specified in the <title> tag. The <title> tag is always inside of the <head>.A browser’s tab displays the title specified in the <title> tag. The <title> tag is always inside of the <head>.

https://discuss.codecademy.com/t/can-the-content-of-the-title-element-be-the-same-as-the-content-of-the-h1-element/341027

<!DOCTYPE html>, the declaration specifying the version of HTML for the browser
The <html> tags that enclose all of your HTML code
The <head> tag that contains the metadata of a webpage, such as its <title>


Linking to Other Web Pages
One of the powerful aspects of HTML (and the Internet), is the ability to link 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.

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>

When reading technical documentation, you may come across the term hyperlink. Not to worry, this is simply the technical term for link. These terms are often used interchangeably.

https://discuss.codecademy.com/t/how-can-i-link-to-a-file-on-my-own-computer/341029

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>

In the example above, setting the target attribute to "_blank" instructs the browser to open the relevant Wikipedia page in a new window.

In this exercise, we’ve used the terminology “open in a new window.” It’s likely that you are using a modern browser that opens up websites in new tabs, rather than new windows. Before the advent of browsers with tabs, additional browser windows had to be opened to view more websites. The target="_blank" attribute, when used in modern browsers, will open new websites in a new tab.

https://discuss.codecademy.com/t/this-exercise-uses-the-blank-value-to-open-pages-in-new-tabs-does-the-target-attribute-have-other-values/341030


Linking to Relative Page
Thus far you have learned how to link to external web pages. Many sites also link to internal web pages like Home, About, and Contact.

Before we learn how to link between internal pages, let’s establish where our files are stored. When making multi-page static websites, web developers often store HTML files in the root directory, or a main folder where all the files for the project are stored. As the size of the projects you create grows, you may use additional folders within the main project folder to organize your code.

project-folder/
|—— about.html
|—— contact.html
|—— index.html
The example above shows three different files — about.html, contact.html, and index.html in one folder.

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.


https://discuss.codecademy.com/t/do-absolute-paths-always-point-to-remote-files-or-assets/341031
https://discuss.codecademy.com/t/what-are-the-advantages-of-using-relative-paths/347179

Linking At Will
You’ve probably visited websites where not all links were made up of text. Maybe the links you clicked on were images or some other form of content.

So far, we’ve added links that were made up of only text, like the following:

<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank">Prickly Pear</a>
Text-only links, however, would significantly decrease your flexibility as a web developer!

Thankfully, 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.


https://discuss.codecademy.com/t/in-this-exercise-we-nested-an-img-element-within-an-a-element-to-make-images-clickable-links-can-we-nest-any-element-within-a-tags-li-elements/341032

Linking to Same Page
At this point, we have all the content we want on our page. Since we have so much content, it doesn’t all fit on the screen. How do we make it easier for a user to jump to different portions of our page?

When users visit our site, we want them to be able to click a link and have the page automatically scroll to a specific section.

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. An id is especially helpful for organizing content belonging to a div!

https://discuss.codecademy.com/t/this-exercise-nests-anchors-within-li-elements-wouldn-t-it-make-more-sense-to-make-the-entire-li-a-clickable-anchor-by-nesting-the-li-in-anchor-tags-instead/341033


Whitespace
The rest of this lesson will focus on some tools developers use to make code easier to interpret.

As the code in an HTML file grows, it becomes increasingly difficult to keep track of how elements are related. Programmers use two tools to visualize the relationship between elements: whitespace and indentation.

Both tools take advantage of the fact that the position of elements in a browser is independent of the amount of whitespace or indentation in the index.html file.

For example, if you wanted to increase the space between two paragraphs on your web page, you would not be able to accomplish this by adding space between the paragraph elements in the index.html file. The browser ignores whitespace in HTML files when it renders a web page, so it can be used as a tool to make code easier to read and follow.


What makes the example below difficult to read?

<body><p>Paragraph 1</p><p>Paragraph 2</p></body>
You have to read the entire line to know what elements are present. Compare the example above to this:

<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</body>
This example is easier to read, because each element is on its own line. While the first example required you to read the entire line of code to identify the elements, this example makes it easy to identify the body tag and two paragraphs.

A browser renders both examples the same way:

Paragraph 1
Paragraph 2
In the next exercise you will learn how to use indentation to help visualize nested elements.

https://discuss.codecademy.com/t/what-is-whitespace-and-how-does-it-differ-from-indentation/341034


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

The World Wide Web Consortium, or W3C, is responsible for maintaining the style standards of HTML. At the time of writing, the W3C recommends 2 spaces of indentation when writing HTML code. Although your code will work without exactly two spaces, this standard is followed by the majority of professional web developers. Indentation is used to easily visualize which elements are nested within other elements.

<body>
  <p>Paragraph 1</p>
  <div>
    <p>Paragraph 2</p>
  </div>
</body>
In the example above, Paragraph 1 and the <div> tag are nested inside of the <body> tag, so they are indented two spaces. The Paragraph 2 element is nested inside of the <div> tag, so it is indented an additional two spaces.

https://discuss.codecademy.com/t/can-i-use-tabs-for-my-indentation-rather-than-two-spaces/341035

Comments begin with <!-- and end with -->. Any characters in between will be ignored by your browser.

ncluding comments in your code is helpful for many reasons:

They help you (and others) understand your code if you decide to come back and review it at a much later date.
They allow you to experiment with new code, without having to delete old code.


https://discuss.codecademy.com/t/how-often-should-i-leave-comments-within-my-code/341036

While some tags have a very specific purpose, such as image and video tags, most tags are used to describe the content that they surround, which helps us modify and style our content later. There are seemingly infinite numbers of tags to use (many more than we’ve taught). Knowing when to use each one is based on how you want to describe the content of your HTML. Descriptive, well-chosen tags are one key to high-quality web development. A full list of available HTML tags can be found in Mozilla documentation.While some tags have a very specific purpose, such as image and video tags, most tags are used to describe the content that they surround, which helps us modify and style our content later. There are seemingly infinite numbers of tags to use (many more than we’ve taught). Knowing when to use each one is based on how you want to describe the content of your HTML. Descriptive, well-chosen tags are one key to high-quality web development. A full list of available HTML tags can be found in Mozilla documentation.


https://developer.mozilla.org/en-US/docs/Web/HTML/Element

The <!DOCTYPE html> declaration should always be the first line of code in your HTML files. This lets the browser know what version of HTML to expect.
The <html> element will contain all of your HTML code.
Information about the web page, like the title, belongs within the <head> of the page.
You can add a title to your web page by using the <title> element, inside of the head.
A webpage’s title appears in a browser’s tab.
Anchor tags (<a>) are used to link to internal pages, external pages or content on the same page.
You can create sections on a webpage and jump to them using <a> tags and adding ids to the elements you wish to jump to.
Whitespace between HTML elements helps make code easier to read while not changing how elements appear in the browser.
Indentation also helps make code easier to read. It makes parent-child relationships visible.
Comments are written in HTML using the following syntax: <!-- comment -->.


https://youtu.be/B4tCt6elrU0


https://discuss.codecademy.com/t/there-are-so-many-tags-how-can-i-ever-remember-them-all/341037
https://www.youtube.com/watch?v=hpn8MPHOpDo&feature=youtu.be

<!DOCTYPE html>
<html>

<head>
  <title>Brown Bears</title>
</head>

<body>
  <nav>
    <a href="./index.html">Brown Bear</a>
    <a href="./aboutme.html">About Me</a>
  </nav>
  <h1>The Brown Bear</h1>
  <nav>
    <ul>
      <li><a href="#introduction">Introduction</a></li>
      <li><a href="#habitat">Habitat</a></li>
      <li><a href="#media">Media</a></li>
    </ul>
  </nav>
  <div id="introduction">
    <h2>About Brown Bears</h2>
    <p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the
      Atlas bear and the Himalayan brown bear.</p>
    <a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">Learn More</a>
    <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 reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range 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 Armenia, 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" height="240" width="320" controls>Video not supported</video>
  </div>
</body>

</html>


Why Tables?
There are many websites on the Internet that display information like stock prices, sports scores, invoice data, and more. This data is naturally tabular in nature, meaning that a table is often the best way of presenting the data.

Create a Table
Before displaying data, you 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 you plan on displaying.

https://discuss.codecademy.com/t/in-step-1-of-this-exercise-where-should-i-create-the-table/341007

Table Rows
In many programs that use tables, the table is already predefined for you, meaning that it contains the rows, columns, and cells that will hold data. In HTML, all of these components must be created.

The first step in entering data into the table is to add rows using the table row element: <tr>.

https://discuss.codecademy.com/t/what-is-a-cell/341009

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

https://discuss.codecademy.com/t/after-completing-step-1-of-this-exercise-why-do-i-only-see-one-row-even-though-my-table-contains-two-sets-of-tr-tags/341010

Table Headings
Table data doesn’t make much sense without titles to describe what the data represents.

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.

Note, also, the use of the scope attribute, which can take one of two values:

row - this value makes it clear that the heading is for a row.
col - this value makes it clear that the heading is for a column.
HTML code for tables may look a little strange at first, but analyzing it piece by piece helps make the code more understandable.

https://discuss.codecademy.com/t/this-exercise-discusses-the-scope-attribute-what-is-the-purpose-of-the-scope-attribute-and-are-row-and-col-the-only-values-this-attribute-can-have/341012
https://discuss.codecademy.com/t/where-do-i-put-the-three-table-headings/362390

Table Borders
So far, the tables you’ve created have been a little difficult to read because they have no 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 following is deprecated, so please don’t use it. It’s meant to illustrate older conventions you may come across when reading other developers’ code.

The browser will likely still interpret your code correct if you use the border attribute, but that doesn’t mean the attribute should be used. Instead, you can achieve the same effect using CSS.

table, td {
  border: 1px solid black;
}
The code in the example above uses CSS instead of HTML to show table borders.


https://discuss.codecademy.com/t/why-should-we-use-css-rather-than-html-to-create-borders-for-our-tables/341013

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


https://discuss.codecademy.com/t/what-should-colspan-2-look-like/308003/1
https://discuss.codecademy.com/t/can-the-colspan-attribute-only-be-used-within-td-tags/341016

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:

The first row contains an empty cell and the two column headings.
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.
The third row only contains the Afternoon row heading.
The fourth row only contains the Dinner entry, since “Relax” spans into the cell next to it.
If you’d like to see how the browser interprets the code above, feel free to copy and paste it into the code editor to understand it a little better.

https://discuss.codecademy.com/t/can-the-rowspan-attribute-only-be-used-within-td-tags/341014


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 (more on this in a later exercise).

<table>
  <tbody>
    <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>
  </tbody>
</table>
In the example above, all of the table data is contained within a table body element. Note, however, that the headings were also kept in the table’s body — we’ll change this in the next exercise.


https://discuss.codecademy.com/t/why-would-we-want-to-section-off-tables-with-the-tbody-tag/341015


9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999

Introduction to Semantic 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.

By using Semantic HTML, we select HTML elements based on their meaning, not on how they are presented. Elements such as <div> and <span> are not semantic elements since they provide no context as to what is inside of those tags.

For example, instead of using a <div> element to contain our header information, we could use a <header> element, which is used as a heading section. By using a <header> tag instead of a <div>, we provide context as to what information is inside of the opening and closing tag.

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.

To better understand this, you can think of comparing non-semantic HTML to going into a store with no signs on the aisles. Since the aisles aren’t labeled, you don’t know what products are in those aisles. However, stores that do have signs for each aisle make it a lot easier to find the items you need, just like Semantic HTML.


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.

The example below shows <header> in action:

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

Let’s take a look at the example below:

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

Now that we’ve learned about the <header> and <nav> elements let’s add them into our 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.

So how does <main> look when incorporated into our code? That’s a great question.

<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
For example:

<footer>
  <p>Email me at Codey@Codecademy.com</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.

Here is an example of how to use <section>:

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

Here is an example of how to use <article>:

<section>
  <h2>Fun Facts About Cricket</h2>
  <article>
    <p>A single match of cricket can last up to 15 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
Here’s an example of <aside> being used alongside <article>:

<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
Now that we learned about text-based content, let us dig into <audio>! Surely everyone needs <audio>— how else would you listen to your Korean hip hop?

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. 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>
You can find other attributes here: Useful attributes.


https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Attributes


Video and Embed
As demonstrated in the previous exercise, media content can be a useful addition to a website. 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.
Below is an example of <video> being used with the controls attribute:

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

Below we’ll take a look at <embed> being used in action.

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


Review
Congrats on completing this lesson on Semantic HTML! Now that you know the benefits of Semantic HTML and how to use it, you can incorporate semantic elements into your website to make it more accessible and to make the code easier to read.

Let’s review some of the topics we covered throughout the lesson:

Semantic HTML introduces meaning to a page through specific elements that provide context as to what is in between the tags.
Semantic HTML is a modern standard and makes a website accessible for people who use screen readers to translate the webpage and improves your website’s SEO.
<header>, <nav> , <main> and <footer> create the basic structure of the webpage.
<section> defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.
<article> holds content that makes sense on its own such as articles, blogs, comments, etc.
<aside> contains information that is related to the main content, but not required in order to understand the dominant information.
<figure> encapsulates all types of media.
<figcaption> is used to describe the media in <figure>.
<video>, <embed>, and <audio> elements are used for media files.
Now, apply this knowledge to become a better Web Developer.