What is HTML?

If you want to learn to code, HTML may be the best place to start.  With pretty much any computer, you can create a simple website in a matter of minutes using nothing more than a few lines of HTML.  There are many schools and websites that will teach you how to write HTML code (our online tutorials, for example), but before we get into all of that, you might just want to know:

What is HTML in the first place?

Practically, HTML (Hypertext Markup Language) is the language that the entire worldwide web is written in.  While websites often incorporate features written in many other languages (CSS, JavaScript, PHP, Python, etc), those other features are all accessed by the user through the basic framework of an HTML page.

Every page you see on the internet is, fundamentally, an HTML page.  To see this for yourself, go to any website on the entire internet (any website at all), right-click on some blank space (maybe in the margins of the page), and click “view page source.”  The first line of code on any website you see will most likely contain either:

  • <html>, or, more correctly for the modern version of HTML5 in 2015,
  • <!DOCTYPE html>.

These are the “opening tags” for an HTML document; they tell your browser (the program that you’re using to browse the internet and view this website right now… whether it’s Chrome, Safari, FireFox, Internet Explorer, etc) that the code it is about to read is written in HTML.  The last line of the source code that you see, if you scroll all the way to the bottom, will likely end in </html>.  This “closing tag” of an HTML document tells the browser that the HTML document is over.

The point of using all these fancy <tags> is to communicate with the browser in a language all of its own, so that the browser doesn’t get confused about what you’re trying to tell it.  HTML code is generally written in plain-text files, so we need to use plain-text “markup” (like {curly braces} and <angle brackets>) to tell the browser what it needs to know in order to process your code correctly.  These markup <tags> need to be distinctive (different from normal text) so that the browser doesn’t get confused when you’re writing something (in English or some other human language) that’s meant for humans to read.

For example, if I want the words “hello world” to be displayed in bold, I might try to tell the browser to do this by writing in my HTML file:

 

display these words in bold: hello world.

 

But this wouldn’t work very well.  Instead of displaying the words “hello world” in bold, your browser would just display you the actual words that I wrote:

 

display these words in bold: hello world.

 

When I try to talk to the browser in English, it just goes right over the browser’s head.  The browser assumes that my English words are meant for English-speakers to read, and displays them on your screen so that you can read them.  If, on the other hand, I write in my HTML file:

 

<strong>hello world</strong>

 

then your browser will read what I wrote and know that the words “hello world” are supposed to be presented strongly, and will display them in bold, like so:

 

hello world.

 

This is a simple example of what HTML tags can do, but HTML isn’t really intended to style your web pages and make them pretty; that’s what CSS is for (we’ll get to that in the next article).  The main purpose of HTML is to give structure to your web page, by telling the browser what your page is actually about, what each part of your page means, and what elements you’re including on the page.  For example, a very basic HTML file might look something like this:

 

<!doctype html>

<html lang="en">

<head>

  <title>My First HTML5 Page</title>

  <style>

    body {

      background-color: black;

      color: white;

    }

    p {

      color: cornflowerblue;

    }

  </style>

</head>

<body>

  <strong>Hello world!</strong>

  <p>This is a paragraph.</p>

  <p>This is another paragraph.</p>

  <img src="http://www.fvi.edu/wp-content/uploads/2015/12/vawlt.jpg" />

</body>

</html>

 

In this case:

  • <!doctype html> tells the browser that everything that follows (until the closing </html> tag) is to be interpreted as an HTML5 document.
  • <html lang=”en”> tells the browser that the content of the page (until the closing </html> tag) is written in the English language.
  • <head> tells the browser that everything in this section (until the closing </head> tag) is to be interpreted as information about the document — not content to be displayed on the actual page.
    • <title> tells the browser that everything in this section (until the closing </title> tag) is the title of the page.  You can usually see the titles of pages in the tabs at the top of your browser window.
    • <style> tells the browser that everything in this section (until the closing </style> tag) is code to “style” the content of the page (change the colors, move things around, etc).  The code in this section is written in CSS, a fun little language used to make web pages look pretty.  We’ll get into that in our upcoming “What is CSS?” article.
  • <body> tells the browser that everything in this section (until the closing </body> tag) is the “body” of the document, and mostly contains stuff that will be displayed on the actual page.
    • <strong> tells that browser that everything between this tag and the closing </strong> tag should be displayed with a “strong” typeface (bold)… and it also tells search engines that this text is strongly related to the general idea of the content on the page.
    • <p> tells the browser that everything between this tag and the closing </p> tag is a single paragraph.
    • <img src=”http://www.fvi.edu/wp-content/uploads/2015/12/vawlt.jpg” /> tells the browser to insert an image, which is located (sourced) at the URL http://www.fvi.edu/wp-content/uploads/2015/12/vawlt.jpg

SO, now that you have a basic idea of what HTML is…

you can go ahead and play with it yourself!  The code above (between the <!doctype> and the </html> tags) is a full, self-contained HTML5 document.  All you have to do to make it “live” is:

  1. open a plain-text editor (like notepad on a PC or TextEdit on a mac),
  2. copy/paste the above code into a new (blank) document,
  3. save the file with the extension .html,
    • for example, you might choose to call the file “hello.html” or “test.html” or “iHazCoding.html;” whatever you want to name it, just make sure to add “.html” at the end so that your browser will recognize it
    • tip: save the file to somewhere you will be able to find it easily (Desktop is usually a good choice)
    • note: if you’re using TextEdit, you may need to switch from the default “rich-text” mode to “plain-text” mode; here’s a quick tutorial on how to do that
  4. double click to open the file.

If everything worked out correctly, your browser should open the file as a new web page!

Viola!  You are now an accomplished HTML coder.  Go ahead and play around with the code in the file; change something, save the file, and refresh your webpage to see the changes.  Go nuts; you can’t really break anything at this stage in your training.  In the worst case scenario, if you really mess up the code, you can always just copy/paste the code again from this blog post and start over again with a clean slate.

If you actually want to get really good at this Markup Language (and maybe even get a job as a web developer), check out our free online courses at fvi.edu/coders_corner/introclass!

2017-07-20T12:43:34+00:00