HTML & CSS: HTML Basics

Pages on the web (commonly called "web pages" or "webpages") are simply HTML documents - files saved with a ".html" (or ".htm") extension. You can create them using any text editor. I personally like using Sublime Text 2 but you can use literally any text editor you want that can write basic text documents with the correct file extension (Notepad, Text Edit -- whatever you are comfortable with).

Webpages can use different versions of HTML - using whatever is the most recent and supported is probably (although not always) the best. In these tutorials I'm going to try to mention differences between versions, and any deprecations and incompatibilities. If you are browsing these tutorials solely for the purpose of tag usage, deprecations, browser support etc. rather than actually learning the stuff - it's probably better to use documentation rather than a tutorial series like this one.

Depending on which version of HTML you are using, HTML pages might need a thing called a 'doctype' at the start of them to be technically valid in the eyes of the standards that W3C sets - these tell the browser the version of HTML we are using so our code can be interpreted by the browser correctly. We'll be talking about doctypes in later tutorials but to keep it simple for now, we won't be using doctypes (also - this leaves you open to use whatever version of HTML/XHTML you feel comfortable with when we come to differences between versions - as I've said, the most recent and reasonably supported version is probably going to be good. At the time of writing: XHTML or HTML5). Remember that although we want to keep our HTML and CSS as valid (fitting to the standards and specifications) as possible - it's not the most important thing in the world, -- our web pages will often function exactly as expected without a doctype.

HTML pages (or at least the majority of the stuff in them) should be surrounded with html tags in almost every version of HTML. We talked about tags in the introduction tutorial: they consist of a command/key word in angle brackets (less than and greater than signs). A generic element is simply a starting tag, an ending tag, and everything in-between - the starting tag is usually the element name in angle brackets and the ending tag is usually a forward slash followed by the element's name (all in angle brackets). Hence the html element that should surround most of the content in our HTML document, should look something like this:

1
2
3

<html>

</html>

Inside these tags, there are usually two distinct sections of HTML markup (the name given to pieces of HTML). A head, and a body.

Think of these a bit like your head and body (presumably you have a head and a body -- sorry to any alien life forms following the tutorial!) - the head does the thinking and preparation (for the most part), while the body actually does the 'stuff' (in this case - displays the content). There aren't super strict limitations on which bits you put where - but generally speaking, the head includes references to CSS stylesheets (you'll learn more about these in the next tutorial), the page's title, and other bits of preparation for the page (including scripts in some cases - although some people like putting these elsewhere). The body generally contains the actual structure (elements created with tags) and text content. We indicate these two sections (the head and the body) by simply using the head and body elements to encase the different sections of markup.

In HTML if something isn't in angle brackets (A.K.A isn't a tag of some sort) then it's considered as text and is displayed on the page directly as text content (for the most part). Hence if we wanted a page to display I'm an HTML page! then we could just write some text in the body element, for example:

1
2
3
4
5
6
7
8

<html>
<head>

</head>
<body>
	I'm an HTML page!
</body>
</html>

It's worth noting how I indented (put a tab space before) the text inside the body section. The general 'rule' (it's not really a rule - it's not necessary to make the code work) is to indent things more levels as they contain each other. In this case I've indented the text as it's within the body element. The indentation makes it clearer that the text is inside the body. Some people like indenting the head and the body elements themselves since they are contained within the html element - however it's really down to personal preference, and personally I don't like doing this (if you do - then go with it!).

While we are creating a basic HTML page we may as well the set page title. We do this in the head section by putting whatever we want the page's title to be inside of the title element. If we wanted to set the page we created above's title to HTML Page! then we simply add the title element into the head section:

1
2
3
4
5
6
7
8
9

<html>
<head>
	<title>HTML Page!</title>
</head>

<body>
	I'm an HTML page!
</body>
</html>

Ok - so it's about time to test the page! Simply save the file with the .html extension and then launch it in a web browser of your choice (Firefox, Safari, Chrome, Internet Explorer - whatever you want) to see your page in action! If you don't know how to do this, search the web for a basic tutorial for your text editor and/or web browser. On opening the page in the browser, you should be able to see that it all worked! The text is on the page as expected, and the title of the page (likely written on the page's tab in your browser) is set!

We should also probably talk a little bit about different types of elements. There are many different elements in HTML which fulfil different roles -- for example images, paragraphs of text, and shorter spans of text. All elements on a webpage have a certain display property on the page, this can be set to block, inline, inline-block or none. The concepts behind each value and knowing the properties of each (and which elements have which default display properties) is very important.

  • Block elements will take up the full width available, with a new-line before and after. An example is a paragraph of text.
  • Inline elements take up only as much width as they need and do not force new lines. An example is a span of text.
  • Inline-block elements are displayed like inline elements (on the same line as other things), however unlike inline elements, take note of certain block properties such as setting width and height. An example is an image.
  • Elements with a display value of none don't display on the page at all.

Terminology!

There is a fair bit of basic HTML terminology that I've thrown around in this tutorial and will do in future tutorials. Although I've given a general definition when I use the terms above, here are some definitions if you missed them:

  • Markup - Markup is the name given to any given section of HTML code.
  • Tag - A tag is basically a command/key word surrounded in triangular brackets which indicates a certain element on the page.
  • Element - An element is an individual component of a page, almost always indicated by tags.
Recap:
  • HTML documents are simply files saved with the '.html' or '.htm' file extension, made up of different element components.
  • The majority of the content in an HTML document should be surrounded in an html element.
  • Inside the html element, there should be two sections - the head and the body.
  • The head is generally for page preperation and the body is generally for content.
  • Any text in the body which isn't inside angle brackets will simply be displayed as text.
  • A page's title can be set in the head section by putting text inside a title element.
  • You can see how an HTML document will display on the web by opening the document in a web browser.
  • HTML elements have different default display types - block, inline, inline-block, or none.
Challenges:
  • Try to create a basic HTML document with html, head, body and title elements and some simple text.
  • Think of different elements you might have on a webpage and decide whether you think they should be block, inline, or inline-block.