Welcome to a personal project created during a summer holidays filled with curiosity and the desire to learn something new.
As someone who started learning HTML from scratch, I understand the excitement and challenges that come with it. Here, you'll find straightforward guides and practical examples that make learning HTML enjoyable and accessible.
So, take a moment to relax, maybe grab a cup of coffee, and enjoy the process of creating something awesome with HTML.
* It's HTML-only page, NO fancy graphics. *
🧋💻 Let's explore...
Hypertext Markup Language (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.
<!DOCTYPE html >
<html >
<head >
<title > Page Title</title >
</head >
<body >
<h1 > My First Heading</h1 >
<p > My first paragraph.</p >
</body >
</html >
My first paragraph.
Defines that this document is an HTML5 document.All HTML documents must start with a document type declaration.
This element is the root element of an HTML page.
This element contains meta information about the HTML page. like Title, Viewport, Charset, Style, etc.
This element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
This element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
This element defines the large Heading.
This element defines the Paragraph or text content.
An HTML element is defined by a start tag, some content, and an end tag:
<tagname > ...</tagname >
The HTML element is everything from the start tag to the end tag.Note: Some HTML elements have no content (like the<br >element). These elements are called empty elements. Empty elements do not have an end tag
The <a > tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a > element is the href attribute, which indicates the link's destination.
Example :
<a href="https://github.com/
Mayborg121" >
Visit My Github
</a >
The <link> tag defines the relationship between the current document and an external resource. The <link> tag is most often used to link to external style sheets or to add a favicon to your website. The <link> element is an empty element, it contains attributes only.
Example :
<link rel="stylesheet" href="styles.css">
The <nav > tag defines a set of navigation links. Notice that NOT all links of a document should be inside a<nav > element. The <nav > element is intended only for major blocks of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
Example :
<h4>The Navigation links </h4 >
<nav >
<a href="https://github.com/
Mayborg121">Github </a > |
<a href="https://www.linkedin.com
/in/mayb0rg </a > |
<a href="https://www.hackerrank.com/
Mayborg">Github </a > |
<a href="https://in.pinterest.com/
Mayb0rg">Github </a > |
</nav >
The "img" tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The "img" tag creates a holding space for the referenced image. Note: Tip:
The "img" tag has two required attributes: src - Specifies the path to the image alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
Note:
Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.
Tip: To link image to another document, simply nest the<img > tag inside an<a >tag.
Example :
<img src="img/aesthetics.jpg"
alt="Cartoon picture of a boy and
his dog."
width="420" height="325">
The "map" tag is used to define an image map. An image map is an image with clickable areas.
Note: The required name attribute of the "map" element is associated with the <img > 's usemap attribute and creates a relationship between the image and the map. The <map > element contains a number of <area > elements, that defines the clickable areas in the image map.
The "area" tag defines an area inside an image map (an image map is an image with clickable areas)."area" elements are always nested inside a "map" tag.
Example :
<h4>
Click on the objects in image :
</h4>
<img src="\img\scene.jpg"
alt="LighthouseScene"
usemap="#scenemap"
width="280" height="255">
<map name="scenemap">
<area shape="rect"
coords="175,29,243,159"
alt="lighthouse"
href="https://en.wikipedia.org/
wiki/Lighthouse" >
<area shape="rect"
coords="0,165,134,254"
alt="River"
href="https://en.wikipedia.org/
wiki/River">
<a rea shape="rect"
coords="0,0,150,95"
alt="Clouds"
href="https://en.wikipedia.org/
wiki/Cloud">
</map>
The "canvas" tag is used to draw graphics, on the fly, via scripting (usually JavaScript). The "canvas" tag is transparent, and is only a container for graphics, you must use a script to actually draw the graphics.
Note: you must use a script to actually draw the graphics.
Example :
<h3 > HTML5 Canvas : </h3>
<canvas id="myCanvas"
width="250" height="150"
style="border:1px solid grey" >
</canvas>
The "figure" tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. While the content of the "figure" element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.
The "figcaption" tag defines a caption for a "figure" element. The "figcaption" element can be placed as the first or last child of the "figure" element.
Example :
<h3 > Figure 1075 </h3>
<figure >
<img src="\img\figure.jpg"
alt="Trulli"
width="280" height="205" >
<figcaption >
Fig.1 - Young Lady, Engg.Graphics.
</figcaption >
</figure >
The "picture" tag gives web developers more flexibility in specifying image resources.
The most common use of the "picture" element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.
The browser will look for the first<source > element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute). The<img > element is required as the last child of the<picture >element, as a fallback option if none of the source tags matches.
The <source > tag is used to specify multiple media resources for media elements, such as<video>,<audio >, and
Example :
<p>
Resize the browser window to load
different images.
</p>
<picture>
<source media="(min-width:650px)"
srcset="img_pink_flowers.jpg">
<source media="(min-width:650px)"
srcset="img_pink_flowers.jpg">
<img src="img_orange_flowers.jpg"
alt="Flowers" style="width:auto;">
</picture>
Resize the browser window to load different images.
The <svg > tag defines a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
Example :
<p> Creating tree using SVG :</p>
<svg width="200" height="300"
viewBox="-120 -50 200 200">
<polygon points="0,0 80,
120 -80,120" fill="#234236" />
<polygon points="0,-40 60,
60 -60,60" fill="#0C5C4C" />
<polygon points="0,-80 40,
0 -40,0" fill="#38755B" />
<rect x="-20" y="120" width="40"
height="30" fill="#42060D"/>
</svg >
Creating tree using SVG :
The <audio > tag is used to embed sound content in a document, such as music or other audio streams. The <audio > tag contains one or more <source > tags with different audio sources. The browser will choose the first source it supports. The text between the <audio > and </audio > tags will only be displayed in browsers that do not support the <audio > element.
There are three supported audio formats in HTML: MP3, WAV, and OGG.
Example :
<audio controls >
<source src="\img\roja.mp3"
type="audio/mpeg">
</audio >
The <audio > tag is used to embed sound content in a document, such as music or other audio streams. The <audio > tag contains one or more <source > tags with different audio sources. The browser will choose the first source it supports. The text between the <audio > and </audio > tags will only be displayed in browsers that do not support the <audio > element.
There are three supported audio formats in HTML: MP3, WAV, and OGG.
Example :
<video width="270" height="320"
controls >
<source src="\img\3d.mp3"
type="video/mp4">
</video >
Defines an abbrevation or an Acronym for a phrase. here only abbrevation is displayed and the abbrivated text is displayed when hovered over(similiar to tooltips).
Example :
<abbr title = "Mayur Borgude" >
MayBorg
</abbr >
The "address" tag in HTML indicates the contact information of a person or an organization. The contact information can be an email address, URL, physical address, mobile number, social media, etc.
Example :
<address >
Written By : <a href="mailto:
mayurborgude@gmail.com">
Mayur Borgude</a>
Visit Us At :
Github.com/Mayborg121
P/O - 422003 , HAL Airbase
Nashik,Ind.
</address >
The "b" (Bold) tag in HTML is for making text bold without adding extra importance. Text within "b" displays in a bold style.
Example :
<b >
This Text Will Be Bold.
</b >
The "i" (italic) tag in HTML is used to display the content in italic style. This tag is generally used to display the technical term, phrase, the important word in a different language.
Example :
<i >
This Text Will Be Bold.
</i >
The "blockquote" tag specifies a section that is quoted from another source.
Example :
<blockquote cite="https://
www.vincentvangogh.org/
quotes.jsp" >
" Only when I fall do I get up
again. " - Vincent Van Gogh
</blockquote >
" Only when I fall do I get up again. " - Vincent Van Gogh
The "cite" tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).
Note: The text in the <cite > element usually renders in italic.
Example :
<h3 >Citing Van Gogh's Art</h3 >
<img src="/img/
Sunflowers_vangogh.jpg"
width="200" height="200"
alt="The Sunflowers">
<p >
<cite>The Sunflowers</cite >
by Vincent Van
Gogh.
</p>
The Sunflowers by Vincent Van Gogh,1888.
The "code" tag is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.
Example :
<code > This is code </code >
This is code
The "del" tag defines text that has been deleted from a document. Browsers will usually strike a line through deleted text. "ins" is used to unsert the new text its usually used after "del" tag.
I love Cats Dogs!
The "dfn" tag stands for the "definition element", and it specifies a term that is going to be defined within the content. It is shown as tooltip.The nearest parent of the "dfn" tag must also contain the definition/explanation for the term.
Example :
<p >
<dfn title="HyperText Markup
Language">HTML
</dfn>
is the standard markup language
for creating web pages.
</p>
HTML is the standard markup language for creating web pages.
The "mark" tag is used to highlight or mark the text.
Example :
<p >
<mark >
HTML
</mark >
is the standard markup language
for creating web pages.
</p>
HTML is the standard markup language for creating web pages.
The "meter" tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.
Examples: Disk usage, the relevance of a query result, etc.
Note: The "meter" tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress > tag.
Tip: Always add the "label" tag for best accessibility practices!
Example :
<label for="disk_c">
Disk usage C:
</label >
<meter id="disk_c" value="6"
min="0" max="10">
6 out of 10
</meter >
The "progress" tag represents the completion progress of a task. Tip:
Examples: Disk usage, the relevance of a query result, etc.
Note:
Always add the<label > tag for best accessibility practices !
Tip: Use the<progress >tag in conjunction with JavaScript to display the progress of a task.
Example :
<label for="file">
Download Progress :
</label >
<progress id="file" value="73"
min="0" max="100">
73% out of 100%
</progress >
The "s"(strike-through) tag specifies text that is no longer correct, accurate or relevant. The text will be displayed with a line through it.
Example :
<s >
this text is Striked-through.
</s >
The "sub" (subscript) tag defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O.
Example :
<p >
Water - H<sub >
2</sub > O
</p >
<p >
Glucose - C<sub >
6</sub >
H<sub >
12</sub > O
<sub >
6</sub >
</p >
Water - H2 O
Glucose - C6 H12O 6
The "sup" (superscript) tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. its used in mathematical equations for exponentials .
Example :
<p >
Two Squared = 2<sup >
2</sup >
= 4
</p >
Two Squared = 2 2 = 4
The "template" tag is used as a container to hold some HTML content hidden from the user when the page loads.
The content inside "template" can be rendered later with a JavaScript.
You can use the "template" tag if you have some HTML code you want to use over and over again, but not until you ask for it. To do this without the "template" tag, you have to create the HTML code with JavaScript to prevent the browser from rendering the code.
Example :
<button onclick="showContent()">
Trigger Template
</button>
<template >
<h3 > Mountains : Pixel Art </h3 >
<img src="img/pixel_art.jpg"
width="150" height="150" >
</template >
<script >
function showContent() {
let temp =
document.getElementsByTagName
("template")[0];
let clon =
temp.content.cloneNode(true);
document.body.appendChild(clon);}
</script >
The<menu > tag defines an unordered list of content. Use the<menu > tag together with the <li > tag to create menu items. Note:<menu > tag is an alternative to the<ul > tag and browsers will treat these two lists equally.
Example :
<menu >
<li >Coffee</li >
<li >Milk</li >
<li >Juice</li >
</menu >
The<dl > tag defines a description list. The<dl > tag is used in conjunction with<dt > (defines terms/names) and<dd > (describes each term/name).
Example :
<dl >
<dt > Coffee </dt >
<dd >Black hot drink</dd>
<dt > Milk </dt >
<dd >White cold drink</dd>
</dl >
The <table > tag defines an HTML table. An HTML table consists of one<table > element and one or more<tr >,<th >, and<td > elements. The<tr > element defines a table row, the<th > element defines a table header, and the<td > element defines a table cell.
Example :
<table >
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
The<thead > tag is used to group header content in an HTML table. The<thead > element is used in conjunction with the<tbody > and<tfoot > elements to specify each part of a table (header, body, footer).
Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
Example :
<table >
<thead >
<tr >
<th > Month</th >
<th > Savings</th >
</tr >
</thead >
<tbody >
<tr >
<td > January</td >
<td > $100</td >
</tr >
<tr >
<td > February</td >
<td > $80</td >
</tr >
</tbody >
<tfoot >
<tr >
<td > Sum</td >
<td > $180</td >
</tr >
</tfoot >
</table >
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| Sum | $180 |
The<col > tag specifies column properties for each column within a<colgroup > element. The<col > tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
Example :
<table >
<colgroup >
<col span="2" style="background-color:
rgb(0, 167, 197)" >
<col style="background-color:
rgb(226, 188, 0)" >
</colgroup >
<tr >
<th >ISBN</th >
<th >Title</th >
<th >Price</th >
</tr >
<tr >
<td >3476896</td >
<td >The Picture of Dorian Gray</td >
<td >$53</td >
</tr >
<tr >
<td >5869207</td >
<td >Oldman and the Sea</td >
<td >$49</td >
</tr >
</table >
| ISBN | Title | Price |
|---|---|---|
| 3476896 | The Picture of Dorian Gray | $53 |
| 5869207 | Oldman and the Sea | $49 |
The <form > tag is used to create an HTML form for user input.
The <form > element can contain one or more of the following form elements:
<input >
<textarea >
<button >
<select >
<option >
<optgroup >
<fieldset >
<label >
<output >
Example :
<form >
<label for="fname">
First name:
</label >
<input type="text" id="fname"
name="fname" placeholder="Mayur">
<label for="ln">
Last name: </label >
<input type="text" id="ln"
name="ln" placeholder="Borgude" >
<input type="submit" value="Submit" >
</form >
The<input > tag specifies an input field where the user can enter data. The<input > element is the most important form element. The<input > element can be displayed in several ways, depending on the type attribute.
Note:
Always add the<label > tag for best accessibility practices !
Tip:ALways use<label >tag for text,checkbox,radio,file and password input types.
Example :
<input type="button" value="Click Here"
onclick="alert('✨Heyy , Have a Good
Day✨😊')">
Example :
<label for="chkbx" >
Are you a Student ?
</label >
<input type="checkbox" id="chkbx" >
Example :
<label for="clr" >
Whats your Eye Color ?
</label >
<input type="color" id="clr" >
Example :
<input type="date">Your Birth Date ?
<input type="email"
placeholder="Enter Your Mail">
<label for="fyl"> Choose File</label>
<input type="file" id="fyl">
<input type="image">Select Pic.
<input type="month"
placeholder="Month">
<input type="number"
placeholder="Enter Your Age">
<label for="pswd" >Enter Password
</label >
<input type="password" id="pswd">
<label for="rdo">Check if your are
Engineer</label>
<input type="radio">
<label for="rng"> Brightness</label>
<input type="range" id="rng"
min="0" max="100">
<label for="time">Enter Time</label>
<input type="time"
name="time" id="time">
<input type="search"
placeholder="Search">
<input type="submit" value="submit">
<input type="url"
placeholder="Enter an URL">
The<iframe > tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.
Example :
<iframe src="http://www.fluffbucket.co.uk/basicweb.htm" frameborder="0">
The <select > element is used to create a drop-down list. The <select > element is most often used in a form, to collect user input. The "name" attribute is needed to reference the form data after the form is submitted (if you omit the "name" attribute, no data from the drop-down list will be submitted).
Example :
<label for="cars" >Choose a car:
</label>
<select name="cars" id="cars" >
<option value="volvo" > Volvo
</option >
<option value="saab" > Ford
</option >
<option value="mercedes" >Mercedes
</option >
<option value="audi" >Audi
</option >
<option value="audi" >Subaru
</option >
</select >
The <select > element is used to create a drop-down list. The <select > element is most often used in a form, to collect user input. The "name" attribute is needed to reference the form data after the form is submitted (if you omit the "name" attribute, no data from the drop-down list will be submitted).
Example :
<label for="review" > Write your
feedback below :</label >
<textarea id="review" name="review"
rows="6" cols="33" placeholder=
"Say Something....." >
The <datalist > tag specifies a list of pre-defined options for an <input > element.
The <datalist > tag is used to provide an "autocomplete" feature for <input > elements. Users will see a drop-down list of pre-defined options as they input data.
The <datalist > element's id attribute must be equal to the <input > element's list attribute (this binds them together).
Example :
<form onSubmit="return false;">
<label for="country">
Choose Country</label>
<input list="countries"
name="country" id="country">
<datalist id="countries">
<option value="USA">
<option value="India">
<option value="Canada">
<option value="United Kingdom">
<option value="France">
</datalist>
</form>
The <fieldset > tag is used to group related elements in a form.
The <fieldset > tag draws a box around the related elements.
Example :
<form >
<fieldset>
<legend >Personalia:</legend >
<label for="fname">First name:
</label >
<input type="text" id="fname"
name="fname">
<label for="lname">Last name:
</label >
<input type="text" id="lname"
name="lname">
<label for="email">Email:</label >
<input type="email" id="email"
name="email">
<label for="birthday">Birthday:
</label >
<input type="date" id="birthday"
name="birthday">
<input type="button" value="Submit">
</fieldset>
</form>
The <output > tag is used to represent the result of a calculation (like one performed by a script).
Example :
<form oninput="x.value=
parseInt(a.value)+parseInt(b.value)" >
<input type="range" id="a"
value="25" >
+
<input type="range" id="b"
value="50" >
=
<output name="x" for="a b"
style="background-color:
aquamarine;font-weight: bold;" >
</output >
</form>
The<head > element is a container for metadata (data about data) and is placed between the<html > tag and the<body > tag.
Metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and other meta information.
The following elements can go inside the<head > element:
<title > (required)
<style >
<base >
<link >
<meta >
<script >
<noscript >
Example :
<head >
<title > HTML | Examples</title >
<meta charset="UTF-8" >
<meta name="Keywords"
content="HTML,Web,CSS">
</head >
*** Its Implemented in this page ***
The <base > tag specifies the base URL and/or target for all relative URLs in a document. The <base > tag must have either an href or a target attribute present, or both. There can only be one single <base > element in a document, and it must be inside the <head > element.
Example :
<head >
<base href="https://mayborg121.
github.io/" target="_blank" >
</head >
*** Its Implemented in this page ***
The <script > tag is used to embed a client-side script (JavaScript).
The <script > element either contains scripting statements, or it points to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
Example :
<p id="demo" ></p >
<script >
document.getElementById
("demo").innerHTML =
"Hello JavaScript!";
</script >
The <embed > tag in HTML is used for embedding external applications which are generally multimedia content like audio or video into an HTML document. It is used as a container for embedding plug-ins such as Flash animations. This tag is a new tag in HTML 5, and it requires only a starting tag.
Example :
<embed src="https://media4.giphy.com
/media/v1.Y2lkPTc5MGI3N
jExb2YwNHo1bzBlbHQxN
W5vbjAwdDF4ZzNoN3BhbWY4
aGM4N2VuMWdvMSZlcD12MV9
pbnRlcm5hbF9naWZfYnlfaWQm
Y3Q9Zw/3dhmyq6EKw2x7eFt4X
/giphy.webp"
type="image/webp" width="290px" >
The <embed > tag in HTML is used for embedding external applications which are generally multimedia content like audio or video into an HTML document. It is used as a container for embedding plug-ins such as Flash animations. This tag is a new tag in HTML 5, and it requires only a starting tag.
Example :
<object data="https://media2.giphy.com
/media/v1.Y2lkPTc5MGI3NjE
xZG5qaWY2N2xvZDlyY3ozYWF
obGxoM3I3eDYwcWo4b3N2ZzJ
4NHp4MiZlcD12MV9pbnRlcm5
hbF9naWZfYnlfaWQmY3Q9Zw/
RHEqKwRZDwFKE/200.webp"
width="300px" >
</object >
HTML attributes provide additional information about HTML elements. They are always included in the opening tag of an element and usually come in name/value pairs like name="value".
The id attribute is a unique identifier that is used to specify the document. It is used by CSS and JavaScript to perform a certain task for a unique element. In CSS, the id attribute is written using the # symbol followed by id.
The class attribute is used to specify one or more class names for an HTML element. The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. The class name in CSS stylesheet using “.” symbol.
The <a > tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to.
The <img > tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed.
The img > tag should also contain the width and height attributes, which specify the width and height of the image (in pixels).
The required alt attribute for the <img > tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader.
The style attribute is used to add styles to an element, such as color, font, size, and more.its an inline CSS integration.
You should always include the lang attribute inside the <html > tag, to declare the language of the Web page. This is meant to assist search engines and browsers.
The title attribute defines some extra information about an element.The value of the title attribute will be displayed as a tooltip when you mouse over the element.
These are not attributes but rather formatting tags<br > is used to give a line break which adds a new line character. and<hr > is used to add horizontal rule/line.
A favicon is a small image displayed next to the page title in the browser tab.A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons associated with a particular website or web page.
Example :
<link rel="icon" type="image/x-icon"
href="/img/html.ico" >
*** look at the Tab title ***
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
HTML5 introduced a method to let web designers take control over the viewport, through the <meta > tag.
You should include the following <meta > viewport element in all your web pages
The viewport is the user's visible area of a web page.
Example :
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" >
XHTML or EXtensible HyperText Markup Language is a mix of HTML and XML, very similar to HTML but stricter. It’s like a rulebook for creating web pages that browsers easily understand. Unlike HTML, you have to be careful and follow the rules exactly. Most browsers support it. Just think of it as a more precise way to write web code.
XML is a markup language where all documents must be marked up correctly (be "well-formed").
XHTML was developed to make HTML more extensible and flexible to work with other data formats (such as XML). In addition, browsers ignore errors in HTML pages, and try to display the website even if it has some errors in the markup. So XHTML comes with a much stricter error handling.