DEV Community

Cover image for Text Formatting: HTML in 180 Seconds - Episode 4
Renato Junior
Renato Junior

Posted on

Text Formatting: HTML in 180 Seconds - Episode 4


Hello, I’m Renato Junior, and you’re here to learn HTML in 180-second videos! In this video, you’re going to learn some basic text formatting in HTML. But first, a quick reminder: in the previous lesson, you learned the basic structure of HTML, so make sure you have that handy for today's class!

As I mentioned before, HTML is a markup language for text, which means there are so many cool ways to style your content! You can add italics, make text bold, create paragraphs, or even build headings. Let’s dive in!

Text formatting in HTML

Today’s example is all about headings. With the H tag followed by a number (1 to 6), you can define up to six levels of headings! You’ll see this in action with h1, h2, h3, h4, h5, and h6. Easy, right?

Now, for paragraphs! You’ll use the P tag to mark a paragraph. Simple enough! Check out how, with the STRONG tag, your text appears bold, and with the I tag, your text will be italicized. Pretty neat, huh?

<!DOCTYPE html>
<html>
    <head>
        <title> The page title </title>
    </head>
    <body>
        <h1>Here it is a Header 1</h1>
        <h2>Here it is a Header 2</h2>
        <h3>Here it is a Header 3</h3>
        <h4>Here it is a Header 4</h4>
        <h5>Here it is a Header 5</h5>
        <h6>Here it is a Header 6</h6>

        <p> This is a simple paragraph with <strong>strong</strong> text in <i>Italic</i></p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Time for some homework! Take a look at the following picture and try to recreate it in HTML. It’s super important to give this challenge a shot—practice makes perfect, after all!

Star Wars HTML Exercise

In the next video, you’ll learn all about tables in HTML! Can’t wait to see you there!

Homework Answer

Star Wars HTML Homework

Top comments (0)