HTML 101: Tutorial for Beginners

HMTL is a markup language used to create websites that every beginner developer should master. Despite being easy-to-learn, HTML is a cornerstone of web development and keeps evolving to support the need for modern
sites.

Like learning any other new skill, to learn HTML you need to find information that is appropriate for your base knowledge. If you are a beginner, jumping onto advanced topics will make you weary quickly. So, it is recommended to learn HTML step-by-step by writing your own code, starting with basic concepts.

In this article, I would like to share an HTML tutorial for beginners. This is the point where you take your first steps towards website development.

Introduction to HTML for Beginners

HTML stands for Hypertext Markup Language. Its main function is to manage the structure of web pages.

By using HTML, you can create a document that will be displayed on a web browser as a website.

Hypertext in HTML means that you can click on a text that links to another part of the document — either on the same page or a different one. As a markup language, HTML consists of code that instructs the browser how to display information – meaning the code itself is not visible.

There is no end to how well you can learn HTML. For example, you can control your website’s content formatting to make it easy-to-read – which we’ll cover later – employ clean code practices that make your site more SEO friendly, and much more.

As a beginner you should know that HTML is very visually basic, to improve the aesthetics of your site you can use CSS and JavaScript. These two languages should be next on your list to learn.

CSS deals with the layout management of your content to provide better user experience, while JavaScript handles interactive behavior. Relying just on the HTML will make your website cluttered, boring, and pretty unresponsive.

For example, this is how Wikipedia looks normally (with CSS):
Now, this is how it looks without CSS (to try it out yourself by using Safari, for example, you can go to Develop menu, then choose Disable Style):

See? That makes for a pretty dramatic difference.

What You Need to Get Started

As a beginner in HTML, you should first understand a couple of things.

An HTML file is basically a text file, meaning you can create it using a simple text editor.

There are many text editors with great features specifically for writing code – Atom, Brackets, Notepad++ and SublimeText.

Again, when creating an HTML file using a text editor like Notepad in Windows, make sure to save it as an HTML file (.html extension). Otherwise, it will be automatically saved as a .txt file.

If you open an HTML file in a browser and want to look at the code, you can simply right-click on the blank area of the window and choose View Page Source (Google Chrome) or Show Page Source (Safari) as seen below.

Meanwhile, to open an HTML file stored on a file manager, you can right-click on your file -> choose “Open With” -> select your favorite text editor.

Now that you know how to create an HTML file, or view an existing one, we can get down to the basics.

Three Bases of HTML

There are three basic base elements that a clean HTML code consists of and that every beginner should learn – tags, attributes, and elements.

Tags

Tags are the core part of any HTML document that allows the browser to recognize where the HTML section and various elements begin and end. For example, if you want to highlight certain text as a heading, you use heading tags as shown below:

<h1>HTML: A Complete Guide for Beginners</h1>

This is how it looks in a browser window:Keep in mind that you should always end an opening tag <tag> with a closing tag </tag> to avoid errors.

However, there are exceptions — not all tags need closing. Some like line breaks <br>, horizontal rules <hr> and no-break spaces <nbsp> don’t need closing tags simply because they don’t include any content. Stand-alone tags like image <img> also don’t need a closing tag.

Attributes

HTML attributes are used to give additional information that modifies certain elements.

They’re made up of a name and value in pairs that’s written in the opening tag:

<tag attribute=”value”>content</tag>

Although most tags can work properly without attributes, their use is required to change the default functionality of a certain tag whenever needed. For example, if you want to turn text red, you can use the color style attribute as shown below:

<h1>Warning!</h1>

<p style="color:red">For a beginner, never jump onto the HTML advanced topics!.</p>

You will see something like this:

Elements

HTML elements can be actually considered the same as tags in a sense but are not interchangeable. Let me explain it a little bit better.

• An HTML element can be considered anything from the opening tag to the closing tag and everything in between.
• An HTML tag is solely the opening or closing tag and does not include the content in between them.

In general, you would start with an opening tag followed by any variables (text in this case) and end with a closing tag. Each tag, for example, a simple HTML document as shown below consists of four elements – <html>, <body>, <heading>, and <paragraph>.

<html>

<body>

<h1>HTML Tutorial for Beginners</h1>

<p>Learning HTML is easy. You just need to find the best resources to learn it quickly and properly.</p>

<h2>What is HTML?</h2>

<p>HTML stands for Hypertext Markup Language.</p>

</body>

</html>

The result looks like this:

What You Need to Construct an HTML

So, now you know the bases of HTML that every beginner should learn. Let’s see how to put these things into practice!

Basic Elements

As a beginner, you need to learn these basic elements that you will most certainly find in an HTML document.

• <!DOCTYPE html> – Located before any HTML tags, the <!DOCTYPE html> declaration is used to tell the browser how to render the HTML document properly. The use of <!DOCTYPE html> is not only to indicate the HTML version but also to comply with HTML standards.While the latest version of HTML (HTML5) has only one <!DOCTYPE html> declaration, you might find various declarations of older HTML versions like HTML4:

Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset

• <html> – This tag informs the browser that the document being opened is an HTML document. It contains all the elements of an HTML document, meaning that all of them should be within these tags. Essentially it indicates where the HTML document starts.

  <!DOCTYPE HTML> <html> <body> <p>HTML stands for Hypertext Markup Language.</p> </body> </html>

• <head> – Another basic element that contains scripts, styles and meta information needed by the web browser and web crawler. This element will not be visually displayed on the browser. If you write a code like this:

  <!DOCTYPE html> <html> <head> <title>My First HTML Code</title> </head> <body> <h1> Is It Easy to Learn HTML?</h1> <p>If you want to create a website, learning HTML is a must.</p> </body> </html>

You will not see “My First HTML Code” on your browser.
Note that this is one of the reasons why you need to learn HTML properly. Many things happen under the hood, yet are impactful to your website’s performance.

• <body> – You put all of your website content like text, images, videos, and links within the <body> element.  Similar to <html> and <head>, you can only have one <body> element in your entire document.
• <title> – This element is used to determine the title of your HTML document. Hidden from the browser window, the title will be shown on the title bar and will be the name for the bookmarked pages. While you may skip this title element when creating an HTML document, defining it is recommended for SEO and general user experience.
• <meta> – This metadata element contains keywords, descriptions and other info. Visitors won’t see this element in their browsers. However, this is one of the most vital parts of SEO because it adds information needed by web crawlers to understand your page better. This <meta> element has no closing tag.

Content

As previously mentioned, the <body> element contains on-display content, meaning that text, images, tables including formatting and styles are inserted within the <body> tags.

I know, I know – for you, as a beginner, all these HTML tags can be confusing. Bear with me, it’s not that hard, I promise!

Text Formatting

Formatting is pretty basic – it allows you to modify how a certain text looks on a browser. It is used to specify the attributes of a certain element and must have both an opening and a closing tag.

• <b> — is used to bold the text, by utilizing bold typefaces present on the browser. So when you type something like this:

  <p>After learning HTML, it is recommended to learn <b>CSS</b> and <b>JavaScript</b>.</p>

  You will get the result like this:
  

• <strong> — is used like bold with a strong semantic emphasis and uses the same bold typeface shown on the browser:

  <p><strong>Listen carefully!</strong> This explanation is <strong>important</strong></p>

  This is how it looks:
  

• <i> — is used to make the text italicized by displaying a slanted typeface on the browser. However, <i> doesn’t add semantic emphasis, you should use <em> for that. Here is an example of <i> in use:

  <p>Programming languages used in <i>front end development</i> are HTML CSS and JavaScript.</p>

  It will result like this:
  

• <u> — is used to underline specified text. You can type this code:

  <p>Learning HTML properly is <u>highly</u> recommended.</p>

  And you will get this result:
  

  <del> — is used to mark a specified text as deleted in an HTML document and the browser will show it as a strike-through text. This is usually great for a to-do list. If you type something like this:

  <h1>To Do Lists</h1>
  
  <ul>
  
  <li>Go to the Zoo</li>
  
  <li>Play Board Games</li>
  
  <li><del>Meet Up with Ed Sheeran</del></li>
  
  <li>Scan Old Photograph</li>
  
  </ul>

  This is the result:
  

• <small> — is applied to make a selected text one size smaller than the base font. You can try typing something like this:

  <p>First, you need to learn HTML, then <small>CSS, and then<small> JavaScript</small></small></p>

  And you’ll get this:
  

• <strike> — has the same function as <del> or <s>, – it applies strikethrough on the selected text. Please note that <strike> is not supported in HTML5. The code will looks like this:

  <h1><strike>Members Only!</strike> Everyone!</h1>

  And this is the result:
  

  <sub> — is used to make a text as a subscript, meaning that the position of a certain character is lower than the normal line. This is usually used for writing a formula. If you type this code:

  <p>Water (H<sub>2</sub>O) is essential for life on earth</p>

  You will get this result:
  

• <sup> — is used to make a certain character displayed half above the baseline. Usually, this is also for writing a formula:

  <h1>What is E=mc<sup>2</sup> ? </h1>

  You will see this result:
  

• <ins> — indicates that a certain text has been added to the document. This tag is usually used together with <del> as shown in the example below:

  <p>I like <del>tea</del> <ins>coffee</ins>!</p>

  This is the result:
  

Heading

Basically, there are six levels of headings in HTML that show different levels of importance and will be displayed as different fonts with different sizes in the browser.

The highest level is <h1> and the lowest one is <h6>. <h1> and <h2> are usually for important titles while the rest – <h3> – <h6> – serve as subheadings.

You have to take HTML headings seriously because:

• They make your content easy-to-read and create a better user experience.
• They help SEO because search engine algorithms use headings to outline important information within a page.

This is how you use headings in an HTML document:

<h1>HTML Tutorial</h1>

<h2>Front End Development</h2>

<h3>HTML</h3>

<h4>CSS</h4>

<h5>JavaScript</h5>

<h6>Samples of Code</h6>

And this is how they would look:

Paragraph

Defined as a <p> tag, paragraph deals with text content. Paragraphs are located in the body where <p> indicates the start of the new paragraph and </p> is the end of it.

A paragraph is used only for regular text information, if you want to mark something important, you should use a heading instead. This is how to use it:

<h1>HTML Tutorial</h1>

<p>Learning HTML is easy. But, you should get the best sources to absorb the knowledge quickly.</p>

<p>In this tutorial, I will show you how to do that.</p>

This is the result:If you want to create a new line within the same paragraph, you can use line break <br>. Keep in mind that although you will move to a different line when using Enter, it won’t affect how your HTML document is displayed on the browser. Instead, you can use the tag like this:

<p>It is important to learn HTML <br> and then CSS <br> and then JavaScript.</p>

This is the result:
Sometimes you need to keep the pre-formatted text to save time instead of inserting manual line breaks, for example when posting a poem. You can use the <pre> element when you want to display text with unusual formatting. Here is an example from Robert Burns’ poem:

<pre>

O my Luve is like a red, red rose

That's newly sprung in June;

O my Luve is like the melody

That's sweetly played in tune.

</pre>

This is the result:

Style

To make your HTML document unique, you can apply a style to an HTML element. To do that, you can use style attributes which are written with the help of the following syntax:

<tag style="property:value;">

Please note that the property is a CSS property and the value is a CSS value.

Basically, there are three ways to implement styles into an HTML document:

• Inline — within the HTML tag.
• Embedded — added to the <head>.
• External — using a different file the has style information known as a stylesheet.

Here, I would like to show how to use the inline method to modify the background, text color, font style, text size, and alignment.

• Background color — If you want to change the background of an element, you can use background-color followed by the background color value as shown in this example:

  <body style="background-color:lightgreen;">
  
  <h1>HTML Tutorial for Beginners</h1>
  
  <p>Learning HTML is easy. You just need to find the best resources to learn it quickly and properly.</p>
  
  <h2>What is HTML?</h2>
  
  <p>HTML stands for Hypertext Markup Language.</p>
  
  </body>

  This is how it looks on the browser:

• Text Color — You need to add the color property followed by the color value to change the specified text. This is the example using the same previous background color:

  <body style="background-color:lightgreen;">
  
  <h1 style="color:white;">HTML Tutorial for Beginners</h1>
  
  <p style="color:red;">Learning HTML is easy. You just need to find the best resources to learn it quickly and properly.</p>
  
  <h2>What is HTML?</h2>
  
  <p>HTML stands for Hypertext Markup Language.</p>
  
  </body>

  You will see this result:

• Font style — You can determine which font family you want to use for a certain element as shown below:

  <h1 style="font-family:verdana;">HTML Tutorial for Beginners</h1>
  
  <p style="font-family:courier;">Learning HTML is easy. You just need to find the best resources to learn it quickly and properly.</p>

  This is the result:

• Text Size — To apply a certain size to a specified text, you can use the font-size property followed by the number of the percentage you want. Keep in mind that 100% is considered the regular size of the font:

  <p style="font-size:350%;">HTML 101: A Complete Guide for Beginners</p>
  
  <p style="font-size:150%;">Learning HTML is fun and yet advantageous.</p>

  This is what you’ll see:
  

• Text Alignment — To manage the text position in an HTML document, you can add the text-align property followed by the type of alignment you need.

  <h1 style="text-align:center;">HTML 101</h1>
  
  <h2 style="text-align:left;">What is HTML?</h2>

  This is the result:

List

Basically, there are three types of lists you can create in an HTML document namely ordered, unordered and definition lists. However, knowing both ordered and unordered is enough for most online content posts.

To create an ordered list, you can start with <ol> and use <li> for each list item as shown in this example:

<p>What do you need to learn for creating a website?</p>

<ol>

<li>HTML.</li>

<li>CSS.</li>

<li>JavaScript.</li>

</ol>

The result would be like this:On the other hand, to create an unordered list, you can use <ul> followed by <li> for each item:

<ul>

<li>Facebook</li>

<li>Twitter</li>

<li>Instagram</li>

</ul>

This is how it looks in the browser:

Image

If you want to make your document interesting by adding images along with text, use the <img> tag. Image elements are empty, meaning that you don’t need a closing tag.

When adding an image to an HTML document you need to consider at least two things:

• The origin location of the file.
• The way you want the image displayed.

If you want to insert an image from a folder, you need to use src attributes along with the folder name where you stored the image. You can try something like this:

<img src=" /wp-content/uploads/2019/06/WordPress-logo.png">

The result is:On the other hand, to insert images from another server, you can add the source attribute and an alternative description of the image using <img src=“URL”>.

<img src=" /wp-content/uploads/2019/06/WordPress-logo.png">

The image will look the same as before.

You may also manage the weight and height including the description of the image. To do that you can add alt=“alt description” width=“number” height=“number” after the src attributes,

<img src="http://hostinger-dev-6.xyz/wp-content/uploads/2019/06/WordPress-logo.png" alt="WordPress Logo" width="300" height="300">

This is the result:

Table

To create a table in an HTML document, you can use the <table> tag. As every table will need three elements – rows, columns, and data/cells, HTML uses three tags to define this:

• <tr> — this table row element can consist of more than one <th> and <td>.
• <th> — represents table heading.
• <td> — represent table data.

This is how you create it:

<table border="1">

<tr>

<th>First Name</th>

<th>Last Name</th>

<th>Company</th>

</tr>

<tr>

<td>Bill</td>

<td>Gates</td>

<td>Microsoft</td>

</tr>

<tr>

<td>Steve</td>

<td>Jobs</td>

<td>Apple</td>

</tr>

</table>

The result is:

Form

Basically, a form is a way to gather input from the user and then send it to the data server. That is why the <input> tag is important within a form element. While the <form> needs a closing tag, an <input> tag doesn’t.

There are many ways the user can input data in a form that determines how the data is collected. Some of the options are: text, password, checkbox, radio, and submit.

• <input type=“text”> —  is for one line inputs as seen in the example below:

  <h2>Join Our Community?</h2>
  
  <form action="/action_page.php">
  
  Your Name:<br>
  
  <input type="text" name="yourname">
  
  <br>
  
  Your Email:<br>
  
  <input type="text" name="youremail">
  
  <br><br>
  
  <input type="submit">
  
  </form>

  This is the result:
  

• <input type=“text”> —  is a basic single-line text input field.
• <input type=“checkbox”> —  allows the user to choose an available option as a checkbox.
• <input type=“radio”> —  similar to checkbox, but you can only select one option.
• <input type=“submit”> —  defines an input to pass the user’s entered data to the data server for further processing.
• <input type=”password”> – creates a password field that masks the entered input.

From the previous example of text input, you can see that you need to make sure that you have the proper form action directed to /action_page.php. Without that, it won’t work properly. But, I will not discuss the PHP topic further in this HTML tutorial article.

When creating a form, it is important to define the text area for input. While the text area itself can hold unlimited characters, you need to specify the width and the height of the area. This is an example:

<textarea rows="10" cols="80">Once you have learned HTML, it is important to grasp CSS knowledge.

CSS deals with the layout management of a website.</textarea>

The result is:As you can see in the above image, because it is a text area, you can simply use Enter to make a line break.

In addition, you can also use <select> and <options> to gather data from users. Basically, these tags are for creating a drop-down list. You make a list of options between <select> tags:

<select>

<option value="Paris">Paris, France</option>

<option value="London">London, UK</option>

<option value="New York">New York, US</option>

<option value="Tokyo">Tokyo, Japan</option>

</select>

You will get the result like this:And like this:

Link

HTML links let you move from one part of the document to another — either on the same page or to a different one. When linking, one part is called an anchor, the other one is called a direction.

You can use the <a> tag to specify the link followed by the href attribute that determines the destination address, <a href=“destination URL”> the text link </a>.

This is an example:

<p> These are those <a href="https://en.wikipedia.org/wiki/List_of_inventors">great inventors</a> that has made our life easier. </p>

This is what you’ll see on your browser:

Congratulations, You Have Finished the HTML Tutorial for Beginners!

So, you have successfully finished this HMTL tutorial for beginners!

With HTML you can do many things like creating online documents and web pages. You only need to prepare your favorite text editor and start writing HTML code.

There are three basic concepts in HTML that every beginner needs to understand first – tags, attributes, elements.

By understanding these bases, you can start building with HTML. It is recommended to start with the basic elements before you dive deep into the content which is located within the body of an HTML document.

This HTML tutorial for beginners also covered some tags that will definitely help you along the way, ranging from text formatting to input.

Now, turn your hand-coded work into a great web page and keep on sharpening your HTML skills!