HTML stands for HyperText Markup Language, and it is a language that lets you take content and structure it so it can be consumed across many devices and platforms. HTML is the fundamental building block for all web sites and web applications, so let's take a look at it.
We will start with covering the very basics of HTML & CSS. If you are an experienced developer, you may want to skip ahead a few weeks.
Our first webpage
Now, we'll work out of a blank text file, so let's go ahead and create one of
those on the desktop and save it as
hello_world.html. Next let's drop this
content into the file, save it, and open it in our Browser. Don't worry about
the content, we'll go through it in just a moment.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Howdy from title bar.</title> </head> <body> <h1>Hello World!</h1> <p>We've created our first webpage, wasn't that <em>easy</em>?</p> <h2>Things we've learned today:</h2> <ul> <li>What HTML is</li> <li>Basic html usage</li> </ul> </body> </html>
Looks great, congratulations! You've made your first webpage. Now lets look at the code that goes into that page.
This is the Doctype. It tells a browser how to parse and render the document. In this specific case we're specifying the doctype for HTML5. There are other doctypes, such as xhtml and the html 4 ones, but for most everyday usage it is best to stick with HTML5.
<html> ... </html>
Next up is the html tag. You'll notice that there are actually two html tags, and the second one is prepended with a slash. This is a closing tag, and when a tag contains child elements, everything contained is part of the larger structure. In this case we are denoting that everything contained is the html document.
<head> ... </head>
head element contains metadata about the HTML document that isn't directly
rendered by the browser. In this case it has a
title tag nested inside
in this area.
Meta - Encoding
This specifies the character encoding for the document, in this case UTF-8.
<title>Howdy from title bar.</title>
This is the title that is shown in the browser bar. It is worth putting some thought behind this, as it is often displayed by third party sites such as Google or Bing search results.
<body> ... </body>
body element contains the portion of the HTML document that is rendered by
the browser. Here it contains a couple of headers, a paragraph, and a list.
H1 & H2
<h1>Hello World!</h1> ... <h2>Things we've learned today:</h2>
The heading tags come in six different versions: h1-h6. H1 is the most important, and generally there should only be a single one on the page. It is usually best for SEO purposes to have this be the most important part of the page, and not surrounding the header title or logo. In our example we have an h1 heading saying 'Hello World!' and an h2 as a header for our list.
Paragraph & Emphasis
<p>We've created our first webpage, wasn't that <em>easy</em>?</p>
The p tag defines a paragraph, and it acts exactly how you'd expect. When it is rendered there is a line break after it and the next piece of data falls after that line break. That is because it is a block level element. Other block level elements include headings, which we've seen already, and form elements.
There is another type of element, an inline one. This Emphasis tag around 'easy' is an inline element, and its called that because it appears inline with the text. Notice how in our browser rendered version there isn't a line break between easy and the question mark.
<ul> <li>What HTML is</li> <li>Basic html usage</li> </ul>
Unordered lists are used for a lot of things, even navigation, but its most
straightforward use is just to create a bulleted list. The whole list is
surrounded by a set of
ul tags, then inside you use a series of
li tags to
denote each list item.
It is interesting to note that with html (vs xhtml) you actually aren't required to close some tags, including the p and li tags.
<li>What HTML is <li>Basic html usage
This is perfectly valid html, but it's generally considered a best practice to always close the the tags, as I have in the full example. This is just for consistency and ease of maintaining the code.
It's important to make sure you are writing proper html. An easy way to do that in the beginning is to paste your code into the w3 html validator.
Lets try the
hello_world.html example and see that it works.
Now, lets remove the andtags to see that it still works.
Finally, let's try removing a few letters from a closing tag of our h1, maybe like this:
And we'll get a nice error explaining what went wrong, along with a suggestion
Saw < when expecting an attribute name. Probable cause: Missing > immediately before.
You'll notice there are a lot of other errors reported also. Generally speaking, it's best to find and fix the first error, then revalidate. Many errors will go away at once this way, and you won't waste time tracking down phantom reports.
So today we've looked at some basics of HTML, gone through a handful of popular tags, and seen how to validate a simple site. It'd be a good idea to take a few minutes and play with the example file. You could try adding a few list items, changing the paragraph text or adding some more headings. Be sure to check it both in the browser and in the validator along the way!
That's all there is to it. See you next time!
Published on 05.13.2016