###### tags: `HTML`
# HTML Notes

## Types of Elements
There are 2 basic types of html elements
1. Semantic
2. Presentational

### Semantic elements
These are the ones that have meaning. They tell us something. The ones that we should use for many reasons.
1. For developers that come behind you, they show that you wanted what is contained in the element to look the way it does for a reason
2. Accessability. Screenreaders.

#### Examples of Semantic elements:
1. header
2. section
3. address
4. h1
5. form
6. article
7. img

These all have some built in formating or styling as well. But these all have meaning behind them.

### Presentational
These elements don't have meaning behind them we use them more for structural purposes
#### Examples of Presentational elements:
1. div
2. span

These have no real meaning behind them nor do they have built in formating. We use these typically to seperate things on our page for later formating

## Parts of an element
1. Opening and Closing tags
2. Attributes

### Opening and Closing
So some tags need both an opening and a closing while others are what is called self closing. Here are some examples:

<header>Content to be seen goes here</header>
<h1>Title</h1>
<img src='img.jpg' alt='Image'>
<hr>

So these are all semantic tags. The 1st 2 require and opening and a closing tag where the 2nd 2 are considered self closing.

### Attributes
These are things that get added to our elements some are required while others are optional.

#### Required
1. src = This is needed for image tags. This points to the location of the image file.
2. alt = Also part of the image tag. Although some don't feel that this isn't required but for screenreaders and such it is.
3. href = Like the src attribute this goes with an a tag, and points to the location of where the link is going

#### Optional
1. id = This attribute has multiple uses but has rules as well.
1. 1st rule of id attrubutes is we don't talk about id attributes....joking 1st rule is you can only use it once per document.
2. Typically reserved for JavaScript Functions or internal links
3. Can be used for styling, just don't forget about the 1st rule of id attributes
1. class = This is used for styling. Unlike the id attribute use this fella as much as you want on the page.