- Notifications
You must be signed in to change notification settings - Fork36
Devinterview-io/html5-interview-questions
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
You can also find all 100 answers here 👉Devinterview.io - HTML5
HTML orHyperTextMarkupLanguage is the standard language for creating web pages and applications. HTML5, the latest version as of 2022, introduces several new elements and attributes, elevating user experience and software application standards.
HTML is responsible for structuring web content, ensuring accessibility, and guiding how web pages are visually presented. It remains the foundational structure for running nearly all web content.
- Structuring Content: Tags like
<header>,<footer>, and<section>divide content, streamlining its organization. - Embedding Media: HTML provides tags to incorporate multimedia such as images, audio, and video.
- Form Handling: Interactive sections such as user input forms are defined with input and label tags.
- Hyperlinks: Essential for navigation, hypertext links like
<a>anchor content within or outside the webpage. - Accessibility Features: Semantic tags like
<nav>and<article>not only structure data but also improve accessibility for users relying on screen readers. - Integration of Other Technologies: Can integrate with scripting languages like JavaScript and libraries and frameworks like Bootstrap for enhanced visual appeal.
The primary objective of HTML5 is to improve the language's support for the latest multimedia, while keeping it easily readable by humans. It was designed to be backward and forward compatible, so that content written in previous versions can be seamlessly integrated and interact with content authored in subsequent versions.
HTML5 is engineered to provide more flexibility, control, and aesthetic maturity for web pages and web-based software applications. Web developers can use it to craft modern web interfaces with rich visual and multimedia experiences. It also allows for more responsive and adaptive design, ensuring optimal viewing on a variety of devices and screen sizes. This reflects a broader shift in technology toward a more device-agnostic user experience.
While HTML offers static content,CSS andJavaScript enable additional layers of styling, interactivity, and dynamic content updates. The integration of these three technologies (referred to asHTML-CSS-JS) stands as the trio that forms the backbone of almost all web-based content. They're often presented asHTML5-CSS3-JS to signify unified modern best practices. Online, there's even tools that combine these technologies into a single framework or language such as WebAssembly or Dart. The trio represents a more modular approach, allowing distinct teams to focus on individual layers, streamlining development in larger projects. Mastering their intersection helps in designing a robust and cohesive user experience. This concept is captured by the acronym "PEA", which stands for the Platform (HTML), the Engine (JavaScript), and the Appearance (CSS). Each category focuses on a distinct aspect of user experience.
- Website Development: All traditional web resources, from simple blogs to expansive e-commerce sites, remain based primarily on HTML.
- Web Applications: Web technologies have evolved significantly, allowing for sophisticated applications like Google Docs, Trello, and Slack to run entirely in a web browser. HTML5 has played a pivotal role in this development.
- Advertising & Media: HTML5's advanced media handling tools have made it the standard for online ads and multimedia content.
HyperText Markup Language (HTML) serves as the backbone of web content, defining its structure and semantics. We will now walk you through the fundamental elements of an HTML document.
An HTML document consists of two primary sections: thehead and thebody.
TheDocument Type Declaration (DOCTYPE) is not an HTML tag; it's an instruction to the web browser about what version of HTML the page is written in.
<!DOCTYPE html>This declaration shows that the document is an HTML5 document.
Thehtml element is the root element of an HTML page. It encompasses the entire content, both head and body.
<html><!-- Head and Body Sections Are Nested Inside --></html>
Thehead section provides meta-information about the document. It isn't displayed in the web browser itself but serves various other purposes, from providing a title to linking external resources.
<head><!-- Title and Meta-Tags, Styles, Scripts, etc. --></head>
Thetitle element specifies the document's title, which is displayed in the browser's title bar or tab.
<title>Your Page Title</title>
Thebody section encapsulates the document's visible content—what users see and interact with.
<body><!-- Content Visible to Users: Headings, Paragraphs, Images, etc. --></body>
Document Type (DOCTYPE) and thelang attribute play crucial roles in our webpages.
- Specifies the HTML or XHTML version used in the document.
- Identifies parsing method and algorithm for the web browser, affecting consistency.
The<!DOCTYPE> declaration is placed at the very top of the HTML file, even before the<html> tag begins.
<!DOCTYPE html><html><head><title>Page Title</title></head><body><!-- Content --></body></html>
Thelang attribute, present in the HTML tag, specifies the primary language used in the document. Its value is a primary language subtag as defined in RFC 5646 (BCP 47) and it can include a valid language code, a valid language code followed by a valid region code, or simply "und" for unspecified language.
<!DOCTYPE html><htmllang="en-US"><head><title>Page Title</title></head><body><h1>Welcome</h1><p>This is a demo page.</p></body></html>
While the<head> and<body> tags are fundamental to every HTML document, they serve distinct purposes and are located in separate areas of the web page.
- Head: Houses meta-information, such as document title, character encoding, and stylesheets, all of which are essential for page setup but not visible to the user.
- Body: Contains the bulk of visible content, including text, images, videos, links, and more.
- Head: Precedes the body and provides setup before actual content is rendered.
- Body: Follows the head section and encompasses all visible content.
- Head: Typically links to CSS files or may have inline CSS, contains the document title, any JavaScript reference, character set declaration, and meta tags.
- Body: Holds structural components like headers, navbars, articles, sections, and the footer, along with visual content like images and visible text.
<head> Section:
<!DOCTYPE html><html><head><metacharset="UTF-8"><linkrel="stylesheet"type="text/css"href="styles.css"></head><body><!-- Content Here --></body></html>
<body> Section:
<!DOCTYPE html><html><head><metacharset="UTF-8"><linkrel="stylesheet"type="text/css"href="styles.css"></head><body><header><h1>Welcome!</h1><nav><ul><li><ahref="#">Home</a></li><li><ahref="#">About</a></li><li><ahref="#">Contact</a></li></ul></nav></header><section><h2>Recent Posts</h2><article><h3>Post Title</h3><p>Post content goes here.</p></article></section><footer><p>© 2023 MySite</p></footer></body></html>
Meta tags provide metadata about a web page through information invisible to visitors but essential for search engines, social media, and other web technology. This metadata includes details such as the page's title, keywords, and description.
Meta Description: A concise summary of the page's content, often used in search engine results.
Meta Keywords: Historically used to specify relevant keywords for the page, but they have been largely deprecated due to abuse by spammers.
Meta Robots: Directs search engine bots on how to interact with the page, such as index it for search results, follow its links, or refrain from both.
Meta Viewport: Crucial for responsive design, it guides the browser on how to scale and display the page, especially useful for mobile devices.
Meta Charset: Defines the character encoding used on the webpage, ensuring text is displayed correctly.
Meta Author: Identifies the page's creator or author.
Open Graph, Twitter Cards: Specialized meta tags used by social platforms like Facebook and Twitter to optimize page sharing.
Canonical URL: Indicates the preferred URL when a page can be accessed through multiple paths.
Refresh and Redirect: Older, less common meta tags that dictate page behavior.
Here is the HTML code:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="description"content="This is a sample web page with a concise description."><metaname="keywords"content="HTML, meta tags, web design, SEO"><metaname="author"content="John Doe"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Sample Web Page</title></head><body><!-- Page content goes here --></body></html>
With search engines evolving, many tags have diminished in significance. Here's the current state:
- Still Relevant: Meta Description, Viewport, Charset, Author, and Canonical
- Limited Effect: Keywords, Refresh, and Robots
- Specialized Fields: Open Graph, Twitter Cards are necessary for tailored content on social platforms
To maintain a robust online presence, focus on high-quality content, user experience, and technical soundness, and don't solely rely on meta tags.
Linking a CSS file to an HTML document is a fundamental step for styling. This is generally done by indicating the CSS file's path in thehead section of the HTML file using<link> tags.
HTML uses the<link> tag tointegrate external resources such as CSS files.
<linkrel="stylesheet"href="path/to/style.css">
rel: Specifies the type of relationship between the current document and the linked file. For CSS, it should be set to "stylesheet".
href: Points to the location of the external CSS file. This can be via anabsolute URL (i.e.,
http://...) or arelative path to the HTML file.type: Supplied for legacy purposes but is not required given the file is a CSS file.
Here is the HTML code:
<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href="path/to/style.css"></head><body><!-- Body content --></body></html>
To link a JavaScript file to an HTML document, you need to use the<script> HTML tag. There are two primary ways to do this:
- External Script File: Link a separate JavaScript file to your HTML document.
- Inline Script: Embed JavaScript code directly within your HTML file.
To use an external JavaScript file, follow these steps:
Create the JavaScript File: Save your JavaScript code in a separate file with a
.jsextension. For example,script.js.Link the JavaScript File to your HTML Document: Add the following code within the
<head>or at the end of the<body>section of your HTML file.<scriptsrc="path-to-your-js-file.js"></script>
Replace
path-to-your-js-file.jswith the actual path to your JavaScript file.
Placement: It's good practice to place your
<script>tags at the end of the<body>section, just before the closing</body>tag. This ensures that the HTML content loads first, which can improve the website's initial rendering speed.Syntax: The HTML5 specification does not require a closing tag for the
<script>element.
You can also include JavaScript directly within your HTML file. This is called an "inline script." To do this, encase your JavaScript code within<script> tags, like this:
<script>// Your JavaScript code goes here</script>
Content Separation: For better code organization, it's often better to keep your JavaScript in a separate file, especially for larger applications.
Caching: When using an external JavaScript file, the browser caches the script, which can speed up your site on subsequent visits. However, if the script changes often, this caching can be a problem.
Maintainability and Reusability: Utilizing an external JavaScript file allows for better code management, reusability, and ease of making updates or fixes across multiple HTML files.
Here is the code:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scriptsrc="path-to-your-js-file.js"></script></head><body><!-- Your content here --><script>// Inline JavaScript code here.</script></body></html>
To add acomment in HTML, wrap it between<!-- and-->.
For example:
<!-- This is a comment --><p>Hello, World!</p>
Comments ensure clear code comprehension and can be used for:
- Instructions: Guiding developers on next steps.
- Documentation: Articulating intricate code segments.
- Debugging: Temporarily removing portions for bug testing.
- Reminders: Highlighting sections for later revision.
- Purposeful Clarity: Comments must explain what the code does, not how. Code and inline comments should clarify how the code works.
- Relevance: Avoid stating the obvious and focus on unique or complex components.
- Conciseness: Keep comments brief to reduce visual clutter.
- Regular Maintenance: Update or remove outdated comments to maintain accuracy.
- Trivial Cases: Comments like "wrapper" or "
tag" denote the obvious.
- Self-Explanatory Code: Writingself-descriptive code eliminates the need for specific comments.
Let's discuss thebest practices for serving web pages in multiple languages and the corresponding HTML5 tag,<html lang="en">.
For serving content in multiple languages and optimizing accessibility and search engine performance, you should use thelang attribute on the<html> tag. This is considered abest practice, even if the page is only in English.
<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Your Website</title></head><body><!-- Page content here --></body></html>
Most languages follow the two-letter ISO 639-1 code, such as "en" for English or "es" for Spanish. Some languages also use an extended ISO 639-2 or 639-3 code, which might require three to four letters, like "por" for Portuguese.
For dialects or region-specific content, you can use a hyphen, followed by an ISO 3166-1 alpha-2 country code. For instance:
- "en-GB" for British English
- "es-ES" for Spanish as spoken in Spain
- "pt-BR" for Brazilian Portuguese
- "pt-PT" for European Portuguese
Understand that while thelang attribute assists in accessibility, user agents may not always recognize or act upon these subtags.
Serving content in multiple languages comes with SEO responsibilities. One common practice is to assign alanguage-specific URL for each version of your content. In addition to this, utilize human-readable URLs to effectively comminicate the language and the content topic/design.
For instance, use:
example.com/en-US/aboutfor pages in American English.example.com/es-MX/sobrefor those in Mexican Spanish.
This technique requires further validation and clearance upon implementation as a lot is dependent on SEO constraints and localized content.
Data attributes in HTML5, often referred to asdata-* attributes, help embed custom data within HTML elements. This presents a powerful tool for web developers, facilitating streamlinedJavaScript andCSS operations.
Accessibility: Data attributes are easily accessible through the
datasetAPI in JavaScript.Ignoring formatting tactics: In places where content served by backend, cannot assume the content to always be JSON encoded, shortened, or have odd formatting.
Data Isolation: For better maintenance of web documents. Data attributes have clear, defined roles within HTML.
Here is the HTML & #"auto" data-snippet-clipboard-copy-content="<div id="user" data-name="John Doe" data-age="25"></div><script> const userDiv = document.getElementById('user'); console.log(userDiv.dataset.name); // Output: "John Doe" console.log(userDiv.dataset.age); // Output: "25"</script>">
<divid="user"data-name="John Doe"data-age="25"></div><script>constuserDiv=document.getElementById('user');console.log(userDiv.dataset.name);// Output: "John Doe"console.log(userDiv.dataset.age);// Output: "25"</script>
Custom Content for DOM Elements: For attaching extra information or configuration settings exclusively relevant to an HTML element.
Example: A
divmay have adata-show-tooltipattribute set totrueto indicate it should display a tooltip.Interactivity Configuration: When working with user-made widgets, data attributes can specify how they behave in a more structured, intended manner. Useful in contexts where individual DIV or section blocks have interactivity toggles, or categories.
E-Commerce & Web Products: To store product-specific IDs or additional details as they pertain to the DOM representation of a product in a catalog.
Styling Signifiers: You can leverage data attributes in CSS for different types of styling like category colors, hover effects, or even in JavaScript-based CSS declarations.
The<b> and<strong> tags areboth used for text emphasis in HTML, but they have different semantic meanings.
- The purpose of the
<b>tag is to make the textbold, mainly for visual styling. - The
<strong>tag, on the other hand,semantically emphasizes the text, indicating its importance.
The use of semantic tags like<strong> is beneficial for components like screen readers, browsers, and search engines, which can provide better user experience or understanding of content with proper emphasis.
In the HTML, the content "Caution" is visually bold and the content "Urgent Notice!" is both visually bold and semantically strong.
<p><b>Caution</b>: This action cannot be undone.<br><strong>Urgent Notice!</strong> Please save your work before proceeding.</p>
- Visual Styling is usually left to CSS.
<b>should be used with caution, if at all, as it becomes redundant in many scenarios due to CSS's wide adoption. - Semantic Tags like
<strong>provide context, clarity, and accessibility to the content.
Let's see the difference between 'em' and 'i' HTML tags.
The 'em' tag italicizes the text by default and should be reserved for occasions when emphasis is needed.
One potential usage could be for interactive instructions:
<p><strong>Press</strong><em>Enter</em> to submit.</p>
The 'i' tag, oritalics tag, is often avoided for text styling. Instead, consider semantic HTML, CSS, or more explicit HTML options like<em> for emphasis, when possible.
Here's an example of<em> combined with CSS for an additional bit of fluorescence.
<p>His<emstyle="background-color: yellow; color: red;">anger</em> was palpable.</p>
Thesmall,s, andmark HTML5 tags are used toalter the structure and presentation of text content.
The<small> tag indicates that the enclosed text is of lesser importance, typically used forfine print, legal disclaimers, copyright notices, etc.
Here are examples:
<footer><small>© 2022 Company Name</small></footer>
The<s> tag, which stands for "strike," is a non-semantic, obscure tag that is often replaced with a more meaningful tag, such as<del> for "deleted" content. However, it still visuallystrikes out its content.
<p>Your discount code is:<s>EXPIRED123</s></p>
Your discount code is:EXPIRED123
The<mark> tag is used tohighlight orset apart text without specifying any additional semantic information.
<p>Important: Please<mark>schedule your appointment</mark> at least 48 hours in advance.</p>
Semantic HTML tags provide both structure and meaning to web content. They allow crawlers, browsers, and even assistive technologies to understand content better and present it more effectively. This approach improves accessibility and search engine optimization, making pages easier to maintain and understand.
SEO and Accessibility: Employing semantic tags improves your page's search engine ranking and ensures it's accessible to all users, including those with disabilities.
Consistent Structure: Semantic tags establish a cohesive layout, vital for large websites or platforms.
Relevance to Bots and Crawlers: Search engine algorithms dissect web pages more accurately when content is correctly labeled.
Content Division: Segregating content by their meaning makes the document more understandable and maintainable.
<p>: A paragraph.<h1> - <h6>: Headings, with 1 (highest) to 6 (lowest) levels.<ul> / <ol>: Unordered or ordered list.<li>: List item inside a list.<a>: Anchor, used for links.<img>: An image.<figure> / <figcaption>: For a figure such as an image, with accompanying caption.
While essential tags like<header> and<footer> indicate crucial sections, many are optional based on the website's nature or the page's segregation needs. For example, a blog may require the<article> tag, while a retail site might not.
In modern web development, the clear distinction offered by semantic tags is invaluable for quick comprehension and maintenance, yielding superior results for both users and developers.
Consider the before and after examples to see the impact of semantic tags.
<divclass="nav"><divclass="logo"><ahref="#">Logo</a></div><divclass="nav-links"><ahref="#">Home</a><ahref="#">About</a><ahref="#">Contact</a></div></div><divclass="main-wrapper"><divclass="image"><imgsrc="image.jpg"alt="A beautiful landscape"></div><divclass="content"><h3>Welcome</h3><p>Some welcome text here.</p></div></div><divclass="footer"><p>© 2022 Company Name</p></div>
<header><divclass="logo"><ahref="#">Logo</a></div><nav><ahref="#">Home</a><ahref="#">About</a><ahref="#">Contact</a></nav></header><main><figure><imgsrc="image.jpg"alt="A beautiful landscape"><figcaption>A beautiful landscape</figcaption></figure><section><h1>Welcome</h1><p>Some welcome text here.</p></section></main><footer><p>© 2022 Company Name</p></footer>
In HTML, to create aparagraph, use<p>...</p> tags, and to insert aline break, use<br> tag.
Traditional paragraph formatting in HTML is achieved using the<p> tag. The browser's default styling generally addsspacing to the top and bottom of each<p> element, creating distinct paragraphs.
<p> This is an example of a paragraph. The text enclosed within the <p> tags represents a single paragraph.</p>
This is an example of a paragraph. The text enclosed within the <p> tags represents a single paragraph.
To insert a simple line break in an HTML document, use the<br> tag. This tag doesn't require a closing equivalent.
First Line<br>Second Line
First Line
Second Line (This text doesn't render the line break; it's just to show the raw HTML.)
In HTML, the<textarea> tag allows the input of several lines of text. Nonetheless, it does not auto-format for paragraphs. Itwraps text instead, and vertical scroll bars might be enabled, based on the template and content.
<textarearows="4"cols="50">This is a multi-line text area.It doesn't automatically create separate paragraphs.Text wraps based on dimensions supplied.</textarea>
<textarearows="4"cols="50">This is a multi-line text area.It doesn't automatically create separate paragraphs.Text wraps based on dimensions supplied.</textarea>
Explore all 100 answers here 👉Devinterview.io - HTML5
About
🟣 HTML5 interview questions and answers to help you prepare for your next technical interview in 2025.
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.