Unit 1: HTML Study Guide

10-Mark Questions

Definition: The HTML <a> tag, also known as the anchor tag, is used to create hyperlinks that allow users to navigate between web pages, sections within a page, or external resources like files or email clients. Hyperlinks are fundamental to web navigation and interactivity.

Types of Hyperlinks:

Absolute Hyperlinks: Refers to a complete URL pointing to a resource on the internet or another server. Includes the full protocol (e.g., http:// or https://), domain, and path.
Use Case: Linking to external websites or resources.
Example:
```
<a href="https://www.example.com">Visit Example Website</a>
```
This links to an external website, example.com.
Relative Hyperlinks: Refers to a resource relative to the current page's location. Used for linking to files or pages within the same website.
Use Case: Navigating within the same website.
Example:
```
<a href="about.html">About Us</a>
```
This links to a file named about.html in the same directory.
Anchor Links (Intra-page Links): Links to a specific section within the same webpage using an element's id attribute.
Use Case: Jumping to sections like "Top" or "Footer" on a long page.
Example:
```
<a href="#section1">Go to Section 1</a>
...
<h2 id="section1">Section 1</h2>
```
Clicking the link scrolls to the section with id="section1".
Email Links: Opens the user's email client to compose an email to a specified address. Uses the mailto: protocol.
Example:
```
<a href="mailto:example@example.com">Send Email</a>
```
This opens the default email client with the recipient set to example@example.com.
File Download Links: Links to downloadable files (e.g., PDFs, images, or documents). Uses the download attribute to prompt file download.
Example:
```
<a href="files/document.pdf" download>Download PDF</a>
```
This triggers the download of document.pdf.
Telephone Links: Initiates a phone call when clicked on devices with telephony capabilities. Uses the tel: protocol.
Example:
```
<a href="tel:+1234567890">Call Us</a>
```
This opens the phone dialer with the number +1234567890.

Attributes of the Anchor Tag:

href: Specifies the destination URL or anchor.
target: Defines where the linked resource opens (e.g., _blank for a new tab, _self for the same tab).
title: Provides a tooltip description for the link.
download: Prompts the browser to download the linked file.

Example with Attributes:

<a href="https://www.example.com" target="_blank" title="Visit Example">Example Website</a>

Conclusion: The <a> tag is versatile, enabling navigation across websites, within pages, or to external resources like email or files. Understanding its attributes and types is crucial for creating interactive web pages.

Definition of HTML: HTML (HyperText Markup Language) is the standard markup language used to create and structure content on the World Wide Web. It provides the backbone for web pages by defining elements like headings, paragraphs, links, images, and more. HTML uses tags to structure content, which browsers interpret to render web pages.

Key Features of HTML:

Creates the structure of web pages using elements and tags.
Supports multimedia embedding (images, videos, audio).
Enables hyperlinks for navigation.
Works with CSS (for styling) and JavaScript (for interactivity).

Text Formatting Tags in HTML: Text formatting tags control the appearance and emphasis of text. Below is a detailed list with examples:

<b> (Bold): Makes text bold to emphasize importance.
Example:
```
<p>This is <b>bold</b> text.</p>
```
Output: This is bold text.
<i> (Italic): Italicizes text for emphasis or stylistic purposes.
Example:
```
<p>This is <i>italic</i> text.</p>
```
Output: This is italic text.
<u> (Underline): Underlines text, often used for hyperlinks or emphasis.
Example:
```
<p>This is <u>underlined</u> text.</p>
```
Output: This is underlined text.
<strong> (Strong Importance): Indicates text with strong importance, typically rendered as bold. Semantically emphasizes content over <b>.
Example:
```
<p>This is <strong>strongly emphasized</strong> text.</p>
```
Output: This is strongly emphasized text.
<em> (Emphasis): Emphasizes text, typically rendered as italic. Semantically highlights content over <i>.
Example:
```
<p>This is <em>emphasized</em> text.</p>
```
Output: This is emphasized text.
<sup> (Superscript): Displays text in superscript (smaller and raised).
Use Case: Mathematical expressions, footnotes.
Example:
```
<p>E = MC<sup>2</sup></p>
```
Output: E = MC²
<sub> (Subscript): Displays text in subscript (smaller and lowered).
Use Case: Chemical formulas, footnotes.
Example:
```
<p>H<sub>2</sub>O is water.</p>
```
Output: H₂O is water.
<mark> (Highlighted Text): Highlights text, typically with a yellow background.
Example:
```
<p>This is <mark>highlighted</mark> text.</p>
```
Output: This is highlighted text.
<small> (Small Text): Reduces text size for fine print or less important text.
Example:
```
<p>This is <small>small</small> text.</p>
```
Output: This is small text.
<del> (Deleted Text): Indicates text that has been removed, typically with a strikethrough.
Example:
```
<p>This is <del>deleted</del> text.</p>
```
Output: This is ~~deleted~~ text.

Conclusion: HTML's text formatting tags enhance the presentation and semantic meaning of text, making content more readable and engaging. While some tags (e.g., <b>, <i>) are presentational, others (e.g., <strong>, <em>) provide semantic value, which is important for accessibility and SEO.

Definition: HTML lists are used to group related items in a structured format. They are essential for organizing content like menus, navigation bars, or bullet-pointed information.

Types of Lists in HTML:

Ordered List (<ol>): Displays items in a numbered or sequential order (e.g., 1, 2, 3 or a, b, c). Uses <li> (list item) for each item.
Attributes:
- type: Specifies numbering style (1, A, a, I, i).
- start: Sets the starting number.
- reversed: Displays the list in reverse order.
Example:
```
<ol type="A" start="2">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
```
Output:
B. Item 1
C. Item 2
D. Item 3
Unordered List (<ul>): Displays items with bullets (e.g., circles, squares, or discs). Uses <li> for each item.
Attribute: type (e.g., disc, circle, square), though typically styled with CSS.
Example:
```
<ul type="square">
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>
```
Output:
■ Apple
■ Banana
■ Orange
Definition List (<dl>): Used to display a list of terms and their descriptions. Uses <dt> (definition term) and <dd> (definition description).
Example:
```
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>
```
Output:
HTML
HyperText Markup Language
CSS
Cascading Style Sheets

Nested Lists: Lists within lists (ordered or unordered) for hierarchical data.
Example:

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
    </ul>
  </li>
</ul>

Output:
• Fruits
    • Apple
    • Banana
• Vegetables
    • Carrot
    • Broccoli

Conclusion: HTML lists (<ol>, <ul>, <dl>) provide flexible ways to present structured data. Ordered lists are ideal for sequential items, unordered lists for non-sequential items, and definition lists for term-description pairs. Nested lists add depth for complex data.

Definition: HTML tables are used to display data in a tabular format with rows and columns. The <table> tag, along with its child elements, structures the table.

Elements of an HTML Table:

<table>: The main container for the table. Defines the start and end of the table structure.
Attributes:
- border: Sets the border thickness (e.g., border="1").
- width: Sets the table width (e.g., width="100%").
- cellspacing: Sets space between cells.
- cellpadding: Sets space between cell content and borders.
<tr> (Table Row): Defines a row in the table. Contains <th> or <td> elements.
<th> (Table Header): Defines header cells, typically bold and centered.
Attributes:
- scope: Specifies whether the header applies to a row or column (row, col).
Example: <th scope="col">Name</th>
<td> (Table Data): Defines a standard data cell. Contains the content of the table (text, images, etc.).
<caption>: Provides a title or description for the table, displayed above or below it.
Example: <caption>Student Records</caption>
<thead> (Table Head): Groups header content for better semantics and styling. Contains <tr> and <th> elements.
<tbody> (Table Body): Groups the main content of the table. Contains <tr> and <td> elements.
<tfoot> (Table Footer): Groups footer content, often for summaries (e.g., totals). Contains <tr> and <td> or <th> elements.
Attributes for Merging Cells:
- rowspan: Merges cells across multiple rows.
- colspan: Merges cells across multiple columns.

Example of a Complete Table:

<table border="1" width="50%" cellspacing="5" cellpadding="10">
  <caption>Student Records</caption>
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Marks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>85</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td rowspan="2">90</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bob</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total Students</td>
      <td>3</td>
    </tr>
  </tfoot>
</table>

Output: A table with a caption, headers (ID, Name, Marks), two rows of data, and a footer summarizing the total students. The rowspan merges the "Marks" cell for Jane and Bob, and colspan merges two cells in the footer.

Conclusion: HTML table elements (<table>, <tr>, <th>, <td>, etc.) and attributes (rowspan, colspan, cellspacing, cellpadding) allow for structured and customizable data presentation. Using <thead>, <tbody>, and <tfoot> enhances semantic clarity.

Definition: HTML forms (<form>) are used to collect user input, such as text, selections, or files, and submit it to a server for processing. Forms are essential for interactive web applications like login pages, surveys, or e-commerce checkouts.

Key Elements of HTML Forms:

<form>: The container for form elements.
Attributes:
- action: Specifies the URL where form data is sent.
- method: Defines the HTTP method (GET or POST).
- name: Identifies the form.
- enctype: Specifies how form data is encoded (e.g., multipart/form-data for file uploads).
Example: <form action="/submit" method="POST">
<input>: The most versatile form element for collecting user input.
Attributes:
- type: Specifies the input type (e.g., text, password, radio, checkbox, file, submit).
- name: Identifies the input for form submission.
- value: Sets the default or submitted value.
- placeholder: Displays hint text in the input field.
Example:
```
<input type="text" name="username" placeholder="Enter username">
```
<label>: Associates a label with a form control for accessibility. Uses the for attribute to link to an input's id.
Example:
```
<label for="email">Email:</label>
<input type="email" id="email" name="email">
```
<select> and <option>: Creates a dropdown menu. <select> contains <option> elements for each choice.
Attributes:
- name: Identifies the dropdown.
- multiple: Allows multiple selections.
Example:
```
<select name="country">
  <option value="usa">USA</option>
  <option value="uk">UK</option>
</select>
```
<textarea>: Allows multi-line text input.
Attributes: rows, cols, name, placeholder.
Example:
```
<textarea name="comments" rows="4" cols="50">Enter comments</textarea>
```
<button>: Creates a clickable button for submitting or resetting the form.
Attributes: type (submit, reset, button).
Example:
```
<button type="submit">Submit</button>
```
Other Form Elements:
- <fieldset>: Groups related form elements.
- <legend>: Provides a caption for a <fieldset>.
Example:
```
<fieldset>
  <legend>Personal Info</legend>
  <label>Name: <input type="text" name="name"></label>
</fieldset>
```

Example of a Complete Form:

<form action="/submit" method="POST">
  <fieldset>
    <legend>Registration Form</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email"><br><br>
    <label for="gender">Gender:</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label><br><br>
    <label for="country">Country:</label>
    <select id="country" name="country">
      <option value="usa">USA</option>
      <option value="uk">UK</option>
    </select><br><br>
    <label for="comments">Comments:</label>
    <textarea id="comments" name="comments" rows="4" cols="50"></textarea><br><br>
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </fieldset>
</form>

Conclusion: HTML forms enable user interaction by collecting and submitting data. Elements like <input>, <select>, <textarea>, and <button>, combined with attributes like action and method, create robust and accessible forms for various web applications.

Definition: Frames in HTML allow a webpage to be divided into multiple sections, each displaying a separate HTML document. Frames are created using the <frameset> and <frame> tags, introduced in HTML 4 but deprecated in HTML5 due to accessibility and usability issues. The <iframe> tag is now preferred for embedding content.

Key Elements of Frames:

<frameset>: Defines the layout of frames, replacing the <body> tag.
Attributes:
- rows: Divides the page into horizontal sections (e.g., rows="30%,70%").
- cols: Divides the page into vertical sections (e.g., cols="20%,80%").
Note: Cannot be used with <body> in the same document.
<frame>: Defines an individual frame within a <frameset>.
Attributes:
- src: Specifies the URL of the HTML file to display.
- name: Assigns a name to the frame for targeting links.
- noresize: Prevents users from resizing the frame.
- scrolling: Controls scrollbars (yes, no, auto).
Example:
```
<frame src="menu.html" name="menu" noresize>
```
<noframes>: Provides fallback content for browsers that do not support frames.
Example:
```
<noframes>
  <p>Your browser does not support frames.</p>
</noframes>
```
<iframe> (Inline Frame): Embeds another HTML document within a webpage. Used in HTML5 as a modern alternative to <frameset>.
Attributes:
- src: Specifies the URL of the embedded content.
- width, height: Sets the dimensions of the iframe.
- name: Targets the iframe for links.
- sandbox: Restricts iframe content for security.
Example:
```
<iframe src="https://www.example.com" width="400" height="300"></iframe>
```

Example of Frameset:

<html>
<head>
  <title>Frames Example</title>
</head>
<frameset cols="30%,70%">
  <frame src="menu.html" name="menu">
  <frame src="content.html" name="content">
  <noframes>
    <p>This browser does not support frames.</p>
  </noframes>
</frameset>
</html>

This divides the page into two vertical frames: a 30% wide menu and a 70% wide content area.

Example of iframe:

<html>
<body>
  <h2>Embedded Content</h2>
  <iframe src="https://www.example.com" width="500" height="400" name="example"></iframe>
  <p><a href="https://www.google.com" target="example">Load Google in iframe</a></p>
</body>
</html>

Advantages of Frames:

Allow multiple pages to be displayed simultaneously.
Useful for fixed navigation menus or sidebars.

Disadvantages:

Deprecated in HTML5 (<frameset> and <frame>).
Poor accessibility for screen readers.
SEO issues due to fragmented content.
Replaced by <iframe>, CSS layouts, or JavaScript frameworks.

Conclusion: While <frameset> and <frame> were used in HTML 4 for multi-section layouts, they are obsolete in HTML5. The <iframe> tag is the modern, flexible alternative for embedding content, offering better compatibility with current web standards.

5-Mark Questions

Definition: HTML heading tags (<h1> to <h6>) define headings in a webpage, indicating the importance and hierarchy of content. They are block-level elements used to structure and organize text.

Key Points:

There are six heading levels: <h1> (most important, largest) to <h6> (least important, smallest).
Headings improve readability, SEO, and accessibility by providing a clear content hierarchy.
Search engines use headings to understand page structure.
Screen readers rely on headings for navigation.

Characteristics:

Semantic Importance: <h1> is typically used for the main title, <h2> for subheadings, and so on.
Default Styling: Browsers apply bold text and varying font sizes, which can be customized with CSS.
Nesting: Headings should follow a logical order (e.g., <h1> followed by <h2>, not <h3>).

Example:

<html>
<head>
  <title>Heading Example</title>
</head>
<body>
  <h1>Main Title</h1>
  <h2>Section Title</h2>
  <h3>Subsection Title</h3>
  <h4>Sub-subsection Title</h4>
  <h5>Minor Heading</h5>
  <h6>Smallest Heading</h6>
</body>
</html>

Output:
Main Title (largest, bold)
Section Title (slightly smaller)
Subsection Title (smaller still)
And so on, decreasing in size.

Best Practices:

Use only one <h1> per page for the main title.
Maintain a logical hierarchy (e.g., don't skip from <h1> to <h3>).
Avoid using headings for styling alone; use CSS for visual effects.

Conclusion: Heading tags (<h1> to <h6>) are essential for structuring content, improving SEO, and ensuring accessibility. They provide a clear hierarchy, making web pages more organized and user-friendly.

Definition: Multimedia objects in HTML refer to elements that embed audio, video, images, or other interactive content into a webpage. These enhance user experience by adding dynamic and engaging content.

Key Multimedia Elements:

<img> (Image): Embeds images (e.g., JPEG, PNG, GIF).
Attributes: src, alt, width, height.
Example:
```
<img src="image.jpg" alt="Description of image" width="200" height="150">
```
<audio>: Embeds audio files (e.g., MP3, WAV).
Attributes: src, controls, autoplay, loop.
Example:
```
<audio src="song.mp3" controls>
  Your browser does not support audio.
</audio>
```
Displays an audio player with play/pause controls.
<video>: Embeds video files (e.g., MP4, WebM).
Attributes: src, controls, autoplay, loop, width, height.
Example:
```
<video src="video.mp4" controls width="400">
  Your browser does not support video.
</video>
```

<iframe>: Embeds external multimedia content, such as YouTube videos or maps.
Example:

<iframe src="https://www.youtube.com/embed/videoID" width="560" height="315"></iframe>

<object> and <embed>: Used for embedding multimedia like PDFs, Flash, or other plugins (less common in HTML5).
Example:
```
<object data="file.pdf" type="application/pdf" width="500" height="600"></object>
```

Advantages:

Enhances user engagement with rich media.
Supports accessibility with fallback content (e.g., text inside <audio> or <video>).

Challenges:

Browser compatibility for file formats.
Large files may slow page loading (use compression or lazy loading).
Accessibility requires proper alt text or captions.

Conclusion: Multimedia elements like <img>, <audio>, <video>, and <iframe> make webpages interactive and visually appealing. Proper use of attributes ensures compatibility and accessibility.

Image Tag (<img>):

Definition: The <img> tag embeds images in a webpage, supporting formats like JPEG, PNG, GIF, and SVG.
Attributes:
- src: Specifies the image file path or URL.
- alt: Provides alternative text for accessibility and SEO.
- width, height: Sets the image dimensions.
- title: Displays a tooltip on hover.
- loading: Enables lazy loading (lazy or eager).

Example:

<img src="photo.jpg" alt="A scenic mountain" width="300" height="200" title="Mountain View">

Key Points:
- Self-closing tag (no closing tag needed).
- alt text is critical for screen readers and when images fail to load.
- Use CSS for advanced styling instead of width and height.

Font Tag (<font>):

Definition: The <font> tag was used in older HTML versions to style text (e.g., font size, color, face). It is deprecated in HTML5 in favor of CSS.
Attributes:
- size: Sets font size (1 to 7).
- color: Sets text color (e.g., red, #FF0000).
- face: Specifies the font family (e.g., Arial, Times New Roman).

Example:

<font size="4" color="blue" face="Arial">This is styled text</font>

Modern Alternative: Use CSS properties like font-size, color, and font-family.
Example with CSS:
```
<p style="font-size: 16px; color: blue; font-family: Arial;">This is styled text</p>
```

Conclusion: The <img> tag is essential for embedding images with attributes like src and alt ensuring functionality and accessibility. The <font> tag, while obsolete, was historically used for text styling but is now replaced by CSS for better maintainability and separation of content and presentation.

Definition: The structure of an HTML document is the organized arrangement of elements that defines a webpage's content and layout. It follows a hierarchical structure with specific tags to ensure proper rendering by browsers.

Basic Structure of an HTML Document:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Title</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Components of HTML Structure:

<!DOCTYPE html>: Declares the document as HTML5. Must be the first line to ensure proper browser rendering. Not a tag, but a declaration.
<html>: The root element of the HTML document.
Attribute: lang (e.g., lang="en") specifies the document's language for accessibility.
<head>: Contains metadata and resources for the webpage.
Common elements:
- <meta charset="UTF-8">: Specifies character encoding (e.g., UTF-8 for universal support).
- <meta name="viewport">: Ensures responsive design for mobile devices.
- <title>: Sets the page title displayed in the browser tab.
- <link>: Links to external resources like CSS files.
- <script>: Links or embeds JavaScript.
Example:
```
<head>
  <title>My Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
```
<body>: Contains the visible content of the webpage. Includes elements like headings (<h1> to <h6>), paragraphs (<p>), images (<img>), lists (<ul>, <ol>), and more.
Example:
```
<body>
  <h1>Hello World</h1>
  <p>This is the main content.</p>
</body>
```

Key Points:

HTML documents are tree-like, with elements nested within each other.
Proper structure ensures accessibility, SEO, and compatibility.
Semantic elements (e.g., <header>, <footer>, <article>) enhance clarity in HTML5.

Conclusion: The HTML structure, defined by <!DOCTYPE html>, <html>, <head>, and <body>, provides a standardized framework for creating webpages. Using semantic tags and proper nesting ensures robust, accessible, and maintainable code.

Definition: These are HTML table attributes that control the layout and appearance of tables. They are used with the <table>, <td>, and <th> elements to customize cell merging and spacing.

Rowspan: Merges a cell across multiple rows. Applied to <td> or <th>.
Example: A cell spanning two rows.
Colspan: Merges a cell across multiple columns. Applied to <td> or <th>.
Example: A cell spanning two columns.
Cellspacing: Sets the space (in pixels) between table cells. Applied to the <table> tag.
Note: Replaced by CSS border-spacing in modern web design.
Cellpadding: Sets the space (in pixels) between a cell's content and its borders. Applied to the <table> tag.
Note: Replaced by CSS padding in modern web design.

Example:

<table border="1" cellspacing="10" cellpadding="15">
  <tr>
    <th colspan="2">Header Spanning Two Columns</th>
  </tr>
  <tr>
    <td rowspan="2">Cell Spanning Two Rows</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Output:
- A table with:
- A header spanning two columns (colspan="2").
- A cell in the first column spanning two rows (rowspan="2").
- 10px spacing between cells (cellspacing="10").
- 15px padding inside cells (cellpadding="15").

Modern Alternative: Use CSS for cellspacing and cellpadding:

<style>
  table {
    border-spacing: 10px; /* Replaces cellspacing */
  }
  td, th {
    padding: 15px; /* Replaces cellpadding */
  }
</style>

Conclusion: rowspan and colspan are used to merge cells vertically and horizontally, while cellspacing and cellpadding control spacing. Although still supported, CSS is preferred for spacing in modern HTML for better flexibility and maintainability.

Definition:

Syntactic Tags: Focus on the visual presentation or formatting of content without conveying meaning about its role or purpose (e.g., <b>, <i>). They are often presentational and deprecated in HTML5.
Semantic Tags: Describe the meaning or purpose of content, improving accessibility, SEO, and code clarity (e.g., <header>, <article>). HTML5 emphasizes semantic tags for better structure.

Syntactic Tags:

Used for styling or formatting, not for structural meaning.
Examples:
- <b>: Bold text.
- <i>: Italic text.
- <u>: Underlined text.
- <font>: Specifies font properties (deprecated).
Drawbacks:
- Lack semantic meaning, making content less accessible.
- Deprecated in HTML5; CSS is used for styling instead.
Example:
```
<b>Bold Text</b> <i>Italic Text</i>
```

Semantic Tags:

Define the role or purpose of content, enhancing accessibility and SEO.
HTML5 introduced many semantic tags to replace generic <div> elements.
Examples:
- <header>: Represents introductory content or navigation.
- <nav>: Defines a navigation menu.
- <article>: Represents independent content (e.g., a blog post).
- <section>: Groups related content.
- <footer>: Contains footer information (e.g., copyright).
- <aside>: Represents content indirectly related to the main content (e.g., sidebars).
- <figure> and <figcaption>: For images or diagrams with captions.
Benefits:
- Improves accessibility for screen readers.
- Enhances SEO by clearly defining content structure.
- Makes code more readable and maintainable.

Example of Semantic Tags:

<html>
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </nav>
  </header>
  <article>
    <h2>Blog Post</h2>
    <p>This is the main content of the article.</p>
  </article>
  <footer>
    <p>© 2025 My Website</p>
  </footer>
</body>
</html>

Comparison:

Syntactic: <b>Hello</b> (only styles text as bold).
Semantic: <strong>Hello</strong> (indicates importance, styled as bold by default).

Conclusion: Semantic tags (<header>, <article>, etc.) provide meaningful structure, improving accessibility and SEO, while syntactic tags (<b>, <i>) focus on presentation and are largely deprecated. Modern web development prioritizes semantic HTML with CSS for styling.

10-Mark Questions

1. Explain different types of Hyperlink (or) anchor tag.

2. What is HTML? Explain about text formatting tags in HTML with example.

3. Explain about different types of List in HTML.

4. Explain about different elements to design a table.

5. Explain about forms in HTML.

6. Explain about frames in HTML.

5-Mark Questions

1. Write about document heading tag.

2. Write about multimedia objects.

3. Write about image tag and font tag.

4. Write about structure of HTML.

5. Write about rowspan, colspan, cellspacing, cellpadding with example.

6. Write about syntactic and semantic tags.