HTML HTML5 Notes Compiled by Yogesh Verma, Software Engineer (MERN Stack Web Developer)
Published: 2023-06-22 07:19:00

Initial Setup->
VS Code(recommended) or pw skills(online coding platform) or w3schools (online compiler)

Tutorial vs Documentation->
Tutorial - w3schools
Documentation- mdn by firefox

Why index.html->
html both extensions allowed .html or .htm
index.html- server specification apache default configration setting by default is index.html is loaded of website.

Basic Tags->
`<html>` - root of website
`<head>` - meta info of website
`<body>` - visual part of website

Emmet->
By default configure with VS Code
Emmet is responsible for fast coding like using ! for biolerplate code for HTML

HTML -It is used to create Structure of Website.
HTML Element- Opening Tag + Content + Closing Tag 
HTML Element Example ->

```
<p>Jai Shree Krishna </p>
<opening tag>content<closing tag>
```

Paragraph Tag->
`<p>` for Paragraph
lorem for dummy text generator
`<p>lorem20</p>` for dummy twenty words.

Classes(Used to group elements) & Id(Unique)->
h1#main (Id is unique only one for one element)
p.red.pw.para (class can be used for multiple elements and support multiple elements)

for custom attributes->
p[title="Custom Attribute"]{Content}
Then, Hit Tab

```
<p title="Custom Attribute">Content</p>
```

Nesting of Elements using Emmet->
div>ul>li(> is used for child)

```
<div>
	<ul>
		<li>
		</li>
	</ul>
</div>

```
Sibling using Emmet ->
div>p*3 or div>p+p+p(* or + is used for sibling)

```
<div>
        <p></p>
        <p></p>
        <p></p>
</div>
```

Complex Structure->
(div>nav>ul>(li>a{custom-$})*3)+footer>ul>li>p

In Code->

```
<div>
        <nav>
            <ul>
                <li><a href="">custom-1</a></li>
                <li><a href="">custom-2</a></li>
                <li><a href="">custom-3</a></li>
            </ul>
        </nav>
</div>
      <footer>
        <ul>
            <li>
                <p></p>
            </li>
        </ul>
</footer>
```


For Head section Emmet->
link:favicon

```
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
```
link:css

```
<link rel="stylesheet" href="style/style.css" />
```

Emmet for CSS->

just write pos it will automatically suggest you properties Position -

```
selector{
position:relative;//by default
position:relative/absolute/fixed/block/inline-block/grid/flex;
}
```


just write ov it will automatically suggest you properties overflow-

```
selector{
overflow:visible/hidden/scroll/auto;
}
```

Margin Property->
just type m then it will suggest you

```
selector {margin:100%;}
```


Headings and Paragraphs->
`<h1> to <h6>` headings are available in html.
`<p>content</p>` for paragraph

`<br>` tag used for line break.

CSS- Adds Design of website 
CSS linking - Inline Internal External
Inline - style attribute used with all tags(style is a global attribute)
Global Attribute is common to all HTML Elements, they can be used on all elements they may have no effect on some elements.
h1[style=color:red]{Content}

```
<h1 style="color:red">Content</h1>
```

Internal CSS - In Head Section of HTML using <style> css </style>tag

External CSS -
link:css . Hit Tab

```
<link rel="stylesheet" href="style.css">
```
In External CSS, Classes and Id's are used to target the HTML Element


Links <a> anchor tag->
a:blank
Then Hit Tab,

```
<a href="http://google.com" target="_blank" rel="noopener noreferrer">GOOGLE</a>
```

_blank is for opening in new tab.

Images->

```
<img alt="description of images" src="source" width="" height=""/>
```
www(dot)image-map(dot)net - good website for image map generator

Tables->
table>(tr>th*3)+(tr>td*3)*3

```
<table>
      <tr>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
</table>
```

Inline vs Block->
Inline doesnot capture full width of a line example

Block capture full width of a line example `<h1> to <h6>`, `<p>` tags etc.

Forms ->

```
<form action="action.php">
      <fieldset>
        <legend style="text-align: center">Login Form</legend>
        <p>
          <!-- for email -->
          <label for="emailid">Email:</label>
          <input type="email" name="emailvalue" id="emailid" />
        </p>
        <p>
          <!-- for password -->
          <label for="passwordid">Password:</label>
          <input type="password" name="passwordvalue" id="passwordid" />
        </p>
        <p>
          <!-- for submit -->
          <button type="submit">SUBMIT</button>
        </p>
      </fieldset>
</form>
```

Semantics->
Semantics means giving meaning to elements. Best for SEO (Search Engine Optimization)

```
<header>,<main>,<footer><article>,<aside>,<section>
```
etc.

```
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- meta tags -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- title tag -->
  <title>HTML Semantic Structure</title>
</head>
<body>
  <header>
    <nav></nav>
  </header>
  <main>
    <article></article>
    <aside></aside>
    <section></section>
  </main>
  <footer></footer>
</body>
</html>
```

Assignment->
Explore more about HTML Input Tags and Aria-label for Web Accessibility.