HTML Interview
How can you embed a YouTube video in HTML?
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen > </iframe> view raw
Tag Syntax
<tag> Content </tag>
What is a HTML element?
An HTML element is defined by a start tag, some content, and an end tag.
What is a HTML tag?
An HTML tag is a piece of markup language used to indicate the beginning and end of an HTML element in an HTML document. HTML Tags are building blocks of HTML Page. They tell the browser how it should display content to the user. A tag starts with a < bracket and ends with a > bracket.
What's the benefit of eliminating white space?
At HTML, a sequence of blank whitespace characters is regarded as a one space-character. The reason being the browser combines multiple spaces to a single-space character & this assists a developer to indent-lines of text minus worrying about numerous spaces & maintaining readability & understandability of HTML-codes
Comments
Comments help one to understand the code. Comments can be added to the code to an HTML document. These aren't displayed in a browser, but they assist one in leaving notes for the developers and yourself as to which section of HTML it's for. Any start of comment is signified by <!- & the end is denoted by →. Everything in the center will be fully ignored, even if it has valid HTML.
What is HTML5
HTML 5 is the fifth and current version of HTML. It has improved the markup available for documents and has introduced application programming interfaces(API) and Document Object Model(DOM).
HTML attributes
HTML attributes are used to describe the characteristic of an HTML element in detail.
What's formatting in relation to HTML?
HTML formatting is a way of format text for a good look & feel. It utilizes various tags which help in making text bold, underlined, and italicized.
What are the key new features in HTML5?
HTML5 introduces a number of new elements and attributes that can help you in building modern websites. Here is a set of some of the most prominent features introduced in HTML5. New Semantic Elements − These are like <header>, <footer>, <section>, <article> and <figure>. Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced for <input> tag. Persistent Local Storage − Web storage facility which provides web application methods to store data on the web browser. WebSocket − A next-generation bidirectional communication technology for web applications. Server-Sent Events − HTML5 introduces events which flow from the web server to web browsers and they are called Server-Sent Events (SSE). Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript. Audio & Video − You can embed audio or video on your web pages without resorting to third-party plugins. Geolocation − Now visitors can choose to share their physical location with your web application. Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics. Drag and drop − Drag and drop the items from one location to another location on the same webpage.
What is HTML
HyperText Markup Language: language used to tell a web browser how to make a page look. It defines the meaning and structure of web content.
HTML autocomplete attribute
It is available on <input> elements that take a text or numeric value as input, <textarea> elements, <select> elements, and <form> elements. The source of the suggested values is generally up to the browser; typically values come from past values entered by the user, but they may also come from pre-configured values. For instance, a browser might let the user save their name, address, phone number, and email addresses for autocomplete purposes. Perhaps the browser offers the ability to save encrypted credit card information, for autocompletion following an authentication procedure. Note: In order to provide autocompletion, user-agents might require <input>/<select>/<textarea> elements to: Have a name and/or id attribute Be descendants of a <form> element The form to have a submit button
What's a marquee in relation to HTML?
Marquee is utilized for scrolling text on a web page. This scrolls the picture or text up, left, right, or down automatically. To use a marquee, one needs to utilize the </marquee> tags.
The difference between a tag and element
Tags are not the elements themselves, rather they're the bits of text you use to tell the computer where an element begins and ends. An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. Whereas HTML tags are used to mark up the start and end of an HTML element.
What is the purpose of the <blockquote> element in HTML?
The <blockquote> element is used to indicate a section of quoted content, such as a quote from another source. It helps distinguish quoted content from the surrounding text. <blockquote> <p>This is a quoted text.</p> </blockquote>
Explain the purpose of the <datalist> element in HTML5.
The <datalist> element provides a list of pre-defined options for an <input> field. It offers autocomplete functionality and helps users select options easily. <input type="text" list="options"> <datalist id="options"> <option value="Option 1"> <option value="Option 2"> <option value="Option 3"> </datalist>
What is the purpose of the <figure> and <figcaption> tags?
The <figure> tag is used to encapsulate media content, such as images or videos, along with an optional caption provided by the <figcaption> tag. It helps associate the media with its description. <figure> <img src="image.jpg" alt="A beautiful landscape"> <figcaption>A breathtaking view of nature.</figcaption></figure>
What is the purpose of the <header> and <footer> tags in HTML5?
The <header> tag represents the introductory content of a section or a page, while the <footer> tag represents the closing content. They are typically used to provide header and footer sections for a webpage.
What is the purpose of the "iframe" tag in HTML?
The <iframe> tag is used to embed external content, such as web pages or videos, within an HTML document. <iframe src="https://www.example.com" width="500" height="300"></iframe>
Explain the purpose of the meter element in HTML5.
The <meter> element represents a scalar measurement within a known range. It is commonly used to display measurements, such as disk space usage or progress indicators. <meter value="75" min="0" max="100">75%</meter>
Meter vs Progress Element
The <meter> tag is similar to the progress tag in HTML but it represents a scalar value of measurement within a specified range. You can call this meter a gauge. The <meter> tag should be used instead of the <progress> tag when you want to display a scalar measurement within a range, for example, disk usage. Purpose. The progress bar is used to provide up-to-date feedback on the progress of a workflow or action. Meter is used to display a value in a range when there is a known minimum and maximum value (scalar measurement).
Explain the purpose of the <nav> tag in HTML5.
The <nav> tag represents a section of a webpage that contains navigation links. It is typically used to mark the primary navigation menu of a website.
What is the purpose of the "progress" element in HTML5?
The <progress> element represents the progress of a task or process, providing a visual indication of the completion percentage. <progress value="50" max="100"></progress>
What is the purpose of the span element in HTML?
The <span> element is an inline container used to group and style elements within a larger block of content. It has no semantic meaning on its own but is useful for styling or targeting specific parts of the content. <p>My name is <span class="highlight">John Doe</span>.</p>
What is the purpose of the "time" element in HTML5?
The <time> element represents a specific point in time or a duration. It helps provide semantic meaning to dates and times on a webpage. <p>My birthday is on <time datetime="1990-05-15">May 15th</time>.</p>
Explain the purpose of the autocomplete attribute in "input" tags.
The autocomplete attribute allows the browser to suggest or remember previously entered values for an input field. It can be set to on or off. <input type="text" name="email" autocomplete="off">
Explain the purpose of the autofocus attribute in "input" tags.
The autofocus attribute allows you to specify that an input field should automatically have focus when the page loads, ready for user input. <input type="text" name="username" autofocus>
Explain the purpose of the contenteditable attribute.
The contenteditable attribute allows elements to be editable by users directly in the browser. It is particularly useful for creating rich-text editors or editable sections on a webpage. <div contenteditable="true"> This content can be edited by the user.</div>
Explain the purpose of the contenteditable attribute in HTML.
The contenteditable attribute allows the content of an element to be editable by the user. It can be applied to any HTML element, enabling rich text editing within the browser. <div contenteditable="true">Editable content</div>
Explain the purpose of the defer attribute in <script> tags.
The defer attribute is used to indicate that the script should be executed after the HTML content has been parsed. It helps improve page load performance by allowing other resources to load in parallel. <script src="script.js" defer></script>
Explain the purpose of the download attribute in <a> tags.
The download attribute allows users to download a linked resource instead of navigating to it. When clicked, the browser prompts the user to save the file with the specified filename. <a href="document.pdf" download>Download PDF</a>
What is the purpose of the hidden attribute in HTML?
The hidden attribute is used to hide an element from being displayed on the webpage. It can be applied to any HTML element. <p>This paragraph is visible.</p><p hidden>This paragraph is hidden.</p>
Explain the purpose of the pattern attribute in <input> tags.
The pattern attribute is used to specify a regular expression pattern that the input value must match. It is commonly used for form field validation. <input type="text" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="XXX-XXX-XXXX">
Explain the purpose of the placeholder attribute in "input" tags.
The placeholder attribute provides a hint or example value for the input field. It is displayed in the field until the user enters a value. <input type="text" placeholder="Enter your name"/>
What is the purpose of the required attribute in form input fields?
The required attribute specifies that an input field must be filled out before submitting the form. <input type="text" name="name" required/>
What is the purpose of the <figure> and <figcaption> tags?
The tag is used to encapsulate media content, such as images or videos, along with an optional caption provided by the <figcaption> tag. It helps associate the media with its description. <figure> <img src="image.jpg" alt="A beautiful landscape"> <figcaption>A breathtaking view of nature.</figcaption> </figure>
Explain the purpose of the target attribute in 'a' tags.
The target attribute specifies where the linked content should be opened. It can be set to _blank to open the link in a new browser tab or window. <a href="https://www.example.com" target="_blank">Open in new tab</a>
Title attribute
The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. The title attribute can be used on any HTML element (it will validate on any HTML element.
How can you add a background image to a webpage using HTML?
To add a background image to a webpage, you can use the background-image CSS property within the <style> tag or in an external CSS file <style> body { background-image: url("background.jpg"); background-repeat: no-repeat; background-size: cover; } </style>
How can you add a background image to a webpage using HTML?
To add a background image to a webpage, you can use the background-image CSS property within the <style> tag or in an external CSS file. <style> body {background-image: url("background.jpg"); background-repeat: no-repeat; background-size: cover; } </style>
How can you create a dropdown menu in HTML?
To create a dropdown menu, use the <select> element along with <option> elements to represent the menu items. <select> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select>
How can you create a dropdown menu in HTML?
To create a dropdown menu, use the element along with elements to represent the menu items. <select> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select>
How can you create a responsive video that adjusts to different screen sizes?
To create a responsive video, use the max-width CSS property and set the height to auto. Wrap the video element in a container to maintain its aspect ratio. <style> .video-container { max-width: 100%; height: auto; } </style> <div class="video-container"> <video src="video.mp4" controls></video> </div>
How can you create a responsive video that adjusts to different screen sizes?
To create a responsive video, use the max-width CSS property and set the height to auto. Wrap the video element in a container to maintain its aspect ratio. <style> .video-container { max-width: 100%; height: auto; }</style> <div class="video-container"> <video src="video.mp4" controls> </video> </div>
How can you create a tooltip for an element using HTML?
To create a tooltip, you can use the title attribute on an HTML element. When the user hovers over the element, the tooltip text will be displayed. <a href="#" title="This is a tooltip">Hover me</a>
How can you embed a YouTube video in HTML?
To embed a YouTube video, use the <iframe> tag with the video's embed code provided by YouTube. <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
How can you embed an SVG (Scalable Vector Graphics) file in HTML?
To embed an SVG file, use the <svg> tag and include the SVG code within it. <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg>
How can you embed an audio file in HTML?
To embed an audio file, use the <audio> element and specify the source file using the src attribute. You can include additional attributes like controls to add playback controls. <audio src="audio.mp3" controls></audio>
How can you make an HTML element draggable?
To make an HTML element draggable, use the draggable attribute and set it to true. You can then define event handlers to control the drag-and-drop behavior. <div draggable="true">Drag me!</div>
How can you create a checkbox input element in HTML?
Use the <input> tag with the type="checkbox" attribute to create a checkbox input element. <input type="checkbox" id="myCheckbox"><label for="myCheckbox">Check me</label>
How can you create a progress bar in HTML?
Use the <progress> element to create a progress bar, and specify the current value using the value attribute and the maximum value using the max attribute. <progress value="50" max="100"></progress>
How can you create a table with HTML?
Use the <table>, <tr>, and <td> tags to create a table structure, where <tr> represents a table row and <td> represents a table data cell. <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>
How can you set the default checked state for a checkbox or radio button in HTML?
Use the checked attribute to set the default checked state for checkboxes and radio buttons. <input type="checkbox" id="myCheckbox" checked/> <label for="myCheckbox">Check me</label>
How can you disable an input field in HTML?
Use the disabled attribute to disable an input field, preventing user interaction. <input type="text" name="name" disabled>
How can you create a hyperlink that sends an email when clicked?
Use the mailto: protocol in the href attribute to create an email link. <a href="mailto:[email protected]">Send email</a>
How can you create a responsive image that scales with the screen size?
Use the max-width CSS property set to 100% to make an image responsive. This ensures that the image's width adjusts to fit the container while maintaining its aspect ratio. <img src="image.jpg" alt="A responsive image" style="max-width: 100%;">
How can you disable the browser's default form validation in HTML?
Use the novalidate attribute on the <form> tag to disable the browser's default form validation. This allows you to implement custom validation logic. <form novalidate> <!-- Form fields --> </form>
How can you create a table with HTML?
Use the table, tr, and td tags to create a table structure, where <tr> represents a table row and td represents a table data cell. <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>
How can you create an ordered list with uppercase Roman numerals in HTML?
Use the type attribute of the <ol> element and set it to "I" to display uppercase Roman numerals. <ol type="I"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
What is the async attribute?
While Parsing HTML, the browser encounters a script, it will block the parsing of the HTML till the script tag is fetched and executed, once the script tag is executed. the browser then resumes its HTML parsing. ASYNC-when we set the attributes to async in the script tag, then when the browser encounters the script tag then it will not halt or stop the HTML parsing, instead, the script tag also starts running parallel but as the name suggests which is Async, it will execute asynchronously . it can execute the script tag before HTML parsing or after HTML parsing when DOM is ready . we mostly use Async script tag where that script tag does not depend on the HTML elements. Async — <script async src="https://javascript.info/article/script-async-defer/long.js"></script>
How can you create an unordered list with custom bullet points using HTML?
You can customize the bullet points of an unordered list using CSS by assigning a specific image or shape to the list-style-image property. <style> ul { list-style-image: url("bullet.png"); } </style> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
How can you create an unordered list with custom bullet points using HTML?
You can customize the bullet points of an unordered list using CSS by assigning a specific image or shape to the list-style-image property. <style> ul {list-style-image: url("bullet.png"); } </style> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>