Add Heading and Paragraph Tags to HTML 5 Document

Edited by Grimm, Rushell, Eng, Anonymous

3 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.

Add heading and paragraph tags to an HTML5 document.mp4-canvas162 805134.jpg

Contents
Ad

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.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas16 561.jpg
    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.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas27 657.jpg
    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.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas34 216.jpg
    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.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas48 842.jpg
    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.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas59 803.jpg
    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 "

    ".

    Add heading and paragraph tags to an HTML5 document.mp4-canvas78 823.jpg
    Was this step helpful? Yes | No | I need help

  7. 7
    We'll go ahead and close that now by typing "".
    Add heading and paragraph tags to an HTML5 document.mp4-canvas87 818333.jpg
    Was this step helpful? Yes | No | I need help

  8. 8
    Then we'll go to the next line and type "

    ".

    Add heading and paragraph tags to an HTML5 document.mp4-canvas93 277665.jpg
    Was this step helpful? Yes | No | I need help

  9. 9
    We'll close that one as well.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas97 577665.jpg
    Was this step helpful? Yes | No | I need help

  10. 10
    Now, let's do a smaller one, "
    ".
    Add heading and paragraph tags to an HTML5 document.mp4-canvas105 055352.jpg
    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.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas109 152352.jpg
    Was this step helpful? Yes | No | I need help

  12. 12
    The paragraph tag is just "p", so we'll type "

    " for paragraph.

    Add heading and paragraph tags to an HTML5 document.mp4-canvas113 291352.jpg
    Was this step helpful? Yes | No | I need help

  13. 13
    Now, we'll close our paragraph tag.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas119 610352.jpg
    Was this step helpful? Yes | No | I need help

  14. 14
    Then we'll highlight that by clicking and dragging with the mouse.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas124 769352.jpg
    Was this step helpful? Yes | No | I need help

  15. 15
    Copy it by pressing CTRL+C or right click and select "Copy".
    Add heading and paragraph tags to an HTML5 document.mp4-canvas127 411352.jpg
    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.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas132 272352.jpg
    Was this step helpful? Yes | No | I need help

  17. 17
    We could also right click and choose "Paste" on the menu.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas136 093352.jpg
    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.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas137 074352.jpg
    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.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas151 796352.jpg
    Was this step helpful? Yes | No | I need help

  20. 20
    In the "

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

    Add heading and paragraph tags to an HTML5 document.mp4-canvas157 398352.jpg
    Was this step helpful? Yes | No | I need help

  21. 21
    Then we'll type "Para 1" in the "<p>" tag.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas161 998352.jpg
    Was this step helpful? Yes | No | I need help

  22. 22
    We'll type "Heading 2" in the "<h2>" tag.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas165 498352.jpg
    Was this step helpful? Yes | No | I need help

  23. 23
    Then go down and type "Para 2" in the "<p>" tag.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas169 759352.jpg
    Was this step helpful? Yes | No | I need help

  24. 24
    We'll type "Heading 5" in the "<h5>" tag, and we're done.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas173 398352.jpg
    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.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas178 016352.jpg
    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.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas186 096352.jpg
    Was this step helpful? Yes | No | I need help

  27. 27
    This will launch our web browser and open the file.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas187 618352.jpg
    Was this step helpful? Yes | No | I need help

  28. 28
    At the top we have the large "Heading 1".
    Add heading and paragraph tags to an HTML5 document.mp4-canvas189 859352.jpg
    Was this step helpful? Yes | No | I need help

  29. 29
    Then we have a "Para 1" in much smaller text.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas190 759352.jpg
    Was this step helpful? Yes | No | I need help

  30. 30
    We have "Heading 2".
    Add heading and paragraph tags to an HTML5 document.mp4-canvas192 316352.jpg
    Was this step helpful? Yes | No | I need help

  31. 31
    "Para 2" is directly under that.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas193 457352.jpg
    Was this step helpful? Yes | No | I need help

  32. 32
    Finally we have the much smaller "Heading 5".
    Add heading and paragraph tags to an HTML5 document.mp4-canvas194 635352.jpg
    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.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas197 138352.jpg
    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.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas205 594352.jpg
    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.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas214 602352.jpg
    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.
    Add heading and paragraph tags to an HTML5 document.mp4-canvas230 932352.jpg
    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

    Advertisement

Video: Add Heading and Paragraph Tags to HTML 5 Document

Was this helpful? Yes | No | I need help

Comments

VisiHow welcomes all comments. If you do not want to be anonymous, register or log in. It is free.




Grimm
Featured Author
811 Articles Started
3,555 Article Edits
154,415 Points
Grimm is a featured author with VisiHow. Grimm has achieved the level of "Colonel" with 154,415 points. Grimm has started 811 articles (including this one) and has also made 3,555 article edits. 2,073,000 people have read Grimm's article contributions.
Grimm's Message Board
Grimm: Hi, my name is Grimm.
Grimm: Can I help you with your problem about "Add Heading and Paragraph Tags to HTML 5 Document"?
 

Article Info

Categories : Software

Recent edits by: Eng, Rushell, Grimm

Share this Article:

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

Do you have a question not answered in this article?
Click here to ask one of the writers of this article
x

Thank Our Volunteer Authors.

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