Add Heading and Paragraph Tags to HTML 5 Document
Edited by Grimm, Rushell, Eng
3 Parts:
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
- 1 Steps
- 2 ".
- We'll go ahead and close that now by typing "
- 2.1 ".
Video: Add Heading and Paragraph Tags to HTML 5 Document
- 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.
- 2.2 Comments
Steps
- 1Notepad is pinned to the taskbar in this example, so we can click to open it.To get started, we need to open up our Notepad, so we can begin editing.
- 2Once Notepad is open, navigate to the desktop, where we're going to left click on the "visi.html" file and hold down on that.
- 3Then 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.
- 4Then we can let go of the left mouse key, and it will drop that code into the Notepad window.
- 5Inside 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.Now, we'll see from the top that we have "!DOCTYPE", the "html" tag, our "head" tag, "title" tag and "body" tag.
- 6A heading tag is always one letter and one number, we'll open the tag, and then we'll type ".
"
- 7We'll go ahead and close that now by typing "".
- 8
- 9We'll close that one as well.
- 10Now, let's do a smaller one, ".
"
- 11Enter a blank line after the first header tag.Now, we have three header tags, and we need paragraph information.
- 12The paragraph tag is just "p", so we'll type ".
" for paragraph
- 13Now, we'll close our paragraph tag.
- 14Then we'll highlight that by clicking and dragging with the mouse.
- 15Copy it by pressing CTRL+C or right click and select "Copy".
- 16Go down to the next heading tag, "<h2>" and hit CTRL+V to paste the paragraph tag information.
- 17We could also right click and choose "Paste" on the menu.
- 18If we accidentally paste, but don't want it there, we can press "CTRL+Z" to get rid of it.
- 19Now, 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.
- 20In the ".
" tag, we'll type "Heading 1"
- 21Then we'll type "Para 1" in the "<p>" tag.
- 22We'll type "Heading 2" in the "<h2>" tag.
- 23Then go down and type "Para 2" in the "<p>" tag.
- 24We'll type "Heading 5" in the "<h5>" tag, and we're done.
- 25Now, we're going to save this by clicking on "File" on the menu at the top and then "Save" from the drop-down menu.
- 26We'll go ahead and leave the Notepad file open while we double click on the "visi.html" file on the desktop.
- 27This will launch our web browser and open the file.
- 28At the top we have the large "Heading 1".
- 29Then we have a "Para 1" in much smaller text.
- 30We have "Heading 2".
- 31"Para 2" is directly under that.
- 32Finally we have the much smaller "Heading 5".
- 33This is followed by "VisiHow is Awesome!" In another tutorial, we'll explain how to change the size and format of these text options.
- 34For now, we'll close the web page by clicking on the "x" in the top right-hand corner.
- 35In 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.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.
- 36This takes us back to the desktop.For now, we'll close the Notepad window by pressing the "x" in the top right corner.
- 37Thanks 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.We're done with the tutorial on adding heading and paragraph tags to our document, and we'll now conclude this tutorial.
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
Article Info
Categories : Software
Recent edits by: Rushell, Grimm
