DEV Community

Code Drug
Code Drug

Posted on

HTML in a Nutshell

#webdev #beginners

Your HTML Pocket Guide

Image description

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>
Enter fullscreen mode Exit fullscreen mode

To add favicon icon 

<link rel="favicon" href="#" type="image/x-icon">
Enter fullscreen mode Exit fullscreen mode

To link CSS file 

<link rel="stylesheet" href="style.css" type="text/css">
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Horizontal Rule

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

<hr>
Enter fullscreen mode Exit fullscreen mode

Line Break

  • To add line break we can use br tag 
<br>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
<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 -->
Enter fullscreen mode Exit fullscreen mode

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    
-->
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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-->
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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-->
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

Download link 

<ul><li>Download <a href="fav.png" download>favicon</a></li></ul>
Enter fullscreen mode Exit fullscreen mode

Other types of link 

<ul>
    <li>Contact me <a href="no_reply@example.com">eMail</a></li> <!-- To avoid Web scappers  to scape email,put it in link.It will not save from scraping but better than giving mailid directly-->
    <li>Dial <a href="tel:+9999999999">Call Me</a></li> <!-- It will promt to dilepad if in mobile device if not promt to open will app will come-->
    <li>Git <a href="git.mywebsite.com" target="_blank">git</a></li> <!-- target="_blank" will help the link to open in new tab-->
</ul>
<p><a href="/">Home</a></p>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
<nav aria-label="primary-navigation">
    <!-- there can be many nav so that assisive technologies knows which nav is which -->
</nav>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • ➡ 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.
Enter fullscreen mode Exit fullscreen mode

Date time attributes 

<p>Wake up at <time datetime="04:00">4 am</time></p>
Enter fullscreen mode Exit fullscreen mode 
<!-- 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
table,tr,td{
    border: 1px solid #eee;
    font-family: 'JetBrains Mono';
    border-collapse: collapse;
    padding: 0.5rem;
}
Enter fullscreen mode Exit fullscreen mode

OUTPUT:

Image description

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

Image description

<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>
Enter fullscreen mode Exit fullscreen mode

Image description

Other tags in forms for symantic 

<fieldset
<legend></legend>
</fieldset>
Enter fullscreen mode Exit fullscreen mode

Image description

 <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>
Enter fullscreen mode Exit fullscreen mode

Radio Type

  • Only select one as it is radio buttom

Image description

<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>
Enter fullscreen mode Exit fullscreen mode

CheckBox

  • Where as checkbox we can check multiple options at a time

Image description

<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>
Enter fullscreen mode Exit fullscreen mode

Message

Image description

<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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

craftingbugs profile image

Developed a website for a friend.

Craftingbugs -

codesensei profile image

Mastering React Hooks: Best Practices and Common Pitfalls

Tsowa Babangida -

muhammadsaim profile image

Laravel Relationship Recipes: Simplify Querying with newestOfMany

Muhammad Saim -

mike_andreuzza profile image

How to create an interactive pricing table with Tailwind CSS and JavaScript

Michael Andreuzza -