HTML Practice - Pre-ReactJS Essentials

<html>, <head>, <body>

These are the foundational building blocks of any HTML document. Understanding their role is essential for building valid web pages.

<html>: The root element that wraps all content on the page.
<head>: Contains metadata, links to stylesheets, scripts, and other non-visible elements like the page title.
<body>: Holds all the content you want users to see, like text, images, and interactive elements.

Example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My First Page</title>
    <style>
      body {
        font-family: sans-serif;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is the body of the HTML document.</p>
  </body>
</html>

React Tip: In React projects, you usually don't write the full HTML skeleton. Tools like create-react-app handle that. You typically write components that go inside the <body>.

// public/index.html
<html lang="en">
  <head>
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Headings and Paragraphs

Headings and paragraphs are the building blocks of textual content in HTML. Use them to structure your document semantically and clearly.

Headings: HTML provides six levels of headings from <h1> to <h6>. <h1> is the most important, typically used once per page for the main title. Use lower-level headings to indicate sub-sections.

Paragraphs: The <p> tag defines a paragraph of text. Browsers automatically add spacing (margin) before and after paragraphs for readability.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Headings and Paragraphs</title>
  </head>
  <body>
    <h1>Welcome to HTML</h1>
    <h2>What is HTML?</h2>
    <p>HTML stands for HyperText Markup Language. It is the standard language for creating web pages.</p>

    <h3>Key Concepts</h3>
    <p>Headings help structure your content, and paragraphs group related sentences into readable chunks.</p>

    <h4>Nested Sections</h4>
    <p>You can use <h4>, <h5>, and <h6> to create deeper content hierarchies.</p>
  </body>
</html>

React Tip: In React, heading and paragraph tags are written the same way as in HTML, but JSX requires self-closing for void tags and camelCase for attributes.

// JSX Example
function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>We build modern web apps with React.</p>
    </div>
  );
}

<div> and <span>

Both <div> and <span> are generic container elements in HTML, but they serve different purposes:

<div> is a block-level element — it starts on a new line and takes up the full width available.
<span> is an inline element — it stays within the flow of surrounding text and only takes up as much width as necessary.

These tags are often used with CSS or JavaScript to style or manipulate content when no semantic tag is appropriate.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Div and Span Example</title>
    <style>
      .highlight {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>This is a block section</h2>
      <p>Here is a <span class="highlight">highlighted text</span> inside a paragraph.</p>
    </div>
  </body>
</html>

React Tip: In React, use <div> and <span> just like in HTML. However, remember that class attributes must be written as className.

// JSX Example
function Alert() {
  return (
    <div className="alert-box">
      <p>Warning: <span className="highlight">Check your input!</span></p>
    </div>
  );
}

<form> — HTML Forms

Forms are used to collect user input. They can contain various elements like <input>, <textarea>, <select>, and buttons.

Key attributes:

action — Where to send the form data (URL).
method — HTTP method to use (GET or POST).
name — Identifier for the form (useful in scripts).

Example:

<form action="/submit" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>

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

React Tip: In React, you handle form data using state and onChange handlers, rather than relying on form submission like in plain HTML.

// React-style controlled form
function ContactForm() {
  const [form, setForm] = useState({ username: '', email: '', message: '' });

  function handleChange(e) {
    setForm({ ...form, [e.target.name]: e.target.value });
  }

  function handleSubmit(e) {
    e.preventDefault();
    console.log(form);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" onChange={handleChange} />
      <input name="email" type="email" onChange={handleChange} />
      <textarea name="message" onChange={handleChange} />
      <button type="submit">Send</button>
    </form>
  );
}

<input> Tag

The <input> element is used to create interactive controls in a form, such as text fields, checkboxes, radio buttons, and more. In HTML, <input> is a self-closing tag and supports various types via the type attribute.

Common type values include: text, password, email, number, checkbox, and radio.

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

  <br /><br />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <br /><br />

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

  <br /><br />

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

React Note: In React, you'd typically control inputs using state and use onChange handlers to track values.

<button> Tag

The <button> element is used to create a clickable button in HTML. It can perform actions like submitting a form, triggering JavaScript, or just acting as a UI element.

A button can have different type values: submit (default, submits a form), reset (resets form fields), and button (does nothing by default, used for custom logic).

<form onsubmit="alert('Form Submitted!')">
  <button type="submit">Submit Form</button>
  <button type="reset">Reset Form</button>
  <button type="button" onclick="alert('Custom Action')">Click Me</button>
</form>

React Note: In React, use <button> with an onClick handler. Always specify the type to avoid unintended form submissions.

<a> (Anchor/Link) Tag

The <a> element defines a hyperlink. It uses the href attribute to specify the URL or location the link should navigate to.

By default, clicking an anchor tag navigates away from the current page. You can also set target="_blank" to open the link in a new tab.

<a href="https://www.example.com">Visit Example</a>
<a href="#section2">Go to Section 2 on this page</a>
<a href="docs.pdf" target="_blank">Open PDF in New Tab</a>

React Note: In React apps, use <Link> from react-router-dom for internal routing instead of <a>, to prevent full page reloads:

import { Link } from 'react-router-dom';

<Link to="/about">Go to About Page</Link>

Lists: <ul>, <ol>, <li>

HTML provides two main types of lists: unordered (<ul>) and ordered (<ol>). Both use <li> tags to define list items.

Unordered List (bullets):

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered List (numbered):

<ol>
  <li>Step 1: Install Node</li>
  <li>Step 2: Setup Project</li>
  <li>Step 3: Start Coding</li>
</ol>

Lists are useful for navigation menus, steps, or grouping content. You can nest lists inside list items too.

React Note: In React, you'll often render lists using map(). Always add a key prop to each list item for performance and tracking:

{items.map((item, index) => (
  <li key={index}>{item}</li>
))}

Images: <img>

The <img> tag is used to embed images in a web page. It is a self-closing tag and requires at least the src (source) and alt (alternative text) attributes.

<img src="https://via.placeholder.com/150" alt="Placeholder Image" />

src: URL or file path of the image.
alt: Describes the image for screen readers and displays if the image can't load.

Example:

<img src="./images/bmcitclub-logo.png" alt="BMC IT Club Logo" width="200" height="200" />

You can also control the size of the image using width and height attributes, or CSS.

React Note: In React, use the <img /> tag similarly, but remember to import static assets:

import logo from './logo.png';

function App() {
  return <img src={logo} alt="Logo" />;
}

Tables: <table>

The <table> element is used to display tabular data in rows and columns. It is structured using:

<thead> – defines the header row
<tbody> – wraps the main table content
<tr> – table row
<th> – header cell (bold and centered by default)
<td> – data cell

Example:

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Arun</td>
      <td>21</td>
    </tr>
    <tr>
      <td>Saroj</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

Tables can be styled using CSS for spacing, borders, alignment, and even responsiveness.

React Note: In React, use JSX syntax and camelCase props like className:

function TableExample() {
  return (
    <table border="1">
      <thead>
        <tr><th>Product</th><th>Price</th></tr>
      </thead>
      <tbody>
        <tr><td>Laptop</td><td>$999</td></tr>
        <tr><td>Mouse</td><td>$25</td></tr>
      </tbody>
    </table>
  );
}

Semantic Tags

Semantic tags clearly describe the meaning of the content inside them. They make your HTML more readable and accessible, which also improves SEO and helps screen readers.

Common Semantic Tags:

<header> – Top of the page or section (typically contains navigation or logo)
<nav> – Navigation menus
<main> – Main content of the page
<section> – Group of related content
<article> – Self-contained content (e.g., blog post)
<aside> – Side content (e.g., ads, links, sidebars)
<footer> – Bottom of the page or section

Example:

<header>
  <h1>My Blog</h1>
</header>

<main>
  <article>
    <h2>Post Title</h2>
    <p>This is a blog post.</p>
  </article>
</main>

<footer>
  <p>© 2025 My Blog</p>
</footer>

React Note: Semantic tags work the same in React—just ensure you use className instead of class when styling:

function BlogLayout() {
  return (
    <>
      <header><h1>React Blog</h1></header>
      <main>
        <article>
          <h2>Hello React</h2>
          <p>React makes UI building easier.</p>
        </article>
      </main>
      <footer><p>© 2025</p></footer>
    </>
  );
}

<meta> Tags

<meta> tags provide metadata about the HTML document—information like character encoding, page description, viewport settings, and SEO-related data. They are always placed inside the <head> element and do not display any content on the page.

Common Uses:

charset – Defines the character encoding (usually UTF-8)
name="viewport" – Controls how the site appears on mobile devices
name="description" – Provides a description used by search engines
name="keywords" – Lists relevant search terms (less used today)
name="author" – Specifies the author of the page
http-equiv – Used for things like setting cache or content type headers

Example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="A beginner-friendly HTML tutorial" />
    <meta name="author" content="CodeCamp" />
    <title>HTML Meta Tags Example</title>
  </head>
  <body>
    <h1>Check the head section for meta tags</h1>
  </body>
</html>

React Note: Meta tags are placed inside the HTML template—not directly in your React components. To manage them dynamically, you can use libraries like react-helmet.

import { Helmet } from 'react-helmet';

function PageHead() {
  return (
    <Helmet>
      <title>My React Page</title>
      <meta name="description" content="This is a React page" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
    </Helmet>
  );
}

Practice HTML

Try it Yourself Press ctrl+s to run

Live Preview