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, with simple HTML code examples. Your website needs to be implemented using SEO strategies, Google Analytics tracking, and much more!
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 important to give a useful, and also emotional, an 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 Share on XLet’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 coding 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 other programming languages.
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 terms 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 Share on XLet’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.
Basic HTML codes
<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 purposes, 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 it.
Basic HTML codes
<p lang=”en-us”>It’s in English</p>
<p lang=”fr”>It’s in French</p>
HTML Coding 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 reads 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 — > Share on XIn 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:
- You need to be confident on HTML tags for beginners for coding websites
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
Simple HTML code
<!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>
