How to Create an Image Overlay Icon using HTML and CSS ? Last Updated : 02 Aug, 2024 Comments Improve Suggest changes Like Article Like Report Image overlay Icon can be an impressive addition to interactive detail or a set of features for your website. This article content will divide the task into two sections, the first section creating the structure and attach the link for the icon. In the second section, we will design the structure using CSS. Creating Structure: In this section, we will create a basic structure and also attach the CDN link of the Font-Awesome for the icons which will be used as an icon on hover. CDN links for the Icons from the Font Awesome:<link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">HTML code: HTML <!DOCTYPE html> <html> <head> <title> Image Overlay Icon using HTML and CSS </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container"> <h1>GeeksforGeeks</h1> <b>Image Overlay Icon using HTML and CSS</b> <div class="img"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png" alt="Geeksforgeeks"> <div class="overlay"> <a href="#" class="icon"> <i class="fa fa-user"></i> </a> </div> </div> </div> </body> </html> Designing Structure: In the previous section, we have created the structure of the basic website where we are going to use as an image overlay icon. In this section, we will design the structure for the image overlay icon. CSS code: CSS body { text-align: center; } h1 { color: green; } /* Image styling */ img { padding: 5px; height: 225px; width: 225px; border: 2px solid gray; box-shadow: 2px 4px #888888; } /* Overlay styling */ .overlay { position: absolute; top: 23.5%; left: 32.8%; transition: .3s ease; background-color: gray; width: 225px; height: 225px; opacity: 0; } /* Overlay hover */ .container:hover .overlay { opacity: 1; } /* Icon styling */ .icon { color: white; font-size: 92px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } Final Solution: This is the final code after combining the above two sections. It will display the image overlay icon. html <!DOCTYPE html> <html> <head> <title> Image Overlay Icon using HTML and CSS </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { text-align: center; } h1 { color: green; } /* Image styling */ img { padding: 5px; height: 225px; width: 225px; border: 2px solid gray; box-shadow: 2px 4px #888888; } /* Overlay styling */ .overlay { position: absolute; top: 23.5%; left: 32.8%; transition: .3s ease; background-color: gray; width: 225px; height: 225px; opacity: 0; } /* Overlay hover */ .container:hover .overlay { opacity: 1; } /* Icon styling */ .icon { color: white; font-size: 92px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } </style> </head> <body> <div class="container"> <h1>GeeksforGeeks</h1> <b>Image Overlay Icon using HTML and CSS</b> <div class="img"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png" alt="Geeksforgeeks"> <div class="overlay"> <a href="#" class="icon"> <i class="fa fa-user"></i> </a> </div> </div> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Create Breadcrumbs using HTML and CSS ? S Sabya_Samadder Follow Improve Article Tags : Web Technologies Web Templates Similar Reads HTML BasicsHTML IntroductionHTML stands for Hyper Text Markup Language, which is the core language used to structure content on the web. It organizes text, images, links, and media using tags and elements that browsers can interpret. As of 2025, over 95% of websites rely on HTML alongside CSS and JavaScript, making it a fundam6 min readHTML Full FormHTML (Hypertext Markup Language) is a standard markup language used to design web pages. It describes the structure of a web page and consists of a series of elements. HTML tells the browser how to display the content, making it a crucial part of web development.This language can become more interac3 min readHTML EditorsAn HTML Editor is a software application designed to help users create and modify HTML code. It often includes features like syntax highlighting, tag completion, and error detection, which facilitate the coding process. There are two main types of HTML editors: Text-Based Editors - Allow direct codi5 min readHTML CommentsHTML comments are used to add notes or explanations in the HTML code that are not displayed by the browser.They are useful for documenting the code, making it easier to understand and maintain.To add a comment, use the syntax <!-- your comment here -->. HTML<!-- This is a comment and will n4 min readHTML BasicsHTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It defines the layout of a webpage using elements and tags, allowing for the display of text, images, links, and multimedia content. As the foundation of nearly all websites, HTML is used in over6 min readHTML LayoutHTML layouts are a technique used to divide a web page into multiple sections, making it easier to apply styles, organize content, and manage operations efficiently. This division improves readability, accessibility, and overall user experience.HTML layout is achieved through elements like <heade4 min readHTML ElementsAn HTML Element consists of a start tag, content, and an end tag, which together define the element's structure and functionality. Elements are the basic building blocks of a webpage and can represent different types of content, such as text, links, images, or headings.For example, the <p> ele5 min readHTML HeadingsHTML headings are used to define the titles and subtitles of sections on a webpage. They help organize the content and create a structure that is easy to navigate.Proper use of headings enhances readability by organizing content into clear sections.Search engines utilize headings to understand page4 min readHTML ParagraphsA paragraph in HTML is simply a block of text enclosed within the <p> tag. The <p> tag helps divide content into manageable, readable sections. It’s the go-to element for wrapping text in a web page that is meant to be displayed as a distinct paragraph.Syntax:<p> Some Content...5 min readHTML Text FormattingHTML text formatting refers to the use of specific HTML tags to modify the appearance and structure of text on a webpage. It allows you to style text in different ways, such as making it bold, italic, underlined, highlighted, or struck-through. Table of ContentCategories of HTML Text FormattingLogic4 min readHTML QuotationsHTML quotation elements are used to display quoted text on a web page, differentiating it from regular content. These elements help structure citations and quotations effectively within the document.TagDescription<abbr>Represents an abbreviation or acronym, typically with a title attribute to3 min readHTML Color StylesHTML color styles offer various ways to specify colors on a webpage. For Example using HSL (Hue, Saturation, Lightness) allows for intuitive color control, where you adjust hue for the type of color, saturation for intensity, and lightness for brightness. Here are the different styles that can be us3 min readHTML Links HyperlinksHTML Links, also known as hyperlinks, are defined by the <a> tag in HTML, which stands for "anchor." These links are essential for navigating between web pages and directing users to different sites, documents, or sections within the same page. The basic attributes of the <a> tag include3 min readHTML ImagesThe HTML <img> tag is used to embed an image in web pages by linking them. It creates a placeholder for the image, defined by attributes like src, width, height, and alt, and does not require a closing tag.There are two ways to insert the images into a webpage:By providing a full path or addre6 min readHTML TablesHTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It defines the layout of a webpage using elements and tags, allowing for the display of text, images, links, and multimedia content. As the foundation of nearly all websites, HTML is used in over10 min readHTML ListsAn HTML List allows you to organize data on web pages into an ordered or unordered format to make the information easier to read and visually appealing. HTML Lists are very helpful for creating structured, accessible content in web development.Types of HTML ListsThere are three main types of lists i5 min readHTML Block and Inline ElementsHTML elements are either block-level, which structure the layout and span full width (like <div> or <p>), or inline, which styles content within blocks without breaking the flow (like <span> or <a>). This distinction covers 80–90% of common HTML usage.Inline and Block Level E3 min readHTML IframesAn iframe, or Inline Frame, is an HTML element represented by the <iframe> tag. It functions as a 'window' on your webpage through which visitors can view and interact with another webpage from a different source.Iframes are used for various purposes like:Embedding Multimedia: Easily integrate4 min readHow to Add JavaScript in HTML Document?To add JavaScript in HTML document, several methods can be used. These methods include embedding JavaScript directly within the HTML file or linking an external JavaScript file.Inline JavaScriptYou can write JavaScript code directly inside the HTML element using the onclick, onmouseover, or other ev3 min readHTML File PathsHTML file paths specify the location of files or resources that a webpage needs to access, such as images, videos, scripts, or other HTML documents. These paths tell the web browser where to find the files required to display the content correctly or to execute scripts as intended. To insert a file3 min readHTML Viewport meta tag for Responsive Web DesignA Browser's viewport is the area of the web page in which the content is visible to the user. The viewport does not have the same size, it varies with the variation in screen size of the devices on which the website is visible. For a laptop, the viewport has a larger size as compared to a smartphone3 min readHTML Computer Code ElementsHTML provides a set of elements tailored for displaying computer code so that it is easily distinguishable from other text on a webpage. These elements help in formatting and presenting source code in a readable and syntactically correct manner.Table of ContentThe code TagThe kbd TagThe pre TagThe s4 min readHTML EntitiesIn HTML, there are reserved characters, such as < (less than) and > (greater than), which are used to define tags like <p>. However, if you use these reserved characters within the content, browsers may misinterpret them as part of the tags.HTML Entities were introduced to avoid this. Re4 min readHTML CharsetsHTML charsets define how characters are represented in a web document. The character encoding ensures that text appears correctly across different devices and platforms.The <meta> tag's charset attribute is used to specify which character encoding the HTML document uses. By setting the charset4 min readHTML URL EncodingA Uniform Resource Locator (URL) is simply the address of a website to access the website content. Web browsers retrieve pages from web servers using a URL (Uniform Resource Locator).What is URL Encoding?URL Encoding is the process of converting the URL into a valid format that is accepted by web br4 min readHTML Deprecated TagsThe deprecated tags or attributes are those attributes which are replaced by some other attributes. The tag or attributes deprecated when the same attributes is achieved by some other way. They are considered outdated and may not be supported in modern browsers or future versions of HTML. HTML Depre2 min readHTML TagsHTML DOCTYPE DeclarationHTML DOCTYPE (Document Type Declaration) is an instruction that appears at the beginning of an HTML document, before the <html> tag.Its primary role is to tell the web browser which version of HTML the page is written in, ensuring that the browser renders the content correctly. It is not an HT4 min readHTML a TagThe <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. This attribute determines where the user is directed upon clicking the link.HTML<a href="http2 min readHTML abbr TagThe <abbr> tag in HTML is used to represent abbreviations and provides additional information about them through the title attribute, which displays a tooltip when hovered over. It helps improve accessibility and SEO by offering context for the abbreviated text.It makes text clearer by explain3 min readHTML acronym TagThe HTML <acronym> tag was used to define an acronym, providing a way to identify and explain abbreviated terms in web content. However, it's deprecated in favor of <abbr>, which serves the same purpose but is more semantically correct.Syntax: <acronym title=""> Short Form </acr2 min readHTML < address> TagThe <address> tag in HTML is used to define contact information for the author or owner of a document or an article. It is typically used for information such as an address, email, or phone number.The <address> element is a block-level element by default.The content inside <address3 min readHTML applet TagThe applet tag in HTML was used to embed Java applets into any HTML document. The <applet> tag was deprecated in HTML 4.01, and its support has been completely discontinued starting from HTML 5. Alternatives available in HTML 5 are the <embed> and the <object> tags. Some browsers s2 min readHTML area TagThis <area> tag is used in an HTML document to map a portion of an image to make it clickable by the end user. This specifies the location and size of the active region on an image, which can be clicked. Clicking on areas with href attributes directs to a specified URL or action.html<!DOCTY3 min readHTML article TagThe HTML <article> tag defines a self-contained, independent piece of content like a blog post, news article, or comment. It is designed for content that can be independently distributed, shared, or reused, providing semantic meaning to the content.This tag is introduced in HTML5.HTML<!DOCT3 min readHTML aside TagThe <aside> tag is used to describe the main object of the web page more shortly like a highlighter. It identifies the content that is related to the primary content of the web page but does not constitute the main intent of the primary page. The <aside> tag contains mainly author inform2 min readHTML5 < audio> TagThe <audio> tag in HTML5 is used to embed audio content on a webpage. It allows you to play audio files like MP3, OGG, or WAV directly in the browser. The <audio> element provides attributes for controlling playback, such as play, pause, and volume.Using the <source> element enable3 min readHTML b TagThe <b> tag in HTML is used to make the enclosed text bold, giving it greater emphasis or visual importance. Unlike the <strong> tag, which also makes text bold but with semantic importance. the <b> tag is purely for styling purposes and does not carry semantic meaning.HTML<p2 min readHTML <base> TagThe HTML <base> tag is used to specify a base URL, or target, for relative links. This URL will be the base URL for every link on the page and will be prefixed before each of them. For example, if the URL specified by the base tag is "www.xyz.com" then every other URL on the page will be prefi2 min readHTML <basefont> TagThe <basefont> tag in HTML is used to set the default text-color, font-size, font-family of all the text in the browser. It is no longer supported in HTML5. So, as an alternative, we are using CSS in the code example. The <basefont> tag was supported in Internet Explorer 9, and earlier v2 min readHTML Tags - A to Z ListHTML Tags are fundamental elements used to structure and format content on web pages. They provide instructions to web browsers on how to render text, images, links, and other media.HTML tags are enclosed in angle brackets < > and usually come in pairs: an opening tag and a closing tag. The cl15+ min readHTML AttributesHTML AttributesHTML Attributes are special words used within the opening tag of an HTML element. They provide additional information about HTML elements. HTML attributes are used to configure and adjust the element's behavior, appearance, or functionality in a variety of ways. Each attribute has a name and a value8 min readHTML < input> accept AttributeThe HTML <input> accept attribute is used to control the type of files that can be selected for input, restricting the file selection to specific formats such as image/* for images or .pdf for PDF files. Syntax: <input accept = "file_extension | audio/* | video/* | image/* | media_type">4 min readHTML <form> accept-charset AttributeThe HTML <form> accept-charset attribute defines which character encoding the form will use when submitting data.By default, the accept-charset attribute is set to 'UNKNOWN,' using the same encoding as the document.It ensures the correct encoding when the form is submitted, especially for non-3 min readHTML accesskey AttributeThe HTML accesskey attribute defines a keyboard shortcut to activate or focus an element.It assigns a keyboard key combination to trigger an element (like a link or button).Browser support and specific key combinations vary (e.g., Alt + key on Windows, Ctrl + key on macOS).Use it sparingly and provi3 min readHTML action AttributeThe HTML action attribute is used to specify where the form data should be sent on submission. It allows the browser to send the data to the specified location, enabling server-side scripts to process the data and generate a response.Note: It can be used in the <form> element. Syntax:<form3 min readHTML align AttributeIn HTML, the align attribute is used to control the alignment of elements on a webpage. Whether it's for text, images, or tables, the align attribute helps to position content in relation to its surrounding elements.Syntax<element_name align="left | right | center | justify">Attribute ValuesAt4 min readHTML alt attributeThe alt attribute in HTML provides alternative text for images, aiding accessibility and providing context for screen readers.Syntax:<img src=" " alt=" " >HTML<html> <body> <h1>GeeksforGeeks Logo</h1> <img src="https://media.geeksforgeeks.org/wp-content/uploads/201903 min readHTML | <script> async AttributeThe HTML,<script> async attribute is a boolean attribute. When present, it specifies that the script will be executed asynchronously when it is available. This attribute only works for external scripts (and used only in when src attribute is present ).Note: There are so many ways in which exte1 min readHTML <input> autocomplete AttributeThe HTML | <input>autocomplete Attribute is used to specify whether the input field has autocompleted and would be on or off. When the autocomplete attribute is set to on the browser will automatically complete the values based on what the user entered before. It works with many input fields s1 min readHTML < form> autocomplete AttributeThe HTML <form> autocomplete attribute allows the browser to automatically fill the form fields based on previous user inputs.Used to save time by reusing data like names, emails, and addresses.It can be turned "on" or "off" depending on the field's requirements.Syntax<form autocomplete="on3 min readHTML autofocus AttributeThe HTML autofocus attribute is a powerful tool that enhances user experience by automatically setting the focus to a specific element when a webpage loads. Syntax<input type="text" autofocus> Note: This attribute is boolean, meaning it can either be present or absent.Supported TagsElementPurp2 min readHTML input autofocus AttributeThe autofocus attribute in HTML is used to specify that a particular form element (like an input field, textarea, or select dropdown) should automatically receive focus when the page is loaded, allowing the user to start interacting with it immediately without needing to click on it.Syntax<input1 min readHTML <button> autofocus AttributeThe HTML <button> autofocus Attribute is used to specify whether the button should get automatically get focused or not when the page loads. It is a Boolean Attribute. Syntax: <button type="button" autofocus> Example: This Example illustrates the use of autofocus attribute in Button Elem1 min readHTML <textarea> autofocus AttributeThe HTML <textarea> autofocus Attribute is used to specify that the textarea field should get automatically focus when the page loads. It is a Boolean Attribute. Syntax: <textarea autofocus> Example: This Example illustrates the use of autofocus attribute in Textarea Element. html <!D1 min readHTML Attributes Complete ReferenceHTML attributes are special words placed inside the opening tag of an HTML element to define its characteristics. Each attribute has two parts:Attribute nameAttribute value (separated by an equal sign = and enclosed in double quotes " ").Syntax:<tag_name attribute_name="value"> Contents...8 min readHTML GraphicsHTML SVG BasicsSVG stands for Scalable Vector Graphics. It defines vector-based graphics in XML format. SVG graphics do not lose any quality when zoomed or resized, and every element and attribute in SVG files can be animated. Advantages of SVG: The advantages of using SVG over other image formats (like JPEG and G4 min readHTML Canvas BasicsIn this article, we will know HTML Canvas Basics, and their implementation through the examples. The HTML "canvas" element is used to draw graphics via JavaScript. The "canvas" element is only a container for graphics. One must use JavaScript to actually draw the graphics. Canvas has several methods5 min readHTML APIsHTML GeolocationThe HTML Geolocation is used to get the geographical position of a user. Due to privacy concerns, this position requires user approval. Geo-location in HTML5 is used to share the location with some websites and be aware of the exact location. It is mainly used for local businesses, and restaurants,5 min readHTML Drag and DropDrag and Drop is a very interactive and user-friendly concept that makes it easier to move an object to a different location by grabbing it. This allows the user to click and hold the mouse button over an element, drag it to another location, and release the mouse button to drop the element there. W5 min readHTML DOMHTML DOM (Document Object Model)The HTML DOM (Document Object Model) is a programming interface that represents the structure of a web page in a way that programming languages like JavaScript can understand and manipulate. Think of it as a tree of objects where each part of your HTML document (elements, attributes, text) is repres5 min readHTML DOM activeElement PropertyThe DOM activeElement property is used to return the currently active elements in the HTML document. This property is read-only. It gives the reference of a focused element object in the document. Syntax: document.activeElementReturn Value: A reference to the element object in the document that has2 min readHTML DOM anchors CollectionThe HTML DOM anchors collection is used to return the collection of all <a> elements. It only counts those <a> element that has the name attribute only. The name attribute of the anchor element does not support HTML 5. The elements in the collection are sorted that appear in the source c2 min readHTML DOM close() MethodThe DOM close() method is used to close the output stream. It is used to indicate the finish of writing on a window. The close() method does not require any parameter. Syntax:document.close()Example 1: In this example, we will use DOM close() method.HTML<!DOCTYPE html> <html> <head2 min readHTML DOM baseURI PropertyThe DOM baseURI property is used to return the base Uniform Resource Identifier (URI) of the document. This property is used for read-only. This property returns a string value that represents the base URI of the page.Syntax: node.baseURIReturn Value: It returns a string value that represents the UR2 min readHTML DOM body PropertyThe HTML DOM Body property is used to set the document <body> element. It only returns the content present in the <body> Tag. This property is used to change the present content inside the <body> element and sets them with the new specified content. This property does not return th2 min readHTML DOM createAttribute() MethodThis createAttribute() method is used to create an attribute with the specified name and returns the attribute object. The attribute.value property is used to set the value of the attribute and the element.setAttribute() method is used to create a new attribute for an element. This method() contains2 min readHTML DOM doctype PropertyThe DOM doctype property is used to return the doctype of any HTML document. The DocumentType object is the name property used to return the name of the object. If there is no doctype declared in the document then it returns a Null value. Syntax:document.doctypeExample: In this example, we will use2 min readHTML DOM writeln() MethodThe writeln() method is used to write a document with the additional property of a newline character after each statement. This method is similar to the document.write() method. Syntax: document.writeln( exp1, exp2, exp3, ... )Parameters: This method contains many parameters which are optional. All1 min readHTML DOM console error() MethodThe console.error() method in HTML is used to display an error message on the console. The console.error() method is used for testing purposes. The error message is sent as a parameter to the console.error() method. Syntax:console.error( message )Parameters: This method accepts a single parameter me2 min readHTML DOM URL PropertyThe DOM URL property in HTML is used to return a string that contains the complete URL of the current document. The string also includes the HTTP protocol such as ( http://).Syntax:document.URLReturn Value: It returns a string value that represents the full URL of the document. Example: In this exam2 min readHTML DOM embeds CollectionThe DOM embeds collection property in HTML is used to return the collection of all embedded elements. The elements in the collection are sorted that appear in the source code. This property is used for read-only. Syntax: document.embedsProperty: This property contains a value length that returns the3 min readHTML DOM console warn() MethodThe console.warn() method is used to write a warning message in the console. So open the console to display the output (warning message). Syntax:console.warn( message )Parameters: This method accepts single parameter message which is mandatory. This parameter is used to hold the warning message. Exa2 min readHTML DOM console trace() MethodThis console.trace() method is used to display the trace which represents how the code ended up at a certain point. Syntax:console.trace( label )Parameters: This method accepts a single parameter label. Example: In this example, we will use a console.trace() methodHTML<!DOCTYPE html> <html2 min readHTML DOM Complete ReferenceHTML DOM (Document Object Model) is a programming interface that represents the elements of an HTML document in a tree-like structure.Allows developers to change content and layout using JavaScript.Enables dynamic updates and user interaction on websites.Facilitates the addition, removal, or modific15+ min readHTML Audio/VideoHTML DOM Audio ObjectThe Audio object is used for representing an HTML <audio> element. The Audio Object is a new object in HTML5. Syntax: For creating an <audio> element:let gfg = document.createElement("AUDIO")For accessing an <audio> element:let x = document.getElementById("myAudio") Property Values4 min readHTML DOM Video ObjectThe Video object in HTML DOM represents an <video> element. The video element can be accessed by using getElementById() method. Syntax: To access a video object: document.getElementById("videoId");where id is assigned to the <video> tag.To create a video object: document.createElement("V4 min readHTML DOM Video canPlayType( ) MethodThe Video canPlayType() method is used for checking if the browser can play the specified video type or not. The Video canPlayType method returns a string that represents the level of support. Syntax: videoObject.canPlayType(type) Parameter Values: type: It specifies the video type (and optional cod2 min readHTML DOM Audio audioTracks PropertyThe Audio audioTracks Property is used for returning an AudioTrackList object. The audio tracks available for a video are represented by the AudioTrackList object. The AudioTrack Object is used to represent an available audio track. Syntax: audioObject.audioTracks Return Values: AudioTrackList Objec1 min readHTML DOM Audio autoplay PropertyThe Audio autoplay property is used for setting or returning whether audio should start playing as soon as it is loaded or not. It can be used to specify that the audio should automatically start playing as soon as it is loaded. Syntax: Return the autoplay property:audioObject.autoplaySet the autopl2 min readHTML DOM Audio buffered PropertyThe Audio buffered property is used for returning a TimeRanges object. The user’s buffered ranges of the audio can be represented using the TimeRanges object. The time range of buffered audio is defined by the buffered range and if the user skips in the audio, it may result in several buffered range2 min readHTML DOM Audio controls PropertyThe Audio controls property is used for setting or returning whether audio should display standard audio controls or not. The <audio> controls attribute is reflected by this property. The audio controls included in the property are: PlayPauseSeekingVolume Syntax: Return the control property:au1 min readHTML DOM Audio currentSrc PropertyThe Audio currentSrc property is used for returning the URL of the current audio. The Audio currentSrc property returns an empty string if no audio is specified. The Audio currentSrc property is a read-only property. Syntax: audioObject.currentSrc The below program illustrates the Audio currentSrc P1 min readHTML DOM Audio currentTime PropertyThe Audio currentTime property is used for setting or returning the current position of the audio playback. The Audio currentTime property returns the audio playback position in the form of seconds. The playback jumps to the specified position when this property is set. Syntax: Return the currentTim2 min readHTML DOM Audio defaultMuted PropertyThe Audio defaultMuted property is used for setting or returning whether the audio should be muted by default or not. The audio defaultMuted property cannot change the current mute state, it only affects the default muted state. Syntax: Return the deafaultMuted property:audioObject.defaultMutedSet t2 min readHTML DOM Audio defaultPlaybackRate PropertyThe Audio defaultPlaybackRate property is used for setting or returning the default playback speed of the audio. The Audio defaultPlaybackRate property only changes the default playback speed, not the current playback speed. Syntax: Return the defaultPlaybackRate property:audioObject.defaultPlayback2 min readHTML DOM Audio duration PropertyThe Audio duration property is used for returning the length of audio. The Audio duration property returns the value in seconds. Different browsers return different precision values such as safari returning up to 14 decimal places followed by Opera returning up to 9 decimal places. The Audio duratio2 min readHTML DOM Audio ended PropertyThe Audio ended property is used for returning whether the playback of the audio has ended or not. When the playback position is at the end of the audio, we consider the audio has ended. The Audio-ended property returns a boolean true if the audio has ended, else it returns false. The Audio ended pr1 min readHTML DOM Audio loop PropertyThe Audio loop property is used for setting or returning whether an audio should start playing over again when it is finished or not. Syntax: Return the loop property:audioObject.loopSet the loop property:audioObject.loop = true | false Property Values: true | false: It is used to specify whether th2 min readHTML DOM Audio/Video Complete ReferenceHTML DOM Audio/Video properties and methods allow developers to control audio and video elements programmatically.These controls include playing, pausing, stopping, and adjusting volume.DOM methods enable dynamic interaction and customization of media elements.They enhance the user experience by off2 min readHTML 5HTML5 | IntroductionHTML5 is the fifth version of Hypertext Markup Language (HTML), a standard language used to structure webpages. It defines how content on a webpage should be structured and displayed. Here are some key points of HTML5Multimedia Support: Embeds audio and video without plugins.New Form Controls: Inclu11 min readHTML Spell CheckThe Spell Check feature in HTML is used to detect grammatical or spelling mistakes in the text fields.The Spell Check feature can be applied to HTML forms using the spellcheck attribute. The spellcheck attribute is an enumerated attribute that defines whether the HTML element will be checked for err2 min readHTML5 Complete ReferenceHTML (HyperText Markup Language) is the standard language used to create and design web pages. It defines the structure and layout of a webpage using a series of elements and tags.HTML5 is the latest version of HTML, bringing significant improvements for building modern web applications.It introduce8 min readHTML 5 MathMLHTML5 MathML IntroductionMathematical Markup Language (MathML) is an XML-based markup language designed to represent mathematical expressions and formulas on web pages. It is an integral part of HTML5, allowing browsers to display mathematical content without the need for additional plugins or images.Importance of MathML in5 min readHTML5 MathML <maction> tagThe HTML5 MathML <maction> tag is an inbuilt element of HTML5, that is used to show the bind action of any expression. You can use any selection attribute with this element. Syntax: <maction> child elements </maction> Attributes: The <maction> tag accepts below-mentioned attr2 min readHTML5 MathML <math> tagThe MathML <math> tag in HTML5 is the most prioritized element. Whatever MathML element you want to use should be wrapped inside of the <math> tag. Syntax: <math> child elements </math> Attributes: The tag accepts some attributes which are listed below: class|id|style: This a2 min readHTML5 MathML <menclose> TagThe HTML5 MathML <menclose> tag tag is an inbuilt element in HTML5. It is used to renders the contents which is inside of anbenclosing notation specified by the notation attribute. Syntax: <menclose attribute="value "> child elements </menclose">Attributes: The tag accepts some att2 min readHTML5 MathML <merror> TagThe HTML5 MathML <merror> tag tag is an inbuilt element in HTML5 which is used to wrap the expression in a box, makes that expression eye-catching. This tag is used to display the error message. Normally it alone can't just pop out when your MathML markup is wrong or any kind of error occurs,2 min readHTML5 MathML <mfenched> tagThe MathML <mfenched> tag in HTML5 is used to add custom open and closing parentheses. Like you can open any parentheses and can close different brackets and separators. Syntax: <mfenced open="parentheses" close="parentheses" separators=" "> child elements</mfenced>Attributes: This1 min readHTML5 MathML <mfrac> tagThe HTML5 MathML <mfrac> tag is an inbuilt element in HTML5. It is use to add fraction symbol between two digits or equations. Syntax: <mfrac> numerator denominator </mfrac> Attributes: This tag accepts below mentioned attribute: bevelled: This attribute holds the value how the fra2 min readHTML5 MathML <mglyph> TagThe MathML <mglyph> tag in HTML5 is used to print non-standard symbols. It is used only for those characters or symbols that are not available on Unicode characters. Syntax: <mglyph src="pathe" alt="" width="value" height="value"/>Attributes: This tag accepts some attributes which are li1 min readHTML5 MathML <mi> TagThe MathML <mi> tag in HTML5 is used as an identifier such as any kind of symbol or function. You can put any statement inside this tag. Syntax: <mi> element </mi> Attributes: This tag accepts some attributes which are listed below: class|id|style: This attribute is used to hold th2 min readHTML5 MathML <mlabeledtr> tagThe MathML <mlabeledtr> tag in HTML5 is used to represent a label in a row, either on the left or on the right side inside of the <mtable> element. Child of this element is similar to normal table followed by m like <td> become <mtd>. Syntax: <mlabeledtr> element </m2 min readHTML5 MathML <mmultiscripts> TagThe MathML <mmultiscripts> tag in HTML5 is used to create multi-dimensional matrices. The degree depends on the conditionality of a representative array. As a number/digit is a 0-dimensional array. 1st order Tensor and 2nd order tensor as a squire matrices will represent a 1-dimensional array.2 min readHTML5 MathML <mn> TagThe MathML <mn> tag in HTML5 is used to display a numeric character which is normally a sequence of digits with a possible separator. It contains the arbitrary character and used like 4 as Four. Syntax: <mn> Numeric </mn>Attributes: It accepts some attributes which are listed below2 min readHTML5 MathML <mo> TagThe MathML <mo> tag in HTML5 is used print operator between elements. Any kind of mathematical operator can be used by this tag. Syntax: <mo> operator </mo>Attributes: This tag accepts some attributes which are listed below: accent: This attribute is used to specifies whether the o3 min readHTML5 MathML <mover> TagThe HTML5 MathML <mover> tag is an inbuilt tag in HTML5. This tag is used to attach an accent or a limit over an expression. Syntax: <mover> base overscript </mover>Attributes: This tag accepts below mentioned attributes: class|id |style: This attribute holds the styles of the chil1 min readHTML5 MathML <mpadded> TagThe MathML <mpadded> tag in HTML5 is used to add extra padding and to set the general adjustment of position and size of enclosed contents. Syntax: <mpadded attribute="value"> </mpadded> Attributes: class|id|style: This attribute is used to hold the styles of the child elements.mat2 min readHTML5 MathML Complete ReferenceThe MathML comes in HTML5. The current MathML version is 3. It was introduced in the year 2015. MathML stands for Mathematics Markup Language. It is used to represent mathematical equations or expressions in web browsers, like other HTML elements. MathML is used to describe mathematics as a basis fo3 min readHTML CourseIntroduction to HTML and CSS | Learn to Design Your First Website in Just 1 WeekReady to Design Your First Website in Just 1 Week? With this guide, learn how to build a simple yet stylish website in just one week to gain skills and confidence.This is an introduction course to HTML and CSS which will help you learn all about the basics of HTML and CSS needed to begin with Web De4 min readHTML Course | Structure of an HTML DocumentHTML (Hypertext Markup Language) is used in over 95% of websites and is the foundation of all web pages. It provides the basic structure and content layout. For beginners in web development, learning HTML is the essential first step. Structure of an HTML DocumentWhat is an HTML Document?HTML is a ma4 min readHTML Course | First Web Page Printing Hello WorldSo far, we have already learned about the structure of an HTML document, tags, etc in the previous module. Let us use this knowledge to create our first web page.Here, we are creating a simple webpage that displays a "Hello World" message as the perfect starting point. This exercise will help you un2 min readHTML Course | Basics of HTMLNow that you've created your first "Hello World" webpage, it's time to learn some important concepts of HTML. In this chapter, we’ll cover basic elements that add content and structure, including paragraphs, images, lists, attributes, comments, and more. Table of ContentHTML Paragraph HTML Horizonta6 min readHTML Course | Starting the Project - Creating DirectoriesNow we have understood the important concepts of HTML, it's time to start building a structured web project. In this chapter, you’ll learn how to set up directories and organize files efficiently. It is important to have a well-structured directory for both small and large projects, as it makes your3 min readHTML Course | Understanding and Building Project StructureNow that you've already set up a basic directory structure, it's time to understand and build the basic structure of our project.Course Navigation Understanding and Building Project StructureWe have already created all of the directories needed for our project. Let's just start writing our HTML code3 min readHTML Course | Creating Navigation MenuA navigation menu is the first element we see in any website. It allows users to explore different pages and sections easily. In this chapter, you’ll learn how to create a navigation menu in HTML.Course Navigation HTML Course : Creating Navigation MenuIn the last chapter, we have created the entire6 min readHTML Course | Building Header of the WebsiteThe header is the top part of the website and the important area for branding and navigation. In this chapter, you’ll learn how to build a header with the tags which we have already learnt.Course Navigation HTML Course : Building Header of the WebsiteSo far, we have created the navigation bar for th4 min readHTML Course | Building Main Content - Section 1The main content of a website is where you show the core information that visitors are looking for. This could be text, images, links, or any important details about your services, products, or ideas.Course Navigation HTML Course : Building Main Content - Section 1We just completed building the head4 min readHTML Course | Building Main Content - Section 2In this article, we will build a three-column layout where each column describes a course and includes a "Learn More" button. Using CSS, we’ll arrange the columns side-by-side and will style them accordingly.Course Navigation HTML Course : Building Main Content - Section 2In the last chapter, we beg5 min readHTML Course | Building Main Content - Section 3Adding images to the card makes it more descriptive and engaging. In this section, we’ll create a four-column layout where each column has an image, a title, and a description.Course Navigation HTML course Building Main Content - Section 3In the previous article, we have seen the 3-Column layout and5 min readHTML Course | Building FooterIn this article, we will build the footer for our website. The footer will contain information like contact details, links to social media, and additional navigation links.Course Navigation HTML Course: Building FooterSo, we have completed building all parts of our website except the footer. So, let6 min read Like