Since I have a background in print, I’m always eager to help designers from other areas get a start in web design and basic development. I know from experience that the transition is an extremely intimidating one that many people simply don’t think they can manage.
Fortunately, I can also attest to the fact that it’s probably not as difficult as you might imagine. In the world of hardcore coding, HTML and CSS rank pretty low on the barrier to entry scale.
Today we’re going to start a series that examines the basic building blocks of web development. HTML, CSS, JavaScript; if you’re a complete and utter beginner who might not even have a basic grasp of what these technologies are much less how to wield them, then this series is for you.
What Is HTML?
There are a million ways that I could start this discussion. We could go into the drivel of how HTML stands for Hypertext Markup Language or how it was invented in 1980 by physicist Tim Berners-Lee as a system for sharing documents, but you can get all that from Wikipedia. If you’re interested in the history of the World Wide Web, I highly recommend investigating the topic further, but that doesn’t help us much in our discussion of what HTML is today and how you’ll need to use it.
What you really need to understand is the conceptual purpose of HTML. What is it for? Why do you need it? How does it compare and relate to other technologies like CSS and JavaScript?
HTML: The Most Important Piece
Along these lines, HTML can be thought of as the fundamental building block of the web as you know it. There’s an underlying architecture of complicated technology that makes up “The Internet” but the good ol’ WWW is largely dependent on HTML.
In fact, technically, HTML is all you need to create a web page. A few extremely simple lines of HTML uploaded to a web server would constitute a web page, which is definitely not something that can be said for CSS and typically not something that can be said of JavaScript. The point here is that, while all of these technologies are closely related, HTML is the pivotal piece of the puzzle.
Now, before you get too excited, that doesn’t mean that you can get away with only learning HTML. You’d be hard pressed to find a modern web page that doesn’t utilize, at minimum, a combination of HTML and CSS.
Markup Languages
To truly understand what HTML is, you’ll need to understand what markup languages are and why they exist (I’m sneaking in that drivel after all).
Basically, the web is written in plain text. Now, by “plain text” I don’t just mean a lack of images, I mean a lack of rich formatting of any kind. Unlike in Microsoft Word where you can easily create bold italic text at any point size, writing code is more like using WriteRoom or IA Writer; all you get is plain old letters and symbols.
The Typewriter Metaphor
Imagine composing an essay on an antique typewriter, then handing that essay to someone so that they could enter it into a computer. Your typewriter doesn’t have any formatting features, but when your associate enters your essay into the modern word processor, you want it to have headers, bold text, italic text, bulleted lists and more. How would you tell that person where to implement these features?
The answer is of course that you would “mark up” your document and insert extra indicators of how you want the text to be formatted. These wouldn’t be present on the end result but are merely meant to tell the interpreter how to make everything look the way you intend. This is exactly how a markup language works. With HTML, this markup is accomplished through tags.
Tag, You’re It
As I write this article, I’m doing so in plain text HTML. This means when I want to bold something, I can’t simply hit a button. Instead, I insert a bold tag:
|
1
|
The last word will be in <b>bold</b>. |
See how I used “<b>” to indicate where the bolded text would begin? Also notice how I used “</b>” to indicate where the bolded text would end. To italicize something, I use the same technique.
|
1
|
<i>This is italicized.</i> This isn't. |
The bracketed portions are known as tags, and each set of tags has a starting and stopping point. With these, you tell the interpreter, in our case a web browser like Firefox, how you want the content to be formatted. When we place content between an opening and close tag, we typically say that we have “wrapped” it in a tag.
Example Tags
Now that you know what tags are, here are some more very basic examples of some HTML tags:
- <p>paragraph</p>
- <h1>header</h1> (h2, h3, h4, etc. create incrementally smaller headers)
- <small>small text</small>
Links, Tags and Attributes
This is where the “Hypertext” in “Hypertext Markup Language” part comes in. One of the major parts about writing HTML, and indeed about using the web in general, is linking. That’s how it all works right? If there is a web page loaded into your browser and you want to get to another page, what do you do? Click a link! This system is fantastic for connecting all of the various bits and pieces of information stored on the web.
To link something in HTML, we of course use a tag. This tag is going to look a bit more complex than most though. Let’s look at an example that links to the Design Shack home page.
|
1
|
|
Here we have not just a tag but an attribute as well. The tag (<a></a>) tells the browser that there’s a link and the attribute (href) tells the browser where the link should go. The syntax for this type of structure is as follows:
|
1
|
<tag attribute="VALUE">Text, images, etc.</tag> |
In our previous example, anything between the “a” tags becomes a link. So the words “Design Shack” would’ve been an active text link that, upon clicking, directed the user to the href URL, which was the Design Shack homepage.
Placing an image via HTML works much the same way. We use the “src” attribute to point the browser to the location of the image and the “alt” attribute for text that will appear in place of the image if it can’t be displayed. Notice the closing tag structure is a bit different this time with all the “img” info placed within a single tag.
|
1
|
<img src="images/thepicture.jpg" alt="alternative text"> |
You Can Read HTML!
If you’ve been reading along up to this point, the following should make perfect sense.
|
1
2
3
4
|
<h1>What is HTML?</h1><p>You've officially learned enough that you should be able to read basic <bold>HTML</bold> fairly easily. This text is marked up with all kinds of tags, but once you know what they all mean, it becomes fairly readable doesn't it?</p><p>Now that you know what HTML looks like, let's move on and discuss it from a more <em>conceptual</em> point of view. What purpose does it serve in the grand scheme of web design?</p> |
HTML: The Skeleton of a Web Page
We now have a good idea of how HTML is a markup language and what that means. We know that it’s basically a way to give the browser plain text and have it output richly formatted and even active content that can be clicked on to some end. The last thing we need to understand is how it fits into the overall picture of a completed web page.
As we’ve seen in the examples above, HTML mostly relates to directly inputting content onto a page. The actual underlying structure of any web page is the kind of tagged statements we just learned about. Most text and links you see on any given page, as well as many of the images, are implemented directly with HTML.
HTML is Meant to Be Boring
As I said above, HTML is technically all you need for a web page. However, this HTML content by itself is quite plain. Notice that nowhere in the examples above have we told the page what background color we want to use, what size the text should be, which fonts to apply where, how wide certain portions should be and how they should line up, etc.
We’ve simply thrown in the content without any real thought towards what it will look like. Looking at any page on the web you can see that no one stops here. Each site has its own look and feel, its own color scheme, typography, layout, etc.
For example, imagine that your local news site picks up a story from the Associate Press. They could print the story verbatim and therefore have the same basic HTML structure for that content, yet it would likely look quite different from the version on the AP site. Why?
CSS is The Skin, Hair and Clothing
The answer is that modern HTML is not generally used to govern aesthetic style and layout. For this, we’ve adopted something called Cascading Style Sheets, or CSS.
The typical web developer workflow might be to insert all the various pure content first into an HTML document, then jump over to CSS and begin crafting that content to appear in a more visually pleasing and usable way. A year later the developer could come back and toss in a brand new CSS file that makes the website look completely different, all without touching the HTML.
JavaScript jumps into this game by taking a more active role in how the page behaves. Animations, form submissions, dynamic content, these are the domain of JavaScript. Lately CSS has been encroaching on this territory, but that’s a topic for another day.
What Is HTML5?
Before we wrap this up, you’re probably wondering what the heck all this HTML5 talk is about. HTML5 is exactly what it sounds like: the fifth major iteration of HTML.
Web technologies aren’t set in stone, they’re constantly evolving and expanding. Just like print designers generally have to keep up with the newest bells and whistles in the latest version of Photoshop, so web designers have to keep an eye out for changes in web standards.
HTML5 brings lots of new features to the table while cutting out some unnecessary fat from its previous installment. For instance, HTML5 developers have some new tags to work with that make the basic structure of a web page more logical.
For more on HTML5, check out our complete series on the topic:
Conclusion: More to Come!
This article was meant to give you a basic conceptual overview of HTML. If you started reading without a clue as to what HTML is and how it’s used, hopefully you now have a basic grasp of these concepts.
As we look to the future I’ll be expanding this topic and walking through the basic anatomy of an HTML document and then moving on to another important question: What is CSS?
Be sure to check back soon for more on these topics!
Image sources: xlibber, Ryan Amos, Dave Parker