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 help you understand programming concepts.
It will also help when it’s time to modify or improve the appearance of your website.
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).
Now let’s look at the most basic element of HTML syntax: tags.
The HTML language is made up of a system of serial labels or tags, which include instructions that browsers translate as:
- 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:
<strong>This text is in bold.</strong>
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.
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.
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:
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.
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.
<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:
- Photos or images
- 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.
<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>
The <p> and <br> tags will help you organize your text into paragraphs and line breaks.
<p>Your first paragraph.</p>
<p>Your second paragraph.</p>
A second sentence (pasted to the first).</p>
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 (‘_’)
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.
<a href=”https://www.godaddy.com/en-uk”>Visit the GoDaddy blog</a>
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.
Although usually located inside the <head> tag, with the <style> attribute, you can define the style of your content in terms of:
- Font size
- Typography etc.
<p style=”color:red; font-size:100px”>Hello World</p>
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.
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.
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.