5:55 AM
HTML Tutorial (for Beginners)

Would you like to learn some HTML?

Sounds like a great idea. Hence the reason why I’ve put together this HTML tutorial for beginners.

There are at least 1.2 billion websites in the world today. Practically all of these websites use HTML in one way or the other.

P.S: If you don’t want to learn HTML and start building your website right away, without coding required, take a look at this guide: How to Make a Website for FREE (without learning HTML).

Introduction to HTML


What is HTML?

What is HTMLHTML, an acronym for HyperText Markup Language, is a computer language for creating websites and web applications. Consisting mainly series of codes usually written in a text file and saved as HTML, code written in the HTML language translates into a beautiful, well-formatted text or a combination of text and media when viewed through a browser.

HTML was first developed by British physicist Tim Berners-Lee in 1990, and it has gone through so many evolutions since then that the most recent version can achieve far more than was imagined possible when the language was first invented.

In this tutorial, we will go through the basics of the HTML language and all you need to know to get started with HTML as a beginner.

HTML Versions

First, a quick rundown of all the HTML versions since HTML was invented.

  • HTML 1.0: This was the barebones version of HTML and the very first release of the language.
  • HTML 2.0: This version was introduced in 1995. It gradually evolved, allowing extra capabilities including form-based file upload, tables, client-side image maps and internationalization.
  • HTML 3.2: In an attempt to ensure development of standards for the World Wide Web, the World Wide Web Consortium (W3C) was founded by Tim Berners-Lee in 1994. By 1997, they published HTML 3.2.
  • HTML 4.0: Later in 1997, the W3C released HTML 4.0 — a version that adopted many browser-specific element types and attributes.
  • HTML 4.0 was later reissued with minor edits in 1998.
  • HTML 4.01: In December 1999, HTML 4.01 was released.
  • XHTML: The specifications were introduced in 2000 and it was recommended to be used as the joint-standard with HTML 4.01. It incorporated XML to ensure code is properly written and to ensure interoperability between programming languages.
  • HTML5: The W3C published HTML5 as a recommendation in October 2014 and later released HTML 5.1 in November 2016.

Choosing Your HTML Editor

If you are thinking of creating web pages in HTML, you need an HTML editor. There are several benefits to using an HTML editor.

A good HTML editor will keep your code clean and organized. It will also detect when you open a new tag and automatically close it to avoid you having a buggy code and as a result reducing how much typing you have to do. Most HTML editors today allow you to preview your web page to see how it will look like in a web browser using their WYSIWYG feature.

Basic Building Blocks of HTML


Once you’ve decided on the HTML editor you want to use, the next step is to understand the building blocks of HTML. When coding in HTML, it is essential to understand these building blocks. They include tags, attributes and elements. We will take a basic look at them below:

Introduction to Tags

Once you’re into HTML, the first thing you need to understand is tags. In essence, tags separate normal text from HTML code.

Consequently, when it comes to HTML, tags make the difference between whether your document is displayed as ordinary text or “transformed text” which is basically a code of text which appears to display a series of things (hyperlinks, images, media, or other  methods of formatting) based on what it is instructed to display based on tags.

Let’s take a look at the word “He is a boy” as an example:

  • In ordinary text format you get: He is a boy.
  • In bold text format you get: He is a boy.

In HTML, an “element” consists of the opening and closing tag as well as the content between the tags.

In the “He is a boy” (in bold) example, we have this in HTML: <b>He is a boy</b>. The text “He is a boy” is surrounded by an open and closed tag. Everything, including the opening tag, the content and the close tag is an element.

When a tag is opened, content is introduced and the tag is closed, we have an element.

An element could be in a basic form or in a complex form. Why? Because anything in between an open tag and a closed tag as well as those tags is an element. It means that we can have elements within an element. In our current example, “he is a boy” (<b>He is a boy</b>) is an element.

You will notice that we said earlier that the HTML documents contain the <body> tag before the content begins. The content could include hundreds of different elements, but all these elements are part of the “body” element (since the body element is open, contains content and is then closed).

Introduction to Attributes

While HTML documents basically use tags for everything, we sometimes want to communicate additional information inside an element. In this case, we use an attribute. The attribute is used to define the characteristics of an element, it’s used inside the opening tag of the element. Attributes are made up of a name and a value.

Note that the value of an attribute is placed inside a quotation mark using the format <tag attribute=”value”>Your Text</tag>.

Getting Started With HTML

Assuming you want to create your own basic HTML document today, how do you get started? From creating page titles to creating forms, we will walk you through how to get started with HTML below.

Creating The HTML <head> Element

When creating an HTML document, one of the first things you will create is the <head> element. This contains metadata (or data about the HTML document). This includes information such as the character set, document title, document styles, scripts, etc.

Some of the elements in the <head> include the title, which is created with the <title> tag.

Example:

<title>This is our page title</title>

This title will be displayed in the browser tab. It’s also what will be indexed as the title for the page when the search engine bots crawl your website.

This also includes the <meta> element, which is often used to specify information search engines can use to describe the content in their listings. This includes the description, keywords, author information, etc. The <meta> element also specifies the character set the HTML document uses.

Headings play a major role in the success of a website. Firstly, they make it easy for readers to scan the content of your pages. Secondly, and perhaps more importantly, they communicate the structure of your web pages to search engines and therefore often impact how your content is ranked in search engine results.

That said, it is important to avoid using heading tags to make your text big or bold. There are other tags that can be used for that (which we’ll get to later in this section). Instead, heading tags should be used solely for structure.

There are six heading tags in HTML: <h1> to <h6>, with the <h1> tag indicating the most important heading and the <h6> tag indicating the least important heading.

To create headings, simply decide what heading you’re creating, open the heading with the regular heading tag and always remember to close the tags once you’re done.

HTML Headings Example:

  • <h1>This is Your First HTML Heading</h1> (the largest)
  • <h2>This is Your Second HTML Heading</h2>
  • <h3>This is Your Third HTML Heading</h3>
  • <h4>This is Your Fourth HTML Heading</h4>
  • <h5>This is Your Fifth HTML Heading</h5>
  • <h6>This is Your Sixth HTML Heading</h6>

The next step is to start creating paragraphs. Paragraphs can be created with the <p> tag.

Example:

<p>This is your first paragraph.</p>
<p>This is your second paragraph, and you will be creating many more paragraphs.</p>

Keep in mind that writing in HTML is very different from writing in pure text. Therefore, if you break up text inside HTML without starting a new paragraph, it won’t really matter when the text is displayed by the browser. Instead, you want to use a line break, which is represented by the <br> tag.

Example:

<p>This is a new paragraph. 
 And I want to use a number of new lines. 
 So I’m breaking it up.</p>

This will not come out as the following:

This is a new paragraph. 
And I want to use a number of new lines. 
So I’m breaking it up.

Instead, it will come out as this:

This is a new paragraph. And I want to use a number of new lines. So I’m breaking it up.

So, how do you break texts into new lines so that it would show like this:

This is a new paragraph. 
And I want to use a number of new lines. 
So I’m breaking it up.

By using line breaks.

Example:

<p>This is a new paragraph.<br>And I want to use a number of new lines.<br>So I’m breaking it up.</p>

That said, it is important to note that the line break (<br>) tag is an empty tag, so you don’t have to close it.

Using bold: <b>He is a boy</b> comes out as He is a boy

Using italics: <i>He is a boy</i> comes out as He is a boy

Underlining text: <u>He is a boy</u> comes out as He is a boy. It’s worth noting that the <u> tag was deprecated in HTML 4.01 and was redefined to represent stylistically different text in HTML5. As a result, it is recommended to use CSS to indicate text that should be underlined. Since this article is a basic guide, we’re keeping it simple.

Using subscript: <sub>He is a boy</sub> comes out as He is a boy

Using superscript: <sup>He is a boy</sup> comes out as He is a boy

For other tags that can be used to format, you might want to take a look at the glossary at the end of this resource where we have included plenty of relevant HTML tags.

Ordered and Unordered Lists

Sooner or later you will have to create lists. Lists could be ordered (i.e. numbered) or unordered (i.e. unnumbered).

Here is an example of an ordered list:

  1. Item 1
  2. Item 2
  3. Item 3

Here is how to create it:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Here is an example of an unordered list:

  • Item 1
  • Item 2
  • Item 3

Here is how to create it:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

If it is not already obvious. Here’s a breakdown:

The <li> tag is used to indicate each item on the list. When making a list, you can use the <ol> tag to indicate an ordered list (“o” = ordered and “l” = list) or the <ul> tag to indicate an unordered list (“u” = unordered and “l” = list). Got the gist?

Nested lists

We can also have nested lists or a list within a list.

Example:

  • Item 1
    • Item 1 nested
    • Item 2 nested
  • Item 2
  • Item 3

This can be created with:

<ul>
<li>Item 1
<ul>
<li>Item 1 nested</li>
<li>Item 2 nested</li>
<li>Item 3 nested</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

As you can see, you simply open another listing tag – ordered (<ol>) or unordered (<ul>) – depending on what you want before closing the item you want to be nested.

Views: 80 | Added by: sockscap64 | Tags: HTML Design, HTML5 | Rating: 0.0/0
Total comments: 0