Introduction to HTML5

Parts of websites

Frontend Handles the following things of a website -
- Structure (with HTML5)
- Looks (with CSS)
- Functionality (with JS)
Backend Handles requests from the frontend and sends response. There are mainly 5 kinds of requests backend can handle -
- GET
- POST
- PUT
- PATCH
- DELETE

Structure of a HTML Document

<!DOCTYPE html>
<html lang="en">
    <head>
        ...contents of head
    </head>
    <body>
        ...contents of body
    </body>
</html>

<!DOCTYPE html> delcares that we are using HTML 5

<html></html> tag denotes the html part of the document/webpage. Note that there are two tags. The first one is the opening tag and the second one is the closing tag.

<head></head> section contains data about the webpage. One of the important tags in head is -

- `<title></title>` tag is used to dentoe the title of a webpage. Whenever you write something inside the title it shows up as the title on the tab bar of your browser.

- `<meta />` tags are used to provide meta descriptions about any page. These tags are self closing. For example - 

    - `<meta charset="UTF-8">` defines the charecter set being used by the webpage. UTF-8 is one of the standerd character mappings which has support for emojis.

    - `<meta name="viewport" content="width=device-width, initial-scale=1.0">` This specific meta tag is used to define the behaviour of the viewport i.e. the place where the webpage is shown

    - `<meta name="description" content="...">` provides the description for a webpage used by search engines. Search for Search engine optimization using meta tags for more info.

    - `<meta name="og:.." content="..">` og tags or open graph tags are used by social media websites to show contents when a link is shared in media. Search - open graph tags for more detalis.

- `<link/>` also a self closing tag used to preload assets and load stylesheets

<body></body> tag contains the structure and order of the visual contents of a webpage.

There are two kinds of tags in body -

semantic tags - These tag denote what kind of content is the tag holding
non semantic tags - These tag do not clearly denote the type of the internal content. Example - <div></div>

We also talked about two tags -

<p></p> tag is used to show paragraphs.
There are 6 heading tags from <h1></h1> to <h6></h6> to show headings of a webpage.

Every tag also has some properties which we can mention in those tags, known as attributes.