Chapter 1: Basic Structure Of html

Topics we are going to learn in this page:

<html> tag
<head> tag
<body> tag
<title> tag
<style> tag
<script> tag
<link> tag
<meta> tag
class attribute
id attribute

Basic Structure:

<html>...</html> : html tag specify from where to where is the actual html content. It the the parent tag of <head> & <body> tag.
<head>...</head> : head tag is the 1st child of <html> tag. It contains the information(primarily holds information for machine processing, not human-readability) obout the page, meta deta, style, scripts.
<body>...</body> : body tag is the 2nd child of <html> tag. It contains the main content of the webpage.
"! + Enter Key " : We can create the basic structure for an html document by this shortcut.(this auto generated lines are made by emmet)
Emmet : Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow (comes built in inside VS-Code). Emmet official cheat-sheet.
"alt + shift + down arrow key" - to make duplicate line of the line where the cursur was
"ctrl + space" - for attribute suggestion or value of attribute suggestion of any HTML element.

Example:

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Html Document Structure</title>
        </head>
        <body>
            // Main Content

        </body>
        </html>

Html head elements:

<!DOCTYPE html> : This line represent that the document type is HTML.
in <html lang="en">, the .. lang="en" .. represent that the HTML document is in English language
<title>...</title> : The title tag give the web page's tab a name.
<style>...</style> : style tag is used to add internal css to the html document
<script>...</script> : script tag is used to add javacript in the html document
link : The link tag specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used in other linking(see the Attribute section in the MDN docs). Eg: (type "link:css" + Enter key) <link rel="stylesheet" href="style.css">
meta: meta tags are HTML tags used to provide additional information about a page to search engines and other clients. Clients process the meta tags and ignore those they don't support. Most of the meta tag contains 2 attribute "name" & "content".
<meta charset="UTF-8">: Specifies the character encoding for the HTML document. UTF-16 support more languages and emoji than UTF-8
<meta name="viewport" content="width=device-width, initial-scale=1.0"> : meta viewport gives the browser instructions on how to control the page's dimensions and scaling.
<meta http-equiv="refreash" content="30"> : this meta tag makes this webpage refreash in every 30 sec (Normally not used) (Preferred way: It can be alternatively done by javascript)
<meta name="keywords" content="HTML, web"> : Used for SEO
<meta name="description" content="This is a HTML head's tag demo"> : Used for SEO

class & id

class and id both works almost the same and used to target or select HTML element.
For accessing HTML element with Class we have to use a dot(.) symbol before the class name. Eg: " .id_name ".
In a html element if class attribute value has a space in between that means the element has multiple class name. Eg: <p class="Red Text">, means this <p> tag has two class name "Red" & "Text".
For accessing HTML element with ID we have to use a hash(#) symbol before the id name. Eg: " #id_name "
According to html convention class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within a page. But following this convention is not necessary

Example:
Code:

    <!-- CSS part -->

    <style>
        .red{
            color: rgb(227, 148, 70);
            font-size: 30;
        }

        #green{
            color: rgb(1, 142, 1);
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            font-size: 50;
            font-style: italic;
        }
    </style>



    <!-- HTML part -->
     
    <p  class="red">Text 1</p>
    <p  id="green">Text 2</p>
    <p>Lorem <span class="red">ipsum dolor</span> sit amet consectetur adipisicing.</p>
    <h3 class="red">Text 4</h3>

Output

Text 1

Text 2

Lorem ipsum dolor sit amet consectetur adipisicing.