Categories
HTML Web development

HTML link tag

HTML link tag

The HTML <link> element specifies the connection between the current document and an external resource.

The HTML <link> element is often used to link to external style sheets (CSS).

The HTML <link> tag is an empty element (it contains only attributes).

The HTML <link> element should be placed in the <head> section of the document.

Example:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="example-style.css">
</head>
<body>

<h4>This is a heading.</h4>

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

<p>This is the second paragraph.</p>

</body>
</html>

Output:

HTML link tag

Attributes:

crossorigin (value- anonymous/ use-credentials) – defines how the tag handles cross-origin requests.

href (value- URL) – defines the location of the linked file.

Syntax:

<link href="URL"> 

hreflang (value- language_code) – defines the language of the text in the linked file.

Syntax:

<link hreflang="langauge_code"> 

media (value- media_query) – defines what kind of device the linked file will be displayed.

Syntax:

<link media="value"> 

Attribute values:

all (default) – all media type devices.

print – print preview mode/printed pages.

screen – computer screens, tablets, smartphones, etc…

speech – screenreaders that “reads” the page out loud.

referrer policy (value- no-referrer/ no-referrer-when-downgrade/ origin/ origin-when-cross-origin/ unsafe-url) – defines which referrer to use when fetching the resource.

rel (required), (value- alternate/ author/ dns-prefetch/ help/ icon/ license/ next/ pingback/ preconnect/ prefetch/ preload/ prerender/ prev/ search/ stylesheet) – defines the connection between the current document and the linked file.

Syntax:

<link rel="value"> 

size (value- HeightxWidth/ any) – defines the size of the linked resource. Only for rel=”icon“.

type (value- media_type) – defines the media type of the linked file.

Enjoy coding!

Categories
HTML Web development

HTML script and noscript tags

HTML script tag and noscript tag

The HTML <script> tag is used in the HTML document for using the JavaScript in the code. The HTML <noscript> tag is used to display the alternate text on the browser that does not support scripts.

The HTML <script> tag like also <noscript> tag can be used in both <head> and <body> sections.

HTML <script> tag

The HTML <script> element is used to embed a client-side script (JavaScript).

Example:

<!DOCTYPE html>
<html>
<body>

<p id="example"></p>
<script>
document.getElementById("example").innerHTML = "Hello World!";
</script> 

</body>
</html>

Output:

Attributes:

async (value- async) – defines that the script is executed asynchronously (can be only used if the src attribute is present).

Syntax:

<script async>

crossorigin (value- anonymous/ use-credentials) – sets the mode of the request to an HTTP CORS Request.

Syntax:

<script crossorigin="anonymous|use-credentials"> 

defer (value- defer) – defines that the script is executed when the page has finished parsing (can be only used if the src attribute is present).

Syntax:

 <script defer> 

integrity (value- filehash) – allows a browser to check the fetched script to ensure that the code is never loaded if the source has been manipulated.

Syntax:

<script integrity="filehash"> 

nomodule (value- true/false) – defines that the script should not be executed in browsers that support ES2015 modules.

referrerpolicy (value- no-referrer/ no-referrer-when-downgrade/ origin/ origin-when-cross-origin/ same-origin/ strict-origin/ strict-origin-when-cross-origin/ unsafe-url) – defines which referrer information to send when fetching a script.

Syntax:

<script referrerpolicy="no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|same-origin|strict-origin-when-cross-origin|unsafe-url"> 

src (value- URL) – defines an URL of an external script file.

Syntax:

<script src="URL"> 

type (value- scripttype) – defines the media type of the script.

Syntax:

<script type="scripttype"> 

HTML <noscript> tag

The HTML <noscript> element specifies different content to be displayed to users that have disabled scripts in their browser/ or have a browser that doesn’t support script.

Example:

<!DOCTYPE html>
<html>
<body>

<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser doesn't support JavaScript!</noscript>

</body>
</html>

Output:

Enjoy coding!

Categories
HTML Web development

How to embed the YouTube video in HTML?

How to embed the YouTube video in HTML?

One of the easiest ways to play videos in HTML is to use YouTube.

Converting videos to formats acceptable in HTML (Mp4, WebM, Ogg) can be difficult and time-consuming. The easier way to let the video play on your website is using YouTube.

Use an <iframe> element to embed the video on the website:

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.youtube.com/embed/o5daeOwl-4Q">
</iframe>

</body>
</html>

Output:

Each YouTube video has a unique Id (like o5daeOwl-4Q). To check which Id has your chosen video open to video in YouTube and press on the Share button (in the new window, you will see the Id number).

YouTube embed video

Note: By pressing the button Share you can use the option Embed <> to get ready code which you can paste into your HTML document, however, if you want to set your own settings (like dimension, autoplay, loop, etc…) and learn how to write the code by yourself follow the steps below.

By using the height and width attributes you can define the dimension of the player:

<!DOCTYPE html>
<html>
<body>

<iframe width="100%" height="400" src="https://www.youtube.com/embed/o5daeOwl-4Q">
</iframe>

</body>
</html>

Output:

An <iframe> with a specified width of 100% and a height of 400px:

You can let your video start playing automatically when a user visits your website, by adding autoplay=1 to the YouTube URL. Automatically starting video can be annoying for your website visitors so you can set the muted autoplay by adding mute=1 after autoplay=1 to let your video start playing automatically (but muted):

<!DOCTYPE html>
<html>
<body>

<iframe width="100%" height="400" src="https://www.youtube.com/embed/o5daeOwl-4Q?autoplay=1&mute=1">
</iframe>

</body>
</html>

Output:

The video will play once when the value is set to 0 (default), with the value 1 the video will loop (forever). Add loop=1 to let your video loop forever:

<!DOCTYPE html>
<html>
<body>

<iframe width="100%" height="345" src="https://www.youtube.com/embed/o5daeOwl-4Q?loop=1">
</iframe>

</body>
</html>

Output:

To not display controls in the video player set the controls=0, to display the controls in the video player set the controls=1 (default):

<!DOCTYPE html>
<html>
<body>

<iframe width="100%" height="345" src="https://www.youtube.com/embed/o5daeOwl-4Q?controls=0">
</iframe>

</body>
</html>

Output:

Enjoy coding!

Categories
HTML Web development

HTML video tag

HTML video tag

The HTML <video> tag is used to show a video on a website.

Use the <source> tag within <video> to play a video:

Example:

<!DOCTYPE html> 
<html> 
<body> 

<video width="640" controls>
  <source src="https://videos.files.wordpress.com/lFj3lsG4/valentines-day-movie_dvd.mp4" type="video/mp4">
</video>

</body> 
</html>

Output:

Note: The controls attribute adds video controls, like play, pause, and volume.

To start a video automatically, use the autoplay attribute:

<!DOCTYPE html> 
<html> 
<body> 

<video width="640" autoplay>
  <source src="https://videos.files.wordpress.com/lFj3lsG4/valentines-day-movie_dvd.mp4" type="video/mp4">
</video>

</body> 
</html>

Output:

Add muted attribute after autoplay attribute to let your video start playing automatically (but muted):

<!DOCTYPE html> 
<html> 
<body> 

<video width="640" autoplay muted>
  <source src="https://videos.files.wordpress.com/lFj3lsG4/valentines-day-movie_dvd.mp4" type="video/mp4">
</video>

</body> 
</html>

Output:

There are 3 supported video formats for the <video> tag: MP4/MPEG 4 (video/mp4), WebM (video/webm), and Ogg (video/ogg).

Enjoy coding!

Categories
HTML Web development

HTML iframe tag

HTML iframe tag

The HTML <iframe> tag defines an inline frame. The inline frame is used to embed another document within the HTML document.

Syntax:

 <iframe src="url" title="description"></iframe> 

Example:

An <iframe> in its simplest use. Embedding another document within the current HTML document:

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.lenastanley.com/" title="lena design">
</iframe>

</body>
</html>

Output:

Attributes:

allowfullscreen (value- true/ false) – the <iframe> element can activate fullscreen mode by calling the requestFullscreen() method (true).

allowpaymentrequest (value- true/false) – can be allowed to invoke the Payment Request API (true).

height (value- px) – defines the height of an (default height is 150 px).

Syntax:

<iframe height="pixels"> 

Example:

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.lenastanley.com/" height="300" title="lena design">
</iframe>

</body>
</html>

Output:

An with a specified height of 300 px:

loading (value- eager, lazy) – defines whether a browser should load an iframe immediately or defer the loading of iframes until some conditions are met.

name (value- text) – defines the name of an <iframe>.

referrerpolicy (value- no-referrer/ no-referrer-when-downgrade/ origin/ origin-when-cross-origin/ same-origin/ strict-origin-when-cross-origin/ unsafe-url) – defines which referrer information to send when fetching the iframe.

sandbox (value- allow-forms/ allow-pointer-lock/ allow-popups/ allow-same-origin/ allow-scripts/ allow-top-navigation) – Enables an extra set of restrictions for the content in an <iframe>.

src (value- URL) – defines the address of the document to embed in the <iframe>.

srcdoc (value- HTML_code) – defines the HTML content of the page to show in the <iframe>.

width (value- px) – defines the width of an (default width is 300 px).

Syntax:

<iframe width="px"> 

Example:

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.lenastanley.com/" width="640" title="lena design">
</iframe>

</body>
</html>

Output:

An <iframe> with a specified width of 640 px:

You can add the style attribute and use the CSS height and width properties, and remove/add the <iframe> border:

<!DOCTYPE html>
<html>
<body>


<p>An iframe with a thick black borde</p>
<iframe src="https://www.lenastanley.com/" width="100%" height="300" style="border:5px solid black;">
</iframe>

<p>An iframe with no borders:</p>
<iframe src="https://www.lenastanley.com/" width="100%" height="300" style="border:none;">
</iframe>

</body>
</html>

Output:

An iframe with a thick black border:

An iframe with no borders:

Enjoy coding!

Categories
Photoshop Premiere Pro

How to export high-quality GIF from Adobe Premiere Pro? (Photoshop solution)

Adobe Photoshop GIF

It’s easy to learn how to make a video into a GIF with Adobe Premiere Pro however sometimes the quality of a GIF can be lower than you expect.

Adobe Premiere Pro is a video editor and is not the best tool for creating a small size GIF.

If you tried exporting GIF from Adobe Premiere Pro using the “animated GIF” option, but the image output was still poor no matter what settings you chose, you can try to fix this issue with help of Adobe Photoshop.

Adobe Premiere Pro
*GIF exported from Adobe Premiere Pro
Photoshop GIF
*GIF exported from Adobe Photoshop

To export high-quality GIF using Adobe Premiere Pro and Adobe Photoshop follow the steps below:

Step1.

Adobe Premiere Pro

Open the Adobe Premiere Pro and create the new sequence (go to the File ->New->Sequence…)

importing a video to Adobe Premiere Pro

In the new sequence window, go to the settings and change the frame size to your preferred one. Make sure that the square pixels(Pixels Aspect Ratio) option has been selected. Press Okay.

GIF Adobe Premiere Pro

Go to File->Import, and select the video that you want to make into the GIF.

converting video to a GIF in Adobe Premiere Pro

Drag your video to the sequence panel:

Adobe Premiere Pro creating a GIF

If your video is in a different size then your sequence will pop the information with Clip Mismatch Warning. Press Keep Existing Settings to do not change the sequence frame size.

After dragging a video to the sequence panel your video may not match with the sequence. To fix this click on your video in the sequence panel and go to Effect Controls.

Adobe Premiere pro GIF

In the Effect Controls panel go to the Scale. Use the horizontal slider to fit the size of your video to the sequence.

If you want to move a video horizontally, or vertically go to the Position option (in the Effect Controls panel).

The first value in the Position option defines the horizontal position, the second value defines the vertical position. Change the values to set the wanted position of your video.

Adobe Premiere Pro creating a GIF

Go to File->Export->Media..

Animate GIF Adobe Premiere Pro

In the Export Settings, go to the format and select from the drop-down menu an option H.264 (to export a video in mp4 format).

At the bottom of the Export Settings, select the part of the movie that you want to export. On the right side of the Export Setting, you can change the name of your movie and the localization. Press Export.

adobe premium pro gif

Step2.

Adobe Photoshop

Open Photoshop and go to File->Import and select an option Video Frames to Layers…

Photoshop Video GIF

Choose a video exported from Adobe Premiere Pro, and make sure that the option – Make Frame Animation is ticked.

Photoshop Video GIF

Go to Window->Timeline to see the timeline (all frames):

Adobe Photoshop GIF
Adobe Photoshop Timeline

To export GIF in Photoshop go to File->Export->Save for Web(Legacy)…

Photoshop Exporting GIF

Make sure that exported file will be in a GIF format. Change the Looping options to Forever. Press Save…

Adobe Photoshop GIF

Your GIF is ready!

Categories
HTML Web development

HTML title & meta tags

The HTML <title> tag and <meta> tag are bits of HTML code in the header of a website. They help search engines to understand the content on a web page.

HTML title tag and meta tag

The HTML <title> tag and <meta> tag always go inside the <head> element.

HTML <title> tag

The HTML <title> tag specifies the title of the document. The title of the document can be text-only. It is displayed in the browser’s title bar/ or in the page tab.

Note: The HTML <title> tag is required in all HTML documents and also you can not have more than one <title> element in an HTML document.

Example:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML title tag</title>
</head>

<body>
<h4>This is a heading.</h4>
<p>This is a paragraph.</p>
</body>
</html>

Output:

HTML title tag

This is a heading.

This is a paragraph.

HTML meta tag

The HTML <meta> tag specifies metadata (information about data) about an HTML document.

The metadata is used by browsers (how to display content or reload the page), search engines, and other web services.

Example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Web development">
  <meta name="keywords" content="HTML,CSS,JavaScript,jQuery">
  <meta name="author" content="Web developer">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

</body>
</html>

Attributes:

charset (value- charset_set) – defines the character encoding for the HTML document (UTF-8).

Syntax:

<meta charset="character_set"> 

Example:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
</head>

<body>
<h4>This is a heading.</h4>
<p>This is a paragraph.</p>
</body>

</html>

This is a heading.

This is a paragraph.

content (value- text) – defines the value associated with the http-equiv or name attribute.

Syntax:

<meta content="text"> 

Example:

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Web development">
  <meta name="keywords" content="HTML,CSS,JavaScript,jQuery">
</head>
<body>

</body>
</html>

http-equiv (value- content-security-policy/ content-type/ default-style/ refresh) – provides an HTTP header for the information/value of the content attribute

Syntax:

<meta http-equiv="content-security-policy|content-type|default-style|refresh">

Example:

Refresh document every 45 seconds:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="refresh" content="45">
</head>
<body>

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

</body>
</html>

name (value- application-name/ author/ description/ generator/ keywords/ viewport) – defines a name for the metadata.

Syntax:

<meta name="value"> 

Example:

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Web development">
  <meta name="keywords" content="HTML,CSS,JavaScript,jQuery">
  <meta name="author" content="Web developer">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

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

</body>
</html>

Attribute values:

application-name – defines the name of the Web application that the page represents.

author – defines the name of the author of the document.

 <meta name="author" content="Web Developer"> 

description – defines a description of the page.

 <meta name="description" content="Web development"> 

generator – defines one of the software packages used to generate the document.

keywords – define a comma-separated list of keywords.

viewport – controls the viewport (the user’s visible area of a web page).

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The viewport varies with the device (will be smaller on a mobile phone than on a computer screen).

An HTML viewport element gives the browser instructions on how to control the page’s dimensions and scaling.

Enjoy coding!

Categories
HTML Web development

HTML datalist tag

The HTML <datalist> tag defines a list of pre-defined options for an <input> element.

HTML datalist tag

The HTML <datalist> element provides “autocomplete” function for <input> elements. Users will see a drop-down list of pre-defined choices as they input data.

The HTML <datalist> tag’s id attribute must be the same as the <input> element’s list attribute (to link them together).

Example:

<!DOCTYPE html>
<html>
<body>

<form action="" method="get">
  <label for="webDev">Choose an option:</label>
  <input list="web-dev" name="web-dev" id="webDev">
  <datalist id="web-dev">
    <option value="HTML"></option>
    <option value="CSS"></option>
    <option value="JavaScript"></option>
    <option value="jQuery"></option>
    <option value="Java"></option>
  </datalist>
  <input type="submit">
</form>

</body>
</html>

Output:

Enjoy coding!

Categories
HTML Web development

HTML form tag

HTML form tag

The HTML <from> tag is creating an HTML form for user input. The HTML form is collecting user input. The user inputs are usually sent to a server for processing.

<form>
.
form elements
.
</form>

The HTML <from> tag can contain the following form elements:

<button> – specifies a clickable button.

<datalist> – defines a list of pre-defined options for input controls.

<fieldset> – groups related elements in a form.

<input> – specifies an input control.

<label> – specifies a label for an <input> element.

<legend> – specifies a caption for a <fieldset> element.

<optgroup> – specifies a group of related options in a drop-down list.

<option> – specifies options in a drop-down list.

<output> – specifies the result of a calculation.

<textarea> – specifies a multiline text area.

<select> – specifies a drop-down list.

Example:

<!DOCTYPE html>
<html>
<body>

<form action="">
 <fieldset>
  <legend>Details:</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="appointment">Appointment:</label>
  <input type="date" id="appointment" name="appointment">
  <input type="submit" value="Submit"><br><br>
 </fieldset>
</form>

</body>
</html>

Output:

Details:







Attributes:

accept-charset (value- character_set) -defines the character encodings for the form submission.

Syntax:

 <form accept-charset="character_set"> 

Example:

<!DOCTYPE html>
<html>
<body>

<form action="" accept-charset="utf-8">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output:



Attribute values:

character-set – A space-separated list of one or more character encodings that are to be used for the form submission (UTF-8, ISO-8859-1).

action (value- URL) – defines where to send the form data when a form is submitted.

Syntax:

<form action="URL"> 

Example:

<!DOCTYPE html>
<html>
<body>

<form action="https://lenadesign.org/">
  <label for="first-name">First name:</label>
  <input type="text" id="first-name" name="first-name"><br><br>
  <label for="last-name">Last name:</label>
  <input type="text" id="last-name" name="last-name"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output:





Attribute values:

URL – an absolute URL – points to another website (like action=”http://www.example-example.com/example.html&#8221;), a relative URL – points to a file within a website (like action=”example-example.html”).

autocomplete (value- on/off) – defines whether a form should have autocompleted on or off.

Syntax:

<form autocomplete="on|off"> 

Example:

<!DOCTYPE html>
<html>
<body>
    
<p>Fill in and submit the form, then reload the page, start to fill in the form again - and see how autocomplete works.</p>

<form action="" method="get" autocomplete="on">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="text" id="email" name="email"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output:

Fill in and submit the form, then reload the page, start to fill in the form again – and see how autocomplete works:





Attribute values:

on (default) – the browser will automatically complete values based on values that the user has entered before.

off – the user must enter a value into each field for every use.

enctype (value- application/x-www-form-urlencoded,multipart/form-data, text/plain) – defines how the form-data should be encoded when submitting it to the server.

Syntax:

<form enctype="value"> 

Note: The enctype attribute can be used only for method=”post”.

Example:

<!DOCTYPE html>
<html>
<body>
    
<form action="/" method="post" enctype="multipart/form-data">
  <label for="name">First name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="lastname">Last name:</label>
  <input type="text" id="lastname" name="lastname"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output:





Attribute values:

application/x-www-form-urlencoded (default) – all characters are encoded before sent.

multipart/form-data – necessary value if the user will upload a file through the form.

text/plain – sends data without any encoding.

method (value- get/post) – defines the HTTP method to use when sending form-data.

Syntax:

<form method="get|post"> 

Example:

<!DOCTYPE html>
<html>
<body>
    
<form action="" method="get" target="_blank">
  <label for="firstName">First name:</label>
  <input type="text" id="firstName" name="firstM=Name"><br><br>
  <label for="lasrName">Last name:</label>
  <input type="text" id="lastName" name="lastName"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output:





Attribute values:

get(default) – appends the form-data to the URL in name/value pairs: URL?name=value&name=value.

post – sends the form data as an HTTP post-transaction.

name (value- text) – defines the name of a form.

Syntax:

<form name="text"> 

Example:

<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit() {
    document.forms["my-form"].submit();
}
</script>
</head>
<body>

<h1>The form name attribute</h1>

<form name="my-form" action="" method="get">
  <label for="name-first">First name:</label>
  <input type="text" id="name-first" name="name-first"><br><br>
  <label for="name-last">Last name:</label>
  <input type="text" id="name-last" name="name-last"><br><br>
  <input type="button" onclick="formSubmit()" value="Send">
</form>

</body>
</html>

Output:





Attribute values:

text– defines the name of a form.

novalidate (value- novalidate) – defines that the form should not be validated when submitted.

Syntax:

<form novalidate> 

Example:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<form action="" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output:



rel (value- external/ help/ license/ next/ nofollow/ noopener/ noreferrer/ opener/ prev/ search) – defines the relationship between a linked resource and the current document.

Syntax:

<form rel="value"> 

Attribute values:

external – defines that the referenced document is not a part of the current site.

help – links to a help document.

license – links to copyright information for the document.

next– the next document in a selection.

nofollow– links to an unendorsed document (like paid links).

noreferrer – defines that the browser should not send an HTTP referrer header if the user follows the hyperlink.

prev – the previous document in a selection.

search – links to a search tool for the document.

target (value- _blank/ _self/ _parent/ _top) – defines where to display the response that is received after submitting the form.

Syntax:

<form target="_blank|_self|_parent|_top"> 

Example:

<!DOCTYPE html>
<html>
<body>

<form action="https://lenadesign.org/" method="get" target="_blank">
  <label for="first-name">First name:</label>
  <input type="text" id="first-name" name="first-name"><br><br>
  <label for="last-name">Last name:</label>
  <input type="text" id="last-name" name="last-name"><br><br>
  <input type="submit" value="Send">
</form>

</body>
</html>

Output:





Attribute values:

_blank – the response is displayed in a new window or tab.

_self (default) – the response is displayed in the same frame.

_parent – the response is displayed in the parent frame.

_top – the response is displayed in the full body of the window.

Enjoy coding!

Categories
HTML Web development

HTML progress tag

HTML progress tag

The HTML <progress> tag expresses the completion progress of a task.

Example:

<!DOCTYPE html>
<html>
<body>

<label for="file">Downloading progress:</label>
<progress id="file" value="38" max="100"> 38% </progress>

</body>
</html>

Output:

38%

Attributes:

max (value- number) -defines how much work the task requires in total, the default value is 1.

value (value- number) – defines how much of the task has been completed.

Note: The HTML <progress> tag is not suitable for expressing a gauge (e.g. disk space usage or relevance of a query result). To express a gauge, use the HTML <meter> tag.

Enjoy coding!