How to Write an HTML Page

Written by Jack Lloyd

Last Updated: February 19, 2022 Tested

This wikiHow teaches you how to create a webpage using HTML. Some elements of your webpage can include text, links, and images.

Part 1

Part 1 of 7:

Preparing to Write

Download Article

1
Open a simple text editor. On Windows computers, the default simple text editor is Notepad, while Mac users have a program called TextEdit:
- Windows - Click Start
  , type in notepad, and click Notepad.
- Mac - Click Spotlight
  , type in textedit, and click TextEdit in the results.
2
Understand HTML tags. When writing in HTML, different elements of the page are indicated by open tags (<>) and closed tags (</>), with the text for an element fitting in between the tags.
- For example, a paragraph is created by typing the open paragraph tag (<p>), entering the text that you want to use, and then entering a closed paragraph tag </p>.
- Each line of code must go on its own line, so you'll normally press ↵ Enter after writing a line of code.
Advertisement
3
Review the basic HTML format. For any HTML document that you create, you'll start the document with a "document type" tag (<!DOCTYPE html>), an HTML tag (<html>), and a BODY tag (<body>). You'll also end the document with a closed BODY tag and then a closed HTML tag. For example:
- <!DOCTYPE html>
- <html>
- <body>
- </body>
- </html>
Consider learning about CSS. CSS is a language that acts as a complement to HTML; it covers page formatting (e.g., colors, centered text, etc.) and other visual aspects of the webpage.

Part 2

Part 2 of 7:

Creating a Text Page

Download Article

1
Set up the document. Add your document's initial HTML text:
- <!DOCTYPE html>
- <html>
- <body>
2
Create your webpage's title. This is also known as the "head", and it defines the text that appears on the browser's tab. Add the following text to your document to do so, making sure to replace "Your Title" with your preferred text:
- <head>
- <title>Your Title</title>
- </head>
3
Add a header. Type in <h1>Text</h1> and press ↵ Enter. You can place any text that you want to use between the <h1> and </h1> tags.
- Headers can be stacked throughout the page. For each header you use after the first one, just increase the number (e.g., for the second header, use <h2></h2>).
4
Create a paragraph. Type in <p>Text</p> and press ↵ Enter, making sure to replace "Text" with your paragraph's text.
- You can place each line of text on a new line by repeating the <p></p> tags for each line of text.
You can add as many headers and paragraphs to your webpage as you like.
Type in <br>Text</br> and press ↵ Enter. This will create page gaps between your paragraphs if you want to space different parts out.
7
Format your paragraphs' text. You can use different tags inside of the <p></p> tags (for example, <p><em></em></p>) to indicate formatting:
- <em>text</em> - Creates italic text.
- <strong>text</strong> - Creates bold text.
- <ins>text</ins> - Creates underlined text.
- <del>text</del> - Creates text with a line through it.
- <small>text</small> - Creates small text.
-  - Creates invisible text. Used for adding notes to your webpage.
When you're finished adding text, type in </body> and press ↵ Enter, then type in </html> to close out the document. Now that your text page is technically complete, you can add other things like links, bullet points, and images to it.

Part 3

Part 3 of 7:

Adding Links

Download Article

If you want to add a link to a webpage in the middle of a paragraph, for example, you'd go to that paragraph and find the word or phrase that you want to use as the link.
Go to the website to which you want to link, then select its address in the bar near the top of the window and press Ctrl+C (Windows) or ⌘ Command+C (Mac).
Type <a href=> into the space directly before the word or phrase that you want to use as a link.
4
Paste in the website's URL. Click between the href= and the > and then press Ctrl+V (Windows) or ⌘ Command+V (Mac). You should see the link appear to the right of the href= text.
- For example, if you're linking to YouTube, you'd see <a href=https://www.youtube.com/> here.
5
Add the closed link tag. On the other side of the text that you want to use as a link, type in </a>. For example, in a line that says "Follow me on Twitter" where you're linking to Twitter and using "on Twitter" as the link, your code would resemble the following:
- <a href=https://www.twitter.com/>on Twitter</a>
6
Add an ID tag. ID tags allow you to link one piece of text to another section in a different paragraph on the same page. To do so:
- Replace the <p> tag with <p id=text>
- Find the text that you want to use as a link.
- Type <a href=#text> before the text. Make sure that the text after "#" matches the text after "id=" here.
- Type </a> after the text.

Part 4

Part 4 of 7:

Adding Bullet Points

Download Article

Bullet points are best-suited for listing information or creating organized steps. Once you've found a paragraph beneath which you want to add bullet points, proceed.
Above the place where you want to put your bulleted list, type in <br> and press ↵ Enter.
Type in <li>text</li> and press ↵ Enter, making sure to replace "text" with your bullet point's text.
As long as you're using the <li></li> tags around lines of text, the text between the tags will be formatted as a bullet point.
5
Create a sub-point. Type in <ul>text</ul> and press ↵ Enter. Your text will appear indented below the previous bullet point.
- Text with the <ul></ul> tags won't have a bullet before it.
If you chose to use a page break earlier, type in </br> and press ↵ Enter. Your bulleted list will stand alone on the page.

Part 5

Part 5 of 7:

Adding Images

Download Article

The image will appear on the webpage wherever you insert the code for the image.
To do so, type in <img but don't press ↵ Enter. Since the "image" tag is a complete tag in and of itself, it doesn't need a closing tag.
Type in src= after the <img tag, making sure to place a space between "img" and "src".
Copy the URL for the image that you want to add, then paste it to the right of the source tag.
Type in style=, then type in width:px;height:px.
Type in the image's width in pixels after "width:", then type in the image's height in pixels after "height:".
This is the text that displays if the image fails to load. To do so, type in alt= and then type in the description.
Place a > bracket after the last character in the alternate description to do so.
9
Review your image's code. It should resemble the following:
- <img src=https://www.w3schools.com/w3css/img_fjords.jpg style=width:600px;height:400px alt=Fjord>

Part 6

Part 6 of 7:

Saving the Document on Windows

Download Article

It's in the top-left side of the Notepad window. A drop-down menu will appear.
You'll find this near the top of the File drop-down menu.
Click a folder on the left side of the window (e.g., Desktop).
4
Enter an HTML name for your file. Type whatever name you want to use for the file followed by .html into the "File name" text field.
- For a file named "meow", for example, you'd enter meow.html here.
A drop-down menu will appear.
It's in the drop-down menu.
7
Click Save. You'll see this in the bottom-right corner of the window. Doing so saves your text file as an HTML page.
- You can open the HTML page file in most browsers by clicking and dragging the file onto an open browser window.

Part 7

Part 7 of 7:

Saving the Document on Mac

Download Article

It's in the upper-left side of the screen. A drop-down menu will appear.
You'll find this near the top of the drop-down menu. The Preferences window will open.
It's at the top of the page.
This is below the "When Saving a File" heading.
Click the red circle in the top-left corner of the window to do so.
It's a menu item at the top of the screen.
This option is in the drop-down menu.
It's in the upper-left side of the screen.
This is near the top of the drop-down menu.
10
Enter an HTML name for your file. Replace the name in the "Save As" text field with whatever name you want followed by .html.
- For example, for a document named "my_website", you'd enter my_website.html here.
11
Click Save. Your HTML document will be saved in your default save location (e.g., Desktop).
- You can open the HTML page file in most browsers by clicking and dragging the file onto an open browser window.

Community Q&A

Search

Add New Question

Question

How can I write HTML Tags in HTML?

Ronav Puri

Community Answer

You can write HTML tags between angle brackets and in capital letters. If you want to write an ending HTML tag, put a forward slash between the angle brackets and write the tag after that.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 0 Helpful 9
Question

are there two methods of writing HTML?

Community Answer

There is only one method, unfortunately. You might be thinking about CSS, but that is a different language, and not HTML.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 0 Helpful 0
Question

How can I use tag background color or text color?

Community Answer

You can't do it with HTML. You need to use CSS, a language that you can find many tutorials for on this website.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 1 Helpful 1

See more answers

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Tips

Using a dedicated code editor like Notepad++ will make typing in HTML much easier and more intuitive than using Notepad or TextEdit.

Thanks
Helpful 1 Not Helpful 0