HTML Tags to Improve Beginners Coding Skill

Test a Simple Ready HTML Code in Your Browser

A weird guy trying to understand html tags outside a cafeteria shop.
Reading Time: 6 minutes

My previous articles from the coding category mentioned the basic webpage structure, the importance to have an optimized head in the index.html file of your website for SEO, analytics, and Google purposes. It’s time to review some HTML tags. I am talking about the main page of your website, where your business starts and where you have to put all your effort at the beginning in order to don’t make mistakes. They will be difficult to fix and find in the future.

Lead Generation Strategy Using Your Marketing Skills!

Your index.html Is Your Business Heart

In coding, the index.html file is comprised by a structure: head, body, and footer! We should call this page heart though. Why? Because that is the first page a user reviews and it’s import to give an emotional experience that represents your business. It also represents what you, as a businessman, love to do. Of course, everything needs to be optimized following the algorithm of Google and the coding best practices, but if you really love what you do, everything will be easier and effective!

There are no results without effort and passion! Click To Tweet

Let’s Make a Home Page Based on Elements

Following this article, you will be able to make tour first index.html with simple elements that you can you use for every website you will plan to build. Don’t forget that are available Content Management System (CMS), like WordPress and Joomla based on PHP and plugins that can manage your website, I suggest a CMS if you are planning a dynamic website that is pulling articles and posts, like a blog. If you are planning to make a static website for your business is useful to learn HTML tags first, in order to be able to study other programming languages.

I suggest installing Brackets as editor for your code. You can copy and paste the following examples, save your document in HTML and open it in your browser: you will see that will be shown as a word document without a style.

HTML tags

As we have word documents we have HTML documents that are text documents as well. When we have to write a text content in an HTML file we have to define what the content is about in term of the type of content in order to let the computer understood: you are using the computer language to communicate with him. There are opening tags and closing tags when it comes to coding websites, every time you open a tag, using brackets, you have to close it when you finish writing your content. Let’s analyze the type of content.

Let’s Create a Paragraph With Headings

When you write an article, like the ones that I write on the Marketing Predictor blog, I plan a title. A title has an opening tag h1. After that, I write a paragraph with the tag p and I add some break to go to the second line using the tag br. Here you can see an example with specific HTML tags:

<h1>Main heading</h1>
<p>This is a paragraph <br/>comprised of 2 lines</p>
<h2>Sub heading</h2>

As you can see, there are opening tags and closing tags. You can use different h tags, from 1 to 6, that’s something you have to consider for SEO purpose and in order to have a heading size that fits for your titles inside your documents. You can define the language of your paragraphs using:

<p lang=”en-us”>It’s in English</p>
<p lang=”fr”>It’s in French</p>

Starting Another Paragraph

When you start a new paragraph you want to leave an empty white line, using the tag hr. You can use Italic, and also writing a superscript or a subscript, using bold text, inserting or deleting elements and giving embassy to a part of a text. Here you can see an example with other HTML tags:

<hr/>
<p>This is another <i>example </i>paragraph h<sub>2</sub>O that <b>I created</b> as example to <strong> let you</strong> understand <ins> for</ins>HTML<del> you</del> developers e<sup>2</sup> practicing <s>make</s> it easier.</p>
<p>This is just <em>empasy</em> another example.</p>
<hr/>

Would You Like to Create Notes?

Who read your code needs to understand what you wrote. In order to do that, you need to leave notes for the other developers. How? You need to use the following tag/line of code;

<!– This is a note — >

Notes are not displayed in the browser, everything you write inside <!– — > will be available only reviewing the index.html file. Adding notes is one of the best practices in coding to make your code professional.

Recap: The First Approach to the index.html Body

Learn the Computer Language and Practice:

  • You need to be confident on simple tags coding websites

Write an Article for Your Website (Elements and Tags):

  • Create a simple structure using basic elements
  • Save the file you created with your editor on open it in the browser

The Following Code is What We Created Together:

<!DOCTYPE html>
<html>
<body>
<!– They’re HTML ELEMENTS with opening and closing TAGS in brackets –>
<h1>Main-heading</h1>
<p>This is a paragraph <br/>that i created as example for you.</p>
<h2>Sub-heading</h2>
<p lang=”en-us”>It’s in English</p>
<p lang=”fr”>It’s in French</p>
<h1>Main-heading</h1>
<h2>Size</h2>
<h3>Size</h3>
<h4>Size</h4>
<h5>Size</h5>
<h6>Size</h6>
<hr/>
<p>This is another <i>example </i>paragraph h<sub>2</sub>O that <b>I created</b> as example to <strong> let you</strong> understand <ins> for</ins>HTML<del> you</del> developers e<sup>2</sup> practicing <s>make</s> it easier.</p>
<p>This is just <em>empasy</em> another example.</p>
<hr/>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

A lady holding a cup as a winner for her marketing template plan challenge.

Marketing Plan Template to Implement Your Flow

Top 5 Search Engine Optimisation Tips

A guy lost in the snow calling for some.