10 basic HTML codes for web pages (with examples)

If you’ve ever tried creating a website, you may have come across terms such as HTML editor, basic HTML codes, and HTML tags on the internet.

While most website building platforms (such as WordPress) are fairly easy to use, learning about HTML will allow you to create basic web pages and help you understand programming concepts.

It will also help when it's time to modify or improve the appearance of your website.

While knowing HTML and CSS is all you need to build a basic web page, the true value of mastering HTML is that it lays the foundation for learning languages such as JavaScript, React, Python and SQL.

Even back-end developers can benefit from HTML training.

Here we share the 10 HTML codes that you should know, accompanied by examples so that you can learn how to use them.

Do better business with Xero - FREE for six months. Xero accounting makes it quicker and easier for small businesses to send invoices, reconcile payments and manage finances. Claim offer.

What is HTML?

HTML stands for Hypertext Markup Language.

HTML codes are the universal language used to create and format websites. They work on any operating system (Windows, Mac, Linux, etc.) and with any browser (Chrome, Explorer or Mozilla).

Although it is not a very sophisticated programming language, understanding HTML allows you to insert other more powerful codes, such as JavaScript, for example.

Now let's look at the most basic element of HTML syntax: tags.

HTML tags

The HTML language is made up of a system of serial labels or tags, which include instructions that browsers translate as:

Images
Text
Hyperlinks
Word lists
Tables etc...

For an element of this type to be read, the tag must have two parts:

A start tag (<tag>)
A closing tag (</tag>)

All HTML tags appear between hyphens (< >).

For example, the <strong> and </strong> tags define bold text. If we write a sentence with the following code:

The result will be:

Try it yourself! Insert the above code into an HTML renderer.

As you may have noticed:

The initial tag is used to define the behavior of the content (for example, if text will be bold or if it will have a specific size).
The closing tag tells the browser how far this behavior should extend. To build the "closings" you just need to add a slash (/) to the beginning of the tag.

Remember if you don't add the closing tag, everything you write after the start tag will be displayed with that format.

It should be noted that not all tags necessarily need a "closure."

For example, the <br> tag to insert line breaks is considered an "empty element." It can go by itself anywhere in the body of the text.

It’s a good idea to use HTML documents as you create your websites. This will allow you to have all the basic html codes you are going to use on each page organized in one place.

You can create this document in the text editor of your choice (Microsoft Word or MS notepad). Just make sure to save it as .html or another web format.

A note about basic HTML structure

Before looking at the basic codes, you should know that the first line of your HTML document should always contain the tag <!DOCTYPE html>. This will make your site's code readable in any browser.

A well-assembled HTML document contains four essential tags for the content to be distributed correctly. They are as follows:

10 essential HTML tags

Before we look at the 10 basic HTML codes, you should know that the first line of your HTML document must always contain the <!DOCTYPE html> tag. This will make your site's code readable in any browser.

A well-built HTML document has 10 essential tags for the content to render correctly. These are:

1.HTML

First on our list of basic HTML codes is <html>. It is placed at the beginning of an HTML document and tells browsers that the page has HTML code so they can read it that way. Following the syntax of the language, the closing tag </html> will be the last element of the document.

2. Header

Next, <head> is the tag used for the header of the page. Its main function is to contain all the information on the operation of the site. Because of this, it is an encrypted code that people who visit the web page cannot see.

3. Page title

<title> is the tag that gives your site a name so users can identify it. This is the title that they will see in their browser tabs.

4. Body

<body> is the tag that contains all the individual elements of the site. This tag includes all the visible content of the site.

Here you can insert:

Text
Photos or images
Videos
Any other functionality you want to display

An example of how the code would look:

If you create an .html document with this code and open it in your browser, you'll see something like this:

With these four basic HTML tags, you already have the “skeleton” of your web page.

The next task would be to enter content (between the <body> and </body> tags) and control your tags.

Now let's look at the most popular types of content.

5. Titles and subtitles

<h1>, <h2> and <h6> are tags that format titles and subheadings within the text, which help to prioritize the information for the reader.

We recommend that you use the H1 tag only once within the content for each web page.

Example:

<h1>This is an H1 tag. Use it in the title.</h1>

<h2>This is an H2 tag. Use it in section headers.</h2>

<h3>This is an H3 tag. Use it in sub-sections.</h3>

<h4>This is an H4 tag. They are not used very often.</h4>

Result:

6. Paragraphs

The <p> and <br> tags will help you organize your text into paragraphs and line breaks.

Example:

<p>Your first paragraph.</p>

<p>Your second paragraph.</p>

<p>A sentence.<br>

A second sentence (pasted to the first).</p>

Result:

7. Images

With the <img> tag, you can add photos and graphic images to the body of your web page.

Combining it with the src attribute will allow you to specify the location where the image is located, and the alt attribute will help you give that image a title for search engines like Google to read.

The structure of the attributes is as follows:

First comes the word or abbreviation that defines it (in this case src is an abbreviation of source)
Then the equal sign (=)
Lastly the modifier of the attribute in double quotes. (“_”) or simple ('_')

Example:

Result:

8. Hyperlinks

The <a> tag allows you to insert a clickable hyperlink to your page. For example, the link to your social networks or to another website with which you want to connect your page.

Example:

<a href="https://www.godaddy.com/resources/uk">Visit the GoDaddy blog</a>

Result:

Visit the GoDaddy blog

As you may have noticed, the attribute used here was href.

9. Lists and indexes

<ol> is used to add numbered lists and <ul> is used to add bullets, which improve the readability of your text.

Elements like these break up long passages of text into bite-sized portions that are easy for people to consume.

Example:

Result:

10. Style

Although usually located inside the <head> tag, with the <style> attribute, you can define the style of your content in terms of:

Colour
Font size
Typography etc.

Example:

<p style="color:red; font-size:100px">Hello World</p>

Result:

Bonus Tip: Looking at HTML codes you find on other sites can help you understand more about web development. These are available at all times by right clicking any open white space and selecting “View Page Source” from the dropdown.

These 10 basic HTML codes should get you started

We hope this article has aroused your curiosity to experiment with how these basic HTML codes work, so you can understand the secret language behind web pages.

Remember that practice makes perfect.

Although you may move on to much more complex languages, learning HTML will teach you how:

A computer language’s syntax works
To use a code editing application
To run and debug code

All of these skills are relevant to anyone looking to start a programming career.

But if computer programming isn't your thing, don't worry! There are also website builders like GoDaddy's, where you can create your website from scratch without any previous programming knowledge.

_____

Got a few minutes? (Probably not.)

Fumbling for login credentials, running endless updates, explaining product purchases ... No thanks. We built the Hub from GoDaddy Pro to save you on average three hours per month for every client site you maintain.

Sign up for Free