5:55 AMHTML 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?
HTML, 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.
First, a quick rundown of all the HTML versions since HTML was invented.
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 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.
<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:
The next step is to start creating paragraphs. Paragraphs can be created with the <p> tag.
<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.
<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.
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.
By using line breaks.
<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:
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:
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?
We can also have nested lists or a list within a list.
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.
|Total comments: 0|