Build structure with HTML by adding text, links, images and more.

Site Structure

The webpage now has a heading and a tagline. Next, we will add a description of the company. 

The HTML _paragraph_ element, `p`, is used to hold one or more sentences, just like paragraphs in an essay or a book. 

```html
<p>Paragraph text here</p>
```

Let's use a paragraph element to add the company description. 

Add a Paragraph

Now that we know about HTML element nesting and parent/child relationships, let's see another way these concepts are applied on a real-life webpage.   

_Div_ elements divide your page by enclosing other elements. These enclosed groups of elements can then be organized, moved and styled independently from one another. 

Div elements are often used with the _class_ attribute. Here's an example: 

```html
<div class="main">
 ...
</div>
```

__Note__: The `...` indicates where other HTML elements would normally be enclosed by the `div`. 

Below, we will use divs to divide our page into three separate parts.  

Add a Div

Now, let's learn more about the heading element. 

Headings are a frequently used HTML element. You can think of them like headlines in a newspaper. Your eyes may notice headings first because the words are large and bold compared to other text on the webpage. 

There are six heading elements: `h1`, `h2`, `h3`, `h4`, `h5`, and `h6`. `h1` is the largest heading and `h6` is the smallest. 

For best practice, you should avoid skipping heading levels. There should also be only one `<h1>` per HTML page. Although skipping heading levels or using multiple `<h1>` elements will not cause errors in your code, it is important to keep a logical hierarchy of your HTML content. If you are unhappy with the styling of the heading elements, its appearance should be modified using [CSS](https://www.codecademy.com/learn/learn-css). 

Add a Heading

The last HTML elements we will explore are involved in _metadata_ processes. You can think of these elements as the "brains" of a webpage because they communicate vital information to the web browser, but are not visible to a webpage visitor.   

1. `<!DOCTYPE html>`: Tells the web browser to expect an HTML document.<br><br>

2. `<html>...</html>`: The root of the HTML document and parent of all other HTML elements on the webpage.<br><br>

3. `<head>...</head>`: Enclose other metadata about the site, such as its title.<br><br>
 
4. `<title>...</title>`: Contains the site's title, which is one way users can find your site through a search engine, like Google.<br><br>  

5. `<meta charset="utf-8"/>`: Tells the web browser which character set to use. In this case, the character set is "utf-8".  

Metadata: The Brains

Good job! Creating links with the anchor element is a fundamental web development skill.


The diagram to the right illustrates the different parts of the anchor element syntax. In the diagram, notice the following:  

1. Any valid URL can be used for the value of the `href` attribute.<br><br>
2. The URL must be enclosed with quotation marks.<br><br>
3. Text between the `<a>` and `</a>` tags can be as few or as many words as you would like. 

Click Next to learn how to add images to a webpage!

A Closer Look

Impressive! With just five page elements, you've already created an interesting website!

Another essential HTML element is the _unordered list_. Items in an unordered list are referred to as _list items_. Each item is bulleted, not numbered. For example: 

<ul>
	<li>A list item</li>
	<li>A second list item</li>
	<li>A third list item</li>
</ul>       

The HTML code for the list above: 

```html 
<ul>
  <li>A list item</li>
  <li>A second list item</li>
  <li>A third list item</li>
</ul> 
```

About unordered lists: 

1. `ul` tags create the unordered list.<br><br>

2. `li` tags contain each list item.

Unordered list elements can be used to organize content on a webpage in a number of ways. Below we will use one to organize our website's navigation menu, sometimes called a _navbar_.

Create an Unordered List

With the video and unordered list elements, you may have noticed something interesting: these HTML elements had other HTML elements _nested_ inside of them. 

For example, in unordered lists, `li` elements are nested inside the `ul`. 

```html
<ul>
  <li>First item</li> 
  <li>Second item</li>
</ul>
```

Web developers refer to the enclosing element as the _parent_ element and the enclosed elements as _children_.  

Referring to HTML elements as parents and children may sound funny, but it's a core web development concept. The web browser also knows about these parent/child relationships, which will be important as we explore CSS in the next lesson. 

Parent and Child Elements

Awesome! The photo makes the webpage much cooler. What's cooler than a photo? A video!

The HTML _video_ element can add video to a webpage. 
 
```html
<video width="320" height="240" controls>
  <source src="video-url.mp4" type="video/mp4">
</video>
```

The video element uses a number of attributes. Let's take a look at them: 

1. `width` and `height`: Set the size of the screen that displays the video.<br><br>

2. `controls`: Adds play, pause and volume control.<br><br>

3. `source src`: Sets the URL of the video to play.<br><br>

4. `type`: Specifies different video formats. 



Add a Video

Let's explore the basic anatomy of an HTML element. Line 9 of __index.html__ contains a _heading_ element: 

```html
<h1>You're Building a Website!</h1>
```

1. All HTML elements begin with an _opening tag_. In this case, the opening tag is `<h1>`.<br><br>  
2. Most elements require a _closing tag_, denoted by a `/`. In this case, the closing tag is `</h1>`.<br><br>
3. The website user only sees the content between the opening and closing tags. 

**Note**: There are several other HTML elements in __index.html__ in addition to the heading element. Don't be alarmed! We will encounter most of these in more depth during the lesson. 

Anatomy of an HTML Element

Nice work! The webpage is starting to come together. 

What if you wanted to link users to a different webpage? The HTML _anchor_ element makes it possible to do this with a single click. 

```html
<a href="http://google.com">Click here for Google!</a>
```

Anchor elements use an _attribute_ to link users to websites. Attributes customize the behavior or appearance of HTML elements. Anchor elements use the `href` attribute, which specifies the webpage to link to. In the example above, the text "Click here for Google!" links to `http://google.com`.    

__IMPORTANT__: Web addresses, such as `http://google.com`, have a technical name: _URL_. 

Anchor Elements

To add images to a webpage, use the HTML _image_ element:
  
```html
<img src="https://content.codecademy.com/projects/make-a-website/lesson-1/bikes1.jpg"/>
```

Just like websites have URLs, images on the web also have URLs. Image URLs typically end with the .jpg or .png file extension. The `src` attribute sets the _source_ for an image element. 

Image elements are _self-closing_, which means they do not need a closing tag. 

Let's use an image element to add a photograph to our webpage. 

Adding Images

Congratulations! You've learned enough HTML to create a great website!  

Before we move on to styling with CSS, let's review what we learned in this lesson. 

#### Languages
* __html__: stands for _hypertext markup language_, and is used to give a webpage structure.<br><br>
* __css__: stands for _cascading style sheets_, and is used to style HTML elements.

#### HTML Elements 
* _h1 - h6_: indicate text headings on a webpage. h1 is the largest heading; h6 is the smallest. 
```html
<h1>Heading</h1>
```

* _p_: used for non-heading text, such as the bodies of articles or company descriptions.
```html
<p>Description of company here.</p>
```

* _a_: short for anchor and used to add links to other webpages. Anchor elements typically have an href attribute: 
```html
<a href="http://codecademy.com">Click here</a> to learn how to make a website!
```

* _img_: used to add an image to a webpage. Image elements are _self-closing_ and do not require a closing tag: 
```html
<img src="https://images.com/favorite.png">
```

* _video_: used to add videos to a webpage, and uses multiple attributes and a nested source element: 

  ```html
  <video width="320" height="240" controls>
    <source src="https://movies.io/great-clip.mp4" type="video/mp4">
  </video>
  ```

* _unordered list_: used to create lists on a webpage and requires li elements inside a ul: 

  ```html
  <ul>
    <li>list item</li>
    <li>another item</li>
    <li>yet another</li>
  </ul>
  ```

* _div_: used to organize HTML elements into different groups, which can be given a class attribute: 
  ```html 
  <div class="main">
    <h2>Subheading!</h2>
  </div>
  ```

* _metadata tags_: provide metadata about a webpage. 

#### Web Concepts 
* __parent/child elements__: used to describe HTML elements that enclose or are enclosed by other elements. For example, below the ul is the parent and the li items are children:  

  ```html
  <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
  ```
Click Up Next to start learning about CSS!



HTML Review

All websites use HTML and CSS. After learning both of these languages, you will be ready to build your own website!

* _HTML_ stands for Hyper Text Markup Language. It is used to give websites structure with text, links, images, and other fundamental elements.   
<br>
* _CSS_ stands for Cascading Style Sheets. It is used to change the appearance of HTML elements.

