Getting into HTML world!!!

5 min readJan 31, 2022

HTML(HyperText Markup Language ) is the standard markup language used to make web pages. It is used for defining layout of a page.

A markup language is a method of making notes in a digital document that can be differentiated from regular text.

It is the most fundamental building block needed for developing websites.

We use HTML tags to define look and feel of a website. We start building a website by creating a file named index.html.

A Basic HTML page is shown below:

<!Doctype html>                         ->  specifies HTML5 doc
<html>                                  ->  root of HTML page
  <head>                                ->  contains page metadata
    <title>Saraswathi's Site</title>    ->  contains title
  </head>                               ->  closing head tagx`
  <body>             ->  main body of page (rendered by browser)
    <h1>This is heading</h1>            ->  heading tag
    <p>This is paragraph>               ->  paragraph tag
  </body>                               ->  closing body tag
</html>                                 ->  closing HTML tag

Doctypes — short for ‘document type’ — help browsers to understand the version of HTML the document is written in for better interpretability.
Head and body are children of HTML tag
We can either use .htm or .html extension
You can use “Inspect Element” or “View Page Source” option from Chrome to look into a websites HTML code.

HTML element

An element = start tag + content + end tag Eg: <p>Hello</p>
Contents are written between opening and closing tags
Some HTML tags doesnt have content. These are called Empty element. Eg: <br />

Tags

A tag is like a container for either content or other HTML tags. Below are some of the most used tags of HTML

HTML is a case insensitive language. <h1> and <H1> are the same.

Commonly used tags

<p>: A paragraph of text starting on a new line.
<h1>: A page heading usually used for page titles.
<h2>: A section heading usually used for section titles.
<hx>: Where x is a number between 3 and 6, for smaller headings.
<form>: A form containing fields or inputs for a user to fill out and submit.
<input>: An input field for users to enter information, usually within a form.
<div>: A content division, used to group together several other elements for spacing purposes. div is a block (new line, full width) level element.
<span>: Another grouping element, but used to wrap text phrases within another element, usually to apply specific formatting to only a specific part of the text content. It is inline (req width, no new line).
<pre>: HTML always ignores extra spaces and newlines. In order to display a piece of text as it is, we use pre tag. Eg: <pre>H e l l ooo</pre>

HTML attributes

Used to add more information corresponding to an HTML tag.
We can either use single or doublt quotes in attributes.
Eg: < a href=’https://google.com’>Google</a> ; href is attribute.

img

Used to add image to HTML page.

<img src=”logo.png” width=”200" height=”200” alt=”logo”/>

2. links

A anchor tag is used to add links to existing content inside HTML page.

<a href=”https://google.com” target=”_blank”>Google</a>

where, target=”_blank” will open in new tab; default is pixels

<a href=”/about”><img src=”a.png” width=”120”></a>

Empty tags

<br>: Break tags is used to create line breaks in an HTML document.
<hr>: Used to create a horizontal ruler, often used to separate content.

Inline text formatting tags

<b> / <strong>: We can use bold tags to highlight text.
<em> / <i>: We can use italic tags to highlight text. (em: emphasize)
<u> / <ins>: We can use bold, italic, underline tags to highlight text.
<big>, <small>: We can make the text a bit larger and smaller using these tags respectively.
<sub>,<sup>: We can add subsript and superscripts in HTML.
<mark>: We can highlight text with color. Eg:<p>I Love to write <abbr title="Hyper Text Markup Language">HTML</abbr></p>
<abbr>: To mark some expression as an abbreviation.
<del>: We can scratch text using del.
<s>: To strike through text.

Lists

Unordered List (ul) and list content (li)

<ul>
    <li>Cat</li>
    <li>Dog</li>
</ul>

2. Ordered list (ol) and list content (li)

<ol>
    <li>Cat</li>
    <li>Dog</li>
</ol>

3. dl (definition list) and dt(terms) and dd(definition)

<dl>
    <dt>Icecream</dt>
    <dd>- Soft sweet frozen food</dd>
</dl>

Comments in HTML

Comments in HTML are used to mark text which should not be parsed. They can help document the the source code.

Eg: <!-- HTML comment -->

HTML Table

<table>
    <caption>Title</caption>
    <thead>
        <tr>
            <th colspan="3"></th>
            <th rowspan="2"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

colspan is used to create cells spanning multiple columns

Forms

<form>
    <!-- text -->
    <label for=”username”>Uername</label><br/>
    <input type=”text” id=”username”/><br/>    <!-- textarea -->
    <label for=”about”></label><br>
    <textarea id=”about”></textarea><br>    <!-- select options/dropdown -->
    <label for=”country”>country</label>
    <select id=”country”>
       <option value=”india”>India</option>
       <option value=”usa”>usa</option>
       <option value=”malaysia”>malaysia</option>
    </select>    <!-- radio -->
    <label>Job type</label>
    <input type=”radio” name=”jobtype” value=”parttime” id=”parttime”/>
    <label for=”parttime”>Part time</label>
    <input type=”radio” name=”jobtype” value=”fulltime” id=”fulltime”/>
    <label for=”fulltime”>Full time</label>    <!-- checkbox -->
    <label>Job type</label>
    <input type=”checkbox” name=”jobtypecb” value=”parttimecb” id=”parttimecb”/>              
    <label for=”parttimecb”>Part time</label>                               
    <input type=”checkbox” name=”jobtypecb” value=”fulltimecb” id=”fulltimecb”/>
    <label for=”fulltimecb”>Full time</label>
    <button type=”submit”>Submit</button>
</form>

Semantic HTML

When grouping elements or content in webpage, it is possible to use div and span tags
However, these tags tell nothing about their content
These tags or elements are content specific elements
A semantic element clearly describe their meaning in a human and machine-readable way
Suggests to the developer the type of data that will be populated
It helps search engines to influence the page search rankings

<header></header>
  <main>
     <section>
     <article>
     <aside>
  </main
<footer></footer>

head

<head>
    <title></title>
    <meta charset=”utf-8"/>
    <meta name=”author” content=”google”>
    <meta name=”description” content=”google gets all info”>
    <meta name=”viewport”  content=”width=device-width, initial-scale=1.0”>
</head>

Embedding videos

Video tag is used to play videos in HTML

<video src="logo.mp4">Logo voice</video>

1. width: to adjust width of video (height automatically adjusts)

2. autoplay/loop to autoplay or loop the video

HTML SEO (On page SEO)

Set the title very nice and to the point
Set the meta description
Set a nice URL slug
Set the meta keywords tag
Set the meta author tag
Set a favicon
Compress images and other resources
Remove unused HTML/CSS and JS files + compress them
Add alt text to images

Getting into HTML world!!!

Written by Saraswathi M A