10 basic HTML codes for web pages (with examples)

Web ProCategory
9 min read
Alejandra Rubio Bravo

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.

Related: How to start a web design business — complete guide

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).

Closeup of basic html code on a monitor

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:

  1. A start tag (<tag>)
  2. 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:

<strong>This text is in bold.</strong>

The result will be:

Output of HTML bold

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:

Example of four basic html labels

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

Output-of-content-html

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>

<h5>This is an H5 tag.</h5>

<h6>This is an H6 tag.</h6>

Result:

Output of various size html subheads

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:

Output for paragraph HTML

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:

<img src="https://images.unsplash.com/photo-1535378917042-10a22c95931a">

Result:

Asimo robot

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:

HTML code for a bulleted list

Result:

Output for list html

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:

Output for type color and size html

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

Products Used