Adobe Dreamweaver CC

How to work with text in HTML

Learn the HTML tags to add text to a web page. (Try it, 5 min)

HTML includes elements you can use to add different types of text including page titles, headings, paragraphs, lists, and special characters. 

What do I need?

Get files Sample files to practice with (ZIP, 4 KB)

Before you start

Open html-text.html in Dreamweaver and work in Split view.

Choose Split view
Choose Split view

Step 1 of 7

Add a page title

The <title> includes the title of the page which displays in the tab of the web browser.

Add STARGAZING! between the <title></title> tags. Then, select File > Preview in Browser and choose your preferred browser to open the page in a browser window. Notice the title displays in the browser tab.

Note: The different web browsers can display your page differently. So, you should verify your web design in the different browsers throughout a web design project.

HTML

<title>STARGAZING!</title> 

Page title displays in the web browser's tab
The page title displays in the web browser's tab

Step 2 of 7

Add comments

You can add comments to the HTML to provide descriptions and explanations to different parts of your code. As an HTML page gets longer and more complex, HTML comments can make it easier for you and your team to modify the page in an ongoing basis.

HTML comments are not visible in the web browser and use a specific syntax, or format, to write them in the code. A comment starts with <!-- and closes with --> (e.g., <!-- This is an HTML comment -->). You can write text and use the Apply Comment option from Code View's toolbar to apply HTML comment tags.

Add an HTML comment directly below the opening <body> tag.

HTML

<!-- This is a comment --> 

Add comments to the HTML
Add comments to the HTML to describe code

Step 3 of 7

Add a heading

You can add headings and subheadings to different sections of a web page to make important information stand out. HTML supports six heading levels — using <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags — although you will likely only use the top three.

Add an <h1> tag just below the <header> tag. Type STARGAZING between the <h1></h1> tags. This will be the main heading for the page and will overlay the banner image you will add in a later section.

HTML

<h1>STARGAZING</h1> 

Add a heading to a web page
Add a heading to a web page to attract attention

Step 4 of 7

Add a bulleted list

The <ul> tag includes items to make up an unordered, or bulleted, list. You can then add individual <li> tags, or list items, between the <ul></ul> tags.

Add an unordered list between the <nav></nav> tags that will eventually become the main menu items for the page.

HTML

<ul>
    <li>OUTSIDE LINK</li>
    <li>PAGE 2</li>
    <li>HOME</li>
</ul>

Use a bulleted list
Use a bulleted list

Step 5 of 7

Add paragraphs

The <p> tag formats text into paragraphs. Use the <p> tag to add two paragraphs to the <div> inside the <article> tag. Then, add 2 short paragraphs inside the <aside> tag.

Note: It is common practice to use placeholder text — Lorem Ipsum text is popular with designers — to create the initial layout and design of a web page. Then, when the design is ready, you and your team can spend more time focusing on the actual text content for the page.

There are a variety of free ipsum generators available on the web that you can use to generate text copy for your web design. Feel free to use one of these generators, or copy the paragraph text provided in the paragraph.txt file in the downloadable project files.

HTML

<div>
    <p>Lorem ipsum dolor sit...</p>
    <p>Nam euismod tortor ut...</p>
</div>
<aside>
    <p>nobis est eligendi...</p>
    <p>Author Name</p>
</aside>

Use the <p> tag to add paragraphs
Use the <p> tag to add paragraphs

Use placeholder text
Use placeholder text for the initial layout and design

Step 6 of 7

Add a special character

HTML includes a list of codes you can use to display special characters on a web page. Special characters include characters you can not type directly on a keyboard, or characters that would get confused with those reserved for HTML syntax (e.g., <, >, /). Search the web for HTML special characters for a complete list of codes.

Add an em dash (—) just before Author Name in the <aside> tag. The character code for an em dash is &mdash;.

HTML

<p>&mdash;Author Name</p> 

Display special characters
Display special characters on a web page

Step 7 of 7

Finally, use the special character code to add copyright information to the footer. The code for the copyright symbol is &copy;

Add the footer text in an unordered list so that you can apply some additional layout and styling to this content in a later exercise.

HTML

<footer>
    <ul>
        <li>
            &copy; 2015 Adobe Stargazing Club.
        </li>
    </ul>
</footer>

Use the special character code
Use the special character code to add copyright information

Done!

Click Preview in Browser and choose your preferred browser to see the text!

You will need to save your files to view the changes.

Preview the text in a browser
Preview the text in a browser

Let us know what you think