How to Create a Basic HTML Website: A Step-by-Step Guide

HTML (hypertext markup language) is one of the core components of the World Wide Web, making up the structure of web pages. Once you've created your web page, you can save it as an HTML document and view it in your web browser. Creating an HTML page is possible using basic text editors found on Windows, Mac, and Chromebook computers. This wikiHow teaches you how to write a simple web page in HTML, with expert tips from software engineer Jessica Andzouana.

Quickly Create a Basic Website in HTML

You can use a text editor on your computer (like Notepad for Windows or TextEdit for Mac) to create a simple HTML page. Your HTML file should start with <html> and end with </html>, and all your content (text, body, images, other HTML tags) goes between those tags. Save the text file as an ".html" file.

Part 1

Part 1 of 8:

Creating an HTML File

Download Article

1
Open a text editor. You can write a simple HTML webpage in a basic text editor . On a computer running the Windows operating system, you'll usually use Notepad or Notepad++ . On a Mac, use TextEdit. On a Chromebook, you can use Text .
- Windows - Open Start , type in notepad , and click Notepad (or Notepad++, if installed) at the top of the window.
- Mac - Click Spotlight , type in textedit , and double-click TextEdit at the top of the results.
- ChromeOS - Open launcher, then click Text. The icon says "Code Pad".
2
Save the text file as an HTML file. Before you begin writing HTML, you can save the file in the proper document file type. Use one of the following steps to do so:
- Windows:
  - Click the File in the menu bar at the top.
  - Click Save as .
  - Click the "Save as type" menu and select All files .
  - Type a name for your page (ex: index.html ).
  - Click Save .
- Mac:
  - Click the File menu and select Save .
  - Enter a file name with the ".html" extension (ex: index.html ).
  - Click Save .
- Chromebook:
  - Click Save as in the menu bar to the left.
  - Type a name with the ".html" file extension (ex: index.html ).
  - Click Save .

Part 2

Part 2 of 8:

Adding a Head to Your HTML

Download Article

This tells the web browser that this is an HTML document. ^{[1]
X
Research source}
This is the opening tag for your HTML code . The entirety of your HTML will be written within this element.
This is the tag that opens your HTML head. The HTML head contains information that is not usually displayed on your web page. This information can include, the title, metadata, cascading style sheets (CSS) , and other scripting languages. ^{[2]
X
Research source}
This is the tag to add a title to your page. ^{[3]
X
Research source}
This can be any title you want to name your web page. The title tag is what will appear in Google when people search for your website, which is important for SEO.
6
Type in </title> and press ↵ Enter . This is the tag to close your title tag. The closing tag is usually the same as the opening tag, but with a backslash "/" in front.
- Not all tags you create in HTML have a closing tag.

This is the tag to close your head. Your HTML code for the head of your document should look something like the following:

 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
My Web Page </ 
 title 
 > 
 </ 
 head 
 >

Part 3

Part 3 of 8:

Adding a Body and Text to Your HTML

Download Article

This tag opens the body of your HTML document. The body of the HTML document contains all the elements that are displayed in a web browser, including text, images, buttons, links, frames, video embeds, and more. ^{[4]
X
Research source}
This is the tag to add a heading to your HTML document. An H1 heading is a large, bold heading that typically goes at the top of your HTML document and acts as a title or introduction to the content. ^{[5]
X
Research source}
This can be the title of your page or a greeting.
4
Type </h1> after your heading text and press ↵ Enter . This tag closes your heading.
- Add additional headings as you go. There are six different headings you can create by using the <h1></h1> through <h6></h6> tags. These tags create headings of different sizes. For example, to create three different-sized headings in succession, you might write the following:
  < h1 > Welcome to My Page! </ h1 > < h2 > My name is Bob. </ h2 > < h3 > I hope you like it here. </ h3 >
- The headings show the priority or importance of the text. But it's not necessary to use a higher heading if you want to use a lower heading. For example, you can use an H3 even if there is no H1 in your post.
This is the tag to open a paragraph. Paragraph text is used to display normal-sized text. ^{[6]
X
Research source}
This can be a description for your web page or any other information you wish to share.
7
Type </p> after your text and press ↵ Enter . This is the tag to close your paragraph text. The following is an example of paragraph text in HTML:
```
 < 
 p 
 > 
This is my paragraph. </ 
 p 
 > 
```
- You can add multiple paragraph lines in a row to create a series of paragraphs under one heading.
- You used to be able to change the color of text by framing the text with the <font color="color"> and </font> tags, but this process has been replaced with CSS. To learn more about changing colors in your webpage, check out How to Change Text Color in HTML and CSS .
- You can add bolding, italics , and other text formats using HTML. Here are some quick examples:
  < b > Bold text </ b > < i > Italic text </ i > < u > Underlined text </ u > < sub > Subscript text </ sub > < sup > Superscript text </ sup >
- If you use bold and italic text for emphasis, not just for styling, use the <strong> and <em> elements instead of <b> and <i> . This makes your web page easier to understand when using technologies like screen readers ^{[7]
  X
  Research source} or the reader mode provided in some browsers ^{[8]
  X
  Research source} .
You can add a line break by typing
into your HTML. You can place several line breaks to add space between paragraphs. For example, <br><br><br> will add 3 line breaks.

Part 4

Part 4 of 8:

Adding Media & Links

Download Article

1
Add a picture to your page. You can add an image to your HTML using the following steps: ^{[9]
X
Research source}
- Type <img src= to open your image tag.
- Copy and paste the image URL after the "=" sign in quotation marks.
- Type > after the image URL to close your image tag. For example, if the image's URL is "http://www.mypicture.com/lake", you would write the following:
  < img src = "http://www.mypicture.com/lake.jpg" >
2
Link to another page. You can add a link to your HTML using the following steps: ^{[10]
X
Research source}
- Type <a href= to open your link tag.
- Copy and paste URL after the "=" sign in quotation marks.
- Type > after the URL to close the link portion of the HTML.
- Type a name for the link after the closing bracket.
- Type </a> after the link name to close the HTML link. ^{[11]
  X
  Research source} The following is an example of a link to Facebook.
  < a href = "https://www.facebook.com" > Facebook </ a > .

Part 5

Part 5 of 8:

Aligning Elements

Download Article

1

Locate the element you want to align. According to Andzouana, you can create general alignments for all element types (i.e., paragraph text) using cascading style sheets , also known as CSS. ^{[12]
X
Expert Source

Jessica Andzouana
Software Engineer

Expert Interview} You can align various elements of an HTML document (i.e., images, headers, paragraph text) to the left, right, center, or justify by adjusting the opening tag of the element.
2
Add the align= attribute to the tag. This goes after the element name in the tag. So, for example, if you wanted to change the alignment of a paragraph text element ( ), you would place "align=" after the "p" in the tag (i.e., <p align=> . If you are aligning an image or a hyperlink, add the align modifier after the URL (i.e., <img src="http://www.mypicture.com/lake.jpg" align="center"> ). ^{[13] X Research source}
3
Add the correct alignment to the element. To do so, enter "left", "right", "center", or "justify" (text only) in quotations after the equals (=) sign in the element. So, for example, if you want to align an image, your image tag would look like one of the following:
- Align left - <img src="http://www.mypicture.com/lake.jpg" align="left">
- Align center - <img src="http://www.mypicture.com/lake.jpg" align="center">
- Align right - <img src="http://www.mypicture.com/lake.jpg" align="right">
- Justify text - <p align="justify">

Part 6

Part 6 of 8:

Customizing Colors in HTML & CSS

Download Article

The World Wide Web Consortium (W3C) manages an official list of colors that you'll find on their website . Each color has an official name, a 6-digit hexadecimal code, and a decimal value. You can use any of these values to add color to elements of your webpage. For this example, we'll use the official color names.
2
Set the background color in the <body> tag. According to Andzouana, you can modify various attributes of an HTML element by adding the style= attribute to the tag. ^{[14]
X
Expert Source

Jessica Andzouana
Software Engineer

Expert Interview} Let's say you wanted to make the background color of the entire page lavender, you could do so by using the following body tag:
- <body style="background-color:lavender;">
- You can use color names in the HTML tag, or you can use hexadecimal color codes to get specific color shades.
- According to Andzouana, you can no longer change the background color using HTML5; however, you can still do so using HTML and CSS . ^{[15]
  X
  Expert Source
  
  Jessica Andzouana
  Software Engineer
  
  Expert Interview}
3
Set the text color for any tag. You can also use the style attribute to specify the color you'd like all text within a particular tag to be. For example, let's say you wanted to make the text in one of your <p> tags midnightblue : ^{[16]
X
Research source}
- <p style="color:midnightblue;">
- The color change will only affect the text within that <p> tag. If you start another <p> tag later that should also be midnightblue , you'll need to set the style attribute there as well. Alternatively, you can use CSS to specify the text color for all paragraph tags or other text elements.
4
Set the background color for a header or paragraph. Similar to how you set the background color for the body tag, you can also set background colors for other tags. Let's say you wanted to make the background color of an <p> lightgrey , and the background color of an H1-style header lightskyblue , you'd use:
- <p style="background-color:lightgrey;">
- <h1 style="background-color:lightskyblue;">

Part 7

Part 7 of 8:

Closing Your HTML Document

Download Article

After you have finished adding all your text, images, and other elements to the body of your HTML file, add this tag to the bottom to close the body element.

This tag goes below the tag to close your HTML body at the end of your HTML document. This tells the web browser there is no more HTML code after this tag. Your entire HTML document should look something like this:

 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
wikiHow Fan Page </ 
 title 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
Welcome to My Page! </ 
 h1 
 > 
 < 
 p 
 > 
This is a fan page for wikiHow. Make yourself at home! </ 
 p 
 > 
 < 
 h2 
 > 
Important Dates </ 
 h2 
 > 
 < 
 p 
 >< 
 i 
 > 
January 15, 2019 </ 
 i 
 > 
- wikiHow's Birthday </ 
 p 
 > 
 < 
 h2 
 > 
Links </ 
 h2 
 > 
 < 
 p 
 > 
Here is a link to wikiHow: < 
 a 
 href 
 = 
 "http://www.wikihow.com" 
 > 
wikiHow </ 
 a 
 ></ 
 p 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >

Part 8

Part 8 of 8:

Saving and Opening Your Web Page

Download Article

1
Save your HTML file. Make sure you save the text document as an HTML file with the ".html" extension. When you are finished, be sure to save your work.
- As with any computer work, it's a good idea to save your work frequently as you work.
2
Open the HTML document with your browser. In most cases, you'll be able to double-click the HTML document to do this. If double-clicking the document results in an error, do the following:
- Windows - Right-click the document, select Open with , and click your preferred browser.
- Mac - Right-click (or hold Control and click) the file. Select Open With , and click your preferred browser.
- Chromebook – Double-click the HTML file to open it in a browser tab.
3
Edit the HTML document if needed. You may notice an error in your HTML page. To change it, you can edit the HTML file you created. Once you make your changes, save the file, and refresh the page in your browser to see how it looks.
- On Windows, you can right-click the document and click Edit in the resulting drop-down menu (if you have Notepad++ installed, this will say Edit with Notepad++ instead). ^{[17]
  X
  Research source}
- On Mac, you'll want to click the document to select it, click File , select Open With , and click TextEdit . You can also drag the document into TextEdit. ^{[18]
  X
  Research source}
- On Chromebook, close the Text app, open Files , find your file, and then click it.

Sample HTML

HTML Cheat Sheet

Sample Webpage with HTML

Community Q&A

Search

Add New Question

Question

How do I upload my webpage and make it public?

Community Answer

You can set up your own server, but I recommend buying web hosting from some of the available hosting companies. There are also free hosts out there, but they would put their ads on your webpage.

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 76 Helpful 257
Question

Can I create a web page using Notepad?

Community Answer

Yes. Write the code and then press edit-save and then call it what ever you want. After you called it something, you have to type .html at he end. Save and use as needed.

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 125 Helpful 405
Question

Can I create an interactive design of a website using only HTML?

Community Answer

Yes, you can put some pictures on there and a background as well.

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 34 Helpful 102

See more answers

Ask a Question

200 characters left

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

Submit

Tips

Many people use Notepad++ to write and compile their code. ^{[19]
X
Research source}

Thanks
Helpful 0 Not Helpful 0
Tags should always be closed in a mirror image of their open counterparts. For example, <tag1><tag2> should be closed as </tag2></tag1> .

Thanks
Helpful 0 Not Helpful 0
You can add side-scrolling text to your website using the <marquee></marquee> tag, but keep in mind that some browsers might not recognize this tag.

Thanks
Helpful 0 Not Helpful 0

Show More Tips

Tips from our Readers

The advice in this section is based on the lived experiences of wikiHow readers like you. If you have a helpful tip you’d like to share on wikiHow, please submit it in the field below.

Remember, HTML tags are not case sensitive. You can write <HTML>, <html>, or <HTmL>, and they'll all work.

Submit a Tip

All tip submissions are carefully reviewed before being published

Name

Please provide your name and last initial

Submit

Thanks for submitting a tip for review!

Warnings

It's best to host your own images on Imgur or similar if you plan on uploading images to your web page. Posting other people's pictures may result in copyright infringement.

Thanks
Helpful 6 Not Helpful 3

You Might Also Like

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

Expert Source

Jessica Andzouana
Software Engineer

[13]

[14]

[15]

[16]

[17]

[18]

[19]

Log in

How to Create a Basic HTML Website: A Step-by-Step Guide

Quickly Create a Basic Website in HTML

Steps

Creating an HTML File

Adding a Head to Your HTML

Adding a Body and Text to Your HTML

Adding Media & Links

Aligning Elements

Customizing Colors in HTML & CSS

Closing Your HTML Document

Saving and Opening Your Web Page

Sample HTML

Community Q&A

Tips

Tips from our Readers

Warnings

You Might Also Like

References

About This Article

Reader Success Stories

Is this article up to date?

Quizzes

You Might Also Like

Featured Articles

Trending Articles

Featured Articles

Featured Articles

Watch Articles

Trending Articles

Quizzes

Explore Categories