HTML Tutorial: Understanding HTML Tags and Structure

This comprehensive guide introduces HTML (HyperText Markup Language), the foundation of web pages. Learn about HTML tags, their structure, and the difference between opening, closing, and self-closing tags. Understand how to create basic web page elements and build a strong foundation in web development.

HTML and CSS Interview Questions

What is HTML?

Question 1: What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It defines the structure and content of web pages using tags. HTML is interpreted by web browsers to render content visually.

HTML Tags

Question 2: What are HTML Tags?

HTML tags are keywords enclosed in angle brackets (< >) that define elements and their attributes. Tags typically come in pairs: an opening tag and a closing tag (e.g., <p>...</p>). Some tags are self-closing (e.g., <img />).

Unclosed Tags

Question 3: Unclosed HTML Tags

Some HTML tags are self-closing and don't require a closing tag (e.g., <br>, <hr>, <img>, <meta>). These tags define elements that don't contain other content.

HTML Formatting

Question 4: HTML Formatting

HTML uses tags to format text (e.g., <strong> for bold, <em> for italic, <u> for underline, <del> for strikethrough, <ins> for inserted text).

HTML Headings

Question 5: HTML Headings

HTML supports six levels of headings, from <h1> (largest) to <h6> (smallest).

HTML Code

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Hyperlinks

Question 6: Creating Hyperlinks

Use the <a> tag to create hyperlinks. The `href` attribute specifies the URL.

HTML Code

<a href="https://www.example.com">Link Text</a>

HTML Tables

Question 7: HTML Table Tag

HTML tables use <table>, <tr> (table row), <th> (table header), and <td> (table data) tags.

Example Table

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
  </tr>
</table>

Lists

Question 8: Common Lists

HTML list types:

  • <ul> (unordered list)
  • <ol> (ordered list)
  • <dl> (definition list)

HTML Elements vs. Tags

Question 9: HTML Elements vs. Tags

HTML elements represent content. Tags are keywords in angle brackets that mark the start and end of elements.

Semantic HTML

Question 10: Semantic HTML

Semantic HTML uses tags that clearly describe the meaning of content (e.g., <article>, <aside>, <nav>, <footer>). This improves accessibility and SEO.

Image Maps

Question 11: Image Maps

Image maps use the <map> and <area> tags to create clickable regions within an image, linking to different URLs.

Copyright Symbol

Question 12: Copyright Symbol

Use &copy; or © to display the copyright symbol.

Nested Webpages (IFrames)

Question 13: Nested Webpages (IFrames)

HTML Code

<iframe src="https://tutorialsarena.com" height="300" width="400"></iframe>
Output

Displays the tutorialsarena homepage within an iframe.

List Item Formatting

Question 14: Straight List Items

Use proper indentation in your HTML to maintain a clear, structured list format.

Hyperlinks on Images

Question 15: Hyperlinks on Images

You can add hyperlinks to images using the `href` attribute within the anchor tag (`<a>`).

Example

<a href="https://www.example.com">
  <img src="image.jpg" alt="My Image" />
</a>

Style Sheets

Question 16: Style Sheets

Style sheets (CSS) define the presentation of HTML documents. They can be external, internal, or inline.

Multi-Colored Text

Question 17: Multi-Colored Text

(The `<font>` tag is outdated; use CSS for better styling. Example using inline CSS in a span:)

HTML Code

<p>This is <span style="color:blue;">blue</span> text.</p>

Bullet Color

Question 18: Changing Bullet Color

The bullet color is determined by the list item's text color. Use CSS to change the text color.

HTML Layout

Question 19: HTML Layout

HTML5 semantic elements (`<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`) improve structure and semantics.

Marquee Element

Question 20: Marquee

The <marquee> element creates scrolling text (deprecated in HTML5).

Separating Text Sections

Question 21: Separating Text Sections

Use `<br>`, `<p>`, and `<blockquote>` tags to separate text sections.

Background Images

Question 22: Background Images

HTML Code

<body style="background-image: url('image.jpg');">

Empty Elements

Question 23: Empty Elements

Empty elements have no content (e.g., `<br>`, `<hr>`, `<img>`; these are often self-closing).

`span` Element

Question 24: `span` Element

The `<span> tag is a generic inline container used to apply styles or JavaScript to a specific part of an element's content.

HTML Code

<p>This is <span style="color:red;">red</span> text.</p>

`iframe` Element

Question 25: `iframe` Element

The <iframe> element embeds another HTML document within the current page.

What is HTML?

Question 1: What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It uses tags to structure content, making web pages interactive and dynamic.

HTML Tags

Question 2: What are HTML Tags?

HTML tags are keywords enclosed in angle brackets (< >) that define HTML elements. They mark the beginning and end of elements (e.g., <p>This is a paragraph</p>) or are self-closing (e.g., <br />).

Closed vs. Unclosed Tags

Question 3: Do All HTML Tags Have Closing Tags?

No. Some tags are self-closing (e.g., <img src="image.jpg" alt="image" />, <br />, <hr />, <input type="text" />).

HTML Formatting

Question 4: HTML Formatting

HTML uses tags for text formatting (e.g., `<strong>` for bold text, `<em>` for italicized text, `<u>` for underlined text, `<del>` for deleted text, `<ins>` for inserted text).

HTML Headings

Question 5: HTML Headings

HTML provides six heading levels (<h1> to <h6>), with <h1> being the most important heading.

Example

<h1>Main Heading</h1>
<h2>Sub Heading</h2>

Hyperlinks

Question 6: Creating Hyperlinks

The <a> tag creates hyperlinks. The `href` attribute specifies the URL.

Example

<a href="https://www.example.com">Visit Example</a>

HTML Tables

Question 7: HTML Table Tag

HTML tables use <table>, <tr> (table row), <th> (table header), and <td> (table data) tags.

Example Table

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
</table>

Lists in HTML

Question 8: List Types in HTML

List types:

  • <ul> (unordered list): Bulleted list.
  • <ol> (ordered list): Numbered list.
  • <dl> (description list): Term/definition pairs.

HTML Elements and Tags

Question 9: HTML Elements vs. Tags

Elements represent content; tags are the keywords that mark the beginning and end of elements (or are self-closing).

Semantic HTML

Question 10: Semantic HTML

Semantic HTML uses tags that describe the *meaning* of content, not just its appearance. (e.g., `<article>`, `<aside>`, `<nav>`, `<header>`, `<footer>`). This makes your code more meaningful, improves accessibility, and is better for SEO.

Image Maps

Question 11: Image Maps

Image maps use the `<map>` and `<area>` tags to create clickable regions within an image.

Special Characters

Question 12: Copyright Symbol

Use the entity &copy; or © to display the copyright symbol.

IFrames

Question 13: Nested Webpages (IFrames)

HTML Code

<iframe src="https://www.example.com" width="400" height="300"></iframe>
Output

Embeds the example.com webpage into the current page.

HTML Entities

Question 26: HTML Entities

HTML entities represent special characters (e.g., `&lt;` for `<`, `&gt;` for `>`, `&quot;` for `"`) in a way that is understood by the browser even if those symbols are not easily available on your keyboard.

URL Encoding

Question 27: URL Encoding

URL encoding converts non-ASCII characters into a format suitable for transmission over the internet. It replaces special characters with a "%" followed by their hexadecimal representation.

Question 28:

The declaration is not an HTML tag; it's a document type declaration that tells the browser which version of HTML the page uses.

HTML5 Canvas

Question 29: Canvas Element in HTML5

The <canvas> element is a drawing surface. You use JavaScript to draw graphics dynamically onto it.

HTML Code

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

SVG (Scalable Vector Graphics)

Question 30: SVG

SVG (Scalable Vector Graphics) is a vector image format defined in XML. SVG images are resolution-independent and can be scaled without losing quality. They are useful for creating charts, illustrations and other graphics that need to resize while maintaining clarity.

Example SVG

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

New HTML5 Input Types

Question 31: New HTML5 Input Types

HTML5 introduced new input types for improved form validation (email, url, number, tel, date, range, search).

Browser Support for HTML5

Question 32: Browser Support for HTML5

Modern web browsers fully support HTML5.

HTML5 Video and Audio

Question 33 & 34: HTML5 Video and Audio

HTML5 supports video and audio using the <video> and <audio> tags. Common formats include MP4, WebM, and Ogg.

HTML5 Audio Example

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

`progress` vs. `meter`

Question 35: `progress` vs. `meter`

Differences:

  • <progress>: Shows task progress (e.g., file upload).
  • <meter>: Shows a measured value within a known range.

`figure` and `figcaption`

Question 36 & 37: `figure` and `figcaption`

The <figure> element represents self-contained content (like an image, diagram, code). The optional <figcaption> provides a caption.

HTML Code

<figure>
  <img src="image.jpg" alt="Image description" />
  <figcaption>Image caption</figcaption>
</figure>

Button Element

Question 38: Button Tag

The <button> element creates a clickable button.

HTML Code

<button>Click Me</button>

`details` and `summary`

Question 39: details and summary Tags

The <details> and <summary> elements create a disclosure widget; the `<summary>` provides a clickable heading that shows or hides the `<details>` content.

`datalist` Element

Question 40: datalist Element

The <datalist> element provides an autocomplete feature for input fields.

HTML Code

<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>

HTML4 to HTML5 Migration

Question 41: Migrating from HTML4 to HTML5

Migrating from HTML4 to HTML5 involves replacing presentational div tags with semantically meaningful HTML5 tags such as header, nav, article, aside, footer, etc.

HTML4 Example

<div id="header"> ... </div>
<div id="menu"> ... </div>
<div id="content"> ... </div>
<div id="footer"> ... </div>
HTML5 Example

<header> ... </header>
<nav> ... </nav>
<main> ... </main>
<footer> ... </footer>

`required` Attribute

Question 43: `required` Attribute

The `required` attribute in HTML5 makes a form field mandatory; the form cannot be submitted without a value.

HTML Code

<input type="text" name="name" required>

New HTML5 Input Types

Question 44: New HTML5 Input Types

HTML5 added new input types for enhanced form validation (email, url, number, tel, date, etc.).

Question 45: (Continued)

The `` declaration is required for proper HTML5 rendering; omitting it may lead to inconsistent rendering across different browsers.