HTML (HyperText Markup Language) with AI Copilot

HTML, or HyperText Markup Language, is the foundational language of the web. It provides the structure of web pages and tells the browser how to display content. Before we dive into React and complex JavaScript interactions, it’s important to understand HTML thoroughly because React ultimately builds and manipulates HTML elements behind the scenes.

In this lesson, we’ll cover the basic structure of an HTML document, discuss semantic tags and accessibility, and learn how HTML concepts integrate with React using JSX. We’ll also include Copilot prompts to help you experiment and build confidence.

Basic structure of an HTML document

Every web page starts with a basic HTML skeleton. This structure helps the browser understand what kind of document it’s loading and how to render it.

Here’s the simplest example of a complete HTML page:

html
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is my first HTML document.</p>
</body>
</html>

Key parts of this structure:

  • <!DOCTYPE html>: Declares the document type and version of HTML (HTML5 here).
  • <html>: Root element that wraps the entire page content.
  • <head>: Contains metadata, links to stylesheets, and the document title.
  • <meta charset="UTF-8">: Ensures your document can handle most characters and symbols.
  • <meta name="viewport">: Makes your site responsive on different devices.
  • <title>: The text shown in the browser tab.
  • <body>: Contains all the visible content, like headings, paragraphs, images, etc.

Copilot prompt example:

1
// Write a basic HTML page with a title "My Portfolio" and an h1 that says "Welcome to My Portfolio"

Try typing this comment in your VS Code editor with Copilot enabled. Copilot will generate a starting point for you, and you can adjust it as needed.

Semantic tags and accessibility

Semantic HTML tags describe the meaning of their content rather than how it looks. Using semantic tags makes your code more readable and improves accessibility for screen readers and other assistive technologies.

Some common semantic tags:

  • <header>: Defines introductory content or navigation links.
  • <nav>: Contains site navigation menus.
  • <main>: Represents the main content area of the document.
  • <section>: Groups related content into distinct sections.
  • <article>: Independent, self-contained content (like blog posts or news articles).
  • <aside>: Secondary content, like sidebars.
  • <footer>: Defines the footer for a document or section.

Example:

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>First Post</h2>
      <p>This is my first blog post. I am learning HTML!</p>
    </article>
    <article>
      <h2>Second Post</h2>
      <p>HTML semantic tags improve accessibility and SEO.</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2025 My Blog</p>
  </footer>
</body>

Accessibility tips:

  • Always use meaningful headings (h1, h2, etc.) in the right order.
  • Add alt attributes to images to describe their content for screen readers.
  • Use labels with form inputs for better usability.

Copilot prompt example:

1
// Create an HTML structure for a simple personal blog with header, navigation, two articles, and a footer

Integrating HTML with React (JSX)

When you start working with React, you won't write raw HTML directly. Instead, you'll use JSX, a syntax extension that looks similar to HTML but allows you to embed JavaScript logic and expressions directly into your markup.

Basic JSX example in React:

html
1
2
3
4
5
6
7
8
9
10
function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>Welcome to my first React component using JSX.</p>
    </div>
  );
}

export default App;

Important differences between HTML and JSX:

  • class becomes className: In HTML, you write <div class="container">, but in JSX, you use <div className="container"> because class is a reserved word in JavaScript.
  • Self-closing tags: Tags without children must be self-closed in JSX, like <img /> or <input />.
  • JavaScript expressions inside curly braces: You can embed dynamic content using {}.

Example of embedding dynamic data:

javascript
1
2
3
4
5
const userName = "Alice";

function Welcome() {
  return <h1>Welcome, {userName}!</h1>;
}

Copilot prompt example:

1
// Create a React component that displays a header with your name and a paragraph describing your hobbies

Using semantic tags in JSX:

You can (and should) continue to use semantic HTML tags inside JSX. For example:

javascript
1
2
3
4
5
6
7
8
9
10
function Blog() {
  return (
    <main>
      <article>
        <h2>My First Post</h2>
        <p>This is content for my blog post written in React JSX.</p>
      </article>
    </main>
  );
}

Final thoughts

Understanding HTML is fundamental before diving into React and advanced JavaScript frameworks. Mastering the basic document structure, using semantic tags for accessibility, and seeing how HTML translates into JSX will give you a solid foundation to build modern, maintainable web applications.

By combining these concepts with Copilot and prompt writing, you can experiment and quickly build real structures without memorizing every tag. This approach helps you learn by doing — which is the best way to solidify your skills.

In the next lessons, we’ll cover CSS to style your HTML and JSX components beautifully and learn how to make your applications responsive and visually engaging. Keep practicing, and try using Copilot prompts to build different layouts and sections. Happy coding!

Previous LessonNext Lesson

Frequently Asked Questions