HTML Tutorial For Beginners

   Are you a beginner looking for a HTML tutorial/guide? Want to learn HTML but don't know where to start? You've come to the right place.

     

   This post is specially made for beginners such as yourself looking to learn this wonderful language known as HTML. 

   

So without further ado, let's dive in. 

What is HTML?

       HTML stands for “Hyper Text Mark-up Language” and is the fundamental building block of all things web-related/based. It is a necessary tool for web development and MUST be learnt if you wish to build a career in web development.

NOTE: HTML is NOT A PROGRAMMING LANGUAGE, but a MARK-UP LANGUAGE. Meaning, the HTML code(s) you write basically mark-up or “select a bunch of stuff” and tell the browser HOW to display that “selected stuff”.

       As at the time this was written, the latest version of HTML is HTML5. Chances are at the time you are reading this, there would be a newer version of HTML, but don’t worry; only slight changes are made to newer versions of HTML.

   Now that that's out of the way, let's get into the fun stuff shall we?

How/where do I run a/an HTML file? 

HTML files are web-based files and hence can be run in any browser, such as Firefox, Chrome, Internet Explorer, etc.

How do I write HTML codes?

HTML codes/files are written using HTML tags which are written inside HTML files. These are basically text files with the “.html” or “.htm” file extension, which means that you can use ANY text editor (such as Notepad, Notepad++, Sublime Text, Visual Studio Code, Brackets, Bare Bones, Text Wrangler and Gedit are just to mention a few) to create your HTML files in a matter of minutes.

This is a heading 1
This is a heading 2
This is a heading 3
This is a heading 4
This is a heading 5
This is a heading 6

Opening tag	Closing tag	Function
	None	Tells the browser that the current file is written using HTML5

---

---

Opening tag	Text	Closing tag
<"h1>	This is heading level one	</'h1>

       “So, how do I arrange my code then?” is the question you’re probably asking. Well, below is the basic layout of HTML documents.

Download the full tutorial here:

     

HTML Tags

       An HTML tag is basically a command that does what we tell it to do.

First of all, how do tags look like? HTML tags usually take the syntax (i.e. form) of “<[opening tag here]>Some Text Here<[/closing tag here]>”.

For example: Let’s say we want to add a paragraph to our file. We would use the tag as follows:

This is a paragraph

       Or we want to add a heading to our document. We would use the corresponding heading tag ( <"h1> ... <"h6>) as follows:

.

 It is worthy to note that the h1 tag is the largest and boldest setting of a heading, while the h6 is the lowest. So using any of the other h tags would give us a different heading look as shown above.

The h and p tags are just a few of the many tags there are in HTML. Some of these are:

Encloses the entire document

Defines all the non-textual elements such as the link to an external CSS file

Shows the title of the webpage

Defines all the textual elements in the page such as the actual content

Links an element to either a part of the same document or a different document

Displays an ordered list

Displays an unordered list

Displays a list item

Inserts a video into the file

Inserts an image

None

Inserts a line break

None

Inserts a horizontal line

Inserts a footer

Inserts a header

Defines a section

Defines a logical division

Defines a small chunk of text to be styled

Emphasizes text

Defines important text

Makes text bold

Italicizes text

Underlines text

Defines a superscript

Defines a subscript

Inserts an audio into the document

Inserts a row to a table

Creates a data cell for a table

NOTE:

·      The <'br> and <'hr>
tags are known as “empty tags” because they have no closing tags.

·      The afore-mentioned tags are not all the tags in HTML. Make more research on HTML tags to find out the others.

HTML Elements

You may have noticed from the table above that the term “element” comes up quite a few times and you may be asking “what are elements?” Well, elements are basically the code you write inside the HTML tags.

The syntax is “<[opening tag]>[text]<[/closing tag]>”, like so:

Writing the above in your text editor would look like this:

The above is an HTML element.

Now you may be wondering “I know what tags and elements are, how do I write HTML codes?” The truth is that once you can write an HTML element, you already know how to write HTML codes because it’s these elements that get rendered in the browser.

Basic HTML Layout

It is worthy to note that browsers interpret HTML codes from top to bottom, so we must arrange our code in a manner that would appear nice to the user.

       As you can see, there’s a space between our opening and closing body tags on line 12. This is because, the actual content displayed on the browser is written between these tags. The other spaces in lines 3, 10 and 14 above are simply for increased readability.

You don’t need to bother yourself with the codes in-between the head tags, except for the title tag for now. The others are a little advanced and will be discussed later in this tutorial.

Comments

   Like any other computer language, HTML files can have comments written in them to explain what a particular line of code does. HTML also supports multi-line commenting. Comments are written thus: 

NOTE: Comments are not displayed by browsers (as shown below) so they can be used anywhere and repeatedly in your code but it’s recommended that you minimize the usage of comments and keep them descriptive to make your code clean and readable.

Adding Media Files

Your HTML files don’t have to be plain boring texts. You can add media files such as images, audios and videos to your files to make them more appealing, especially if the website/page you plan on building is based on media files (images, audios and videos).