HTML Tags For Beginners to Improve Coding Skill

Test a Simple HTML Code in Your Browser

Following our article, you will learn a basic webpage structure, the importance to have an optimized head in the index.html file, and some HTML tags for beginners. Your website needs to be implemented using SEO strategies, Google Analytics tracking, and much more!

You can review the following book to have an idea about what you can do implementing the HTML file on your website, learning some HTML tags for beginners. Read this book, the price is good, and it will allow you to know more about we are going to analyze in this Marketing Predictor article.

Html basic fundamental guide for beginners

It’s time to review some HTML tags! I am talking about the main page of your website, the heart of your business. It’s the page where your business starts and where you have to put all your effort to have good online visibility. Are you ready for some coding optimizations? Let’s do it

Index.html Your Business Heart: Why It’s The Homepage Important

In coding, the index.html file is comprised of a specific structure: head, body, and footer! The index.html normally represents the homepage on every website. It’s the first page a user reviews when I want to know who you are and what you are selling/proving.

It’s import to give a useful, and also emotional, experience that represents your business through the homepage. Make it perfect now, following some HTML tags for beginners.

The index.html is going to be your business card online! 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! Learn #HTMLtagsForBeginners Click To Tweet

Let’s Make a Home Page Based on Elements

Following this article, you will be able to make your first index.html with simple elements, using some HTML tags for beginners. You can use them for every website you plan to develop.

Don’t forget that Content Management System (CMS), like WordPress, uses PHP. Understanding HTML will be important though. If you are planning a dynamic website that is pulling articles and posts, like a blog, I suggest a CMS.

If you are planning to make a static website for your business, it is useful to learn HTML simple tags first, in order to be able to implement others programming language.

Some editor to practice? Install Brackets! Copy and paste the following examples, save your document (.HTML) and open it in your browser: you will have a webpage similar to a Word document: it’s your first line of code, it’s computer language!

HTML Tags for Beginners

As we have Word documents, for example, we have HTML documents: they are text documents as well. When we have to write a text content using an HTML file format, we have to define what the content is about in term of the type of content.

Computer language is different, we are not talking to a human: you have to use computer language to communicate with it. 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 write your code, be sure to open and close every tag! #CodingLife Click To Tweet

Let’s Create a Paragraph With Headings

When you write an article for your blog, or a new webpage, you need to include some HTML tags for beginners. Even in this article I wrote, there are HTML tags, and in the Marketing Predictor blog in general. How do I manage it?

First of all, I plan a title! A title has an opening and a closing tag H1. After that, I write the first paragraph including 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 some specific HTML tags I mentioned:

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

Why are we doing that and you need to do it? Because Google crawls your website and needs this information. Google as a spider that identifies all the tag included. That’s why how to optimise SEO is an important step working in content and it requires some coding knowledge.

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, as I mentioned. It’s important to have headings that fit for your titles included in your documents: the main title, on one H1, and paragraphs title, more than one H2.

What about tags related to the language you are using to write your content? 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

Other code tags for beginners? When you start a new paragraph you want to leave an empty white line, using the tag hr: your content will be nicer, improving UX and UI! You can use Italic, and also writing a superscript or a subscript, using bold text, inserting or deleting elements and giving emphasis to a part of the text.

It’s important to have a space between paragraphs, to split the topic into different parts. For example, in the first paragraph, you can have a short introduction about the main content of the blog post/page. From the second paragraph, you can explain better what you mention in the first part of your content. Start using <hr> from now on!

Here you can see an example with other HTML tags for beginners:

<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>emphasis</em> another example.</p>
<hr/>

Would You Like to Create Notes?

If your project needs to be reviewed or fixed by your colleagues, your code needs to be understandable. Who read your code needs to understand what you wrote!

Notes in coding are #gold tips for who reads your lines of #HTMLcode! <!– Don't forget them — > Click To Tweet

In order to do that, you need to leave notes for other developers. Everyone is going to handle your project needs to understand it. How can you create notes inside your code? First of all, 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, using a text editor, like Sublime Text. Adding notes is one of the best practices in coding: make your code professional and easy to understand!

Recap: The first approach to the index.html body

Learn computer language and practice:

Write an article for your blog (elements and tags):

  • Create a simple structure using basic elements
  • Save the file you created with your editor and open it using Chrome or Safari

HTML tags for beginners example: what you can create in 5 mins

<!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 as HTML Tags For Beginners</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>emphasis</em> another example.</p>
<hr/>
</body>
</html>

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

Marketing Plan Template to Implement Your Marketing Funnel

Search Engine Optimisation Tips Top 5

A guy lost in the snow calling for some.