Easy Website HTML You Should Know

Welcome back to Part 3 of the Website Series where I share information about building a website for your brand or business. If you are new to the series, check out [Part 1] How to Make a FREE Personal Brand Website and [Part 2] 8 Reasons You Need a Website for Your Personal Brand.

My major in Computer Science and I have been coding since I was fourteen years old. Throughout my career, I have realized that there are website owners that have no idea how to implement easy code to make their website exactly what they want.

Although you can create a website and content for a brand without ever using code, having the knowledge allows you to customize what you provide to your customers. To provide additional value, your website, email newsletters, consistent branding, and use of third party content require the use of HTML.

What is HTML?

HyperText Markup Language (HTML) is a standard language for web pages.

To give you some background Sir Tim Berners-Lee invented the World Wide Web in 1989. It started as a large network of documents written in HTML as one of the three technological foundations. Eventually text documents became websites with multiple pages, and HTML transformed into HTML and Cascading Style Sheets (CSS).

You can learn HTML further with:

Here are 8 great and in-depth examples of HTML you should know.

1. Images

If you need to add an image in your content, use <img src=”[Image Link]”> with <img> as the tag and src as the source.

You can access an image link if it is published online by right clicking on the picture and “copy image address”. If the image you want is not published online already, you can put it on a hidden page in your site or just upload to the platform you are using.

<img src=”https://static.wixstatic.com/media/7a0e66_b3cdc751bf4e4f5a824b03ee83ab38fa~mv2.jpg/v1/fill/w_580,h_752,al_c,q_85,usm_0.66_1.00_0.01/Book%20Cover%20(Book).webp”>

2. Hyperlinks


To add a link, you should use the <a></a> tag, like <a href=”[Link]”>[Link Text]</a>

<a href=”https://www.ayounglegend.com/book”>The Strategic Mind of A Young Legend</a>

Link to an email address

Have you ever hovered over a link that did not take you anywhere, but a link showed up in the bottom left corner with the email you were looking for? Here’s how to do just that.

<a href=”mailto:contact@ayounglegend.com”>How to contact me</a>

Link an image

Although the above line says how to link an image, this can apply to anything else you would like to link. You can link a button, video, box, etc.

<a href=”https://www.ayounglegend.com/book”>The Strategic Mind of A Young Legend

<img src=”https://static.wixstatic.com/media/7a0e66_b3cdc751bf4e4f5a824b03ee83ab38fa~mv2.jpg/v1/fill/w_580,h_752,al_c,q_85,usm_0.66_1.00_0.01/Book%20Cover%20(Book).webp”>


Developers indent like this for others to easily read and understand what this code is trying to do.

3. Text


Headers have six different sizes starting with h1 as the largest and h6 as the smallest. These are the exact sizes of each tag used.


To create normal text, use the <p></p> tag.

<p>The Strategic Mind of A Young Legend</p>


If you want to have your text sequentially numbered (Ordered List) or bulleted (Unordered List), here’s how.


<l1>How to Make a Website</l1>

<l2>8 Reasons to Have a Website<l2>

<l3>HTML You Should Know</l3>


1. How to Make a Website

2. 8 Reasons to Have a Website

3. HTML You Should Know


<l1>How to Make a Website</l1>

<l2>8 Reasons to Have a Website<l2>

<l3>HTML You Should Know</l3>


  • How to Make a Website

  • 2. 8 Reasons to Have a Website

  • 3. HTML You Should Know

4. Text Styling


<strong>This is bold text</strong>


<em>This is italic text</em>