Post a Comment On: lo-fi

Ah HTML. The gateway to programming, or at least mine. After the time I've spent as a developer, the importance of understanding how to put together some solid HTML has not waned. So, I thought it would be a good idea to distill the fundamentals down to a concise reference.

What's great is that there's only about twenty tags that you'll need to do all the basic important things in order to structure data. This is how it's going to go. You'll need to know what HTML is supposed to do first. Basic, but important. Then, you'll need to learn a couple simple rules to help categorize the types of tags you'll need. Finally, we'll put it all together so you can learn about how specific tags work.

What is HTML for?Quite simply, HTML helps to describe your textual content. It stands for HyperText Markup Language. The markup part is what adds meaning to the content. Need an example? Let's say that I want to emphasize to a word in a sentence. To do that with plain text isn't possible without adding some extra information. When we speak, we can use inflection in our voice, but with a plain sentence, you can't do much. See the need? In order to do this, you can wrap content in HTML tags.

Here's a sentence that has some emphasis.
Here's a sentence that has <em>some</em> emphasis.

The "<em>... </em>" is an HTML tag that describes the text that it surrounds, emphasizing it.
Basics.Let's start with an example, based on the example above. Here is our HTML

<p>Here's a sentence that has <em>some</em> emphasis.<br />This one appears on a new line.</p>

Tags use angle brackets (less than, greater than characters) to distinguish themselves from the actual content. The example above starts with a <p> tag. The characters in between the angle brackets, in this case the "p" in the "<p>" indicates a tag with a specific purpose. The <p> indicates a paragraph, hence the "p".Tags have a start and a matching end. We call that "opening" and "closing." The main difference is that the closing tag has a forward slash, an opening tag does not. If a browser is reading the HTML you write from start to finish, when it reads "<p>" it says to itself "everything after this tag, until I reach the closing tag, is part of a paragraph". When it reaches the matching "</p>" it says to itself "I can stop rendering the paragraph now."

Can you spot another opening and closing tag in our example? I thought so. "<em>some</em>" formats the word "some" with the "emphasize" tag.Some tags can be empty, where there is no content in between an opening and closing tag. There, a single tag can open and close itself. The syntax places the forward slash at the tail end of the tag. Our example above has a "<br />" tag, indicating a line break. These kinds of tags are "self-closing" or simply "empty" tags because they do not wrap content.Tags must be symmetric. This one is easiest to show with an example. This is not symmetric.

<p>New paragraph <em>emphasized</p></em>

In this example, you can see that the <p> opens, then an <em> tag opens. The </p> then closes before the </em> closes. Don't do this! This is how it should look

<p>New paragraph <em>emphasized</em></p>Tags can be nested. That is, you can put tagged content inside other tags. In the example above, the <em> tag is nested in the <p> tag. This helps to build a hierarchy of structured content. Just remember to make sure that the the tags need to be symmetric.

It is also important to note that all tags have their own set of rules. Some tags can have only specific types of tags nested within. Depending on the tag, some tags might be forbidden.
There is a distinction between "block level" and "inline" tags. This is an important concept to understand which describes how the tag behaves on the page. You can think of a block level tag as behaving like a rectangular container. Inline tags wrap with the text that they contain.Tags can have attributes. These provide ways to configure the tag. An attribute of an HTML tag is simply a pair of a name and value. This is what a paragraph tag looks like with an "id".

<p id="Something">The ID is Something</p>
Twenty tags you'll find most useful.

Now that you know a few rules, it's time to get into some specifics. Here is a list of 20 tags that will help you to build your very own HTML page. The intention here is to briefly describe the rules for how these tags behave so you have enough freedom to build your own HTML content.

The first set of tags help to set up the entire document structure.

1. <html>... </html>

If you're building a complete HTML file, it must open and close with this one. This is the root tag that you'll need to use.

This only appears at the root of the file. That is to say, there are no HTML tags that can wrap this one, and it can contain ONLY <head> and <body> tags, in that order.

2. <head>... </head>

The head tag sits as the first element in the HTML page. The contents describes the file, but does not contain content. THis is where you add the title, add style, javascript, and meta information.

This Must be the first tag to appear within the <html> tag. It does not contain any actual page content.

3. <title>... </title>

The title tag is what's used to give the page a title. This is what appears in the top bar of the browser window.
This appears only within the <head> tag and only contains text, no other tags.

4. <body>... </body>

The body tag is where the actual content appears.

This appears after the <head>... </head> tag and contains any content-bearing tags

Here's an example, with the basics of what we've learned so far

<html>
<head>
<title>My First HTML</title>
</head>
<body>This is the page content</body>
</html>

Not too hard, eh? Everything else helps to describe the actual content that falls inside the <body> tag.

5. <h1>...</h1> through <h6>...</h6>

These are headings. These help to indicate the title of content that follows, like a headline for a newspaper article. Search engines have traditionally placed greater emphasis to text within these tags. This makes sense semantically, because if there is a heading on the page, this is likely to indicate something significant that appears within. These help to identify what the content on the page is about. <h1> identifies the most important heading and <h6> the least. You can have as many of these as you like on the page.

This is a block level element. You can put a lot of different elements within it, including inline elements, images, line breaks. Other block level elements should stay out.

6. <p>

The paragraph tag is the main tag to use for blocks of text content. Similar to the headings, you can put inline elements, images, and line breaks within.

7. <a>

Ahh the anchor tag. This is what the world wide web was built on. The anchor tag allows you to link to another web page or other url's. To make it work, just add an "href" attribute.

<a href="http://wwww.lo-fi.net">THis is a link</a>
The value of the href attribute is the place where the link should take you.This is an inline elementYou can put other inline elements inside the anchor tag.8. <img />The image tag let's you put an image on the page. This is another tag that requires an attribute to work. You need to use the "src" attribute to specify the address of the image. You can also use the "width" and "height" attributes if you need to control the size. If you specify only one of them, the unspecified dimension will scale proportionately. The value of the "height" and "width" attributes is measured in pixels

<img src="http://lo-fi.net/images/picture.jpg" width="100" height="200"/>

This is an inline element and an empty tag.

9. <br />

This is a line break. Quite simply, it places a break in t a line so the text following it appears on a new line.

Lists

Lists are a very important way to present text on a web page. With the nature of short attention spans abounding on the internet, there's nothing like a list to make content easy to digest. In addition, they help tremendously when you need to display information in a hierarchical way.

10. <ul>

This is an Unordered List, or as we typically know it, a bulleted list. This is a block level element in which List Items are placed. The only tag that you can legally put into a <ul> tag is a <li> tag. This is what a bulleted list might look like

<ul>
<li>Fruits</li>
<li>Vegetables</li>
<li>Proteins</li>
</ul>

This is what it looks like Fruits Vegetables ProteinsWhat's cool about lists is that they can be nested inside each other. A <ul> tag can rest within a <li> tag, which builds a hierarchy, like this.
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Lemons</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Broccoli</li>
<li>Beets</li>
</ul>
</li>
<li>Proteins
<ul>
<li>Beef</li>
<li>Salmon</li>
<li>Chicken</li>
</ul>
</li>
</ul>

This is what it looks like Fruits Apples Oranges Lemons Vegetables Carrots Broccoli Beets Proteins Beef Salmon Chicken11. <ol>The more organized sibling to the Unordered List, is the Ordered List. It works the same way as the unordered list does, but it appears on the page with numbers instead of bullets. You can nest these within each other as well. You can even mix an ordered list with an unordered list. Check this out.<ul>
<li>Top Fruits
<ol>
<li>Apples</li>
<li>Oranges</li>
<li>Lemons</li>
</ol>
</li>
<li>Top Vegetables
<ol>
<li>Carrots</li>
<li>Broccoli</li>
<li>Beets</li>
</ol>
</li>
<li>Top Proteins
<ol>
<li>Beef</li>
<li>Salmon</li>
<li>Chicken</li>
</ol>
</li>
</ul>

This is what it looks like Top Fruits Apples Oranges Lemons Top Vegetables Carrots Broccoli Beets Top Proteins Beef Salmon Chicken12. <li>The List Item is an HTML tag that belongs only in a <ul> or <ol> tag. Any place else is just wrong. The content of <li> tag is a little more flexible. They are block level elements, so you can put other block level elements in them -- headings, paragraphs, other lists, and such. You can of course put inline elements in these as well -- anchors, images, plain text, whatever.FormattingSometimes, you'll find it necessary and important to add some visual formatting to your text. Most of the time, it's best to use Cascading Style Sheets (CSS) to do that (which I don't cover at ALL here). However, it is still legal to add some text formatting with HTML tags. Here's 2 common ones

13. <strong> or <b>
Wrapping text in the Strong or Bold tag has the same default effect. This makes the text inside it bold. The main difference is that the <strong> tag is interpreted by screen readers (web browsers for the vision-impaired) in such a way as to raise a voice.These tags are inline elements, and should only contain other inline elements.

14. <em> <i>

The Emphasis and Italic tags also have the same default effect. These make the text inside italic. The <em> tag has the same analogous interpretation as the <strong> tag by screen readers. It adds some, eh, emphasis to the text.

These tags are inline elements as well, and should only contain other inline elements. Here's an example of something that is both bold and italic

<strong><i>Bold and Italic</i></strong>

Table

The table is one of the most powerful layout elements that HTML provides. This allows you to place content into a grid of columns and rows. To use a table, there are three main pieces involved. A tabular layout will consist of the table container, rows within that container, and cells within each row. The cells are the only thing in the table that can contain any actual content of the table.

15. <table>

The Table tag is the tag that starts the table. Alone, it doesn't do much. In fact, it is not valid to have <table> tag with nothing in it. It simply doesn't make sense to set this up without contents inside. There are only a couple of valid tags that can be direct children of a <table> tag, and they are all specific to a tabular layout.

16. <tr>

One of the main HTML tags that can be a child of a <table> tag is the Table Row. This too requires content to be valid. The content of a table row can only be one of two table cell tags. Those follow

17. <td>

The Table Data cell can only appear within a <tr> tag. However, the <td> tag can contain just about anything it wants to. Other tables, headings, images, plain text, paragraphs -- just about anything that doesn't have any limitations on what it's parent tag is can go in here. Here is a sample table with one row, and two columns:

<table>
<tr>
<td>One</td>
<td>Two</td>
</tr>
</table>

This is what it looks like with a border
One Two 18. <th>Another tag that can appear within the <tr> tag is the Table Heading tag. The <th> helps to declare what the heading of a table is. Typically, this tag will appear in the top row of a table to indicate the name of the column. However, there are no restrictions on which position they reside in a <tr>. Other than the semantic nuance, a <th> behaves the same way as the <td> tag does.<table>
<tr>
<th>Letters</th>
<th>Numbers</th>
</tr>
<tr>
<td>A</td>
<td>1</td>
</tr>
<tr>
<td>B</td>
<td>2</td>
</tr>
<tr>
<td>C</td>
<td>3</td>
</tr>
</table>

This is what it looks like with a border

Letters Numbers A 1 B 2 C 3 Document StructureOccasionally, it's nice to have a tag just to collect a group of content together, simply for the purpose of putting a boundary around it. For that purpose, and it is a common one, we have a couple tags to help.

19. <div>

The Division tag , frequently referred to simply as a "div", defines a section of the page. That's it. It does not have any significant impact on the display of it's contents other than acting as a block level type of container for it's contents.

The simplicity of a <div> provides a lot of flexibility in structuring the content of an HTML file. As you work on building HTML over time, you'll find yourself using this a lot. Especially when there are a lot of different blocks of content that you want to group together visually.

The contents of a <div> are very flexible. Any tag that doesn't have any restrictions on what it's parent tag can be are allowed here. Tables, other divs, inline elements, etc. The <div> tag is a block level element.

<div>
<h1>Here's a heading</h1>
<p>Here's a paragraph grouped with the heading</p>
</div>

20. <span>

The Span tag similarly wraps content for the sake of grouping content together. The main difference between the <div> tag and the <span> tag is that the span tag is an inline element. That means that it can only contain raw text or other inline elements.

Here's an example that shows nested span tags to group some words together.

<span>Here is some text <span>and this is a sub-group of text</span></span>

Bonus

What you see above represent what I consider the essentials to building an HTML document. Much of the other parts of HTML (and there are many) are more specialized. For example, we didn't touch form elements or some more advanced table features. However, what's above will give you what you need to get started.

There are a couple items that are worth noting, as a bonus.

21. <!DOCTYPE >

The first bonus is the Document Type declaration. This is a line that goes at the very top of the page to help the browser determine what how to read the rest of the HTML that you wrote. Believe it or not, there are a couple different flavors of HTML, and each has slightly different rules. The Document Type helps to tell the browser what rules your HTML adheres to. Using a document type is not a requirement, but it is a very good idea. People who write good HTML code use doctypes.

The doctype for HTML that uses the HTML5 rules is refreshingly simple:
<!DOCTYPE HTML>

The doctype for HTML that uses the XHTML Strict rules is a little more verbose. I don't know anyone who has it memorized:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

An HTML document with a proper HTML5 document type declaration would look like this
<!DOCTYPE HTML>
<html>
<head><title>HTML 5 page</title></head>
<body>This is an HTML 5 page</body>
</html>

22. <!-- Comments -->

Last but not least, the comment is something you should be aware of. The comment tag allows you to add comments to the code you're writing, which the browser will not show. They can be helpful in making notes to help you understand the HTML you write. This is what a comment inside a Paragraph would look like.

<p>I love to write HTML <!-- as long as someone is paying for it --></p>

In that example, the only thing that the end user would see is the "I love to write HTML". Everything inside the <!-- ... --> does not show. As you can see, it is a helpful way to communicate between people writing the code.

So that's it! You should be off to the races now. Be careful though. Once you get started with this, it's hard to stop. And once you get into using javascript to add interactive behavior, and CSS to control your visual style, it's nearly impossible.