I'm Robert. Web developer behind WebsiteSetup.org. In this tutorial, I'll help you learn html.
. 55 Comments

Want to learn a little HTML?

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

There are at least 1.2 billion websites in the world today, and 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, with no coding required, take a look at this guide here: 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 of a series of codes usually written in a text file and then 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 be going 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 and it gradually evolved to allow 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 will later be reissued with minor edits in 1998.
  • HTML 4.01: In December 1999, HTML 4.01 was released.
  • XHTML: The specifications for this was 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 will later release HTML 5.1 in November 2016.

Choosing Your HTML Editor

Choose HTML editorIf you will be creating web pages in HTML, you will 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 buggy code and as a result reducing how much typing you have to do. Most HTML editors today also allow you to preview your web page to see how it will look in a web browser using their WYSIWYG feature.

There are many free and paid HTML editors, and below are some of the top options you can choose from:

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. If you want to code in HTML, it is essential to understand these building blocks. They include tags, attributes and elements. We take a basic look at them below:

Introduction to Tags

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

So in essence, 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 that appears to display a series of things (could be hyperlinks, images, media, or other 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 a basic example:

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

However, to achieve what we have in the bold format you have to use the <b> tag.

making text bold in html

So in raw HTML we have something like <b>He is a boy</b> which the browser then translates to this: He is a boy.

However, the very same “He is a boy” could come out italicized.

This is achieved using the <i> tag.

making text italicized in html

So we have: <i>He is a boy</i> which then comes out as He is a boy.

It could also come out hyperlinked. This is achieved using the <href> tag.

making text hyperlinked in html

In raw HTML we have: <a href=”https://websitesetup.org/”>He is a boy</a> which then comes out as He is a boy.

There are a few things you should understand about tags, though:

  • Tags are practically the building block of HTML — you can’t do HTML without tags; if stuck on what tag to use, be sure to check out our HTML periodic table.
  • Almost every open tag must be closed. However, there are exceptions. An example of a tag that does not have to be closed is an empty tag, such as the line break: <br>.
  • Tags are contained in a less than (“<”) and greater than (“>”) angle bracket. Closing tags contain a trailing slash that becomes before the name of the tag being closed, though: Example of an open tag: <b>. Example of a closed tag </b>.
  • Every HTML file begins with the opening tag <html> and ends with the closing tag </html>. Of course, the very first line of the HTML file should declare the type of document so that the browser know what HTML flavor you use. This is why you see HTML pages start with “<!DOCTYPE html>” before the HTML code begins.

Based on the above, most HTML files basically look like this before content is added:

HTML--

The section that follows the <head> tag usually contains information about the document such as its title, meta tags and where to locate its CSS file — most content that is not visible directly on the browser page. The section between “<body> and </body>” (which we represented with “MAIN CONTENT”) is where the main content of the HTML file, that the viewer will see in the browser, will be included. This includes everything from the first paragraph to hyperlinks to formatting to multimedia and all else.

Introduction to Elements

introduction to elements

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

Going back to our “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. However, everything, including the opening tag, the content and the close tag is an element.

So whenever a tag is opened, content is introduced and the tag is then closed, we have an element.

An element could be in the most basic form or in the most complex form. Why? Because anything in between an open tag and a closed tag as well as those tags is an element. That means we can have elements within an element. In this case, our simple example in which we bold he is a boy (<b>He is a boy</b>) is an element. However, you will note that we said earlier that 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 was opened, contains content and was 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, and it is used inside the opening tag of the element. Attributes are made up of a name and a value.

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

example of an attribute

Example:

<p align="center">He is a boy</p>

In this example, we are instructing that “He is a boy” be aligned to the center of the document.

Getting Started With HTML


Getting started with HTMLAssuming you want to create your own basic HTML document today, how do you get started? From creating page titles to creating forms, we 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, and it is also what will be indexed as the title for the page when search engines 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.

Creating Headings in HTML

creating headings in html

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 can as a result impact how your content is ranked in search engines.

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 close 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>

Creating paragraphs

creating paragraphs in HTML

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>

That said, it is important to realize that writing in HTML is very different from writing in pure text; so 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 like in the example below?:

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.

Formatting Text in HTML

formatting text in HTML

The next step is to format your text in HTML. This is where you can indicate whether you want your text to come out bold, italicized, underlined, subscripted, superscripted, etc. This is a basic guide, so this section won’t be the be-all-end-all for formatting; instead, we will only include some basic formatting tags. The process for using other forms of formatting is simple; just find the tag you want and go ahead:

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. However, it is 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 is a basic guide, though, we’re keeping it here.

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 include a lot 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). You get 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 list tag — ordered (<ol>) or unordered (<ul>) — depending on what you want before closing the item you want nested.

creating hyperlinks in HTML

The web is one massively interconnected network of pages. If you create a website, whether internally or externally, or both, you will have to link to other pages. A link to an internal page on your website, or to an external page on the web, is called an hyperlink. Also, while people usually link a text, any HTML element — an image, for example — can be linked.

The <a> tag is used to define links in HTML, while the “href” attribute is used to specify the destination of a link, the link is then put in a quote after the “equal to” sign before the tag is closed.

Example:

To create an hyperlink, this: <a href=”https://websitesetup.org”>YOUR LINK TEXT HERE</a> will come out as YOUR LINK TEXT HERE

Now, assume you are linking to a local file; in which you have all your html pages in the same folder, you don’t have to include a website URL. Just add the file path. For example, if linking to a file titled about-page.html, your hyperlink becomes <a href=”about-page.html”>YOUR LINK TEXT HERE</a>, which links to the about-page.html file.

If the HTML file you want to link to is local but in a folder different from the main folder, you simply specify the file path. For example, if the file is in the “files” folder under the main document where the current document you are writing is, your hyperlink goes something like this <a href=”files/about-page.html”>YOUR LINK TEXT HERE</a>

You might want to specify how you want the link to be opened e.g. in a new window/tab. This is done with the target attribute.

Examples:

<a href=”about-page.html” target=”_blank”>YOUR LINK TEXT HERE</a> specifies that the link should be opened in a new tab.

<a href=”about-page.html” target=”_self”>YOUR LINK TEXT HERE</a> specifies that the link should be opened in the same tab.

There are other attributes that can be used to communicate different ways a link should be opened. They are:

  • _blank – Open in a new tab.
  • _self – Open in the same tab.
  • _parent – Open in the parent frame
  • _top – Open in the full body of the window
  • framename – Open in a named frame

You can also have an image point to a link.

Example:

<a href="https://websitesetup.org">
<img src="heisaboy.jpg" alt="He is a boy">
</a>

This tells the browser to display an image pulled from the image file “heisaboy.jpg” and have it link to https://websitesetup.org. The “alt” attribute represents what should be shown if the image is unable to be displayed (due to browser settings or some other stuff that present images from showing).

Using Images

using images in HTML

Images are added to an HTML document with the <img> tag. The <img> tag is an empty tag, so it does not need to be closed.

Example:

<img src="heisaboy.jpg" alt="He is a boy">

This is a basic example of telling the browser to display an image titled “heisaboy.jpg” pulled from the same directory as the HTML document. The “alt” attribute tells the browser to show a text (known as an “alternative text”) called “He is a boy” if for some reason the browser or internet settings prevents the browser from displaying images. If you want to pull an image in another directory, or on an external site, the full address/path should be specified.

Going beyond the basics, we could also use other attributes to better customize the image. For example, the “style” attribute can be used to specify the width, or the height, or both of the image.

Example:

<img src="IMAGE PATH" alt="YOUR ALTERNATIVE TEXT" style="width:width;height:height;">

(the italicized “width” and “height” should be replaced with the actual values in “px” (e.g. “20px”) you want for your image.)

Creating Tables

creating tables in HTML

As you get deeper into HTML, you will want to learn various ways to present information in a more organized way. One such way is through the use of tables.

Tables are created with the <table> tag. Each header in a table is specified with the <th> (“table header”) tag while each row is specified with the <tr> (“table row”) tag. The table data is then indicated with the <td> tag.

Example:

<table>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
<tr>
<td>Input 1 under header 1</td>
<td>Input 1 under header 2</td>
<td>Input 1 under header 3</td>
</tr>
<tr>
<td>Input 2 under header 1</td>
<td>Input 2 under header 2</td>
<td>Input 2 under header 3</td>
</tr>
<tr>
<td>Input 3 under header 1</td>
<td>Input 3 under header 2</td>
<td>Input 3 under header 3</td>
</tr>
</table>

This gives us something like this:

table example 1

As you can see, while we have a table it is a bit unorganized. To make this organized, we can style our code. To do this, we add some styling to the code. In this case, we are increasing width:

<table style="width:100%">
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
<tr>
<td>Input 1 under header 1</td>
<td>Input 1 under header 2</td>
<td>Input 1 under header 3</td>
</tr>
<tr>
<td>Input 2 under header 1</td>
<td>Input 2 under header 2</td>
<td>Input 2 under header 3</td>
</tr>
<tr>
<td>Input 3 under header 1</td>
<td>Input 3 under header 2</td>
<td>Input 3 under header 3</td>
</tr>
</table>

This results in something more organized, as you can see below:

table example 2

Now, you might want to go more advanced and use borders, set horizontal or vertical alignment for the content of the table, introduce dividers, padding, etc. However, you will need to learn some CSS to do stuff like this. We’re keeping this tutorial basic, wo we won’t get into that.

Quotations in HTML

quotations in HTML

There are different types of quotations, and these quotations are represented by different elements.

For a basic quotation, here’s an example:

<p>This is a sample. And <q>Here is our quote</q></p>

This comes out as: This is a sample. And “Here is our quote”

When you use the <q> tag, quotation marks are automatically added to what is enclosed within the tag.

You can also use blockquotes, which is done with the <blockquote> tag.

Example:

<p>This is a sample. And <blockquote>Here is our blockquote. In this example, we try to demonstrate how to format text to indicate a blockquote in HTML. This is different from ordinary quotes, in that the actual "quote" symbol may or may not be added depending on CSS styling, but the text is highlighted.</blockquote></p>

This comes out as this:

blockquote example 1

Using Comments in HTML

When doing any form of coding, it is important to learn how to include comments in your code. Comments are used to make your code more organized; basically, you can include a reminder to yourself or a note to others to make things easier. Initially, it might not seem important, but when you start writing hundreds or thousands of lines of code, and when things seem to start to get complicated, comments will come in handy.

Comments won’t be shown to the viewer by the browser. However, they can be seen in the source code.

Comments can also be used anywhere in the code, and they won’t change the function of your code in anyway.

You can include a comment by opening a bracket, including a double hyphen, adding your comment, including another double hyphen and closing your bracket.

Example:

<!-- This is a comment used to indicate information I want to remember, or that I want others to take note of, when looking at this code in the future -->

It is also worth noting that, especially when debugging, you can comment out lines of code. This way, the code remains in the document but does not function since you have commented it.

Example:

<!-- <b>He is a boy</b> -->

In this case, while “He is a boy” is supposed to come out as bold we have commented it and it would be ignored by the browser. In this case, as far as the browser is concerned, we have nothing.

This could also be used this way:

<b>He <!– is a –> boy</b> which shows He boy. This is because we commented out “is a.” We’re just trying to show you that practically anything, within or outside an element, can be commented out. You can include a note in your comment for reference sake — it doesn’t change the nature of what is displayed.

Using Colors in HTML

using colors in HTML

Sooner or later, you will want to use colors to indicate certain elements of your HTML document. This can be done in three main ways: with the HEX value, with the RGB value or with the name of the color.

Using color in HTML is usually done with the style attribute.

Example 1:

<p style="color:#0000FF";>This is the blue color</p>

In this example, using the HEX value for the blue color “#0000FF” we are telling the browser to show your text (in this case “This is the blue color”) using the color blue.

Example 2:

<p style="color:rgb(153, 255, 153);">This is the color green</p>

This time around, we ask that the text be highlighted in the color green using the RGB value.

Example 3:

<p style="color:hsl(60,100%,50%);">This is the color yellow</p>

In this example, using the HSL value, we asked that the text be highlighted in the color yellow.

Example 4:

<p style="color:orange;">This is the color orange</p>

In this example, we use the HTML color name (in this case “orange” — which we highlighted in the code by italicizing it) to ask that the text be highlighted in the color orange. Obviously, this is only feasible for texts for which you know the color names and can be difficult for certain color shades that can be easily done with the HEX code or RGB value. Regardless, you can find a list of 140 HTML color names compiled by HTML Color Codes.

Understandably, you don’t have all the necessary information — such as HEX code, RGB value, etc — for all colors. Don’t panic, the color picker by W3Schools is a great tool that allows you to select any color and shows you all information about that color including the HEX code, RGB value and HSL value.

Using iFrames in HTML

In an HTML document, an iFrame (inline frame) can be used to embed a file in the current document. In essence, you can use it to display another website or content from another web page inside the current one.

Example:

<iframe src="https://websitesetup.org"></iframe>

With the above code, I am telling the browser to display the content of https://websitesetup.org in a frame directly inside this page.

Iframes can be used to display a website, video, images or any other form of content.

The code for this is simple:

<iframe src="URL"></iframe>

(simply replace “URL” with the link to the website/content you want displayed.)

You can further customize to specify certain values, such as the height and width for example, of your iframe.

Example:

<iframe src="URL" height="350px" width="400px"></iframe>

In this case we’re telling the browser to display the iframe using an height of 350px and a width of 400px.

Fonts in HTML

using fonts in HTML

Understanding how fonts work is essential to creating effective HTML documents. For one, fonts make it easy to set the size of your text. It also makes it easy to set the color as well as the face (or font “type”) of your content.

To indicate the font your HTML document will be using, you will need to use the <font> tag. However, you can set the font size, the font color or the font face by using the “size”, “color” or “face” attribute.

Setting size — example:

<font size = "6">Display this text using the font size 6</font>

In this example we tell the browser to display our text using the font size 6. It is important to note that the range of accepted font sizes is 1 to 7. Anything above 7 will automatically adjust to font size 7. The default font size is 3.

Font color — example:

<font color = "blue">Display our text in the blue color</font>

Again, we’re using the <font> tag to ask the browser to display our text in the color blue. In this instance, we used the HTML color name (“blue”). This can be replaced with the HEX code or the RGB value if you want.

Font face — example:

Do you prefer Verdana instead of Times New Romans? This is how you set this.

<font face = "Verdana">Kindly display this text in the Verdana font</font>

In this example, we are telling the browser to display our text in the Verdana font. You can simply change the font face value to indicate any font you want to use.

Alternate font faces:

It is important to note that people will only be able to see your text displayed in the font you specify if they have that font installed on their computer. If not, the default font face — usually Times New Roman — will be displayed; which is why it is highly recommended to use “web safe” fonts. In this instance, it might help to include as many alternate font faces as you can. This way, even if they don’t have your main font face, you can specify other fonts in order of importance. This is done with the use of the comma.

Back to our example:

<font face = "Verdana, Helvetica, Arial, Comic Sans">Kindly display this text in the Verdana font first, or Helvetica, or Arial, or Comic Sans… in that order, if the main font is not available</font>

In essence, in the above example. We instruct the browser to show the text in Verdana. However, if Verdana is not available, instead of reverting to the default Times New Romans, it can show Helvetica, or Arial if Helvetica is not available or Comic Sans is Arial also is not available.

Conclusion

In conclusion, HTML is more complicated than what you have in this guide. However, if you can grasp the basic concepts in this guide, you are up to a good start. It’s like knowing the ABC of a language; everything else becomes much easier.

If you went through this tutorial with the aim to create a stunning website, we’re sorry to disappoint — it just doesn’t work that way. This is basic HTML tutorial, to help you develop a foundation you can build upon, and it takes significantly more effort — and a lot of development time often using a combination of languages, to pull that off. However, with WordPress, which we covered in great details in our guide on creating a website, you can have a stunning website ready in minutes.

HTML Resources


Want to ask a question or leave a comment?


Ask me anything

captcha



  • +

55 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

*

  1. Hey Robert,

    I started to get myself into webpage building. Your tutorials help a lot!
    I managed to install WordPress – and it’s working perfectly fine – props for that.

    About HTML5, I’m having a lot of fun with it. My question regarding it, is how can I make it visitable by people?
    Because now it’s really just a HTML file on my computer isn’t it.

    Thanks and keep up with the good work!

    Best regards,
    Sara

    • Hi Sara,

      Thanks for the kind words. You’ll need to upload the html files you hosting company server. Once that’s done, they’ll be visible for visitors.
      Robert

    • Hi Robert, Thanks for putting together these pages – they are great, and just what I need to get going on my project. I am also trying to decide whether to go for WordPress or HTML. I have coding experience, but not recent. Does WordPress produce an editable form of HTML that you can play with? I have worked with code generators in the past which are “editable in theory” i.e. they produce editable code but it is very difficult to work out what is actually going on :-).
      Many thanks,
      Liz

      • Hi Liz,

        Thanks for your comment. WordPress does have an option to make HTML on single pages and posts… If I were you, I’d play around with WordPress a bit. It’s pretty cusotmizable and cool to edit. Worth trying it out 🙂

        Cheers,
        Robert

        • Hi Robert, Thanks for your tutorials. I’m a serious newbie to HTML5, CSS, Java, but saw an effect the other day on a website I’d love to recreate. There was a background wallpaper, and the text seemed to be on a transparent ground, so you could scroll the text over the top of the wallpaper. How is that done? Would love to use it on a website. Thanks, Dianne

  2. One of the best guides I’ve seen for, thanks for sharing.

    I’m still confused though about what is better: I’m writing HTML at the moment but I’m confused about what is better: a CMS (WordPress) or raw HTML? I believe the answer is “it depends on what you want to do”. If you want to update it everyday you need a CMS. Otherwise you can do whatever you want. But still … I’m a bit confused.

    • Hi Stefanos,

      Thanks for your kind words. Great question too.

      In short, if you want to build a decent site quickly and you don’t have much previous coding/designing experience, hands down – go with WordPress. There’s a full tutorial on my homepage – https://websitesetup.org

      If you want to learn the basics of web development, try messing around with HTML5. At first you obviously won’t be able to create something really awesome – as it takes time to learn HTML5, but eventually you’ll get the hang of it.

      Robert

  3. Hi there! Found this awesome guide, how lucky am I? ;D

    I just have a short question: I made my own website using HTML5 and CSS3 and so now I want to upload it to the internet. I have bought myself a domain-name (bjornsteck.com) and have signed up/uploaded the files to a hosting client. (www.heliohost.com).

    However, is there anything else that I have to do in order for it to work?

    Cheers

    Björn Steck

    • Hi Björn,

      Now you’ll just need to change your domain nameservers to your hosting nameservers. You can ask this information from your hosting support. It should be easy 🙂

      Hope that helps,
      Robert

  4. Thanks for the awesome guide, I was so lost when I first tried HTML but I’m starting to get the hang of it, the only problem is I cant get the CSS file to change the attributes of the HTML files. I was wondering if you could help?
    Thanks in advance! 🙂

    • This guide has a small little mistake in it. He copied the same css-line two times. So instead of writing two times, write one.

      and then save your css-File to style.css

      David

  5. By the way, thank you for taking the time to put this together. I needed to get familiar with sections and articles, and this tutorial was very helpful.

  6. Thank you for this great guide, I was wondering, can you make an advanced html guide? I’m trying to learn everything about html to start a business creating websites. Thank you so much for writing this out.

  7. Hi Robert,

    I’m starting out developing a website using wordpress but ultimately may try and recreate/improve the end result using HTML&CSS in the future (trying to get into development!). If I make a website using wordpress and then create something better with HTML5 will it be possible to use my HTML version with the same host on the same domain? (hope that made sense!)

  8. Hi Robert,
    Thank you for helping us all learn HTML5 🙂 I had a quick question for you. I want to build a website using WordPress. I’ve found a few themes that work with the design I’ve created, installed them, but all of the source files for them are in php, which I am, unfortunately, not very familiar with. While I realize that I should probably catch up on that, would you say that I should just keep looking for a theme that’s HTML-based? I haven’t been able to find a single theme that has html files in it at all so far.
    Thanks again!

    • Hi Alisa,

      Most WordPress themes can be edited with a little knowledge of HTML & CSS in the back-end. But if you’re starting out, I realise that this can be a pain. What I’m suggesting you is to pick a free or paid theme that is somewhat suitable for you. Then, when you log in to your WordPress site dashboard, you can tweak it a bit under “Appearance -> Customize” 🙂

  9. This guide helped me a lot. Please make an advanced tutorial series for HTML5 too.

    I would prefer learning from you rather than reading boring traditional texts written by old monks.

    Will be waiting for it!

    – Pingal

  10. Thanks so much for this article. I’ve dabbled with learning HTML/CSS with Code School and Codeacademy, but with these you create code in-browser. I didn’t fully understand how to make my own website using a popular text editor such as Sublime Text.
    I did have a question about the zip code submit on the signup page. Could you use the pattern attribute? Like:

    • Dont worry Tom, there was a mistake in step 4 but I did have someone to help me through that. I am a complete novice()and blonde) and if I did not have someone to help me though this I would be in your shoes. However, once you start understanding what you need to do it becomes clearer. Do not give up!!! All will be revealed eventually.

  11. I am finishing up with a degree in web development next semester and was contemplating creating websites for small companies. In your opinion what is a better route for creating modern websites for companies. Should I use raw HTML, CSS and so on or should I use WordPress to create them. Would love to hear your opinion on the topic.

    Thanks,
    Tyler

    • Hi Tyler,

      While I’m a big fan of *raw* HTML & CSS, I’d still use WordPress to create sites for clients.

      Why?

      Because it’s a content management system = your clients can add/remove/change content without your help. It’s way more convenient from a client perspective, too.

  12. Great tutorial. Really easy to follow and engaging text instruction. I’ve tried learning this previously and they overcomplicated it, but you got it just right!

  13. Hi. Thanks for the website/tutorial; I love the conversational style.

    In the tutorial, it isn’t clear that code for the email, etc and for the audio/video codecs are intended to be placed on the Signup and Media.html pages That’s actually a nice teaching tool, but I’m not sure I would feel that way if I didn’t already have some programming experience. You might have caused some serious frustration among the true greenhorns. Otherwise, very nice. I also appreciated the helpful web links you included for the CSS color and backgrounds, and the “Can I use?” page. I expect I’ll put them to great use. Any other helpful links you could add to the bottom of the tutorial? I’ve also found the W3 tutorials very helpful, but they are much more technically-oriented and a real bore to work through.

    Thanks again.

    Enjoy,

    Al Davis

  14. This honestly help me so much. I’m a 16 year old web developer in the making. I wish to learn much more complex things and this started me off. Thank you very much.

      • I had made a simple static website with images, text, and css linking. Only I couldn’t start with database and cookies. I wish if there were articles on setting up COOKIE. I searched else where but is only making matters worse.

        Even a simple cookie which says ” Hi Robert, Good morning, good evening, signed out ” would do.
        Help would be highly appreciated.

  15. Hi, Robert.

    I learned to make websites of HTML and CSS from this website {that means you 🙂 }. Thanks for working hard on making this website for us. I have learned new about the “HTML5” thing and I also liked it.

    I have questions for you:

    Does publishing websites really costs money? If not, please read the following questions and if it really costs money to create a website and publish it, please do not read the questions (really, it’s your wish):

    Can I publish a website with WordPress so that people can visit my website?

    And, Can I make my own website by writing codes by HTML and CSS in WordPress and publish it in the internet?
    (QUESTIONS ENDS HERE)

    Thanks again for working hard on this website. And sorry for this long comment. I still have questions in my mind.
    Best regards,
    Saif

    • Hey Saif,

      Publishing websites is free (WordPress, Joomla, Drupal and plain HTML/CSS is all free), but setting up a website for others to read/browse costs money. Domain registration is roughly $10/year while web hosting is around $3/mo.

      Hope this helps 🙂
      Robert

  16. Thanks Robert. Very useful. I’ve printed out the HTML5 Cheatsheet. Brilliant! I’ve also saved this page to Evernote. I’m sure I’ll be back for more.

    But I do have a question. Is it better to use the HTML5 tag than just embed YouTube videos? On the surface, it seems like using the tag is more trouble., but I’m very much a novice.

    Thanks again and all the best.

  17. Hi Robert,
    I find this article very crucial in comparison to all that have ever read to guide me build my website.
    Am new to web designing and that’s why I ask you whether its a must to buy domain…are there free domains?…or in other words, can I get a domain that will serve me without monthly/annual payments ?

  18. Hello, Robert,
    Your tutorial is excellent and I needed a refresher course. I learned to code from Joe Burns, books “HTML Goodies” years ago, so you can guess how old I am! Our local Knife and Fork Club is in need of a very small web presence, and I have created six pages of information and have purchased a domain name. What I am looking for is just a simple web hosting service that I can upload these six, HTML files along with four gif files to promote the club. All of the files would be in one folder and the web hosting service would just point to the domain name and index.html and we would be off and running, of course paying the monthly web hosting fee. Suggestions or ideas will be most welcomed.
    Regards,
    David

  19. This tutorial has given me lots of insight,
    I’m still a novice about web design n I have what It takes to get started….
    My question is this, I know practice makes perfect but how can I see the content of my HTML on a browser for more improvement….