HTML

HTML is the core of most web sites. HTML stands for HyperText Markup Language. It serves two basic purposes

  1. To describe the properties if the HTML file (what version of HTML you’re using, other files or scripts like JavaScript and CSS, that are needed for the page).
  2. To describe what content is on the page (titles, paragraphs, lists, etc).

And that’s really about it. It doesn’t have to get much more complicated than that. Let’s take a closer look at the second word in HTML, Markup. Take a look at the image of a document below (click to enlarge):

Picture of a Word Document

Picture of a Word Document

Can you identify where the titles are? How about the paragraphs, the images, or the lists? I’m guessing most of you wouldn’t have much trouble going through the page and pointing them out. If you can o that you can write HTML. Writing HTML is really just the process of putting tags around content to tell the browser what it is.  Here is the document again with colored circles to indicate the different kinds of content (click to enlarge).

Document with content types circled

In HTML Instead of circling something you add tags around the content. So lets take the main title in the document above for example. In HTML we would write:

title element, h1

title element, h1

Pretty simple right? As we go on in the class it is important to know the proper terminology for what we’re working with. So let’s look at the difference between a tag and an element.

title element with annotations

title element with annotations

A tag is either the opening or closing tag with the <> around it (remember the closing tags get the / before the name), like so: <nameOfTag>content</nameOfTag>. The whole thing, including the content, is called an element.

Some elements don’t have a separate closing tag. For example the img element. The img element just tells you where to go find the image so it doesn’t have any content and doesn’t need a closing tag. For elements like this (other examples are br, hr, link) you just put the slash (/) before the > sign in the opening tag. See the example below:

Picture of img element markup

Picture of img element markup

Notice that none of the HTML we’ve talked about so far mentions anything about how the content should look. That is correct. It is the job of CSS to do that. HTML should be straightforward and just indicate what kind of content something is. HTML describes what things are, CSS describes how they look.

Here are the basic HTML elements (click to enlarge):

Basic HTML elements by category

Basic HTML elements by category

If you can remember what each of these elements is for then you will be able to mark up 90% of the content you will receive as a web developer. What follows is a description of them and when to use them.

Document Elements

These elements describe the document itself and the major areas of the document.

Doctype: there is more than one way to write HTML (HTML4, HTML5, XHTML…) and it’s important to tell the browser which flavor you are using. That is what the Doctype does. It is a single line at the top of the page.

Html: This element outlines the content of the page. Everything except for Doctype should  be inside of the HTML tags.

Head: The head is where you will find information about the document. There is the title tag which shows the title at the top of the page (not to be confused with the heading elements h1…h6, those show headings in the page). Meta tags describe the document in more detail, like which language it’s written in and what character sets to use. Style, script and link are used to include CSS, Javscript and more.

Body: All of the visible content goes inside of the body element. All of the paragraphs, titles, images, lists and more go inside of the body.

Every HTML document should have at least those four elements. Here is an image of a very basic HTML page (click to enlarge):

Basic parts of an HTML page

Basic parts of an HTML page

Block vs Inline

All of the elements for displaying content go inside of the body element. We will call these display elements. There are two basic level of display elements: Block level and Inline level elements. They are mainly different in how they are rendered by the browser. Block elements are rendered so that they stand by themselves as a block of content on the page.  If you were to write three block level elements next to each other in HTML they would still render as three separate blocks. For example <p>Number One</p><p>Number Two</p><p>Number Three</p> would look like

Number One

Number Two

Number Three

in the browser. One thing you can’t see in this example is that block level elements also stretch out as wide as the element they are inside of (which could be the body element or another block element like a div element).

Below is a diagram from the book Head First HTML with CSS & XHTML that show how Block and Inline elements differ in the way they are laid out on the page.

Block vs Inline diagram from the book "Head First HTML"

Block vs Inline diagram from the book

Here is a list of the most common block elements and what kind of content they should be used for:

Element Use
h1, h2, h3, h4, h5, h6 There are six heading elements and they should be used for the titles and subtitles on your page. Unless you change it with your CSS h1 is the biggest heading going down to h6.

<h1>This is my main title for the page</h1>

<h2>And this is a subtitle</h2>

p Use this for a normal paragraph of text. It’s probably the most used element.

<p>I’m just a regular old paragraph</p>

div This element is usually used to group other elements on the page. So if you have four elements that are going to make up the footer for your page then you would normally wrap them in a div element. We will use divs a lot in this class to mark out the various sections on our pages. When they’re used like this divs normally have an id or class associated with them to make styling the various sections with CSS easier.

<div id=”footer”>

<p>copyright 2010 by me</p>

<ul>

<li><a href=”terms.html”>Terms and Coditions</a></li>

<li><a href=”privacy.html”>Privacy Policy</a></li>

</ul>

</div>

ol, ul, li These are list elements ol is for orderd list (1,2,3 or a,b,c or i, ii, iii) and ul is for unordered list (bullet points, circles, squares etc). The li element is used for a list item in both types of lists:

<ol>

<li>item</li>

<li>item</li>

</ol>

<ul>

<li>item</li>

<li>item</li>

</ul>

blockquote This is for a quote that needs to stand on its own. It can be used for some text that needs to stand out on its own. The default way the browser will render a blockquote is by indenting it. Some people use this fact to put blockquotes around things that are not quotes and they just want indented. If you can avoid it you should not do that and instead put the proper tags around it, usually p tags, and then use CSS to change how it looks. Blockquotes should be for blockquotes.

One rule about blockquotes is that they must have another block level element inside of them.

<blockquote>

<p>

Emancipate yourself from mental slavery, none but ourselves can free our mind. <br />

Bob Marley</p>

</blockquote>

table, th, tr, td Tables should be used for tabular data where you have a number of pieces of data that are similar, like the table being used to display this information you are reading. Each row in the table is marked by a tr element. In side the row cells are marked with td elements. There are no column elements. There is a special th element for cells that you want to show differently (like possibly the first row in the table). Tables should not be used for layout purposes. Div and CSS are used to do the layout (in HTML5 and CSS3 layout will get easier).

<table>

<tr>

<th>heading 1</th>

<th>heading 2</th>

</tr>

<tr>

<td>data 1</td>

<td>data 2</td>

</tr>

</table>

form Form elements are used to, well, make forms. There are number of different elements you can use and this is covered in more detail in another section of the site.

Inline elements just take up as much space as their width and height and let the next inline element come next to them. If they can’t fit in the width of the page then they will just move to the next line. Don’t think too hard with inline elements. Just use the appropriate tag to mark up the content and then let them do their thing. It’s the block level elements that you have to wrangle with more to get the layout you want.

Here is a table of some of the most common inline elements.

Element Use
a The <a> or anchor element is used in two ways. To link to another page using the href attribute:

<a href=”http://www.google.com”>This is a link to google</a>

Or to link to somewhere else on the same page using two elements and  the name and href attributes. There are two parts.

First create an anchor somewhere on the page with the name attribute. This is the destination.

<a name=”contents”>Table of Contents</a>

Then create a link to this desitination

<a href=”#contents”>Go to table of contents</a>

When the user clicks the link the page will scroll to the destination. Notice the # in front of the name in the href attribute.

img The image element is used to add an image to the page. Most people don’t think of it as an inline element at first but it behaves just like any other inline element. If you put a bunch of small images together they will line up just like letters in a word.

It’s important to remember to add an alt attribute to your images as this is used by screen readers for those who can’t see the image.

Also notice that images don’t require a closing tag. If you’re writing XHTML then make sure that there is a slash before the end > sign like this />.

<img alt=”picture of a chicken” src=”chicken.jpg” />

span The span element is used when you need to add mark up to letters or a word but don’t have any other appropriate tag to use. The example below adds a span around the letters “red” in Redline to allow the designer to add styles to those (maybe making them the color red for example).

<h2>Introducing the new <span>Red</span>line train system</h2>

strong This is basically used when you want some text to be stronger than the rest. Most of the time this translates to bold but size, color and other characteristics could be used to make the marked up text stronger.

<p>This word is <strong>important</strong></p>

em The emphasis element is most commonly used when italics are needed but like strong a designer might choose to use something other than italics to emphasize the text.

<p>I <em>really</em> have to find a bathroom</p>

br This element adds a line break. It is different from a paragraph tag. The line break should be used within a paragraph when you need to kind of force a return and move to a new line within a paragraph.

<p>My Contact info is:
<br />Name: Chris
<br/>Phone:212.111.1111
<br/>Email:nospam@gmail.com</p>

One Trackback

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>