Add Heading and Paragraph Tags to HTML 5 Document

Edited by Grimm, Rushell, Eng

4 Parts:
". We'll close that one as well. Now, let's do a smaller one, "". Now, we have three header tags, and we need paragraph information. Enter a blank line after the first header tag. The paragraph tag is just "p", so we'll type "" for paragraph. Now, we'll close our paragraph tag. Then we'll highlight that by clicking and dragging with the mouse. Copy it by pressing CTRL+C or right click and select "Copy". Go down to the next heading tag, "<h2>" and hit CTRL+V to paste the paragraph tag information. We could also right click and choose "Paste" on the menu. If we accidentally paste, but don't want it there, we can press "CTRL+Z" to get rid of it. Now, we want to add a paragraph tag to the existing piece of text, "VisiHow is Awesome!" We don't want to have anything without tags. In the "" tag, we'll type "Heading 1". Then we'll type "Para 1" in the "<p>" tag. We'll type "Heading 2" in the "<h2>" tag. Then go down and type "Para 2" in the "<p>" tag. We'll type "Heading 5" in the "<h5>" tag, and we're done. Now, we're going to save this by clicking on "File" on the menu at the top and then "Save" from the drop-down menu. We'll go ahead and leave the Notepad file open while we double click on the "visi.html" file on the desktop. This will launch our web browser and open the file. At the top we have the large "Heading 1". Then we have a "Para 1" in much smaller text. We have "Heading 2". "Para 2" is directly under that. Finally we have the much smaller "Heading 5". This is followed by "VisiHow is Awesome!" In another tutorial, we'll explain how to change the size and format of these text options. For now, we'll close the web page by clicking on the "x" in the top right-hand corner. Now, we've created a very basic web page, and we're far enough into the web page design that looking at this bit of code could make our minds melt. In our next tutorial, we'll discuss how to format the code inside of our Notepad page and how to format the actual code of the HTML page. Make sure to check that out. For now, we'll close the Notepad window by pressing the "x" in the top right corner. This takes us back to the desktop. We're done with the tutorial on adding heading and paragraph tags to our document, and we'll now conclude this tutorial. Thanks for watching VisiHow. Hopefully, you'll have a great day. Let us know about your own adventures in web design. We will look forward to seeing you in our next tutorial. Have a great day. Video: Add Heading and Paragraph Tags to HTML 5 Document

You are watching VisiHow. In this tutorial, we are going to show you how to add basic heading, or header, and paragraph tags to an HTML 5 document.


Contents

Steps

  1. 1
    To get started, we need to open up our Notepad, so we can begin editing. Notepad is pinned to the taskbar in this example, so we can click to open it.
    Advertisement
    Was this step helpful? Yes | No| I need help
  2. 2
    Once Notepad is open, navigate to the desktop, where we're going to left click on the "visi.html" file and hold down on that.
    Advertisement
    Was this step helpful? Yes | No| I need help
  3. 3
    Then we'll drag the file over into the Notepad window, where you'll notice that the cursor changes to a black plus sign in a black box.
    Was this step helpful? Yes | No| I need help
  4. 4
    Then we can let go of the left mouse key, and it will drop that code into the Notepad window.
    Was this step helpful? Yes | No| I need help
  5. 5
    Now, we'll see from the top that we have "!DOCTYPE", the "html" tag, our "head" tag, "title" tag and "body" tag. Inside of the "body" tag is where we want to add heading and paragraph tags. We're going to add a few of these to show how they work.
    Was this step helpful? Yes | No| I need help
  6. 6
    A heading tag is always one letter and one number, we'll open the tag, and then we'll type "

    ".

    Was this step helpful? Yes | No| I need help
  7. 7
    We'll go ahead and close that now by typing "".
    Was this step helpful? Yes | No| I need help
  8. 8
    Then we'll go to the next line and type "

    ".

    Was this step helpful? Yes | No| I need help
  9. 9
    We'll close that one as well.
    Was this step helpful? Yes | No| I need help
  10. 10
    Now, let's do a smaller one, "
    ".
    Was this step helpful? Yes | No| I need help
  11. 11
    Now, we have three header tags, and we need paragraph information. Enter a blank line after the first header tag.
    Was this step helpful? Yes | No| I need help
  12. 12
    The paragraph tag is just "p", so we'll type "

    " for paragraph.

    Was this step helpful? Yes | No| I need help
  13. 13
    Now, we'll close our paragraph tag.
    Was this step helpful? Yes | No| I need help
  14. 14
    Then we'll highlight that by clicking and dragging with the mouse.
    Was this step helpful? Yes | No| I need help
  15. 15
    Copy it by pressing CTRL+C or right click and select "Copy".
    Was this step helpful? Yes | No| I need help
  16. 16
    Go down to the next heading tag, "<h2>" and hit CTRL+V to paste the paragraph tag information.
    Was this step helpful? Yes | No| I need help
  17. 17
    We could also right click and choose "Paste" on the menu.
    Was this step helpful? Yes | No| I need help
  18. 18
    If we accidentally paste, but don't want it there, we can press "CTRL+Z" to get rid of it.
    Was this step helpful? Yes | No| I need help
  19. 19
    Now, we want to add a paragraph tag to the existing piece of text, "VisiHow is Awesome!" We don't want to have anything without tags.
    Was this step helpful? Yes | No| I need help
  20. 20
    In the "

    " tag, we'll type "Heading 1".

    Was this step helpful? Yes | No| I need help
  21. 21
    Then we'll type "Para 1" in the "<p>" tag.
    Was this step helpful? Yes | No| I need help
  22. 22
    We'll type "Heading 2" in the "<h2>" tag.
    Was this step helpful? Yes | No| I need help
  23. 23
    Then go down and type "Para 2" in the "<p>" tag.
    Was this step helpful? Yes | No| I need help
  24. 24
    We'll type "Heading 5" in the "<h5>" tag, and we're done.
    Was this step helpful? Yes | No| I need help
  25. 25
    Now, we're going to save this by clicking on "File" on the menu at the top and then "Save" from the drop-down menu.
    Was this step helpful? Yes | No| I need help
  26. 26
    We'll go ahead and leave the Notepad file open while we double click on the "visi.html" file on the desktop.
    Was this step helpful? Yes | No| I need help
  27. 27
    This will launch our web browser and open the file.
    Was this step helpful? Yes | No| I need help
  28. 28
    At the top we have the large "Heading 1".
    Was this step helpful? Yes | No| I need help
  29. 29
    Then we have a "Para 1" in much smaller text.
    Was this step helpful? Yes | No| I need help
  30. 30
    We have "Heading 2".
    Was this step helpful? Yes | No| I need help
  31. 31
    "Para 2" is directly under that.
    Was this step helpful? Yes | No| I need help
  32. 32
    Finally we have the much smaller "Heading 5".
    Was this step helpful? Yes | No| I need help
  33. 33
    This is followed by "VisiHow is Awesome!" In another tutorial, we'll explain how to change the size and format of these text options.
    Was this step helpful? Yes | No| I need help
  34. 34
    For now, we'll close the web page by clicking on the "x" in the top right-hand corner.
    Was this step helpful? Yes | No| I need help
  35. 35
    Now, we've created a very basic web page, and we're far enough into the web page design that looking at this bit of code could make our minds melt. In our next tutorial, we'll discuss how to format the code inside of our Notepad page and how to format the actual code of the HTML page. Make sure to check that out.
    Was this step helpful? Yes | No| I need help
  36. 36
    For now, we'll close the Notepad window by pressing the "x" in the top right corner. This takes us back to the desktop.
    Was this step helpful? Yes | No| I need help
  37. 37
    We're done with the tutorial on adding heading and paragraph tags to our document, and we'll now conclude this tutorial. Thanks for watching VisiHow. Hopefully, you'll have a great day. Let us know about your own adventures in web design. We will look forward to seeing you in our next tutorial. Have a great day.
    Was this step helpful? Yes | No| I need help

Video: Add Heading and Paragraph Tags to HTML 5 Document

<p class='more-comment'>If you have problems with any of the steps in this article, please ask a question for more help, or post in the comments section below.</p>

Comments

User Reviews

There is no user reviews.

Article Info

Categories : Software

Recent edits by: Rushell, Grimm

Share this Article:

Thanks to all authors for creating a page that has been read 228 times.

Did this article help you?
 
x

Thank Our Volunteer Authors.

Would you like to give back to the community by fixing a spelling mistake? Yes | No