What is the basic structure of an HTML5 document?

Includes , , (metadata), and (visible content).

What is HTML? HTML5 Structure, Elements, Tags & Best Practices Explained

Q: What is HTML?

HyperText Markup Language - the standard language for structuring web content using tags and elements.

Q: What is the purpose of the viewport meta tag?

Ensures responsive design by controlling layout on mobile devices.

Q: What are semantic HTML elements?

Elements like , , , that describe meaning for better accessibility and SEO.

Q: How does HTML differ from CSS and JavaScript?

HTML structures content, CSS styles it, JavaScript adds interactivity.

Q: Why is HTML optimization important?

Improves load speed, performance, accessibility, and SEO.

1. What is HTML?

HTML (HyperText Markup Language) is the standard language for structuring web content. It defines the structure of web pages using elements such as headings, paragraphs, links, images, and more.

2. Why is HTML optimization important?

Optimized HTML reduces file size, improves rendering speed, enhances browser performance, and ensures accessibility, leading to faster and more efficient web pages and a better user experience.

3. Give a real-world analogy for HTML.

HTML is like the blueprint of a building. Optimization is like streamlining the blueprint to use fewer resources, making construction faster and more efficient, while keeping the structure functional and accessible.

4. Write the basic structure of an HTML5 document.




  
  
  Page Title

5. What is the purpose of `<head>` and `<body>`?

<head>: Contains metadata, title, links to CSS/JS files, and other information not displayed on the page.
<body>: Contains the visible content of the web page, such as text, images, and headings.

6. What is the role of the `<title>` tag?

The <title> tag sets the title of the web page, which appears on the browser tab and in search engine results.

7. How do you center content using CSS in HTML?

This centers content both horizontally and vertically.

8. What is the purpose of the viewport meta tag?

It makes the webpage responsive by controlling the page’s dimensions and scaling on different devices.

9. What are headings in HTML and how many levels are there?

Headings are defined using <h1> to <h6>. <h1> is the most important, <h6> the least. They structure content hierarchically.

10. What is the difference between inline, internal, and external CSS?

Inline CSS: Added directly to an element using the style attribute.
Internal CSS: Written inside <style> tags in the <head>.
External CSS: Written in a separate .css file and linked using <link>.

11. What are semantic HTML elements?

Semantic elements clearly describe their meaning and structure. Examples include <header>, <footer>, <article>, <section>.

12. Write a simple HTML page with a heading “Code Verse”.




  
  
  Code Verse
  


  Code Verse

13. How does HTML differ from CSS and JavaScript?

HTML: Structures content
CSS: Styles content (colors, layout, fonts)
JavaScript: Adds interactivity (animations, events, dynamic content)

14. What is a hyperlink in HTML and how do you create it?

A hyperlink connects one page to another. Example:

Visit Example

15. What is the purpose of `<!DOCTYPE html>`?

It tells the browser that the document is HTML5, ensuring proper rendering.

16. What is the default display style of `<h1>`?

Block. It occupies the full width of its container and starts on a new line.

17. How can HTML impact SEO?

Optimized HTML improves search engine ranking by using proper headings, semantic elements, meta tags, and clean structure.

18. Name three metadata tags in HTML.

<meta charset="UTF-8"> → character encoding
<meta name="viewport" content="width=device-width, initial-scale=1.0"> → responsiveness
<meta name="description" content="Page description"> → SEO description

19. What are empty (self-closing) tags in HTML? Give examples.

Empty tags do not have closing tags. Examples:

<br> → line break
<img src="img.jpg" alt="Image"> → image
<hr> → horizontal line

20. How can you optimize HTML for faster performance?

Minify code to reduce file size
Remove unnecessary comments and whitespace
Use semantic elements
Combine CSS and JS files where possible