Modern Front End Tech logo

modern front end tech

first html code

Learn the small building blocks that make a webpage readable.

Lesson 2

Tags create elements

An HTML element usually has an opening tag, content, and a closing tag. The tag name tells the browser what kind of content it is.

<p>This is a paragraph.</p>
Tag pattern

Opening tag, content, closing tag

The opening tag starts the element. The closing tag ends it. Most closing tags use the same tag name with a slash before it.

<h1>Main heading</h1>
<p>A short paragraph goes here.</p>
<button>Click me</button>

Main heading

A short paragraph goes here.

Headings

Use headings in order

HTML has six heading levels. Use <h1> for the main page heading, then use lower levels like <h2> and <h3> for sections inside the page.

<h1>Course page</h1>
<h2>Lesson title</h2>
<h3>Small topic</h3>
Mini document

A complete starter file

A real HTML file includes a document type, an <html> element, a <head>, and a <body>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My first page</title>
</head>
<body>
    <h1>Hello HTML</h1>
    <p>This is my first page.</p>
</body>
</html>
Checkpoint

Write it yourself

Create one heading, one paragraph, and one button. Close every tag that needs a closing tag.

our youtube channel