HTML – Complete Tutorial Understanding All Basics

by

Have you ever dreamed of building your own website? The magic behind every webpage starts with HTML, the coding language that structures content and brings websites to life. This comprehensive HTML tutorial is your one-stop shop for learning everything from the fundamental building blocks to more advanced concepts. Whether you’re a complete beginner or looking to brush up your skills, this step-by-step guide will equip you with the knowledge to create stunning and functional websites. Get ready to dive deep into the world of HTML and unlock the power to build your online presence!

What is HTML?

What is HTML?

HTML stands for HyperText Markup Language, and it’s the foundation of every website you see! Imagine it as the basic building blocks of a page, telling your browser how to arrange text, images, videos, and other elements for you to see and interact with.

The Components used to design the structure of websites are called HTML Tags.

Example: Think of your website as a house. HTML is like the bricks and mortar that form the walls, ceiling, and floor. You wouldn’t have a house without them, right?

Why to learn HTML?

Why to learn html?

HTML play a crucial role in web development it is a basic of web development foundation for css and javascript Both CSS and JavaScript rely on the structure defined by HTML elements to target and apply their styles or functionalities. If you don’t grasp the HTML structure, it’s challenging to effectively use CSS and JavaScript to modify or interact with it.

Build Websites: HTML is the fundamental building block of any website. Understanding it empowers you to create basic web pages or even complex websites from scratch, giving you complete control over their structure and content.

HTML acts as a springboard for learning other web development languages like CSS (Cascading style sheet) and JavaScript . Mastering HTML sets you on the path to becoming a well-rounded web developer.

Enhanced Digital Understanding:

Decode Website Structure: Knowing HTML allows you to “see behind the scenes” of any website, understanding how it’s organized and why it looks the way it does. This can be valuable for troubleshooting, customizing existing websites, or simply appreciating the effort behind them.

Career Development: In the digital age, HTML knowledge is valuable across various professions, from marketing and content creation to design and education.

How HTML Works ?

20240207 041428 0000 Technology Nile

HTML files are plain text files containing special tags that define the structure and content of a web page. These tags are enclosed in angle brackets < >.

For example, the <h1> tag defines a heading, while the <p> tag defines a paragraph.

Tags come in pairs: an opening tag (e.g., <p>) and a closing tag (</p>). The content between these tags defines the element’s data.

There are various tags for different content types:

  • Headings (<h1>, <h2>, etc.)
  • Paragraphs (<p>)
  • Images (<img>)
  • Lists (<ul> and <ol>)
  • Hyperlinks (<a>)
  • Forms (<form>) And many more.

First HTML File

index.html

HTML BOILER Plate Code

<>index.html
<!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

 <title>Document</title>
</head>
<body>

</body>
</html>

What is Boilerplate Code in HTML?

In computer programming, boilerplate code, or simply boilerplate, are sections of code that are repeated in multiple places with little to no variation. When using languages that are considered verbose, the programmer must write a lot of boilerplate code to accomplish only minor functionality.

Boilerplate code in HTML refers to a standard set of elements used as a template for starting most HTML documents. It includes essential elements like

<html> tag: The root element of the document.

<head> tag: Contains meta information not displayed on the page, like title, character encoding, and links to external resources like CSS.

<body> tag: Holds the visible content of the page, where you place your headings, paragraphs, images, and other elements

Why do we use boilerplate in HTML?

An HTML Boilerplate is a pre-prepared library of code that can be copied and is meant to be used as a starting point to start building web projects. It is sometimes referred to as an HTML starter template, HTML framework, or HTML foundation.

The main use of an HTML Boilerplate is to make coding faster and easier for the developers to get a new web project up and running. This can save time and effort, as developers do not have to start from scratch and write the same code over and over again every time they begin a new project.

Key Takeaways

  • Boilerplate code in HTML is not strictly mandatory, but it’s highly recommended for its contribution to standardization, functionality, efficiency, and future-proofing your web development projects.

Basic HTML Page

<!DOCTYPE html>      <!--Tells browser you are using HTML5.-->

  <html>                  <!-- Root of an HTML document .-->        
  <head>               <!-- Container of meta tag.-->
  <title>    My first Page  </title> page title
  

</head>
<body>             <!--Contains all data rendered by the browser.-->
 <p>      hello world  </p>        paragraph tag.
 </ body >
</html>

HTML Is Not Case Sensitive

In HTML, the casing of element names, attribute names, and attribute values generally doesn’t matter. So, <p>, <P>, and <head> , <HEAD> all represent the same paragraph element.

This flexibility makes HTML code easier to write and share, as you don’t need to strictly adhere to a specific capitalization style.

<html> = <HTML>

<p> = <P>

<head> = <HEAD>

<body> = <BODY>

Comments In HTML

HTML comments are lines of text that are embedded within HTML code but are ignored by web browsers when rendering the page. They function as annotations or explanation.

Example

<!-- This is a Comment -->

Tip to Use Comments in HTML

  • While comments are essential for code clarity, don’t overuse them; only add meaningful annotations.
  • Write meaningful, informative comments that clearly explain the code’s purpose.

HTML Tags

In Html, tags are the building blocks that define the structure and meaning of your web page content. They are enclosed in angle brackets (< >) and come in pairs: an opening tag and a closing tag. The content between these tags defines the element the tag represents.

Each tag signifies a specific element on your webpage, like headings, paragraphs, images, lists, links, and more. The tag name itself conveys the meaning of the element (e.g., <h1> for main headings, <p> for paragraphs, <img> for images) etc.

Many tags can have additional information called attributes enclosed within the opening tag. These attributes provide specific details about the element, like its size, source, or alignment.

TAGSDescription
1) Heading Tag Used to Display headings in html
<h1> [ most important ]
<h2>
<h3>
<h4>
<h5>
<h6>. [ Least important ]
2) Paragraph TagUsed to add paragraphs in Html.
<p> This is a sample paragraph</p>
3) Anchor Tag Used to add links on page.
<a href = ” https://technologynile.com”>Technology Nile </a>
4) Image Tag <img> tag is used to embed an image on a web page
<img Src = ” /image.png” alt = ” description of the image “>

<img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;”>
5) Br TagThe HTML <br> element defines a line break
Used to add next line (line breaks) on web page. <br>

<p>This is a paragraph with a <br> line break in the middle.</p>
6) HR TagUsed to display a horizontal ruler used to seperate content.
<hr>
7) Bold,italic and underline TagUsed to highlight text in web page.
<b> Bold </b>
<i> italic </i>
<u> underline</u>
8) Big and Small TagUsed to display big and small text on web page.
<big> big </big>
<small> small </small>
9) Pre TagThe <pre> tag defines preformatted text. Used to display text as it is
(without ignoring spaces and next line)

<Pre> This is a example text </Pre>
10) Div TagThe <div> tag defines a division or a section in an HTML document.
Div is a container used for other html elements.
11) Superscript and Subscript Tag
Subscript

The <sub> tag defines subscript text. Subscript text can be used for chemical formulas, like H2O ,
An example of subscript is H2O
<sub> subscript </sub>
<p> H<sub> 2 </sub>O </p>

Superscript
The <sup> tag is used to add a superscript text to the HTML document. The <sup> tag defines the superscript text.superscript text can be used for footnotes.
An example of superscript
An + B
<sup> Superscript </sup>
<p> 3<sup>2</sup> = 9 </p>

32= 9
HTML Tags

Quick Points

  • html tag is parent of head and body tag.
  • Most of html elements have opening and closing tags with content in between.
  • Some tags have no Content in between for example – <br>
  • We Can use inspect element/view page source to edit html.

What are tag attributes?

HTML attributes are special words used inside the opening tag to control the element’s behaviour. HTML attributes are a modifier of a HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them.

HEADING TAG

Used to Display headings in html

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Examples

<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

Paragraph Tag

Used to add paragraphs in Html.

Examples

<p> some text in a paragraph. </p>

<!DOCTYPE html>
<html>
<body>

<h1>The p element</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

Anchor Tag

Used to add links on page.

Examples

<a href="https://technologynile.com/">Technology Nile
</a>

<!DOCTYPE html>
<html>
<body>

<h1>The a element</h1>

<a href="https://technologynile.com">Visit Technology Nile</a>

</body>
</html>

Attributes

href : Specify the link’s target URL

name : Link to an anchor mark within the page

target : Specify how the taget document should be opened, e.g. in a new tab

title : Provide text that will be displayed when the user hovers over a link

Image Tag

<img> tag is used to embed an image on a web page

Examples

<img Src = " /image.png" alt = " description of the image ">

<!DOCTYPE html>

<html>
<body>

<h1>The img element</h1>

<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">

</body>
</html>

Attributes

Height : This attribute is used to specify the height of an image in pixels.

Width : This attribute is used to specify the width of an image in pixels. The “width” and “height” attributes are used to specify the dimensions of the image in pixels.

Src : The source location (URL) of the image file.

alt : This attribute specifies the alternate text of the image.

BR Tag

The HTML <br> element defines a line break

Used to add next line (line breaks) on web page. <br>

Examples

<p>This is a paragraph with a <br> line break in the middle.</p>



<!DOCTYPE html>
<html>
<body>

<h1>The br element</h1>
<p>The <br>HTML br <br> element,<br> defines a <br> line break.</p>

</body>
</html>

Results

The br element
The HTML br element,defines a line break.

HR Tag

Used to display a horizontal ruler used to seperate content.<hr>

Examples

<!DOCTYPE html>

<html>
<body>

<h1>The Main languages for web development</h1>

<p>The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.</p>

<hr>

<p>Cascading Style Sheets is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>

<hr>

<p>JavaScript, often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. As of 2024, 98.9% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries JavaScript is a scripting language used to create and control dynamic website content, i.e. anything that moves, refreshes, or otherwise changes on your screen without requiring you to manually reload a web page. Features like: animated graphics. photo slideshows.</p>

</body>
</html>

Results

The Main languages for web development

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.


Cascading Style Sheets is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.


JavaScript, often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. As of 2024, 98.9% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries JavaScript is a scripting language used to create and control dynamic website content, i.e. anything that moves, refreshes, or otherwise changes on your screen without requiring you to manually reload a web page. Features like: animated graphics. photo slideshows.

Bold,italic and underline Tag

Used to highlight text in web page.

<b> Bold </b>

<i> italic </i>

<u> underline</u>

Examples

<b>This text is bold </b>

<i> This is italic </i>

<u> This text is underline </u>

Big and Small Tag

Used to display big and small text on web page.

<big> BIG </big>

<small> small </small>

Examples

<big> THIS IS A BIG TEXT </big>

<small> this is a small text  </small>

Pre Tag

The <pre> tag defines preformatted text. Used to display text as it is

(without ignoring spaces and next line)

Examples

<!DOCTYPE html>

<html>
<body>

<h1>The pre tag</h1>

<pre>
This is a example pre text. 
</pre>

</body>
</html>


The pre tag

This is a example pre text.
Try it by yourself >>

Div Tag

The <div> tag defines a division or a section in an HTML document.

Div is a container used for other html elements.

Examples

<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {
  border: 10px outset red;
  background-color: lightblue;    
  text-align: center;
}
</style>
</head>
<body>

<h1>The div element</h1>

<div class="myDiv">
  <h2>This is a heading in a div element</h2>
  <p>This is some text in a div element.</p>
</div>

<p>This is some text outside the div element.</p>

</body>
</html>
Try it by yourself >>

Superscript and Subscript tag

Superscript : The <sup> tag is used to add a superscript text to the HTML document. The <sup> tag defines the superscript text.

superscript text can be used for footnotes.

An example of superscript An+ B , 32= 9

<sup> Superscript </sup> <p>3<sup>2</sup> = 9 </p> = 32 = 9

Subscript

The <sub> tag defines subscript text.

Subscript text can be used for chemical formulas, like H2O , An example of subscript is H2O, CO2 <sub> subscript

</sub><p> H<sub> 2 </sub>O </p> = H20

Examples

<sup> Superscript </sup>
<sub> subscript</sub>
Try it by yourself >>

Key takeaways for Page layout

  • use sementic tags for layout.
  • Sementic tags like <header> , <footer> , < main > and non -sementic tags like <Div> , <span>

Main Tags

  1. Section Tag : For a section on page. <Section>
  2. Article Tag : For an article on a page. <article>
  3. Aside Tag : For Content aside main Content (ads). <aside>

Revisiting Anchor Tag

<a href = "https://technologynile.com/" target = "_main">Technology Nile</a>

<a href = "https://technologynile.com/"> <img src = "link"> </a>

Span Tag

span is also a container used for other html elements

inline elements ( takes width as per size )

Examples

<!DOCTYPE html>
<html>
<body>

<h1>The span element</h1>

<p>This is a span Tag <span style="color:blue;font-weight:bold">also a Container</span> used for other<span style="color:darkolivegreen;font-weight:bold">html elements</span> eyes.</p>

</body>
</html>

The span element

This is a span Tag also a Container used for other html elements.

List : Block elements

<address><dt><hr>
<article><fieldset><li>
<aside><figcaption><main>
<blockquote><figure><nav>
<Canvas><footer><no script>
<dd><form><ol>
<div><h1> – <h6><dl>
<header>< p>< pre>
<section><table><ul>
<video>  
List : Block elements HTML

 

List in HTML

Lists in HTML are a way to group related items visually, making your webpages more organized and scannable.

Ordered list

ordered list are also called numbered list. An ordered list starts with <ol>. Each list item starts with <li>

Example

<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

</body>
</html>

An ordered HTML listCoffeeTeaMilk

  1. coffee
  2. tea
  3. milk
Try it by yourself >>

Unordered list

Unordered list are also called bulleted list.an unordered list starts with <ul>.Each list item starts with <li>.

Example

<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
  <li>Mango</li>
  <li>Apple</li>
   <li>Banana</li>
</ul>  

</body>
</html>

An unordered HTML list

  • Mango
  • Apple
  • Banana

Nested list

a list placed inside another list. You can create a nested unordered list, or a nested ordered list, or even an ordered list nested inside an unordered one. Remember that the only direct child of the ul tag is li.

Example

<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

 

 

A Nested List

Lists can be nested (list inside list):

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

dl list (Description list)

Represented by the <dl> tag. Use <li> tag to define each item within a list.

Use terms and definitions in pairs (<dt> for term, <dd> for definition)

dt is used to define the term being defined, while dd is used to define the description of the term

Example

<!DOCTYPE html>
<html>
<body>

<h1>The dl, dd, and dt elements</h1>

<p>These three elements are used to create a description list:</p>

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

</body>
</html>

 

 

The dl, dd, and dt elements

These three elements are used to create a description list:

Coffee
Black hot drink
Milk
White cold drink

Tables in HTML

Tables in HTML are a way to present data in a structured and organized way using rows and columns. They are useful for displaying tabular information like product catalogs, schedules, financial data, and more.

  • <tr> is used to display table row.
  • <td> is used to display table data.
  • <th> is used to display table header.

Examples

 

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>

<h2>A basic HTML table</h2>

<table style="width:100%">
  <tr>
    <th>brand</th>
    <th>model</th>
    <th>price</th>
  </tr>
  <tr>
    <td>realme</td>
    <td>RMX3840</td>
    <td>About 330 EUR</td>
  </tr>
  <tr>
    <td>redmi</td>
   
<td> 23117RK66C</td>
    <td>$499</td>
  </tr>
</table>

<p>To understand the example better, we have added borders to the table.</p>

</body>
</html>

 

 

 

A basic HTML table

brandmodelprice
realmeRMX3840About 330 EUR
redmi23117RK66C$499

To understand the example better, we have added borders to the table.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example Table</title>
  <style>
    /* Basic table styling for readability */
    table {
      border-collapse: collapse;
      width: 80%;
      margin: 0 auto;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
    }
    th {
      text-align: left;
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <h2>Product Comparison</h2>
  <table>
    <caption>Popular Laptop Brands</caption>
    <thead>
      <tr>
        <th>Brand</th>
        <th>Model</th>
        <th>Price</th>
        <th>Screen Size</th>
        <th>RAM</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apple</td>
        <td>MacBook Air</td>
        <td>$999</td>
        <td>13.3 inches</td>
        <td>8GB</td>
      </tr>
      <tr>
        <td>Dell</td>
        <td>XPS 13</td>
        <td>$899</td>
        <td>13.4 inches</td>
        <td>16GB</td>
      </tr>
      <tr>
        <td>HP</td>
        <td>Spectre x360</td>
        <td>$1,049</td>
        <td>13.3 inches</td>
        <td>12GB</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

 

 

 

 

 

Product Comparison

Popular Laptop Brands
BrandModelPriceScreen SizeRAM
AppleMacBook Air$99913.3 inches8GB
DellXPS 13$89913.4 inches16GB
HPSpectre x360$1,04913.3 inches12GB

 

 

TagDescription
<table>defines a table in html.
<tr>is used to display table row.
<td>is used to display tables data.
<th>is used to display table header.
<thead>is used to group header content in an HTML table. to wrap table head.
<tbody>Groups the main content rows of a table, separate from the header (<thead>) and footer (<tfoot> to wrap table body.
<tfoot>Defines a footer section at the bottom of the table, often used for summaries, totals, or additional notes.
<col>Table column Used within colgroup to define individual column properties like width, alignment, and visibility.
<colgroup>Table column group . Groups multiple columns together to apply styling or properties consistently across those columns.
<caption>Table caption.Provides a title or short description for the entire table, displayed at the top.
Tables in html , Table tags

 

tbody

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h1>The thead, tbody, and tfoot elements</h1>

<table>
  <thead>
    <tr>
      <th>product name</th>
      <th>price</th>
      <th> quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>laptop</td>
      <td>$799</td>
      <td> 20  </td>
    </tr>
    <tr>
      <td>Smatphone</td>
      <td>$499</td>
       <td> 35  </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$1298</td>
      <td> 55 </td>
    </tr>
  </tfoot>
</table>

</body>
</html>

 

The thead, tbody, and tfoot elements

product namepricequantity
laptop$79920
Smatphone$49935
Sum$129855

Caption Tag

Example

<table>
<h2> This is a basic example of Caption Tag </h2>
  <caption>Top-Selling Products</caption>
  </table>

This is a basic example of Caption Tag

Top-Selling Products
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Popular Laptops</title>
  <style>
    table {
      border-collapse: collapse;
      width: 80%;
      margin: 0 auto;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
    }
    th {
      text-align: left;
      background-color: #f2f2f2;
    }
    .caption {
      font-size: 1.2em;
      font-weight: bold;
      text-align: center;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

  <h2 class="caption">Top-Rated Laptops in 2024</h2>

  <table>
    <caption>Compare Features and Prices</caption>
    <thead>
      <tr>
        <th>Brand</th>
        <th>Model</th>
        <th>Screen Size (inch)</th>
        <th>RAM (GB)</th>
        <th>Storage (GB)</th>
        <th>Price  (USD)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apple</td>
        <td>MacBook Air M2</td>
        <td>13.3</td>
        <td>8</td>
        <td>256</td>
        <td>1199</td>
      </tr>
      <tr>
        <td>Dell</td>
        <td>XPS 13 Plus</td>
        <td>13.4</td>
        <td>16</td>
        <td>512</td>
        <td>1299</td>
      </tr>
      <tr>
        <td>HP</td>
        <td>Spectre x360 14</td>
        <td>14</td>
        <td>16</td>
        <td>512</td>
        <td>1149</td>
      </tr>
      <tr>
        <td>Asus</td>
        <td>Zenbook 14 OLED</td>
        <td>14</td>
        <td>16</td>
        <td>512</td>
        <td>1099</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

 

 

 

Top-Rated Laptops in 2024

Compare Features and Prices
BrandModelScreen Size (inch)RAM (GB)Storage (GB)Price (USD)
AppleMacBook Air M213.382561199
DellXPS 13 Plus13.4165121299
HPSpectre x360 1414165121149
AsusZenbook 14 OLED14165121099

Forms in HTML

Forms are used to collect data from the user.

Example – signup/login/ help request/ Contact us 

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Aradhy"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Vaish"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>

 

 

 

HTML Forms






If you click the “Submit” button, the form-data will be sent to a page called “/action_page.php”.

Try it by yourself >>

Action in form

Action attribute is used to define what action needs to be performed when a form is Submitted.

<form action =”/action.php”>

Form Element : Input

<input type = ” text” placeholder= “enter name “>

label

In HTML, the label element is used to associate a text label with a form control element like input fields, textareas, radio buttons, or checkboxes.

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br><br>

  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea><br><br>

  <button type="submit">Send Message</button>
</form>

Example







Try it by yourself >>

class and id In HTML

A class is a generic identifier you can assign to multiple HTML elements to apply the same styles or behaviors in CSS.

Examples

<p class="important">This paragraph is important.</p>
<h2 class="important">This heading is also important.</h2>

This paragraph is important.

This heading is also important.

An ID is a unique identifier you can assign to a single HTML element on a page. It serves as a specific target for styling, scripting, or accessibility purposes.

Examples

<h1 id="page-title">Welcome to my website!</h1>

<script>
  // Access and manipulate the element with the ID "page-title" using JavaScript
  const titleElement = document.getElementById("page-title");
  titleElement.style.color = "blue";
</script>

Welcome to my website!

 

[Product Name]

[Product Image Description]

Price: $[Product Price]

Description: [Product Description]

Add to Cart

User Reviews

  • John Doe

    This product is amazing! Highly recommend.

    2024-02-06

  • Jane Smith

    Good value for money, but could be improved.

    2024-02-05


Iframe Tag

The <iframe> tag, short for “inline frame,” embeds another HTML document within the current page. It essentially creates a window within website that displays content from a different source.

Example

<!DOCTYPE html>
<html>
<body>

<h1>The iframe element</h1>

<iframe src="https://technologynile.com/" title="Technology Nile">
</iframe>

</body>
</html>
Try it by yourself >>

 

Video tag

The <video> tag serves as a fundamental building block for embedding video content directly within a web page. It provides a standardized way to display videos without relying on external players,

Key Takeaways

  • The <video> tag specifies the path or URL of the video file using the src attribute.
  • Common video formats include MP4, WebM, and Ogg, with browsers typically supporting multiple formats.
Try it by yourself >>
<!DOCTYPE html>
<html>
<body>

<h1>The video element</h1>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

20240201 130800 0000 Technology Nile

 

Related Articles

Colour picker - from Image
HTML
Image Tag - HTML
HTML
Try it
HTML
Tic tac toe
HTML
How HTML Works 
How-To-Guides
Rock paper scissors
HTML
Share this Article

Leave a comment

WhatsApp Channel Join Now
Telegram Channel Join Now
Instagram Page Join Now