Wizzley

What is: HTML?

by Paul

HTML is the main markup language used to create and display information within webpages and the best part is that it's easy to learn!

HTML stands for Hyper Text Markup Language. It was created by the World Wide Web Consortium which was founded by Tim Berners-Lee - the creator of the World Wide Web.

HTML's purpose in life is to tell web browsers how to display webpages. This very Wizzley article was created and brought to you using HTML!

However, HTML is only used for the layout of webpages. The style of the webpage is left to Cascading Style Sheets (CSS) and fancy interactive features are left to scripting languages such as JavaScript or PHP.

Wizzley's HTML
Wizzley's HTML

What Does HTML Look Like?

You may have seen HTML if a website hasn't managed to load correctly. It can look a bit of a mess when it does, but that's because web browsers need not worry about how it is laid out - when we aim to write HTML, we make sure that it's easy to read.

It's easy to see the HTML behind your favourite website too. For most browsers, clicking on a webpage and then pressing CTRL+U will open up the website's HTML code in a new window.

You'll be greeted by a lot of color as well as a collection of weird and wonderful punctuation combinations the likes of which you'll have never seen before!

The majority of what you're looking at are elements. You can identify an element by its opening and closing tags. Tags most commonly come in pairs. An opening tag starts with an opening angle bracket "<", then contain a little information about what the element is and then closes with a closing angle bracket ">". 

Closing tags are similar; however they must have a forward slash "/" immediately before the closing angle bracket. This is how HTML tells the web browser that it is a closing tag rather than an opening tag.

<p></p> is an example of an opening and closing tag. Here, the information in the tag to tell the browser what type of element it is is "p". It is a paragraph element.

However, some tags do not need an opening tag and a closing tag. These are known as empty tags because they contain nothing in the middle. <br/> and <hr/> are examples of empty tags. They provide a line break and horizontal rule respectively.

The Most Basic HTML Page

A basic website
A basic website

Above is the HTML for an incredibly simple webpage. So simple in fact that all it does is display "Hello world!" in the web browser. However, this is the basic frame of how websites are created.

The first line of any HTML webpage must be <!DOCTYPE html>. This isn't HTML, it is a document type declaration. It is there simply to tell the web browser what version of HTML the webpage is written in. The above is the DOCTYPE for HTML5, the latest version.

Line 2 is the HTML opening tag. All of our HTML code must be within this tag and its closing tag and again, it is mandatory to have in a HTML document.

Line 3 contains the head opening tag. The head tag isn't where content for the website is put. Instead, it can contain other interesting elements such as scripts and style sheets.

More importantly, as you can see it is where we can use the <title> opening tag. Anything put between the opening and closing title tag is displayed across the taskbar of the user's computer and also across the top of web browsers and in tabs.

In line 7, we see the body opening tag. Between this and the closing tag, we put all of the content we want to be displayed on the website. This is where the main chunk of HTML will be put.

Line 8 has a <p> element which we discovered earlier. <p> elements are used to contain paragraphs and they automatically put space before and after the text in the element.

Since you now understand elements, why not buy these HTML decorated items?

How Do I Begin To Write HTML?

As HTML is a markup language, it doesn't require any fancy programs. If you want, you can use any built in text editor on your computer. However, there are better free alternatives available.

Personally, I use Notepad++. It is very easy to use and has subtle features that are great if you're just beginning to write HTML.

The first thing to do when using Notepad++ is to make sure the webpage is saved as a .html file. This is because Notepad++ color codes parts of your code to make it easier to read and understand. If it isn't a .html file, it will appear grey.

You may want to download Notepad++ now and copy the very simple webpage from above. It will enable you to get a feel of how Notepad++ and HTML work.

You will be able to open the .html file in any browser and see what it looks like. HTML is very large and contains a lot of different elements, but each and every webpage once looked very similar to the example you just wrote.

Updated: 12/31/2012, Paul
 
Thank you! Would you like to post a comment now?
9

Comments

Only logged-in users are allowed to comment. Login
JoHarrington on 11/11/2012

It was always going to be us lot who found it. LOL

And yay! Now everyone can see the HTML that we used to mess up Wizzley (until you blocked us :p ). NB Everyone learning HTML, I didn't close my italics on purpose. You will always need the </i> in there if you've opened it.

Fred just had a typo. <3

Simon on 11/11/2012

*yikes* and *lol*! I can't believe we've had such a nasty bug in our comments for almost three years and nobody ever noticed it until now!! Thanks for the discovery <3 It's fixed now!

Calanon on 11/11/2012

<u> does this work?</u>

JoHarrington on 11/11/2012

<b>Is Simon on the way to go >:( at us? </b>

Paul on 11/11/2012

<u> Oh God, that's a bug!

JoHarrington on 11/11/2012

<i>Yes, it works. You just leave a HTML tag open in your comment. Simon's going to kill us. LOL

JoHarrington on 11/11/2012

Oops!

And LOL Did Fred B tag his message, without a closing tag. He's bolded both of our comments. Nice one! Fred, y u h4XX0r Wizzley? >:(

And was that a random p tag, Paul?

Paul on 11/11/2012

It's looking good, though you did typo the closing </p> tag!

Fred on 11/11/2012

"<strong>nice</stong>"

JoHarrington on 11/11/2012

<pre><html><head><title> Hi Paul!</title></head>
<body><p>Thanks for the tutorital</p>
<p>And I really like the head and body tag t-shirt. I'm adding it to my wishlist>/p>
<p>I wonder if me coding this will mess up the comment box; or lead to mass confusion.</p>
<p>Bye!</p></body></html></pre>

LOL All of the above was hardcoded in HTML. Wizzley just converted it.

You might also like

What is: CSS?

While HTML provides the backbone of a website, CSS allows you to have total c...

What is: C++?

C++ is an all-purpose programming language which is based upon one of the mos...

Disclosure: This page generates income for authors based on affiliate relationships with our partners, including Amazon, Google and others.
Loading ...
Error!