The Definitive HTML Guide for Beginners

Last updated on 29 January 2018

 

Twenty years ago, even if you are just a hobby blogger, you had to know some web coding to protect yourself or to add a simple function to your site. But now there are so many editors and plugins available that even knowing the basics of HTML is no longer required to create a site or run a blog.

The problem with this is that if you don’t know a few basics, you can easily get into real trouble in your blog and have to hire a pricey developer to fix what may be a minor problem. Not only that, but creating  changes to your blog such as adding a custom text widget requires a little knowledge.

And if you are experiencing content layout doesn’t look right, HTML knowledge can get you back on track.

Here are some our version of HTML guide for bloggers and non-techie online business owners.

HTML is the backbone of today’s internet. Millions of websites together formed the internet. Where HTML is the building block of all these websites.

Beginner’s Q&A

1- What is HTML?

HTML is the abbreviation of Hyper Text Markup Language. It is the standard language for tagging contents for web browsers.

HTML is represented by “Elements”. Elements are also known as “Tags”.

2- Why is HTML needed?

Web browsers can only render a website when it is written in their supported language. HTML is the most common markup language and has the highest acceptance to web browsers.

That’s why you need HTML.

3- Is HTML case sensitive?

HTML is not case sensitive. But the best practice is to write HTML with proper cases.

Steps for Creating Your First HTML File

You can create a basic HTML file using the Notepad on your computer. But it will be painful for writing many lines of codes.

You need a Code Editor. A good code editor will make it easier to write and organize large codes.

I use and recommend Notepad++ (free and open-source) for writing web languages. There are other editors you may use like Sublime Text, Atom etc.

Here is what you need to do:

  1. Install a code editor
  2. Open it up
  3. Create a new file
  4. Save it as a .html file

You are ready to go!

 


Go Top

 

1- Hello World!

Copy and paste the following code into your new HTML file and save it. Now run it on your web browser.

Code:

<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

Output:

Congrats! You have created your very first HTML file. You don’t have to understand it at this point. We will cover it shortly.

Understanding HTML Structure

Every HTML file has a common naked structure. This is where everything starts. And every large page of codes will come to this structure after trimming down.

So let’s try to understand it from the “Hello World!” code. The following elements are the mandatory parts for every HTML file.

  • <!DOCTYPE html> = It is a declaration to the browser that this is an HTML file. You must specify it before the <html> tag.
  • <html> </html> = This is the root element of an HTML file. Everything you write goes between <html> and </html>.
  • <head> </head> = This is the meta information part for a browser. Codes inside this tag have no visual output.
  • <body> </body> = This is the part that a web browser renders. What you exactly see on a website is the rendering of codes between <body> and </body>.

 

 


Go Top

 

2- HTML Tags

HTML is the collaboration of hundreds of different tags. You need to learn how they work. You also have to make sure that they have used them in the right way.

HTML tags usually have an opening and a closing tag. The opening tag has the keyword surrounded by a less than (<) and a greater than (>) sign. The closing tag has everything same but an extra forward slash (/) after the less than (<) sign.

(2a) Head Tags

All the head tags go between <head> and </head>. They contain meta information for web browser and search engines. They basically have no visual output.

<title> </title>

Title tag defines the title of a web page which is visible on the browser tab. This information is used by web programs and search engines. You can have highest one title per HTML file.

Code:

<title>My first web page</title>
Title tag appears on top of your browser.

<link>

Link tag links your HTML page with external resources. Its main use is linking HTML page with CSS stylesheets. It is a self-closing tag and doesn’t need the ending </link>. Here rel stands for relation with the file and src means the source.

Code:

<link rel="stylesheet" type="text/css" src="style.css">

<meta>

Meta is another self-closing tag that provides meta information of an html file. Search engines and other web services use these information. Meta tags are a must if you want to optimize your page for search engines.

Code:

<meta name="description" content="This is the short description that search engines show"

<script> </script>

The script tag is used for including a server-side script or making a link to an external script file. It can have two attributes in the opening tag. One is the type and another is the source (src).

Code:

<script type="text/javascript" src="scripts.js"></script>

<noscript> </noscript>

Noscript tag works when scripts are disabled in a web browser. It makes a page compatible to them who don’t allow scripts in their web browsers.

Code:

<noscript><p>Alas! Scripts are disabled.</p></noscript>

(2b) Body Tags

All the body tags go between <body> and </body>. They have visual outputs. This is where the most work is done. You have to use these tags to structure your main page content.

<h1> </h1> to <h6> </h6>

These are the heading tags. The most important heading is tagged with <h1> and the least important with <h6>. You should use them in the correct hierarchy.

Code:

<h1>This is  a h1 heading</h1>
<h2>This is  a h2 heading </h2>
<h3>This is  a h3 heading </h3>
<h4>This is  a h4 heading </h4>
<h5>This is  a h5 heading </h5>
<h6>This is  a h6 heading </h6>

Output:

Formatting Tags

Text in an html file can be formatted using many formatting tags. It will be necessary when you want to highlight a word or line from your content.

Code:

<p>You can highlight your text in many ways.</p>
<p>You can <strong>bold</strong>, <u>underline</u>, <em>italic</em>, <mark>mark</mark>, <sub>subscript</sub>, <sup>superscript</sup> and more!</p>

Output:

<!– –>

You can deviate some codes from rending using the comment tag. The code will show up in the source code but will not be rendered. The main use of this tag is for creating documentation of html files for future reference.

Example:

<!-- <p>You can comment out any code by surrounding them in this way</p> -->

(2c) Other Important HTML Tags

<a> </a>

Anchor is an invaluable tag which is used almost everywhere. You will not see any web page online without at least one anchor link.

The structure is same. It has an opening <a> and a closing part </a>. The text you want to anchor goes between <a> and </a>.

There are some attributes that define where and how the user goes after clicking on it.

  • ahref=” “ = It defines the destination link. The link goes between the double quotes.
  • target=” “ = It defines whether the URL will open in a new browser tab or in the same tab. target=”_blank” is for the new tab and target=”_self” is for opening in the same tab.
  • rel=” “ = It defines the relation of the current page with the linked page. If you don’t trust the linked page, you can define rel=”nofollow”.

Code:

<p><a target="_blank" href="https://www.google.com/">Click here</a> to go to Google. 
It will open in a new tab.</p>
<p><a target="_self" href="https://www.google.com/">Click here</a>. 
It will also take you to Google but will open in the current tab.</p>

Output:

<img />

Image tag is another important tag without which you cannot imagine many image-based websites.

<img /> is a self-closing tag. It doesn’t need the traditional closing like </img>. There are some attributes you need to know before you can use it correctly.

  • src=” “ = This is for defining the source link of the image. Put the link right between the double quotes.
  • alt=” “ = It stands for alternative text. When your image is not loading, this text will give users an idea about the missing image.
  • width=” “ = It defines the width of an image in pixels.
  • Height=” “ = It defines the height of an image in pixels.

Example:

<p>This is the Googleplex in August 2014.</p>
<p>This image has a width of 500 pixels and a height of 375 pixels.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" 
alt="Google's Headquarter in August 2014" width="500" height="375" />

Output:

Tips: Want to insert a clickable image? Wrap the image code with an <a> tag. See how it goes.

<ol> </ol> or <ul> </ul>

List tag is for creating a list of items. <ol> stands for ordered lists (numbered list) and <ul> stands for unordered lists (bullet points).

The list items inside the <ol> or <ul> is tagged with <li> </li>. li stands for list. You can have as many <li> as you want inside the parent <ol> or <ul> tag.

Code:

<p>This is an ordered list:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>This is an unordered list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Output:

<table> </table>

Table tag is for creating a table of data. There are a few inner level tags that defines table headers, rows and columns.

<table> </table> is the outer parent code. In this tag, <tr> stands for table row, <td> stands for table column and <th> stands for table header.

Code:

<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
<tr>
<td>Jo
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</table>

Output:

Note: Values inside the first <tr> are headings. So, we used <th> which applies bold text effect to the text.

Table Grouping

You can extend a table’s functionality using table grouping elements. There will be times when you need to create large tables that split into multiple pages.

Grouping your table data into header, body and footer, you can allow independent scrolling. The header and body part will print to every page where your table has spanned.

The table grouping tags are:

  • <thead> </thead> = For wrapping the headings of a table. It prints to every split page of the table.
  • <tbody> </tbody> = For wrapping the main data of a table. You can have as many <tbody> as you need. A <tbody> tag means a separate group of data.
  • <tfoot> </tfoot> = For wrapping the footer information of a table. It prints to every split page of the table.

Please note that it is not mandatory to use grouping. You may use it to make bigger tables more readable. While some special developers markedly use these tags as CSS Selectors.

Here is how we can group our exemplified table into <thead>, <tbody> and <tfoot>:

Code:

<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Persons:</td>
<td>3</td>
</tr>
</tfoot>
</table>

Output:

<form> </form>

Form element is used for creating interactive forms for web pages. An HTML form contains several consecutive elements. For example: <label>, <input>, <textarea> etc.

The action attribute in form is very important. It points to a server-side or a third-party page for processing the information. For processing, you need to define a method first.

You can use either of two methods, get or post. Get sends all the information in the URL format where Post sends the information in the message body.

There are many types of input for forms. The very basic input type is text. It is written as <input type=”text”>. Types might also be radio, checkbox, email and so on. There should be a submit type input at the bottom for creating a submit button.

<label> tag is used for creating labels and associating them with inputs. The rule of associating labels with the inputs is that have the same value in for=” ” attribute of label and id=” ” attribute of input.

Code:

<form action="#">
<label for="firstname">First Name: </label>
<input type="text" id="firstname"><br>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname"><br>
<label for="bio">Short Bio: </label>
<textarea id="bio" rows="10" cols="30" placeholder="Enter your bio here..."></textarea><br>
<label>Gender:</label><br>
<label for="male">Male</label>
<input type="radio" name="gender" id="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female"><br>
<input type="submit" value="Submit">
<form>

Output:

Note: I have pointed action to a null value because it was not connected to any server to process the information.


Go Top

 

3- HTML Attributes

Attributes are one type of modifiers for HTML tags. They add new configurations to the HTML tags.

An attribute looks like attributename=” ” and sits in the opening HTML tag. The value of the attribute goes between the double quotes.

id=”” and class=””

id and class are the identifiers of HTML tags. Different names are designated to different HTML elements using identifiers. You can use one class identifier for multiple elements. But you cannot use one id identifier for multiple elements.

Code:

<h1 class="heading">This is the main title</h1>

href=””

href stands for Hypertext Reference. They point users to reference links. Anchor tag <a> uses href to send users to a destination URL.

Code:

<a href="https://www.google.com/">Google</a>

src=””

src stands for source. It defines the source of a media or resource you are using in the HTML file. The source can be either local or third-party URL.

Code:

<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

alt=””

alt stands for alternative. It is a backup text that comes in use when an HTML element cannot load.

Code:

<img  src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter" />

style=””

style attribute is often used in HTML tags. It does the job of CSS within the HTML tag. Your styling properties go between the double quotes.

Code:

<h2 style="color:red">This is another title</h2>

 


Go Top

 

4- Code Display: Block vs Inline

Some elements always start on a new line and take the full available width. These are “Block” elements.

Ex: <div>, <p>, <h1>-<h6>, form etc.

Some elements take only the required space and don’t start on a new line. These are “Inline” elements.

Ex: <a>, <span>, <br>, <strong>, <img> etc.

You will need to differentiate block elements from inline when you will be using CSS styles. In this HTML guide, it is not very necessary.

Code:

<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h2>This is a H2 heading. It has Block display.</h2>
<h2>This is <u>another</u> H2 heading. Here the underline tag has Inline display.</h2>
</body>
</html>

Output:

 


Go Top

 

5- Double quote vs single quote in HTML

This question is very obvious. What should you use in HTML? Single quote or double quote? People seem to use both but which one is correct?

In HTML, single quote and double quote are same. They don’t make any difference in the output.

You can use anyone you prefer. But mixing up both in a page of codes is considered a bad practice. You should be consistent with any one of them.


Go Top

 

6- Semantic HTML vs Non-semantic HTML

Semantic HTML is the latest version of HTML, which is also called HTML5. It is the developed version of non-semantic HTML and XHTML.

Why is HTML5 better? In previous versions, HTML elements were identified by id/class names. For example: <div id=”article”> </div> was considered an article.

In HTML5, <article> </article> tag represents itself as an article without needing any id/class identifier.

For the sake of HTML5, now search engines and other web applications can better understand a web page. Semantic websites have proven to do better for SEO.

Here is a list of some popular HTML5 tags:

  • <main> </main> = This is for wrapping the main content that you want to show your viewers.
  • <header> </header> = This is for marking up the header part of a content such as title or author meta.
  • <article> </article> = It specifies a user-defined or independent content to your viewers.
  • <section> </section> = It can group any code such as header, footer or sidebar. You can say, it is the semantic form of a div.
  • <footer> </footer> = This is where your footer content, disclaimer or copyright text belong.
  • <audio> </audio> = It enables you insert audio files without having any plugin problem.
  • <video> </video> = Like <audio>, you can insert videos using this tag without plugin problems.

A simple HTML5 structure would look like this:

<!DOCTYPE html>
<html>
                <head>
                                <meta charset="utf-8" />
                                <title>My first web page</title>
                </head>
                <body>
                                <header>
                                               <nav>
                                                                <ul>
                                                                                <li>Menu 1</li>
                                                                                <li>Menu 2</li>
                                                                </ul>
                                                </nav>
                                </header>
                                <main>
                                                <article>
                                                               <header>
                                                                                <h2>This is the title of the article</h2>
                                                                                <p>Posted by John Doe</p>
                                                                </header>
                                                                <p>Content of the article goes here</p>
                                                </article>
                                </main>
                                <footer>
                                               <p>Copyright 2017 John Doe</p>
                                </footer>
                </body>
</html>

 


Go Top

 

7- HTML Validation

Most of the web professionals validate their code after finishing it. Why is it necessary to validate a code when it is working fine?

There are two possible reasons for validating your codes:

  1. It will help you make your code cross-browser and cross-platform compatible. The code may not show any error in your current browser, but it might in another one. Code validation will fix it up.
  2. Search engines and other web programs may stop crawling your page if you have errors in it. You can confirm through validation that you don’t have any major error.

W3C Validator is the most popular service for code validation. They have several methods for validating codes. You can either upload a file or directly input the code in their validation engine.


Go Top

 

8- Other Helpful Resources

HTML is an ever-learning topic. More updated versions of HTML might come sooner. So you have to stay updated and keep practicing. Practice is what aces HTML.

Here are some helpful resources for you: