Coding for designers part 3

Last time around we discovered that HTML stands for Hypertext markup language and I laboured the point that the rectangular elements that construct our HTML pages are analogous to the text and picture boxes found in indesign.

A html element.

So if HTML is made up of elements, what exactly are those element? Well, a typical HTML header element might look something like this:

<h1>Hello!</h1>

That’s behind the scenes of course, in the source code. What you actually see on screen will just be the content, in this case a cheery greeting. So what’s going on?

HTML works by wrapping content inside tags. Each tag has a name and based on that name the browser gets a heads up on what sort of content it’ll find inside. In the example above h1 or ‘Heading level 1’ tags are used. The browser can expect the content to be a headline of some sort and for it to be the most important headline in its section.

You’ll see this pattern repeated again and again. The tag names are surrounded by angle brackets. One tag sits just before the start of the content, one tag just afterwards. The second tag adds a slash just before the name to show that it is the closing tag.

Some elements don’t contain any text and don’t need a closing tag. Instead we add the slash before the second angle bracket. One example is the img or image tag.

<img />

Attributes

Unfortunately an img like the one above would be completely useless. In order to be of any use the image tag needs two extra bits of information that we call attributes.

These attributes are the src or source which tell the browser where to find the image we want to show and alt which provides some alternative text to display if for any reason the image can’t be seen. Click between the HTML and Result tabs below to see how an image with no source is displayed.

See the Pen IMG tag example by chris-creditdesign (@chris-creditdesign) on CodePen.

Attributes usually consist of two parts. A name and and a value and the value will usually be wrapped in quotation marks. The quotation marks tell the browser to treat the attribute value as text. They’re not 100% necessary but without them characters such as spaces, equal signs or angle brackets will cause the browser to throw a wobbly.

So all things considered a typical HTML element might look something like this:

By the way the Mozilla Developer Network has a list of every HTML element that makes great bed time reading.

Nesting

The fun really begins when you start combining elements. Most elements are designed to sit inside other elements. For example an em element can sit within a p or paragraph element to add emphasis to a word or phrase. Browsers will normally display the emphasised words in italics.

Be careful though. When an element sits inside another, it must be closed before the element that it is sitting inside. For example this example of ‘invalid html’…

… will cause all sorts of problems. Although this is a relatively tame example, the best we can hope for is that the content will be displayed in a totally unpredictable way and at worst the web page won’t display anything at all.

Placing elements inside others is referred to as nesting and also helps to give structure to our page. Here’s a fairly typical nesting example:

<html>
	<head>
		<title>Just a plain old document</title>
	</head>
	<body>
		<h1>Hello!</h1>
	</body>
</html>

Notice how the title element is nested inside the head element and the h1 is nested inside the body, all of which are nested inside the html element.

Notice also that we’ve followed the good practice of indenting the lines each time we nest an element within another. We could have typed out the same info like this:

<html><head><title>Just a plain old document</title></head><body><h1>Hello!</h1></body></html>

Your browser won’t care, it can read this mess above just fine. But as humans we’ll make a lot less mistakes and have fewer headaches if we get in the habit of indenting our HTML.

One final comment

Sometimes it can be useful to leave notes within our html documents to act as reminders to ourselves or to explain our work to someone else. We call these notes comments. Adding a <!– before and a –> after any text or code tells the browser to ignore it and just move on to the next thing.

Great! We’ve covered a lot of ground here. Next time around we’ll start adding a touch of style to our naked HTML elements with some CSS.