What you need to start building a web page

You need three things to create a web page: a text editor, knowledge of HTML (the language that structures content), and a way to view your work in a browser. You do not need special software or a web hosting account to start — you can build and test pages on your own computer right now.

A text editor is any program that saves plain text without formatting. Notepad (Windows), TextEdit (Mac), or gedit (Linux) work fine for learning. As you progress, developers use editors like Visual Studio Code, Sublime Text, or Atom because they highlight HTML code in different colors and catch mistakes automatically. The browser you already have — Chrome, Firefox, Safari, or Edge — is your testing ground.

HTML is a set of tags that tell the browser what each part of your page is. A tag looks like <p> for a paragraph or <h1> for a heading. You type these tags around your content, save the file with a .html extension, and open it in your browser. The browser reads the tags and displays the page.

Key Takeaways

  • You can create a working web page using only a text editor and a browser, with no special software or internet connection required.
  • Every HTML page needs an opening <!DOCTYPE html> declaration, an <html> tag, a <head> section, and a <body> section where your visible content goes.
  • Common HTML tags include <h1> through <h6> for headings, <p> for paragraphs, <a> for links, and <img> for images.
  • Save your file with a .html extension, then open it in your browser by dragging the file into the browser window or using File > Open.
  • CSS (a separate language) controls how your page looks; HTML only controls what things are, not how they appear.

The basic structure every HTML page needs

Every web page starts with the same skeleton. The first line is <!DOCTYPE html>, which tells the browser this is an HTML5 page. Then comes the <html> tag that wraps everything else. Inside that are two main sections: the <head> and the <body>.

The <head> section contains information about the page that visitors do not see directly. This includes the page title (which appears in the browser tab), links to stylesheets, and metadata. The <body> section holds all the content that appears on the page — headings, paragraphs, images, links, and everything else the visitor reads or interacts with.

Here is a minimal working page:

<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <h1>Welcome</h1> <p>This is my first web page.</p> </body> </html>

Type this into your text editor, save it as index.html, and open it in your browser. You will see "Welcome" as a large heading and "This is my first web page." as regular text below it.

Common HTML tags and what they do

Heading tags range from <h1> (largest, usually the page title) down to <h6> (smallest). Use only one <h1> per page. <p> creates a paragraph with automatic spacing before and after. <strong> makes text bold, and <em> makes it italic.

Link tags use the <a> tag. The href attribute tells the browser where to go: <a href="https://example.com">Click here</a>. You can link to other pages on your own computer by using the filename: <a href="about.html">About</a>.

Image tags use <img> with a src attribute pointing to the image file: <img src="photo.jpg" alt="A description">. The alt attribute describes the image for people using screen readers and appears if the image fails to load. Save image files in the same folder as your HTML file, or use the full web address of an image hosted elsewhere.

List tags come in two types. <ul> creates an unordered (bulleted) list, and <ol> creates an ordered (numbered) list. Each item goes in an <li> tag. For example:

<ul> <li>First item</li> <li>Second item</li> </ul>

How to save and view your page in a browser

Open your text editor and type your HTML. When you save, use a filename that ends in .html — for example, index.html, about.html, or contact.html. The name index.html is special: when someone visits a folder on a web server, the server automatically shows index.html first.

To view your page, open your browser and use File > Open (or press Ctrl+O on Windows, Command+O on Mac). Navigate to your HTML file and click Open. The page will appear in the browser exactly as it would on the internet. If you make changes to the HTML file, save it, then refresh the browser (press F5 or Command+R) to see the updates.

You can also drag the HTML file directly into an open browser window, and it will load when ready. This is the fastest way to test while you are working.

Adding style with CSS

HTML controls what things are — a heading, a paragraph, a link. CSS (Cascading Style Sheets) controls how they look: colors, fonts, spacing, and layout. You can write CSS in a separate file or inside your HTML file in the <head> section using a <style> tag.

Here is a straightforward example that makes all paragraphs blue and larger:

<style> p { color: blue; font-size: 18px; } </style>

The p is a selector that targets all <p> tags. Inside the curly braces, you list properties and their values. You can style headings, links, images, and any other element. Learning CSS takes time, but starting with straightforward color and font changes helps you see how HTML and CSS work together.

Testing your page and fixing common mistakes

The most common mistake is forgetting to close tags. Every opening tag like <p> needs a closing tag like </p>. The closing tag has a forward slash. If you forget, the browser may display your page incorrectly or not at all.

Another frequent error is saving your file as plain text but with the wrong extension. Make sure your editor is set to save as plain text (not rich text or Word format) and that the filename ends in .html. If you save as mypage.txt, the browser will try to display the raw HTML code instead of rendering it as a page.

Use your browser's developer tools to spot problems. Right-click on your page and select "Inspect" or "Inspect Element." The developer tools show you the HTML structure and any error messages. This is how professional developers debug their code every day.

Moving your page to the internet

Once your page works on your computer, you can publish it to the internet using web hosting. You upload your HTML file (and any images or CSS files) to a hosting provider's server using FTP (File Transfer Protocol) or a file manager in the hosting control panel. The hosting provider assigns you a web address, and your page becomes visible to anyone on the internet.

Many hosting providers offer free or low-cost plans for beginners. Some, like GitHub Pages, let you host static pages (pages without a database or server-side code) for free. You push your files to a GitHub repository, and the site goes live automatically. This is a common workflow for learning and for hosting portfolios.

Frequently Asked Questions

Do I need to know HTML to create a web page?

If you want to build a page from scratch and understand how it works, yes. If you want to create a page quickly without learning code, website builders like Wix, Squarespace, or WordPress offer drag-and-drop editors. But learning HTML gives you control and is not difficult — you can learn the basics in a few hours.

What is the difference between HTML and CSS?

HTML is the structure and content — it defines what things are (headings, paragraphs, links). CSS is the presentation — it controls how those things look (colors, fonts, spacing, layout). You need both to create a complete page. HTML without CSS works but looks plain; CSS without HTML has nothing to style.

Can I create a web page on my phone or tablet?

You can write HTML in a text editor app on a phone or tablet, but testing and viewing the page is harder without a full browser. A computer or laptop is much easier for learning and building. Once you know HTML, you can edit pages on any device, but starting on a computer is recommended.

How do I add a background image to my page?

Use CSS in your <style> tag. For example: body { background-image: url('image.jpg'); } tells the browser to use image.jpg as the background. Save the image file in the same folder as your HTML file, or use the full web address of an image hosted elsewhere.

What happens if someone views my page on a phone instead of a computer?

The page will display, but it may be hard to read if you did not design it to work on small screens. This is called responsive design. You control it with CSS media queries that change the layout based on screen size. Learning responsive design comes after you master the basics of HTML and CSS.