Create HTML Paragraphs in Visual Studio Code

Introduction

HTML paragraphs are important when you want to add text content to your website. In this step-by-step lab, you will learn how to create a HTML paragraph using the p tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") subgraph Lab Skills html/basic_elems -.-> lab-70813{{"`Create HTML Paragraphs in Visual Studio Code`"}} html/para_br -.-> lab-70813{{"`Create HTML Paragraphs in Visual Studio Code`"}} end

Create a Paragraph Tag

First, create a HTML file named index.html. You can use any code editor of your preference.

Create a paragraph tag by adding the following code block in the body section of your HTML file.

<p>This is a HTML paragraph.</p>

Add Text to the Paragraph

Add some text to the paragraph by modifying the code block in step 2 to the following:

<p>Hello, my name is John. I am a software developer.</p>

Add Multiple Paragraphs

Add multiple paragraphs to your HTML file by repeating step 2 and step 3 with different text content. Your final code block should look something like this:

<body>
  <p>Hello, my name is John. I am a software developer.</p>
  <p>I love coding and creating beautiful websites.</p>
  <p>HTML and CSS are my favorite programming languages.</p>
</body>

Summary

Congratulations! You have successfully learned how to create and add text content to HTML paragraphs. This is an important skill to have when building websites. Keep practicing and exploring HTML tags to create dynamic and engaging web pages.