###### tags: `HTML` `Tutorials` `WebFundamentals2021` # HTML Tags ## The big tags ### Doctype Written link: ``` <!DOCTYPE html> ``` Used to inform a website visitor's browser that the document being rendered is an HTML document ### html tag Written like: ``` <html lang="en"> </html> ``` Inside the html tag will contain everything about the website or links to parts to it. lang="en" => is used to set the primary language for a document ### head tag Written like: ``` <head> </head> ``` This is the meta content of the site. What search engines will use to make your site searchable. Other tags also reside here to. ### body tag Written like: ``` <body> </body> ``` This is right below the head tag and will contain all the content of your website that the end user will see ## Common tags in the head section ### utf-8 ``` <meta charset="UTF-8"> ``` The charset attribute specifies the character encoding for the HTML document. The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world! ### title ``` <title>Website Title</title> ``` This is how you chance the tab title or wording ### favicon ``` <link rel='icon' type='image/png' href='./images/icon.png'> ``` That picture you see in the tab of most websites this is how that is set. ### stylesheet ``` <link rel='stylesheet' href='styles.css'> ``` How you would link to an external styles sheet ## Tags for the body section - header - Typically used at the top of the page to contain things like the site or page title and navigation links - nav - Typically used to contain the navigation links - a - How you create a link. The href section will the the address you want th elink to go to. If written like below it is a file with in the same folder of the current page ```<a href='index.html'>Index page</a>``` - section - Used to create sections on the page with some prebuilt styling - div - Another way to seperate or combine sections on a page - img - Add an image to the page. The src is where you will put the path or url to the image. In the example below the image is located in a folder called images and the file that we are adding is called photo.jpg. The alt part of this is important for accessability purposes. If the image doesn't load then this text will show. If someone is using a screen reader then it will read the text here. ```<img src='/images/photo.jpg' alt='Image title' />``` - address - Like the section tag has some pre built styling and is used to contain an address. Here it is ok to also use the br to create line breaks between the different address parts - h1 - h6 => These are header tags. Yes they have prebuild styling like h1 is biggest, however the use of these is more to denote importance. h1 is the most important line on the page - p - Paragraph with prebuild styling automatically adds spacing around the text contained