For many people, HTML can seem like a foreign language.

But it’s what every website we use is made of, and it’s more accessible than you might think.

With this quick introduction, you’ll know how to create a website using HTML in no time.

create a website using HTML

What Is HTML?

HTML is the language of the internet. It tells your browser what information to display, and combined with CSS how to display it. HTML is really nothing more than lines of text, but the way you use it can create amazing things through your browser.

Getting Started

There are a couple of basic things you need to know before you get started.

  1. You don’t need any fancy programs to write HTML. You can use a basic text editor like Notepad, or there are other text editors available, as discussed in the link below.

https://setapp.com/how-to/alternative-to-notepad++-for-mac

You can also use the w3schools website to write your code and see it in action at the same time.

If you have access to the Adobe Suite, Dreamweaver does the same thing and has tools to save you typing everything from scratch.

  1. Once you’ve built your website you will need somewhere to host it. Hosting a website just means storing all the HTML and CSS files and putting them online for everyone to access.

There are tons of different providers with different costs and benefits. Do a little research and find the one that’s right for you.

How To Create A Website Using HTML

Tags and elements are what make up HTML. They do different things and can be combined in different ways to build your website. There are a lot of tags to learn, but some you will use frequently and become familiar with quickly.

Tags and Elements

Tags are just words encased within < and > which tell the browser what something is. They don’t show up on the final website.

An element is something incased in tags. For example, you will have an opening tag, the text you want people to see, and a closing tag. Closing tags are the same as opening tags, except they have an / to indicate they are closing.

Basic HTML Tags

<body>
This is where the main section of your website will be built. It will open near the start of your document and close near the end.

<h1> to <h6>
Use h tags for titles. You can use h followed by a number from 1 to 6 depending on the type of title you need.

<p>
Use the <p> tag to add text which isn’t a title.

<br>
Use this tag to create a line break. Creating spaces in your HTML document with the return key doesn’t make a space on your website.

Spaces with the return key in your document just make it easier to follow and find problems.

The Start of Any HTML Doc

All HTML documents need the following information at the top before the body starts.

<!DOCTYPE HTML>
All HTML documents start with this tag, which tells the browser the document is HTML.

<html>
Your entire HTML document will be encased in a <html> tag at the beginning and a closing </html> at the end.

<head>
This is used for metadata at the beginning of your document. Metadata is information about your file, like titles, fonts, and styles.

<title>
Used in the header, this is the text people see in the tab when they have a page of your website open.

Images

Once you have a basic layout for your website you might want to add images.

Use the <img> tag when adding an image to your webpage. It doesn’t have a closing tag.

You need to include the source of the image and some alternative text. This will display if a user can’t see the image or it doesn’t load for some reason. It will also be read by a text reader if one is in use.

The code will look like this:

<img src=”image_file.jpg” alt=”This is an image”>

You should also always specify the size of your image using width and height. Adding this to your code will look like this:

<img src=”image_file.jpg” alt=”This is an image” width=”300″ height=”500″ >

Links

With one page of your website set up, you can make as many as you want! You will want to link to your other pages, or even to other places on the web.

To do that, use the <a> tag, specify the URL of the page you are linking to, and include some text to tell the user where you are taking them.

The code will look like this:

<a href=”url“>link text</a>

How to Link an Image in HTML

You might want to link to another page using an image. To do this, combine the two pieces of code above, like this:

<a href=”url”>
<img src=”image_file.jpg” alt=”this is a link”>
</a>

HTML Tips

Don’t forget that HTML is there to provide structure to your website. You should use CSS to make it look good.

You can view the HTML of any website by right-clicking anywhere on a page and clicking View Page Source. This will show you how others have coded their websites and might help you if you’re stuck or need ideas.

Always close your tags. It might be an idea to start any element with the opening and closing tag, and then put the required info in between so that you don’t forget to close it.

Learn by doing. Try different things and see what happens when you do them. Don’t be afraid, you can’t break the internet!

What to Do Now

This article has given you the basics on how to create a website using HTML. It should help you to build a basic web page structure. There are tons of tutorials on the web to help you build something more complex and introduce styling.

Be sure to share your top tips and resources for building websites in the comments below, or let us know how you got on with building your first page.

You May Also Like : 3 Steps to Build Your Own Website