Home Technology The Basics of HTML: A Beginner’s Reference Guide

The Basics of HTML: A Beginner’s Reference Guide


Thinking of building your own website from scratch but don’t know any HTML?

HyperText Markup Language or HTML forms the backbone of nearly every website on the Internet. The latest version HTML5 is used on 85.6% of all sites. And knowing how it works can turn an average website into something spectacular.

This article looks at the basics of HTML and provides a beginner’s reference guide.

We explain what headings are and how they’ll boost your SEO. You’ll also learn about anchor links, adding images, and how to format text.

Read on to explore the fundamentals of HTML and use them to build your first website.

Heading Tags

Headings consist of all <hX> tags e.g. <h1>, <h2>, etc. They appear as bold statements and their job is to summarize the content directly below them.

<h1>Most important heading</h1>
<h6>Least important heading</h6>

Use and placement of heading tags can help search engine optimization (SEO) or how to get to the top of Google Search.

However, that doesn’t mean stuffing your visitor keywords/search phrases into all your headings. Use headings to categorize your content and make it easy to read.

SEO and visitors will follow as a result.

Hyperlinks and Anchor Tags

Hyperlinks enable your users to jump between pages on your site or go to another website. The tag looks like this:

<a href=”contact.html”>Contact</a>

Use the href property to add the URL/page address of your choice.

If the link is to a page in the same folder then simply add the name and extension. If it’s in another folder use ‘../’ to go up a level e.g. <a href=”../contact.html”>…

Anchor tags let you jump around the page. Simply add an id property to one of your headings and link to it by using a #hash.

<a href=”#about”>About Us</a>

<h2 id=”about”>Read All About Us Here</h2>

When your visitor clicks the anchor tag their browser will zoom down to the related <h2> tag. Just ensure the id and # parts match.

Remember, you can link to PDFs too. And if you need help converting your HTML files to PDF format check out PDFSharp.

Paragraphs and Formatting

The paragraph tag looks like <p>. Make sure to enclose the text within it with a </p> tag.

You can format your paragraphs using the style property. Here’s an example to make the text bold.

<p style=”font-weight: bold;”>Some bold text</p>

You can also format elements using tags like <strong> for bold and <i> for italic. Try to use the more modern style property as it offers greater flexibility.

Images and Media

HTML5 includes the traditional <img> tag to insert images but also introduces <video> and <audio>.

<img src=”smile.png” />

<source src=”vid.mp4″ type=”video/mp4″ />

The <audio> tag works the same as <video> but include a valid .mp3 file source instead of .mp4. HTML5 lets you add multiple sources so if one doesn’t work it tries the next automatically.

Basics of HTML and More at Digi Gyan Blog

Now you know the basics of HTML it’s time to get coding!

Don’t forget that you can learn more fundamentals and advanced subjects on our blog. Just visit the technology section to read all about SEO and JavaScript.

Please comment on this article by joining us on social media by clicking on the links at the bottom.


Please enter your comment!
Please enter your name here