1. What is HTML?
HTML stands for Hypertext Markup Language, used to create web pages and provide structure to the content on the web.
-
<!DOCTYPE html>: Defines the document as an HTML5 document. -
<html>: The root element wrapping all content. -
<head>: Contains meta-information like character encoding, viewport settings, and page title. -
<title>: Sets the title of the webpage. -
<body>: Contains the visible content of the webpage.
2. Difference Between Tag and Element?
-
Tags are enclosed within angle brackets (
< >). For example,<p>is a start tag for a paragraph, and</p>is an end tag. - Element: Includes both the start tag, content (if any), and the end tag.
3. Types of Lists
There are three types of lists in HTML:
-
Ordered List (
<ol>) -
Unordered List (
<ul>) -
Description List (
<dl>)
Example:
<dl>
<dt>HTML</dt> <!--description term-->
<dd>HyperText Markup Language</dd> <!--description definition-->
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
4. Basic Structure of Tables
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>
5. Difference Between Link and Anchor?
-
<a>(anchor): Creates hyperlinks to other pages.-
href: Specifies the URL. -
target: Specifies where to open the link (e.g., new tab). -
download: Allows file download.
-
-
<link>: Defines relationships between the current document and external resources (e.g., stylesheets).-
rel: Specifies the relationship (e.g.,stylesheet). -
href: Specifies the URL of the external resource.
-
6. What are Attributes?
Attributes provide additional information about HTML elements and are written in the opening tag.
7. Difference Between Inline and Block Elements?
- Block Level Element: Takes up the full width available.
- Inline Element: Takes only the necessary width.
8. Forms
HTML forms allow users to submit data. Forms typically include input elements like text fields, checkboxes, radio buttons, and submit buttons.
-
<form>: Contains action URL and method (GET/POST). -
<input>: Fields for user data. -
<label>: Associates text with input elements. -
<button>: Triggers form submission.
9. <article>
The <article> element is a semantic tag used to represent self-contained and independent content, introduced in HTML5.
10. <aside>
The <aside> element is used for content related to the main content but separate from it (e.g., sidebars).
11. Audio and Video
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
12. <canvas>
The <canvas> element allows for dynamic, scriptable rendering of 2D and 3D graphics.
13. Semantic HTML
Focuses on using tags that describe the meaning of the content, making web pages more accessible and SEO-friendly.
14. Accessibility
Ensures people with disabilities can navigate your website by using semantic tags, alt text for images, and proper form labeling.
15. Best Practices
- Use proper indentation for readability.
- Write meaningful content, like
<title>andaltattributes. - Ensure valid HTML by using W3C Markup Validation Service.
16. CSS Performance Optimization Techniques
When a browser loads a page, it pauses HTML parsing to fetch and apply CSS.
Key Concepts:
- CSS is render-blocking by default, meaning the browser won't render the page until all CSS is loaded.
Optimization Techniques:
- Critical CSS: Inline the minimum CSS needed for above-the-fold content.
<style>
body { margin: 0; }
h1 { color: blue; }
</style>
- CSS Media Attributes: Load CSS conditionally based on device characteristics.
<link rel="stylesheet" href="styles.css" media="screen and (min-width: 600px)">
- Defer Non-Critical CSS: Load non-essential CSS asynchronously.
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
- Minify CSS: Remove unnecessary spaces and comments to reduce file size using tools like CSS-Nano.
17. Loading and Parsing JavaScript
JavaScript can significantly impact page load times, so optimizing how you load and execute JS is crucial.
Key Concepts:
- JavaScript is render-blocking by default.
- Scripts are parsed and executed in the order they appear.
Optimization Techniques:
-
Defer and Async Attributes:
-
defer: Downloads scripts during HTML parsing but executes them after the document is parsed.
<script src="script.js" defer></script> -
-
async: Downloads and executes scripts as soon as they're available (order not guaranteed).
<script src="script.js" async></script>
Place scripts at the end of
<body>: Ensures HTML is parsed before JavaScript executes.Minify and Bundle JS: Use tools like UglifyJS or Terser to reduce file size and improve performance.
18. Preloading vs Prefetching
- Preload: Loads critical assets early.
<link rel="preload" href="critical-styles.css" as="style">
- Prefetch: Downloads resources for future navigation.
<link rel="prefetch" href="next-page.html">
19. Lazy Loading
Delays loading of certain resources until they are needed.
- Lazy Load Images:
<img src="image.jpg" alt="Image" loading="lazy">
- Lazy Load JavaScript:
document.getElementById('load-script').addEventListener('click', () => {
import('./heavy-script.js').then(module => {
// Use the module
});
});
Summary
To optimize CSS and JavaScript loading and parsing:
- Inline critical CSS and defer non-essential styles.
- Use
deferorasyncto prevent render-blocking JS. - Minify and bundle CSS and JavaScript for better performance.
Top comments (0)