How do you do text in html?

Lesson 3: Text Elements in HTML

/en/basic-html/create-a-webpage/content/

Adding text elements in HTML

This lesson is part of a series on computer programming. You can go to Intro to Programming if you'd like to start at the beginning.

Some of the most common HTML elements that make up a webpage are text elements. All the text you read on this website, for example, whether it's the titles at the top of the page, the section headers, or this very text, is made from HTML text elements.

The paragraph element

The most basic way of adding text to a web page is the paragraph element. If you've been following along with this tutorial, you've seen this element before, but it's worth repeating, because the paragraph element is one of the most common HTML elements used on most of the websites you visit every day. 

This is a paragraph

By default, every browser puts a bit of space above and below paragraph elements when they display them, which keeps each paragraph independent from the ones around it, just like the paragraphs you'd see printed in a book or magazine. 

The heading elements

Like the paragraph element, heading elements are also used to display text on the screen. They're generally used to create section headings. 

This is a heading element

For example, you might use a heading element to display the title of an essay you're writing, or the name of a chapter in a book. The actual text of the essay or chapter, on the other hand, would use paragraph elements.

Heading elements come in six default levels,

through

, which you can think of as an order of importance. If you put an

on your web page, for example, it's safe to assume that it's the most important section heading and probably at the top of your page, while an

is slightly less and important, and so on. 

They also come with some default browser styling, which reinforces that order of importance: the

element is the biggest, the

is smaller, and on like that.

This is the biggest one
This one is a little smaller
This one is even smaller
They keep getting smaller
This one isn't even that big
Pretty small now, actually

Text formatting elements

Text formatting elements are used to change the way text looks in certain predefined ways. For instance, here are a few common text formatting elements:

• Bold: The  element makes its contents bold.
• Italics: The element italicizes its contents. 
• Underline: The element underlines its contents.

These elements are usually found nested inside of other text elements, such as the paragraph or heading elements, because they are usually only meant to apply to part of the text. For example:

These words aren't bold, but these two are.

That HTML would be displayed like this:

Try this!

Try experimenting with each of the elements covered in this lesson in the input below. You can enter whatever you want, but if you need some ideas on what to enter, try using the elements below as an example.

The Long Goodnight
 
Chapter 1: The City and the Silence
Detective Hardcastle shuddered when he heard the knock at his door. Midnight on a Saturday, and somebody was looking for a gumshoe? It smelled like trouble, because if he had learned one thing in his time as a private eye, it was that all the city's ghosts came out at night.
I hope you're not looking for a fight, he thought to himself. Because if you are, you found it.

Enter your HTML elements in the input here:

Do it yourself!

Open the index.html file of your GCF Programming Tutorials project in your text editor, and let's add some text elements. For the best understanding, be sure to actually type this code in, rather than copying and pasting it. 

1. When you first created this file, you already had one element of actual content on the page. First, find that element:

   Hello, world!

2. Go ahead and delete that element. 
3. Instead, let's start making something that's more like a real webpage that you might actually see in regular life: a movie review webpage. Start with a heading, and make sure to put it inside the  element, where your 

   element was before: 

   Cinema Classics Movie Reviews

4. Just below that, let's add a sub-heading. While the first heading was the main heading of your whole webpage, this one will just be the title for your review of a made-up blockbuster hit: 

   Review: Basketball Dog (2018)

5. Now let's add some text. This is the real meat of your review, so there are a lot more words, but notice that they're still just wrapped in simple 

    tags, one for each separate paragraph. Add this just below the 

    element you just added:

   4 out of 5 stars
   From director Vicki Fleming comes the heartwarming tale of a boy named Pete (Trent Dugson) and his dog Rover (voiced by Brinson Lumblebrunt). You may think a boy and his dog learning the true value of friendship sounds familiar, but a big twist sets this flick apart: Rover plays basketball, and he's doggone good at it.
   While it may not have been necessary to include all 150 minutes of Rover's championship game in real time, Basketball Dog will keep your interest for the entirety of its 4-hour runtime, and the end will have any dog lover in tears. If you love basketball or sports pets, this is the movie for you.
   Find the full cast listing at the Basketball Dog website.
   

6. Given that she's the director of the movie, it seems like "Vicki Fleming" might be the most important name in those paragraphs, so let's make it bold to attract more attention to it. Wrap just that name with  and  tags, like so: 

   Vicki Fleming

7. It also might be a good idea to set the star rating apart from the rest of the text, too. Let's italicize that to separate it. Wrap just those words with and tags, like so:

   4 out of 5 stars

Once you've done all of this, your complete code should look like this:

  
    
Cinema Classics Movie Reviews
    
Review: Basketball Dog (2018)
    
4 out of 5 stars
    
From director Vicki Fleming comes the heartwarming tale of a boy named Pete (Trent Dugson) and his dog Rover (voiced by Brinson Lumblebrunt). You may think a boy and his dog learning the true value of friendship sounds familiar, but a big twist sets this flick apart: Rover plays basketball, and he's doggone good at it.
    
While it may not have been necessary to include all 150 minutes of Rover's championship game in real time, Basketball Dog will keep your interest for the entirety of its 4-hour runtime, and the end will have any dog lover in tears. If you love basketball or sports pets, this is the movie for you.
    
Find the full cast listing at the Basketball Dog website.
  

Double-click your index.html file to load it in the browser, and you should see this. Your webpage is starting to look a little more like an actual webpage!

/en/basic-html/lists-in-html/content/

How do you start a text in HTML?

All HTML documents must start with a document type declaration: . The HTML document itself begins with and ends with . The visible part of the HTML document is between and .

What is the HTML tag for text?

The p tag. This tag defines a paragraph of text. It's a block element. Inside it, we can add any inline element we like, like span or a .