Frontend Engineering | VoidX Academy

1. HTML Foundation & Accessibility

HTML: The Skeleton of the Web

HTML (HyperText Markup Language) is the foundation of everything you see on the internet. It does not handle styling or logic; its sole purpose is to provide structure and meaning to content. In this extensive guide, we will break down every core HTML concept individually so you understand exactly how to build web pages from scratch.

Anatomy of an HTML Tag

Almost all HTML elements consist of three parts: an opening tag, the content, and a closing tag. The tags tell the browser how to interpret the content inside.

<!-- Opening tag --> <p>
  This is the content of the paragraph.
<!-- Closing tag (has a forward slash) --> </p>

<!-- Some tags are 'self-closing' and don't wrap content -->
<br> <!-- Line break -->
<hr> <!-- Horizontal rule (line) -->

The HTML Boilerplate

Every HTML document must follow a specific structure to be recognized by web browsers. This is called the boilerplate.

<!DOCTYPE html> <!-- Tells the browser this is modern HTML5 -->
<html lang="en"> <!-- The root element wrapping the entire page -->

  <head>
    <!-- The head contains meta-information not visible on the page -->
    <meta charset="UTF-8">
    <title>Voidx Platform</title>
  </head>

  <body>
    <!-- The body contains everything the user actually sees -->
    <h1>Welcome to the homepage</h1>
  </body>

</html>

Text Formatting: Headings

Headings range from <h1> to <h6>. You should only ever have one <h1> per page for SEO and accessibility purposes. Use them in sequential order (don't jump from h1 to h4).

<h1>Main Page Title (Used once)</h1>
<h2>Major Section Heading</h2>
<h3>Sub-section Heading</h3>
<h4>Minor grouping</h4>

Text Formatting: Paragraphs

The <p> tag is used for standard blocks of text. Browsers automatically add some space (margin) above and below paragraphs.

<p>This is a standard paragraph of text explaining a concept in detail.</p>
<p>This is a second paragraph. It will be rendered on a new line.</p>

Links (Anchor Tags)

The <a> tag creates hyperlinks to other pages or websites. It requires the href attribute to know where to navigate.

<!-- Linking to an external website -->
<a href="https://DailyPulse.online">Read the latest news</a>

<!-- Linking to another page on your own site -->
<a href="/about.html">About Us</a>

<!-- Opening a link in a new tab -->
<a href="https://google.com" target="_blank">Search Google</a>

Images

The <img> tag is self-closing. It requires a src (source) attribute to find the image file, and an alt (alternative text) attribute for accessibility.

<!-- If the image fails to load, the alt text will be displayed instead -->
<img src="logo.png" alt="The official company logo">

Semantic Layout: The Header and Footer

Instead of using generic <div> tags, we use semantic tags. Semantic means 'relating to meaning'. <header> represents introductory content or a set of navigational links. <footer> represents the bottom of a section or page.

<header>
  <h1>DailyPulse Campus Insider</h1>
  <nav>
    <a href="/tech">Tech</a>
    <a href="/sports">Sports</a>
  </nav>
</header>

<!-- Page content goes here -->

<footer>
  <p>© 2026 All rights reserved.</p>
</footer>

Semantic Layout: Main, Section, and Article

Structuring your core content properly helps search engines and screen readers understand your page.

<!-- The dominant content of the page -->
<main>

  <!-- A thematic grouping of content -->
  <section>
    <h2>Trending in Casford</h2>
    
    <!-- A self-contained composition (like a news story) -->
    <article>
      <h3>The Imbattables Win Again</h3>
      <p>Full story details here...</p>
    </article>

  </section>

</main>

Forms: The Form Wrapper

The <form> tag wraps all user inputs. It handles the submission of data to a server.

<!-- action determines WHERE the data goes. method determines HOW (GET or POST) -->
<form action="/submit-login" method="POST">
  <!-- Inputs go inside here -->
</form>

Forms: Labels and Inputs

Every input must be paired with a label. This is non-negotiable for accessibility. We link them using the for attribute on the label, and the id attribute on the input.

<label for="userEmail">Enter your email address:</label>
<input type="email" id="userEmail" name="email" required>

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

Forms: Buttons

Buttons trigger actions. Inside a form, a button will automatically submit the form unless told otherwise.

<!-- Submits the form data -->
<button type="submit">Log In</button>

<!-- A button that does nothing until you add JavaScript -->
<button type="button">Cancel</button>

Knowledge Check

Ready to test your understanding of 1. HTML Foundation & Accessibility?

2. CSS Styling & Layouts