Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

I keep getting told that the first child for .main-section needs to be a header…but it clearly is. The h1 element is directly below all main-section elements…I don’t understand what I am doing wrong.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Technical Documentation Page</title>
 
  </head>
  <body>
    <!-- Navbar -->
    <nav id="navbar">
      <header>
        <h1>Documentation</h1>
      </header>
      <a href="#introduction" class="nav-link">Introduction</a>
      <a href="#HTML_Structure_and_Syntax" class="nav-link">HTML Structure and Syntax</a>
      <a href="#Common_HTML_Elements" class="nav-link">Common HTML Elements</a>
      <a href="#Working_with_Forms" class="nav-link">Working with Forms</a>
      <a href="#HTML_Attributes" class="nav-link">HTML Attributes</a>
    </nav>

    <!-- Main documentation -->
    <main id="main-doc">
      <!-- Section 1: Introduction -->
      <section class="main-section" id="introduction">
        <h1>Introduction</h1>
        <p>HTML, or <code>HyperText Markup Language</code>, is the standard language used to create and structure content on the web. Every webpage you visit is built using <code>HTML</code>, which defines the structure of the page through a series of tags.</p>
        <p>At its core, <code>HTML</code> is simple and easy to understand. The language consists of a series of elements, each represented by opening and closing tags. These elements allow developers to create headings, paragraphs, forms, and more.</p>
      </section>

      <!-- Section 2: HTML Structure and Syntax -->
      <section class="main-section" id="HTML_Structure_and_Syntax">
        <h1>HTML Structure and Syntax</h1>
        <p>HTML structure and syntax form the foundation of creating web pages. The basic structure of an HTML document begins with the <code>&lt;!DOCTYPE html&gt;</code> declaration, which informs the browser about the version of HTML being used.</p>
        <p>HTML syntax relies on a set of rules to ensure proper rendering of content. Tags are used to define elements, and they typically come in pairs: an opening tag and a closing tag, with the closing tag including a forward slash (e.g., <code>&lt;p&gt;</code> and <code>&lt;/p&gt;</code>).</p>
      </section>

      <!-- Section 3: Common HTML Elements -->
      <section class="main-section" id="Common_HTML_Elements">
        <h1>Common HTML Elements</h1>
        <p>Common HTML elements are the building blocks of a webpage. They are defined using tags, which are enclosed in angle brackets. The most basic element is the <code>&lt;html&gt;</code> tag, which wraps the entire HTML document.</p>
        <ul>
          <li><code>&lt;html&gt;</code>: The root element</li>
          <li><code>&lt;head&gt;</code>: Contains meta-information</li>
          <li><code>&lt;body&gt;</code>: Contains the visible content</li>
          <li><code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code>: Header tags</li>
          <li><code>&lt;p&gt;</code>: Paragraph tag</li>
        </ul>
        <p>In addition to these, there are other frequently used elements. The <code>&lt;a&gt;</code> tag creates hyperlinks, allowing users to navigate between web pages or sections of a page.</p>
      </section>

      <!-- Section 4: Working with Forms -->
      <section class="main-section" id="Working_with_Forms">
        <h1>Working with Forms</h1>
        <p>Forms are essential for collecting user input on websites. The <code>&lt;form&gt;</code> element contains various input types like text fields, checkboxes, radio buttons, and submit buttons. Each form field is usually paired with a <code>&lt;label&gt;</code> to improve accessibility, ensuring users understand what input is required.</p>
        <p>HTML supports various input types to enhance user interaction on web forms. For text input, the <code>&lt;input type="text"&gt;</code> element is used, while for password fields, you use <code>&lt;input type="password"&gt;</code>.</p>
      </section>

      <!-- Section 5: HTML Attributes -->
      <section class="main-section" id="HTML_Attributes">
        <h1>HTML Attributes</h1>
        <p>HTML attributes are used to provide additional information about elements. For example, the <code>href</code> attribute is used in anchor tags <code>&lt;a&gt;</code> to define the destination of a link, while the <code>src</code> attribute specifies the file path for images in an <code>&lt;img&gt;</code> tag.</p>
        <p>Some of the most commonly used attributes include <code>id</code> and <code>class</code>. The <code>id</code> attribute uniquely identifies an element on a page, while the <code>class</code> attribute can group similar elements together.</p>
      </section>
    </main>
  </body>
</html>
2

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

sorry about that, I fixed it.

1 Like
4

Welcome to the forum @lethalcortex

Try using the header element instead of the h1 element.

Happy coding

2 Likes
5

gotcha! What would be the difference? I guess I was under the assumption a header element was an h1 element. Guess I thought all header elements are h1, h2, etc.

6

Hi @lethalcortex

Here’s an article you may find helpful.

Happy coding

1 Like