• in
InterCourses
CoursesBlogs
0
← Introduction to HTML
○What Is HTML? See Tags in Action○Exercise: Build the Meridian Signal●Complete HTML5 Page Structure: See It in Action○Exercise: Build a Complete HTML5 Page✦Module Quiz
○Heading Hierarchy Demo: H1 and H2○Exercise: Extend the Signal Brief○Paragraphs and Inline Tags Demo○Exercise: Write Meridian's Survey Notes○List Types Demo: Steps, Items, and Terms○Exercise: Build a Crew member Loadout○Challenge: Transmit a Rescue Signal✦Module Quiz
○Hyperlinks○Images○Applying Styles to HTML✦Module Quiz
○Div and Span○HTML Tables○Classes and IDs○Review: Structured Profile✦Module Quiz
○Project 1 - Visiting Card Structure○Project 1 - Visiting Card Actions✦Module Quiz
○The Head Element and Page Title○Meta Tags○HTML Entities✦Module Quiz
○Form Basics Demo: Join the Meridian Relay○Exercise: Build a Night-Shift Check-In○Input Types Demo: Build a Mission Profile○Exercise: Record Beacon Maintenance○Choice Controls Demo: Select Training Modes○Exercise: Plan a Supply Pickup○Response Controls Demo: Send a Mission Reply○Exercise: Build a Rescue Dispatch Report○Challenge: Send an Emergency Beacon✦Module Quiz
○Project 2 - Contact Us Form Structure○Project 2 - Contact Us Form Actions✦Module Quiz
○Embedding Video○Embedding Audio○Iframes✦Module Quiz
○Semantic HTML Tags○Details, Figure, and Figcaption✦Module Quiz
○Project 3 - Resume Semantic Structure○Project 3 - Resume Links and Actions✦Module Quiz

Complete HTML5 Page Structure: See It in Action

Mission

The survey vessel Meridian has a finished crew profile ready to inspect. Use the completed code and preview to separate the page pieces visitors see from the structural information that supports the page behind the scenes.

What you'll see

A complete working index.html document with a doctype, language declaration, head, tab title, body content, and a source-only comment.

Read the demo code

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Meridian Crew Profile</title>
</head>
<body>
  <!-- Main mission profile heading -->
  <h1>Meridian crew</h1>
  <p>The Meridian crew is surveying the north tower for the next mission.</p>
</body>
</html>
PartWhat it does
<!DOCTYPE html>Tells the browser to use modern HTML.
<html lang="en">Wraps the document and names its primary language.
<head>Holds browser-facing metadata, including the title.
<title>Labels the browser tab, not the page body.
<body>Holds the content visitors can see.
<!-- ... -->Leaves a source-code note that the browser does not render.

Try the preview

The completed index.html is open in the editor. Run it and compare the preview with the source:

  1. The <title> supplies Meridian Crew Profile as the document title (the embedded preview may not show a tab).
  2. The page shows a crew heading and paragraph because they are inside <body>.
  3. The HTML comment is present in the editor but absent from the preview.

Checkpoint

You should now be able to distinguish document setup (<!DOCTYPE html>, <html>, and <head>) from visible page content (<body>). Try changing the <h1> text, rerun the preview to see the visible difference, then restore it. The <title> stays in the head and may not appear as a tab in the embedded preview.

Next

Continue to Exercise: Build a Complete HTML5 Page. You will use the same structure in a starter file and validate each essential part.

Hint 1
1 / 2
HINT 1

This is a completed demo. Use it to connect each structural tag to its effect before the next exercise.

HINT 2

Only content inside <body> is visible in the page preview.

Loading editor…
READY
intercourses
html