# Day 1 1. HTML - **HTML Declaration** - Every HTML starts with a document type declaration: <!DOCTYPE html> - A DOCTYPE will specify that the type of the document is HTML so that the browser can identify. - For VSCode you can use '!' to generate the basic HTML sitemap such as below so you don't have to type through all the basic elements of HTML. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello World</title> </head> <body> <h1>This is the body</h1> </body> </html> ``` - **Headings** - defined from h1 to h6 - the headers are used based upon priority and importance of the text ```html <body> <h1> First Heading </h1> <h2> Second Heading </h2> <h3> Third Heading </h3> <h4> Fourth Heading </h4> <h5> Fifth Heading </h5> <h6> Sixth Heading </h6> </body> ``` **Result**: ![](https://i.imgur.com/J9ghL9F.png) - **Paragraph** - The `p` tag is used to create a paragraph or a group of text and is incorporated between`<p>` tag. ```html <body> <p> This is a paragraph </p> </body> ``` - **Anchor Tag** - The anchor tag is used to hold the url and it uses href which is a hyperlink reference. - It can also be used with image and when clicked on it's content, it redirects the user to the path that was determined within the anchor tag. ```html <body> <a href = "https://www.google.com">Google</a> </body> ``` - Block element and inline element - Block element will always start with a new line - The element will come as a block level - `<span>` tag , `<img>` tag - it creates an inline element that mark up the part of a text or image element - **Elements in HTML5** The elements are also known as tags and includes various tags such as `<header>` `<footer>` `<canvas>` and many more. [HTML5 - New Tags (Elements)](https://www.tutorialspoint.com/html5/html5_new_tags.htm) - **Attributes in HTML5** - The attributes defines properties of the element such as width and height of the image. - List of attributes in HTML5: 1. href ```html <!-- The href attribute specifies the URL of the page that <a> tag defines --> <a href="https://www.google.com"> Google </a> ``` 2. src ```html <!-- The src attribute specifies the path to the image. --> <img src="hello.jpg"> ``` 3. width & height ```html <!-- It is used to specify the width and height of an image. The width & height is determined in pixels. --> <img src="hello.jpg" width="300" height="400"> <!-- You can use this in CSS instead of HTML as well. --> ``` 4. alt ```html <!-- This attribute is used to define an alternate text for an image. It is useful for accessibility because: 1. If a user uses a screen reader, this tag will help them read. 2. If a slow connection, then this tag will let user know about the content. --> <img src = "hello.jpg" alt="This is a hello"> ``` 5. style ```html <!-- It is used to add styles to an element, such as color, font, size. --> <p style = "color: blue;"> Red Colored Text </p> <!-- This component is a part of stylesheet. --> ``` 6. lang ```html <!-- The lang attribute is used to define the language. The language that is set for this code is english as en. --> <!DOCTYPE html> <html lang="en"> ``` 7. title ```html <!-- It defines some extra information about an element. The text defined in title is displayed when u hover the cursor to that element. --> <p title="This is a hello world text"> Hello World </p> ``` ![](https://i.imgur.com/XkIeLNE.png) ### HELPFUL LINKS: [HTML Tutorial](https://www.w3schools.com/html/) [HTML Tutorial for Beginners: HTML Crash Course [2021]](https://www.youtube.com/watch?v=qz0aGYrrlhU) [Learn HTML - Free Interactive HTML Tutorial](https://www.learn-html.org/)