Neural Sync Active

HTML Basics — Building the Structure of the Web

Registry Synced

HTML Basics — Building the Structure of the Web

930 words

5 min read

Reading compass

Now · 🎯 Learning Objectives

HTML Basics — Building the Structure of the Web

🎯 Learning Objectives

Write a complete HTML document with proper structure
Use common HTML tags (headings, paragraphs, links, images, lists)
Create HTML forms with various input types
Build tables for tabular data
Use semantic HTML elements for better accessibility

1. What is HTML?

HTML (HyperText Markup Language) is the structure of a web page. It uses tags to describe content: headings, paragraphs, links, images, forms, and more. Think of HTML as the skeleton of a webpage — CSS adds the skin (styling), and JavaScript adds the muscles (interactivity).

2. Document Structure


html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

Element	Purpose
``	Declares HTML5
``	Root element
``	Metadata (title, charset, styles, scripts)
``	Page title (shown in browser tab)
``	Visible page content

3. Common HTML Tags

3.1 Text Tags


html
<h1>Main Heading</h1>    <!-- Largest heading -->
<h2>Section Heading</h2>  <!-- Subheading -->
<h3>Sub-section</h3>      <!-- And so on to h6 -->
<p>This is a paragraph of text.</p>
<strong>Bold text</strong>
<em>Italic text</em>
<br>                      <!-- Line break -->
<hr>                      <!-- Horizontal rule / divider -->

3.2 Links and Images


html
<!-- Hyperlink -->
<a href="https://example.com">Visit Example</a>
<a href="/about">About Page</a>           <!-- Relative path -->
<a href="#section2">Jump to Section</a>   <!-- Anchor -->
<!-- Image -->
<img src="photo.jpg" alt="Description" width="300" height="200">
<img src="https://example.com/image.png" alt="External image">

alt attribute is critical — it's shown when the image can't load and used by screen readers for accessibility.

3.3 Lists


html
<!-- Unordered list (bullets) -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<!-- Ordered list (numbers) -->
<ol>
    <li>First step</li>
    <li>Second step</li>
</ol>
<!-- Description list -->
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
</dl>

3.4 Div and Span


html
<div>Block-level container (takes full width)</div>
<span>Inline container (only needed width)</span>

<div> and <span> are generic containers used for styling and layout.

4. HTML Forms

Forms are how users submit data to a server.


html
<form action="/submit" method="POST">
    <!-- Text input -->
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <!-- Email -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <!-- Password -->
    <label for="pwd">Password:</label>
    <input type="password" id="pwd" name="password">
    <!-- Number -->
    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="0" max="150">
    <!-- Select dropdown -->
    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="">--Select--</option>
        <option value="in">India</option>
        <option value="us">United States</option>
    </select>
    <!-- Radio buttons -->
    <label>Gender:</label>
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female
    <!-- Checkbox -->
    <input type="checkbox" name="subscribe" checked>
    <label for="subscribe">Subscribe to newsletter</label>
    <!-- Textarea -->
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4"></textarea>
    <!-- Submit -->
    <button type="submit">Submit</button>
</form>

Form attributes:

action: URL where form data is sent
method: HTTP method (GET or POST)
name: Input name — becomes the key in key=value pair sent to server
required: Field must be filled (HTML5 validation)
placeholder: Hint text inside the input

5. HTML Tables


html


| Name | Age | City |
| --- | --- | --- |
| Alice | 25 | Chennai |
| Bob | 30 | Mumbai |
| Total: 2 people |  |  |

Table attributes: colspan (merge columns), rowspan (merge rows).

6. Semantic HTML (HTML5)

Semantic tags describe their meaning, not just appearance:


html
<header>Site header / navigation</header>
<nav>Navigation links</nav>
<main>Primary content</main>
<section>Thematic section</section>
<article>Self-contained content</article>
<aside>Sidebar / related content</aside>
<footer>Footer / copyright</footer>
<figure>Image with caption</figure>
<figcaption>Caption for figure</figcaption>
<time datetime="2024-01-15">Jan 15</time>

Why semantic HTML matters: Better accessibility (screen readers), SEO (search engines understand structure), and clearer code.

7. Practice Questions

Q1: What does the alt attribute do on an image?

Answer: Provides alternative text when the image can't load, and is used by screen readers for visually impaired users. It also helps SEO. Q2: What's the difference between and?

Answer: <div> is a block-level element (takes full width, starts new line). <span> is inline (takes only needed width, stays in text flow). Q3: What's the difference between method="GET" and method="POST" in forms?

Answer: GET: data in URL query string, visible, cached, limited length. POST: data in request body, not cached, no length limit, can handle file uploads. Q4: What are semantic HTML tags?

Answer: Tags that convey meaning: <header>, <nav>, <main>, <article>, <section>, <footer>, <aside>. They describe content structure rather than just appearance. Q5: What's the purpose of the `` element?

Answer: Associates text with a form input. Clicking the label focuses the input. Improves accessibility and usability. Use for attribute matching the input's id. Q6: How do you create a hyperlink that opens in a new tab?

Answer: Add target="_blank" and rel="noopener noreferrer" for security:
html
<a href="https://example.com" target="_blank" rel="noopener">Open in new tab</a>
Q7: What does colspan="2" do in a table?

Answer: Makes a cell span across 2 columns. Used for header/footer rows that need to stretch across the table width. Q8: Write HTML for a simple login form with username and password fields.
html
<form action="/login" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

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

    <button type="submit">Login</button>
</form>

📐 Key Concepts

Tag	Purpose	Attributes
`-`	Headings
``	Paragraph
``	Link	`href`, `target`
``	Image	`src`, `alt`
``	Data submission	`action`, `method`
``	Input field	`type`, `name`, `value`
``	Tabular data	`border`, `cellpadding`
``	Block container
``	Inline container

🔗 Cross-References

Next: CSS Fundamentals
Related: Flask Forms Join Discord Previous1.1 Web FundamentalsNext1.3 CSS Fundamentals