1. HTML Basic Structure

---

DOCTYPE Declaration

The `` declaration informs the browser which HTML version to use for rendering the page.

HTML Element

The <html> element is the root element of an HTML document. The lang attribute specifies the page's language.

<html lang="en">

Head Element

The <head> element contains metadata about the document, including character encoding, viewport settings, and the page title.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
</head>

Common Text Markup

Headings

<h1>Heading 1</h1>
<!-- ... -->
<h6>Heading 6</h6>

Paragraphs

<p>This is a paragraph.</p>

Emphasis and Importance

<strong>Strong Text</strong>
<em>Emphasized Text</em>

Line Breaks and Horizontal Rules

<br>
<hr>

2. Lists

---

Unordered List

- Item 1
- Item 2
- Item 3

Ordered List

1. First Item
2. Second Item
3. Third Item

3. Links and Images

---

Links

<a href="https://example.com" target="_blank">Example Site</a>

Images

![Description](image.jpg)

4. Tables

---

| Header 1 | Header 2 |
|---|---|
| Row 1, Cell 1 | Row 1, Cell 2 |
| Row 2, Cell 1 | Row 2, Cell 2 |

5. Forms

---

HTML forms are a primary way users interact with web pages. They allow users to send data to a server, such as login credentials or search queries. Below are the basic structure and commonly used form elements.

Basic Form Structure

<form action="/submit" method="post">
    <!-- Form content -->
</form>

• <form>: The container for form elements. The action attribute specifies the URL where data is submitted, and the method attribute defines the HTTP method (commonly get or post).

Input Fields

Text Input

<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

• <label>: Defines a label for a form element, associated via the for attribute matching the input's id.
• <input>: The input element. type="text" creates a text field. id and name identify the element, while required makes it mandatory.

Password Input

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

• type="password" hides the entered characters.

Radio Buttons and Checkboxes

Radio Buttons

<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>

• Radio buttons share the same name attribute to form a group where only one can be selected.

Checkboxes

<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>

• Users can select multiple checkboxes.

Dropodwn (Select)

<label for="country">Choose a country:</label>
<select id="country" name="country">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
</select>

• <select>: Creates a dropdown. The name attribute is the field name submitted.
• <option>: Defines an option; value is sent to the server.

Text Area

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50" required></textarea>

• <textarea>: A multi-line text input. rows and cols define its size; required makes it mandatory.

Submit Button

<input type="submit" value="Submit">

• type="submit" creates a button that sends the form data to the server.

6. HTML5 Semantic Tags

---

HTML5 introduced semantic tags that make document structure clearer, benefiting both search engines and developers.

<header>

Defines the header area of a document, typically containing site title, navigation, or branding.

<header>
    <h1>My Website</h1>
    <nav>
        - [Home](#)
- [About](#)
- [Contact](#)
    </nav>
</header>

<nav>

Defines a container for navigation links.

<nav>
    - [Home](#)
- [Products](#)
- [Services](#)
- [Contact](#)
</nav>

<article>

Represents an independent, self-contained content unit, such as a blog post or news article.

<article>
    <h2>Article Title</h2>
    <p>Article content goes here...</p>
</article>

<section>

Defines a section or block within a document, often with a heading.

<section>
    <h2>Section Title</h2>
    <p>Section content goes here...</p>
</section>

<aside>

Defines sidebar content, typically containing supplementary information related to the main content.

<aside>
    <h3>Related Links</h3>
    - [Link 1](#)
- [Link 2](#)
- [Link 3](#)
</aside>

<main>

Defines the primary content of the docuemnt. Only one <main> element should appear per page.

<main>
    <h1>Main Content</h1>
    <p>This is the main content of the page.</p>
</main>

<footer>

Defines the footer, usually containing author information, copyright, or contact details.

<footer>
    <p>&copy; 2023 My Website. All rights reserved.</p>
</footer>

<figure> and <figcaption>

<figure> encapsulates content like images, diagrams, or code. <figcaption> provides a caption.

<figure>
    ![A beautiful image](image.jpg)
    <figcaption>Caption for the image</figcaption>
</figure>

7. Common Interview Questions

---

What is the difference between HTML and XHTML?

HTML is a lenient markup language, while XHTML is a stricter version adhering to XML rules. XHTML requires closing tags and follows more rigorous naming conventions for tags and attributes.

Why is semantic HTML important?

Semantic tags improve code readability and help search engines understand page structure. For example, using <header> and <footer> is clearer than using generic <div> elements.

What are data-* attributes?

Custom data attributes introduced in HTML5 allow developers to store extra information on elements, accessible via JavaScript using dataset property.

<div data-user-id="12345">User</div>