mc0de

basic elements

02
HTML Fundamentals

Basic Elements

Learn the essential HTML elements used to structure webpage content.

HTML Beginner
<h1>Heading</h1>
<p>Paragraph</p>
<strong>Bold</strong>
<br>
<hr>

>_ What Are HTML Elements?

HTML elements are the building blocks of a webpage. They identify different types of content and give your page its structure.

Most elements contain an opening tag, some content, and a closing tag. Once you understand a handful of common elements, you can already begin creating useful webpages.

<h1>

Headings

Define titles and sections using heading levels from <h1> through <h6>.

<p>

Paragraphs

Organize regular written content into readable blocks of text.

<strong>

Strong Importance

Mark text as strongly important. Browsers normally display it in bold.

<em>

Emphasis

Add emphasis to words or phrases. Browsers normally display them in italics.

<br>

Line Break

Move the following content onto a new line without starting a new paragraph.

<hr>

Thematic Break

Represent a break or change between sections of related content.

>_ HTML Headings

HTML provides six heading levels. <h1> represents the highest-level heading, followed by <h2>, <h3>, and so on through <h6>.

headings.html
<h1>My Website</h1>
<h2>About Me</h2>
<h3>My Hobbies</h3>

>_ Working With Text

Elements can also appear inside other elements. For example, you can place <strong> or <em> inside a paragraph. This is called nesting.

text.html
<p>
  I’m learning <strong>HTML</strong>
  and it’s <em>actually pretty fun!</em>
</p>

>_ Breaks and Separators

Not every HTML element wraps content. <br> creates a line break, while <hr> represents a thematic break between sections.

breaks.html
<p>
  Line One<br>
  Line Two
</p>

<hr>

>_ Quick Reference

<h1> – <h6>

Define headings and establish a hierarchy for your page content.

<p>

Defines a paragraph of written content.

<strong>

Marks text as strongly important.

<em>

Adds emphasis to text.

<br>

Inserts a line break without creating another paragraph.

<hr>

Represents a thematic break between sections of content.

💡
Remember

Most HTML elements have opening and closing tags, but <br> and <hr> are void elements. They do not contain content and therefore do not need closing tags.

Ready to Code?

Put the elements together.

Build a small About Me page using several of the HTML elements you just learned.

⚡
mC0de Challenge

Create an About Me Page

Use the basic HTML elements from this lesson to create a short About Me webpage.

  • ✓ Add an <h1> containing your name or page title.
  • ✓ Add an <h2> titled About Me.
  • ✓ Write an About Me paragraph using <p>.
  • ✓ Make one important word or phrase <strong>.
  • ✓ Emphasize another word or phrase using <em>.
  • ✓ Add either a <br> or <hr> element.
💡 Try it yourself first. If you need help, load the completed solution in the Sandbox below.
>_ Challenge accepted. Build it below.
>_
mC0de Interactive Sandbox

Basic Elements Challenge

Live Preview
about-me.html
HTML Input EDIT
Live Result PREVIEW
💡 Edit the HTML and watch the preview change instantly. Reset restores the original starter code.
✓
Lesson 02 Recap

What You’ve Learned

✓ How HTML elements structure different types of content.
✓ How to create heading levels with <h1> through <h6>.
✓ How to create paragraphs using <p>.
✓ How <strong> marks important content.
✓ How <em> adds emphasis to text.
✓ How <br> and <hr> differ from elements that wrap content.
Nice work! You now know the basic HTML building blocks you’ll use throughout the rest of the course.
🚀

Nice work!

Finished this lesson? Mark it complete to track your progress.

← Hello, World! HTML & CSS Home Next Lesson → Links