Code Drug

Posted on Jan 24 • Updated on May 20

HTML in a Nutshell

#webdev #beginners

Your HTML Pocket Guide

Boilerplate Code

<!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>Document</title>
</head>
<body>

</body>
</html>

To add favicon icon

<link rel="favicon" href="#" type="image/x-icon">

To link CSS file

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

Markup Validation Service

To know we have any error in our HTML file we will check in W3C Markup validation Service (W3C stands for World Wide Web Consodium) that makes the standars of the web overall.

w3c

Some meta tags

<meta name="author" content="Spandan Mandal">
<meta name="description" content="Description of the Webpage content">

Heading Tag

    <h1>Lorem ipsum dolor sit amet.</h1>
    <h2>Lorem ipsum dolor sit amet.</h2>
    <h3>Lorem ipsum dolor sit amet.</h3>
    <h4>Lorem ipsum dolor sit amet.</h4>
    <h5>Lorem ipsum dolor sit amet.</h5>
    <h6>Lorem ipsum dolor sit amet.</h6>

Horizontal Rule

- We will get a horizontal line in the page acts as a seperation

<hr>

Line Break

To add line break we can use br tag

<br>

Whitespaces

Webpages of HTML do not honor all the spaces given using spacebar, it's called whitespace collapsing

<h1>Lorem ipsum dolor     sit amet.</h1>
<h2>Lorem ipsum  

        dolor sit amet.</h2>
<h3>Lorem ipsum dolor sit 


        amet.</h3>

This spaces will not beem displayed in browser because of whitespace collapsing.

<p>This a paragraph
<br> i am break tag
<br> <strong>In line Element</strong> <!-- InLine element,it does't mean to give bold format,it is the nature behavior of strong tag,it did not create break in the line.-->
<hr>
<em>This is another in line Element and its stand for emphasis</em> &nbsp;&nbsp;It does't mean to give italic format,it's just the natural behaviour of em tag,it did not create break in the line.
<!-- &nbsp; is used for spaces-->
    </p>

<abbr title="systemd is pice of sh!t">soyd</abbr> <!--If we hover mose in soyd then we can see the description, abbr stand for abbribiation,but it is not accesible to assistance technology -->
<address>Kolkata,West Bengal,India</address> <!-- it will be automatically be in italic format -->

HTML Entities

&nbsp;&nbsp;&nbsp;&nbsp; Namaskar <!-- For Spaces -->
<h2>Html Entites </h2>
&lt;&lt;&copy; Spandan Mandal &gt;&gt;
<!-- &lt; less than <
     &gt; greater than >
     &copy; copywrite symbol    
-->

HTML Lists

Orderd list
Unorderd list
Description list

<h2>Lists</h2>
<p><h3>Types of Lists</h3></p>

    <ul>            <!--Unorderd list-->
     <li>Ordered Lists</li>
     <li>Unordered Lists</li>
     <li>Description Lists</li>
</ul>

<ol>  <!--Orderd list-->
    <li><p>This is Orderd list</p></li>
    <li>odered in numbers</li>
    <li>in odered form</li>
</ol>

<!-- Description List-->
<dl>
    <dt>Indo Pacific</dt>   <!--Description Term--> 
    <dd>Everyone interested in Indo Pacific Region</dd> <!--Description Details-->

    <dt>Asia Pacific</dt>
    <dd>The term Asia Pacific is the wrong terminology</dd>
</dl>

HTML Links

<h2>Links</h2>
    <a href="https://developer.mozilla.org"> Mozilla Developer Network</a> <!--Absolute Refference-->
    <br>
    &lt;&lt;&copy; <a href=about.html>Spandan Mandal</a> &gt;&gt; <!--Relative Refferance-->

Section tag

By creating section tag we can separate content according to the section and assigning id name to section,to use as link in navigation clicking to the '#idname' it will scroll the page to to the particular section.

<nav>   
        <ul>
            <li>
                <a href="#metaverse">What is Metaverse?</a>
            </li>
            <li>
                <a href="#vr">What is Virtual Reality?</a>
            </li>
        </ul>
    </nav>
    <section id="metaverse">
        <h1>About Metaverse</h1>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium ipsum accusantium explicabo delectus nisi officia consectetur sapiente, itaque expedita eveniet magni incidunt error quae culpa deserunt officiis amet dolorem mollitia!
        Similique, aliquid expedita rem dolor nesciunt ullam repellat doloribus modi eum sint nisi corporis blanditiis perferendis nobis ducimus? Commodi eum aut ex doloremque tempore et facilis perspiciatis alias id consequatur. 
    </p>
    </section>
    <section id="vr">
        <h1>Virtual Reality</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit nihil consequatur facere, aspernatur officiis illum illo repellat molestiae sit dolorum possimus debitis soluta neque temporibus! Rerum impedit ex numquam repellendus!
        Ad deleniti vero rem illum itaque numquam voluptatibus aliquid ipsum minima aspernatur sunt ex aut exercitationem repudiandae mollitia nam dolorum vitae, maiores tenetur, blanditiis provident laboriosam. Quam fugit hic mollitia!</p>
    </section>

Misc

 <p><a href="#">Back to Top</a></p> <!--Put at the code at the last,if we click it will scroll where the page is starting-->

Link Text Rule #1 : Avoid printing the full web address to the page.
Link Text Rule #2 : Avoid "links to" phrases,we know it is a link.
Link Text Rule #3 : Keep your link text short use the keywords not sentences.
Link Text Rule #4 : Say no to the links that say "click here",it provide no meaning.

Code Tag

<code>&lt;h1&gt;Hello World!&lt;/h1&gt;</code> <!-- To add code sample in webpage -->

OUTPUT : 
 <h1>Hello World!</h1>

Download link

<ul><li>Download <a href="fav.png" download>favicon</a></li></ul>

Add Images

Tile if we hover at the image it will show the input given in title
And the width and height is given because of cumalative layout shift > (If we go on a webpage and the webpage shift around maybe coz of popups or a banner ads,and you click on something u did't intend to click,coz the image is suddenly move that is cumalative layout shift,so we tell the browser the height and width of the image)
loading="eager" is set to default if we did't mention anything it will load the image imadiately when the page is loaded, but if we want to load the image when we scroll (at that part) we have to define loading="lazy"

 <img src="./img/nebula_glaxy.jpg" alt="nebura space art" title="Nebura Glaxy" width="1920" height="1080"> 
<img src="./img/art-nrkv21.jpg" alt="bholenath" title="Picture of Mahadev" width="1920" height="1080" loading="lazy">

Caption in Images

To tell the browser it is caption for the image, we have to put in figure tag and add figcaption tag

<figure>
    <img src="./img/art-nrkv21.jpg" alt="bholenath" title="Picture of Mahadev" width="1920" height="1080" loading="lazy">
    <figcaption>Reffer from shivpuran</figcaption>
</figure>

Important Links and Resources

Symantic Tags

Documents needs organisations and HTML files are no difference,The word Symantic it provides meaning section tag represent it is a section area,nav tag represent for navigation section rather than a generic divider additionaly symantic html make accessible to make our page accessible to another assistive technology.

  <header>
        <nav>
            <ul>
                <li>
                    <a href="#metaverse">What is Metaverse?</a>
                </li>
                <li>
                    <a href="#vr">What is Virtual Reality?</a>
                </li>
            </ul>
        </nav>
    </header>

The above code the header tag tells that this is the heading or header section for full page.Another example we can add main element to tell it is the main area of the page.

<main>
    <section>
        <!-- code -->
    </section>
</main>

<nav aria-label="primary-navigation">
    <!-- there can be many nav so that assisive technologies knows which nav is which -->
</nav>

If you did include a heading inside nav area which is not required,but if u did,you can link to that

<nav aria-labeledby="primary-navigation">
    <h2 id="primary-navigation">Primary Nav</h2>
</nav>

Example of Symantic Tag

<html>
<head>
    <meta></meta>
    <title></title>
</head>
<body>
    <main>
        <h1>Main heading</h1>
        <article>
            <h2>Sub heading</h2>
            <section>
                <h3>sub-sub heading</h3>
                <p>Wake up at <time datetime="04:00">4 am</time></p>
            </section>
            <section>
                <h3>Second section sub-sub heading</h3>
                <aside>
                    <details>
                        <summary>What is the future of <mark>web development<mark>?What you think?</summary>
                        <p>Web3 and decentralize storage will win the race.</p>
                    </details>
                </aside>
            </section>
            <article>
    </main>
</body>

</html>

➡ Arrow in summary tag will apper,if we click the arrow then in next line Web3 and decentralize storage will win the race. will be visible
web development will be highlighted because of mark tag

OUTPUT:
Main heading
Sub heading
sub-sub heading
Wake up at 4 am
Second section sub-sub heading
What is the future of web development?What you think? 
Web3 and decentralize storage will win the race.

Date time attributes

<p>Wake up at <time datetime="04:00">4 am</time></p>

<!-- div is block element and there is no symantic meaning of div,it stands for divider -->
<div></div> 

<!-- Inline element,they don't have any meaning whatsoever by themself,they don't change or add value to code, will use later while using css -->
<span></span>

Tables

th table heading
tr table row
td table description

   <table>
      <th>Time</th>
      <th>Activity</th>
    <tr>
          <td>
              <time datetime="8:00">8am</time>
              <time datetime="11:00">11am</time>
          </td>
          <td>Write Code</td>
    </tr>

    <tr>
          <td>
              <time datetime="11:00">11am</time>
              <time datetime="12:00">12pm</time>
          </td>
          <td>Eat Lunch</td>
    </tr>

    <tr>
        <td>
         <time datetime="12:00">12pm</time>
         <time datetime="17:00">5pm</time>
        </td>
         <td>Some other courses</td>
    </tr>

    <tr>
     <td rowspan="2">All other times</td> <!-- This will take up wide of 2 row-->
     <td>Free time</td>
    </tr>
    <td>Sleep</td>

    <tr>
        <td colspan="2">This is colspan</td> <!-- This wil take up width of 2 colums-->
     </tr>
</table>

table,tr,td{
    border: 1px solid #eee;
    font-family: 'JetBrains Mono';
    border-collapse: collapse;
    padding: 0.5rem;
}

OUTPUT:

Table symentics

<table>

 <thead>
  <tr>
      <th>Time</th>
      <th>Activity</th>
  </tr>
 </thead>

 <tbody>
    <tr>
    <td></td>
    <td></td>
    </tr>
 <tbody>
</tbody>

<tfoot>
    <td colspan="2">That's It!!!</td>
</tfoot>
</table>

Example of table with symantic

 <table>
     <caption>[Daily ](url)Schedule</caption>
     <thead>
     <tr>
         <th>&nbsp;</th>
         <th>Time</th>
         <th>Activity</th>
     </tr>
 </thead>
 <tbody>
     <tr>
         <th>Morning</th>
         <td>
             <time datetime="8:00">8am</time>
             <time datetime="11:00">11am</time>
         </td>
         <td>Write Code</td>
     </tr>
  <tr>
      <th>Break</th>
      <td>
          <time datetime="11:00">11am</time>
          <time datetime="12:00">12pm</time>
      </td>
      <td>Eat Lunch</td>
  </tr>
  <tr>
    <th>Noon</th>
    <td>
        <time datetime="12:00">12pm</time>
        <time datetime="17:00">5pm</time>
    </td>

    <td>Some other courses</td>
</tr>

<tr>
    <th>Evening</th>

    <td rowspan="2">All other times</td> <!-- This will take up wide of 2 row-->
         <td>Free time</td>
     </tr>
     <th>Night</th>
     <td>Sleep</td>

                    <tr>
         <td colspan="3">This is colspan</td> <!-- This wil take up width of 3 colums-->
     </tr>
 </tbody>
 <tfoot>
     <td colspan="3">That's It!!!</td> <!-- This wil take up width of 3 colums-->
     </tr>
 </tfoot>
 </table>

Forms and Inputs

<form action="" method="get"> in action we have to put the address where we need to send the information when form is submitted.

placeholder it's used to display dummy text input,when user will enter input it will be replaced.
autocomplete="on" means it will suggest the previously input texts.
required This will require information before the form could be submitted.
autofocus means when the page loads the input field will be have blinking cusor so it is focused. (IMPORTANT only one input can have autofocus attribute)

<article id="contact">
 <h2>Contact Me</h2>
 <p>I'd really like to hear from you!</p>

<p>
 <form action="https://httpbin.org/get" method="get">
     <label for="firstname">First Name:</label>
     <input type="text" name="firstname" id="firstname" placeholder="Neo" autocomplete="on" required autofocus>
</p>

<p>
    <label for="lastname">Last Name:</label>
    <input type="text" name="lastname" id="lastname" placeholder="Neo" autocomplete="on" required>
</p>

 </form>
</article>

Type password to use that as password input

<p>
 <label for="password">Password:</label>
 <input type="password" name="password" id="password" placeholder="your secret" required>
</p>

This will take mobile number as type is set to tel and will follow the pattern



- range is 0-9
- {3} is three numbers(used coz tel convention is 999-999-9999,so it is used)
- hypen is not used coz (999-999-9999) if any one is filling from mobile devices numpad will not be open so,it hypen is not used numpad will open


```html
 <p>
     <label for="phone">Phone:</label>
     <input type="tel" name="phone" id="phone" placeholder="1234567890" pattern="[0-9]{3}[0-9]{3}[0-9]{4}" required>
</p>

This is used to select the dates in this case year with the given range from 1900-2023

<p>
 <label for="decade">Decade:</label>
 <input type="number" name="decade" id="decade" min="1900" max="2023" step="10" value="2000" >
</p>

This is used to select items from the drop down options

-

<option value="ice" selected>Ice Coffee</option>

This selected attribute is used for set as default when the page loads it will be selected as default.

optgroups are used for symentic for differentiate into categories

<p><label for="coffee">Favorite Coffee</label></p>
 <select name ="coffee" id="coffee">

    <optgroup label="Coffee"></optgroup>
     <option value="regular">Regualar</option>
     <option value="ice" selected>Ice Coffee</option>

     <optgroup label="Espresso Drinks"></optgroup>
     <option value="moca">Moca</option>
     <option value="latte">Latte</option>
     <option value="others">others</option>

multiple is used to select multiple items, ctrl + click
size is used for how many items should be displayed in this case 2 itms will be displayed

<p><label for="coffee">Favorite Coffee</label></p>
    <select name ="coffee" id="coffee" multiple size="2">
         <optgroup label="Coffee"></optgroup>
         <option value="regular">Regualar</option>
         <option value="ice" selected>Ice Coffee</option>
         <optgroup label="Espresso Drinks"></optgroup>
         <option value="moca">Moca</option>
         <option value="latte">Latte</option>
         <option value="others">others</option>

<p><label for="coffee">Favorite Coffee</label>
<input type="text" name="coffee" id="coffelist="coffee-list">
   <datalist id="coffee-list">
    <option value="regular">Regualar</option>
    <option value="ice" selected>Ice Coffee</option>
    <option value="moca">Moca</option>
    <option value="latte">Latte</option>
    <option value="others">others</option>
</datalist> 
</p>

Other tags in forms for symantic

<fieldset
<legend></legend>
</fieldset>

 <form action="https://httpbin.org/get" method="get">
  <fieldset>
     <legend>Personal Info</legend>
    <p>
     <label for="firstname">First Name:</label>
     <input type="text" name="firstname" id="firstname" placeholder="Neo" autocomplete="on" required autofocus>
     </p>
   <p>
     <label for="lastname">Last Name:</label>
     <input type="text" name="lastname" id="lastname" placeholder="Neo" autocomplete="on" required>
   </p>
     <p>
       <label for="password">Password:</label>
       <input type="password" name="password" id="password" placeholder="your secret" required>
   </p>
     <p>
       <label for="phone">Phone:</label>
       <input type="tel" name="phone" id="phone" placeholder="1234567890" pattern="[0-9]{3}[0-9]{3}[0-9]{4}" required>
   </p>
    <p>
        <label for="decade">Decade:</label>
        <input type="number" name="decade" id="decade" min="1900" max="2023" step="10" value="2000" >
       </p>
  </fieldset>

Radio Type

Only select one as it is radio buttom

<form>
  <fieldset>What is your favorite food?
     <p>
         <input type="radio" name="food" id="samosa" value="samosa">
         <label for="samosa">Samosa</label>
     </p>
     <p>
         <input type="radio" name="food" id="tacos" value="tacos">
         <label for="tacos">Tacos</label>
     </p>
     <p>
         <input type="radio" name="food" id="other" value="other">
         <label for="other">Others</label>
     </p>
 </fieldset>
</form>

CheckBox

Where as checkbox we can check multiple options at a time

<form>
<fieldset>What is your Pet?
    <p>
        <input type="checkbox" name="pets" id="bird" value="bird">
        <label for="bird">🐦 Bird</label>
    </p>

    <p>
        <input type="checkbox" name="pets" id="fish" value="fish">
        <label for="fish">🐟 Fish</label>
    </p>

    <p>
        <input type="checkbox" name="pets" id="otherPets" value="other">
        <label for="otherPets">Others</label>
     </p>
 </fieldset>
 </form>

Message

<form>
 <fieldset>
     <legend>Send me a Note</legend>
     <label for="message">Your Message:</label>
     <br>
     <textarea name="message" id="messageMe" cols="30" rows="10" placeholder="Write your message here"></textarea>
 </fieldset>
</form>

Submit Button

Never send a information with get request (coz in the url all the information is visible)

<form>
<button type="submit">Submit</button>
<button type="submit" formaction="https://httpbin.org/post" formmethod="post">Post</button>
<button type="reset">Reset</button>
</form>