HTML has many fundamentals to be aware of. Whether we’re dealing with HTML comments, HTML whitespace, Block Level elements, or inline elements, there are several building blocks to memorize. Knowing these important key concepts will pave the way for our HTML5 learning. Let’s jump right in!
Whitespace and Comments
Whitespace is a term that describes characters that do not usually display anything when rendered on a page. Tabs, spaces, breaks, and so on are all whitespace characters. HTML basically ignores whitespace. More accurately, it compresses many whitespace characters down into one. To see an example of how this works, let’s look at some HTML code. First, we will show the code with a collection of really random whitespace characters. Next up, we will Beautify the source code. Beautification simply means using an IDE Integrated Development Editor to apply very pleasingly to the eye spacing and formatting to the source code to increase readability. Then we can compare the result in the browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
Fresh Style
</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<h1>
Style Example
</h1>
<p>
This is a paragraph with some fresh style. It needs more than one sentence, so this is the second sentence.
</p>
<p>
You can have more than one paragraph on a page. If you didn't know that, now you know.
</p>
<p>
One is the lonliest number, two is company, and three is a crowd. Guess which one this paragraph is.
</p>
</body>
</html>
Both examples of HTML are telling the browser to do the same thing. It may not look like that based on what the source looks like, but if we view this in the browser, we can see both options give the same result.
You can be as sloppy as you want to! The browser will still recognize your chicken scratch of HTML markup! Of course we don’t actually want to do this. As your webpages grow and become more complicated, the nice formatting is going to pay big dividends to keeping your sanity in check. Definitely try to keep your source code as neat and tidy as possible. Comments are also whitespace when they are rendered in the browser. So if you add several lines of comments to help with the meaning of your HTML source, it will be treated as one space as the browser engine collapses multiple whitespace characters into one.
Using Paragraphs to Display Text
As you write several lines and sentences of content in your webpage, you will need a way to organize the text into easy to read chunks. The best way to do this is to simply make use of the paragraph or p elements on your page. In the example above, it was easy to group together three different groups of text into three different paragraphs. Even though you can easily place the text outside of the p tag, it is better to contain it within the paragraph as it is much easier to style and format. To recap, paragraphs are created with the p element, and then styled using css.
Applying Style to HTML Elements
In the bad old days of web design, whoops, I mean good old days of web design, we were subject to styling elements with by using some of the built in styling mechanisms of HTML itself. These days, there is no styling built into the markup, it is all done via CSS or Cascading Style Sheets. We were able to assign some style to the example snippet of HTML by way of an external stylesheet. We placed the following CSS code in the main.css file
html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li,
blockquote, pre, form, label, legend, table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, section, summary, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body, p {
line-height: 1;
font-family: Georgia, serif;
font-size: 16pt;
}
p, h1, h2, h3, h4, h5, h6, ol, ul, li { margin: 12pt; }
li { margin-left: 2em; }
h1, h2, h3, h4, h5, h6 {
line-height: 1;
font-family: Tahoma, Verdana, sans-serif;
font-weight: bold;
}
h1 { font-size: 200%; }
h2 { font-size: 180%; }
h3 { font-size: 160%; }
h4 { font-size: 140%; }
h5 { font-size: 120%; }
h6 { font-size: 100%; }
pre { font-family: consolas, monospace; }
We could also have placed this CSS inline, meaning in the same HTML page. Don’t do this! You pretty much always want to put your CSS code into it’s own file and link to it via the link tag. The link tag is a standalone tag, not a container, which has three attributes that should be set. The first attribute is rel with a value of stylesheet, the second is type with a value of text/css, and the third is the href with a value of main.css. The href is a document relative file path, so if your CSS is in a different folder, simply include the path to the folder in this attribute value. The CSS file may even be located somewhere in the cloud via a CDN Content Delivery Network and if that is the case, just provide that file path as well, it will still work.
Styling is going to come in very handy. If the CSS is removed from our example HTML, it is quite bland indeed.
Block vs Inline Elements
Many times you may have been designing a web page and the layout of elements on the page seem to have a mind of their own. Often times, this is caused by the differences of block level vs inline level elements. Inline means that the element or object in question is part of the overall flow. Block level takes it’s own space and occupies the entire width of the page using the height of itself. Another way of saying this is that block level elements take up vertical space. Inline follows the left to right flow, wrapping when needed.
Block level elements include <address> <article> <aside> <audio> <blockquote> <canvas> <dd> <div> <dl> <fieldset> <figcaption> <figure> <footer> <form> <h1> <h2> <h3> <h4> <h5> <h6> <header> <hgroup> <hr>
Inline level elements include <b> <big> <i> <small> <tt> <abbr> <acronym> <cite> <code> <dfn> <em> <kbd> <strong> <samp> <var> <a> <bdo> <br> <img> <map> <object> <q> <script> <span> <sub> <sup> <button> <input> <label> <select> <textarea>
The Purpose of the Head Tag
When reading a book, we’ll often take a moment to look at the front cover, the matter of the book, and table of contents. This gives us a good outline of what we are about to embark on, as well as a helpful outline. This is some information, about the information in the book. It works the same way in HTML. The head tag contains all of the meta data that will be useful for web browsers and search engines to properly interpret your page. Many useful elements go in the head area of the page. Here is an HTML table of the elements you will use.
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base> | Defines a default address or a default target for all links on a page |
| <link> | Defines the relationship between a document and an external resource |
| <meta> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
Using CSS to Apply Style
We already saw how to apply style to HTML in a page by using the link tag to link to an external style sheet. The Cascading nature of CSS is what gives us the ability to override styles in the external style sheet by placing the style right into the HTML file. Making a habit of this might not be the best idea since it will cause things to become muddied over a period of time. In order to avoid cruft, it’s better to keep those styles right where they belong, in your external style sheet. There are times when you will need the ability to place the style right in the head of the HTML document, or even inline right to the element itself. The order of precedence goes as follows. Inline has the highest, Style in the head element comes next, and external style sheets are given least precedence.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
Fresh Style
</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<style>
p {
background-color: #E3E3E3;
}
</style>
</head>
<body>
<h1>
Style Example
</h1>
<p>
This is a paragraph with some fresh style. It needs more than one sentence, so this is the second sentence.
</p>
<p>
You can have more than one paragraph on a page. If you didn't know that, now you know.
</p>
<p style="background-color:#D6E9C6">
One is the lonliest number, two is company, and three is a crowd. Guess which one this paragraph is.
</p>
</body>
</html>
By applying a specific style to an element in the HTML page using the style tag in the head tag of the document, you can see that the three paragraphs now have a background color. For the third paragraph we applied a style inline on the element itself, so in that case, it overrides anything in both the external style sheet and the style in the head of the document. Awesome Stuff!
Add JavaScript to HTML
There are several ways to include JavaScript in your HTML page. Just like CSS, you can place the JavaScript inline, but it’s much better to place the JavaScript in an external file. VegiBit has a great series how to learn JavaScript and you are welcome to check out those tutorials to get up to speed on all of the JavaScript Fundamentals you’ll need to know. For brevity and completes, we’ll include a simple example here.
<!DOCTYPE html>
<html>
<head>
<title>
Including Javascript in HTML
</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script>
function count() {
var n = 0;
e = document.getElementById("counter");
setInterval(function () {
e.innerHTML = ++n;
}, 1000);
}
window.onload = count;
</script>
</head>
<body>
<h2>
Including Javascript in HTML
</h2>
<h3>
Watch this counter increment! <span id="counter">0</span>
</h3>
</body>
</html>
Your little JavaScript application is happily ticking along, displaying a number value to the screen once every second. Another great resource for learning about HTML and JavaScript together is the JavaScript Events Tutorial, do check it out!
The HTML Meta Tag
Metadata is data about data. Say Whay?! Sounds funny right? Well, it is actually very useful. The meta tag give overview information about the current HTML page. The metadata is not actually displayed on the visible page, but rather to give useful information to the browser and search engines.
The common uses of meta elements are to specify keywords, page description, last modified information, author of the page, and others.
Providing keywords for search engines
Give a description to the web page
Define the author of the webpage
Refresh the page every 25 seconds
Search Engine Optimization
SEO is a bit of a misnomer. There used to be a class of webmasters that would try to push their websites higher in the search engines using all kinds of tricks. This is largely ineffective. What really matters is the content in the page, as well as the structure of the HTML document and overall website. Think of SEO as being a neat freak. Do you like to have everything lined up just right, tools placed in their proper locations, dishes put away in the right cabinets, food in the right location in the refrigerator and so on? Then you my friend are going to be great at Search Engine Optimization. You see the search engines do not need to be optimized for at all. They are simply trying to provide the best answer or result to the search question or query typed in by the user. If your content provides a workable solution to the search users problem, and your HTML is clean and well structured, then you may get a visit from the search engine based on this. In short, just create the best content you can, along with the most semantically proper HTML that you can, and your webpage will be found just fine in the search engines and your traffic should benefit from it.
