HTML tutorial
100% satisfaction guarantee
In this HTML tutorial, we will explain how to use basic and advanced html codes. While a CMS like WordPress already gives you an easy way to format your HTML coding, the majority of the texts are still written in Microsoft Word. Sadly there are very few good content editors for web content (we’re working on one, read our blog), so it’s still a very useful skill to learn.
What are HTML tags?
A “<tag>” is a code which defines a certain aspect of the text.- HTML elements always start with a start “<tag>“, also known as opening tag
- HTML elements always end with an end “</tag>“, also known as closing tag
HTML tutorial basics
Essentially, tags give “orders” about your text. One very important aspect of using HTML codes is that you never use ‘spaces’ between the tags and the word/words between the tags. Correct: <tag>This is a correct use of tags.</tag> Not correct: <tag> Here there is a space between the tags and the words. </tag> According to the tag, your text can be edited and can take one of four basic forms:HTML header
<h1>This is the main headline</h1>. There are 6 different types of headlines, <h1> to <h6>. <h1> denotes the most important heading and <h6> denotes the least important one. It’s important that your focus keywords are definitely included in your <h1> and/or your <h2> headline. At Copypanthers we use these rules for all our texts:- H1: is always the ‘main’ keyword, in the case of this text it is: <h1>HTML tutorial</h1>. You only use it once per text.
- H2: always contain the main keyword, or one of the sub keywords, in the case of this text for example: <h2>HTML tutorial basics</h2>. Generally we use 2 to 3 H2’s in our standard SEO text.
- H3-H6: always contain one of the sub keywords of the text, in the case of this text for example: <h3>HTML header</h3>.
HTML paragraph
<p>This is a paragraph in our HTML tutorial</p>. The reason we always use the HTML tags for paragraphs is because it ‘calls’ (or asks) the standard font and font size from the CMS you are working in. This ensures that all the texts look the same.HTML link
An HTML link is a bit more advanced, in the HTML tutorial basics we only cover a standard HTML link, later on in the advanced HTML tutorial we will also focus on “follow” and “no-follow” links, and on opening links in a new tab. A HTML link always looks like this: <a href=”url“>Anchor text</a>. For example, linking to our jobs page (as a Freelancer you can actually earn money with your new learned skills), will have to be written like this: <a href=”https://copypanthers.com/jobs“>Jobs page</a>. As you can see only the anchor text is visible in the actual text.HTML format
Tags are also used to format your text, so HTML offers codes for diverse formatting options, for example:- Bold text: <b>bold</b>
- Italics: <i>italics</i>
- Underlines: <u>underlined</u>
If you liked our HTML tutorial, why don’t you take a look at our Resources Portal to learn more about translation and SEO writing? Or you can sign up to put your new learned skills to work as a freelance content writer for Copypanthers.
Continue reading our HTML tutorial to learn some more advanced HTML codes.
HTML tutorial advanced
This part of the HTML tutorial requires some knowledge of SEO and ‘internet’ terminology.Advanced HTML links
Do follow links
These are used primarily for internal linking and are also called ‘follow links’. They are the kind of links that pass all link juice of the referring page to the target domain/page. Do follow links are written like a ‘basic’ link: <a href=”url“>anchor text</a>.Nofollow link
Are links used primarily for external links (in SEO). A nofollow link tells the spider not to pass link juice to the domain/page you are linking to. A nofollow link is written as: <a href “url” rel=”nofollow”>anchor text</a>. For link building, as often used in our blogging as a service product, you obviously want to use do follow links.HTML target new tab
The HTML target new tab is used mostly for external links, since you don’t want the visitor to leave your page. They always look like this: <a href “url” target=”_blank”>anchor text</a>. They are easily combined with the nofollow link like this: <a href “url” rel=”nofollow” target=”_blank”>anchor text</a>.HTML list
This HTML tutorial covers both unordered and ordered lists.Unordered List
- The first item
- The second item
- The first item
- The second item
HTML unordered list
<ul><li>The first item</li>
<li>The second item</li>
</ul>
HTML ordered list
<ol><li>The first item</li>
<li>The second item</li>
</ol>
Enjoyed our HTML tutorial? Sign up as a freelance content writer.