1. Headings

HTML headings are defined using the h1-h6 elements. They are used to structure the content of a webpage, and they also help search engines understand the hierarchy of the content on the page.

    <h1>This is a heading</h1>
    <h2>This is a sub heading</h2>
    <h3>This is a sub-subheading</h3>

2.Paragraph

In HTML, we can use the <p> element to represent a paragraph.

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae fugiat est accusamus sunt sed itaque ab porro illo temporibus magnam </p>

3.Text Formatting

Text formatting in HTML refers to how we control the appearance of text on a web page. This can include things like making text bold or italic, changing the font or font size, and aligning text.

<strong>	Makes text bold
<b>	Makes text bold
<em>	Italicizes text
<i>	Italicizes text
<u>	underline text
<s>	Strikes through text
<sub>	subscript
<sup>	superscript
<small>	makes text small
<big>	makes text big
<mark>	highlights text
<abbr>	abbreviation
<dfn>	definition
<ins>	inserted text

<!-- bold -->
<p>
    <strong>this text is bold</strong>
</p>

<!-- italic -->
<p>
    <em>italic</em> 
</p>

<!-- underline -->
<p>
    <u>underline</u> 
</p>

<!-- strikethough -->
<p>
    <s>strikethrough</s>
</p>

<!-- subscript -->
<p>
    <sub> subscript </sub> 
</p>

<!-- superscript -->
<p>
    <sup> superscript </sup> 
</p>

<!-- small text -->
<p>
    <small>small text</small>
</p>

<!-- big text -->
<p>
    <big>big text</big>
</p>

<!-- highlight text -->
<p>
    <mark>highlight this text</mark> 
</p>

<!-- abbreviation -->
<p>
    html : <abbr>hyper text markup language</abbr>
</p>

<!-- definition -->
<p>
    matter <defn>something that has mass and occupies space</defn>
</p>

<!-- inserted text -->
<p>
    one, two, <ins>three</ins> four
</p>

4.Images

Images are a common element of web design, and they serve several different purposes on websites.

Visual appeal
Branding
Illustration
Navigation

To include an image in an HTML page, you can use the <img> element. The <img> element is a self-closing tag, which means that it doesn't have a closing tag.

Attributes: src, alt, height, width

<img 
        src="download.png" 
        alt="apple logo" 
        width="300" 
        height="300"
/>

5.Links

Links (also known as hyperlinks) are used in websites to allow users to navigate from one web page to another. When a user clicks on a link, they are taken to the destination page specified by the link.

They are used in

Navigation
External references
Downloadable content
E-commerce
Social media

The <a> element, also known as the anchor tag, is used in HTML to create a hyperlink. The <a> element allows you to specify the destination of the link using the href attribute.

Links can also be used to open emails or download files.

Attributes

href
target: This attribute specifies where the linked document should be opened.

_blank
_self
_parent
_top

download: This attribute specifies that the linked document should be downloaded rather than opened in the browser.
title: This attribute specifies a short description of the link, which is often displayed as a tooltip when the user hovers over the link.

    <a href="google.com">google</a>
    <a href="mailto:info@example.com">Send an email</a>
    <a href="file.pdf" download>download file</a>

6.Lists

A list is a group of related items that are displayed in a specific order.

Lists are useful in websites for several reasons:
Lists can help to organize content clearly and logically, making it easier for users to understand and navigate.
Lists can be used to break up large blocks of text and make the content more visually appealing and easier to read.
Lists can be used to highlight important points or information, making it easier for users to find and reference specific pieces of content.
Lists can be used to create navigation menus, allowing users to easily move between different pages or sections of a website.

Types

Unordered List.
Ordered List.
Description List.

Unordered list

An unordered list in HTML is a list of items that are displayed in no specific order. Unordered lists are created using the <ul> element in HTML and each item in the list is represented by an <li> element.

There can be 4 kinds of markers for unordered lists:

disc
circle
square
None

The markers can be applied both on <ul> and <li> tags using the ‘type’ attribute.

 <!-- default type square -->
    <ul>
        <li>apple</li>
        <li>banana</li>
        <li>orange</li>
        <li>mango</li>
    </ul>

<!-- type = circle -->
    <ul type="circle">
        <li>apple</li>
        <li>banana</li>
        <li>orange</li>
        <li>mango</li>
    </ul>

<!-- type = disc -->
    <ul type="disc">
        <li>apple</li>
        <li>banana</li>
        <li>orange</li>
        <li>mango</li>
    </ul>

<!-- type = square -->
    <ul type="square">
        <li>apple</li>
        <li>banana</li>
        <li>orange</li>
        <li>mango</li>
    </ul>

<!-- type=none -->
    <ul type="none">
        <li>apple</li>
        <li>banana</li>
        <li>orange</li>
        <li>mango</li>
    </ul>

Ordered list

An ordered list in HTML is a list of items that are displayed in a specific numerical or alphabetical order. Ordered lists are created using the <ol> element in HTML, and each item in the list is represented by an <li> element.

There can be 5 kinds of markers for the ordered list:

Numbers [ 1 ]
Lowercase Alphabets [ a ]
Uppercase Alphabets [ A ]
Lowercase Roman Numbers [ I ]
Uppercase Roman Numbers [ I ]

The markers can be applied both on <ol> and <li> tags using the ‘type’ attribute.

<!-- default type=number -->
    <ol>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ol>

<!-- number type -->
    <ol type="1">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ol>

<!-- lower case alphabet -->
    <ol type="a">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ol>

<!-- upper case alphabet -->
    <ol type="A">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ol>

<!-- lower case roman number -->
    <ol type="i">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ol>

<!-- upper case roman number -->
    <ol type="I">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ol>

Description list

A description list in HTML is a way to display a list of terms and their corresponding descriptions. It is similar to a dictionary, where each term is followed by its definition. Description lists are created using the <dl> element, with each term represented by an <dt> element and each description represented by an <dd> element.

<dl>
    <dt>languages
          <dd>Java</dd>
          <dd>Python</dd>
     </dt>
     <dt>software
          <dd>vs code</dd>
          <dd>anacondas</dd>
     </dt>
</dl>

7.Video

Websites in the present-day scenario are not just built to showcase the content. Web developers and website owners want to make their websites more attractive and interactive. Considering this, the media in the websites are gaining popularity day by day. In Fact these days one of the most important things on the internet is the media.

There are many potential uses for adding video to a website

Educational content
Marketing and advertising
Entertaining and engaging visitors
Providing customer support
Improving SEO

To add a video to a web page, we can use the <video> element.

We can also specify the width and height of the video using the width and height attributes.

You can also add multiple sources for the video using the element, in case the browser does not support the first source.

Attributes

src
controls
muted
Autoplay
width
height

<video src="vide.mp4" controls> 
    nature video 
</video>


<video src="video.mp$" controls width="300" height="300"> 
    nature video 
</video>


<video controls width="400" height="400">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
</video>

8.Audio

We often see many websites, especially blogging sites with an audio player in them. These audio players play the audio description of the blog. This is very important when it comes to websites that have content to tell in a story format or a website where the owner wants to share his thoughts with the audience over voice.

HTML provides a way to play audio on web pages through the <audio> element.

The <audio> tag creates an audio player on a web page. Along with playing audio, it supports media controls, like play, pause, volume, and mute. The browser will choose the first file with a file format that it supports. Supported audio file formats include MP3, WAV, and OGG.

Attributes:

src.
controls.
muted.
autoplay.

The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the element.

Some browsers or hardware don’t support audio tags or audio formats. To handle this, sometimes we provide multiple audio types to the audio tag and let the browser display what must be played. This can be done through the source tag.

<audio src="audio.mp3" controls >
    audio not supported
</audio>

9.Table

Web developers can organize information like text, images, links, and other data into rows and columns of cells using HTML tables. The <table> tag is used to generate HTML tables. Table rows are created using the <tr> tag, while data cells are created using the <td> tag. Regular elements beneath <td> are by default left aligned.

Properties:

Table Heading
Cell padding and spacing
colspan and rowspan
Table Background
Table height and width
Table caption
Table Header, Body, and footer

Table Heading

<table border>
        <tr>
            <th>S.No</th>
            <th>Roll no.</th>
            <th>Name</th>
            <th>Branch</th>
        </tr>
        <tr>
            <td>1</td>
            <td>1716</td>
            <td>ABC</td>
            <td>CSE</td>
        </tr>
        <tr>
            <td>2</td>
            <td>1717</td>
            <td>DEF</td>
            <td>CSE</td>
        </tr>
        <tr>
            <td>3</td>
            <td>1718</td>
            <td>GHI</td>
            <td>CSE</td>
        </tr>
 </table>

Cell padding and cell spacing

padding is from inside and spacing is from outside

<table border cellpadding="5px" cellspacing="5px">
        <tr>
            <th>S.No</th>
            <th>Roll no.</th>
            <th>Name</th>
            <th>Branch</th>
        </tr>
        <tr>
            <td>1</td>
            <td>1716</td>
            <td>ABC</td>
            <td>CSE</td>
        </tr>
        <tr>
            <td>2</td>
            <td>1717</td>
            <td>DEF</td>
            <td>CSE</td>
        </tr>
        <tr>
            <td>3</td>
            <td>1718</td>
            <td>GHI</td>
            <td>CSE</td>
        </tr>
 </table>

Colspan and Rowspan

<table border cellpadding="5px" cellspacing="5px">
        <tr>
            <th>S.No</th>
            <th>Roll no.</th>
            <th>Name</th>
            <th>Branch</th>
        </tr>
        <tr>
            <td>1</td>
            <td>1716</td>
            <td>ABC</td>
            <td rowspan="3">CSE</td>
        </tr>
        <tr>
            <td>2</td>
            <td>1717</td>
            <td>DEF</td>
        </tr>
        <tr>
            <td>3</td>
            <td>1718</td>
            <td>GHI</td>
        </tr>
        <tr>
            <td>3</td>
            <td colspan="3">nill</td>
        </tr>
    </table>

10.Forms

A portion of a page known as an HTML form contains controls including text fields, password fields, checkboxes, radio buttons, a submit button, menus, etc.

An HTML form makes it easier for the user to input data like name, email address, password, phone number, etc. that may be transferred to the server for processing.

If we wish to collect data from a site visitor, HTML forms are necessary.

For instance, if a user wants to buy something online, he or she must fill out the form with the shipping address and credit/debit card information so that the item may be delivered to the specified address.

Text field

<form>
        <p>
            Enter your name : <input type="text">
        </p>        
</form>

Text area

<form>
        <p>
            Enter your address : <textarea></textarea>
        </p>    
</form>

Date input

<form>
        <p>
            Enter your date of birth : <input type="date">
        </p>        
</form>

Password input

<form>
        <p>
            Enter your password: <input type="password">
        </p>        
</form>

Radio button

<form>
        <p>
            Enter your gender : 
            <input type="radio" name="gender">Male
            <input type="radio" name="gender">Female
        </p>        
</form>

Check box

<form>
        <p>
            Select your favourite fruit : 
            <br>
            <input type="checkbox" >apple
            <br>
            <input type="checkbox" >Banana
            <br>
            <input type="checkbox" >orange
            <br>
            <input type="checkbox" >mango
        </p>        
</form>

Submit button

<form>
        <p>
            <input type="submit">
        </p>        
</form>

Fieldset

The form we have created is organized in a box by <fieldset>

<!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>Sample form</title>
</head>
<body>
    <form>
        <fieldset>
            <legend><b>Admission Registration</b> </legend>
            <br>

            <b>Name : </b><input type="text">
            <br>
            <br>

            <b>Email : </b><input type="text">
            <br>
            <br>

            <b>Gender :</b>
            <input type="radio" name="gender">Male
            <input type="radio" name="gender">Female
            <br>
            <br>

            <b>Phone : </b><input type="text">
            <b>Emergency contact : </b><input type="text">
            <br>
            <br>

            <b>Do you require parking?</b>
            <input type="radio" name="ans">Yes
            <input type="radio" name="ans">No
            <br>
            <br>

            <b>Which is your room preference?</b>
            <br>
            <input type="radio" name="room">Single Room
            <br>
            <input type="radio" name="room">Shared room
            <br>
            <input type="radio" name="room">No room needed
            <br>
            <br>

            <b>Do you have any dietary restrictions?</b>
            <br>
            <input type="checkbox" name="ans">None
            <br>
            <input type="checkbox" name="ans">Vegetarian
            <br>
            <input type="checkbox" name="ans">Glutten Allergy
            <br>
            <input type="checkbox" name="ans">Lactose allergy
            <br>
            <input type="checkbox" name="ans">Nut allergy
            <br>
            <input type="checkbox" name="ans">Shellfish allergy
            <br>
            <br>

            <b>Which activities will you attend?</b>
            <br>
            <input type="checkbox" name="" id="">Awards Gala
            <br>
            <input type="checkbox" name="" id="">Luncheon
            <br>
            <input type="checkbox" name="" id="">Town hall
            <br>
            <br>

            <input type="submit">
        </fieldset>
    </form>
</body>
</html>

Output

Get method

After submitting the form, the GET method displays form values in the address bar of the new browser tab.

It is only allowed to be roughly 3000 characters long. Only non-secure data, not sensitive data, can be used with it.

Post method

Unlike the GET method, the post method prevents form values from appearing in the address bar of the new browser tab after the form has been submitted.

It adds form information to the body.

Types of inputs

placeholder

To provide some hint on what must be entered in the input box we use an input tag with the placeholder attribute. Placeholder value is displayed only when the input tag is not holding any value. As soon as the user starts entering data, the placeholder disappears.

value

It defines the initial value and later can be changed by the user.

readonly

On having the readonly attribute the users cannot change the value of the input field but can have a look at the value for information or review purposes.

Disabled

Disabled attribute is used to specify to the users that the input tag or field is no longer accepting changes in its value and the value is displayed just for review or information purpose.

name

The name attribute specifies the name of an element. We use the name attribute as a reference to collect data from an input field when the form is submitted. It's a mandatory attribute for a form to work.

size

The size attribute specifies the visible area / width of the input field.

maxlength
autofocus

The autofocus attribute specifies that an element should automatically get focus when the page loads.

The min attribute specifies the minimum value the input field should contain.

multiple

The multiple attribute specifies that the user is allowed to enter more than one value in the element. This attribute works only with input type file and email.

type

Sanjana's blog