HTML Basics

HTML stands for HyperText Markup Language. Most of you have probably heard of it before and it is the foundation to all websites. A HTML document is really just a text document however when a web browser reads the file with the .html extension it will recognize “tags” written inside and construct them as HTML “elements”. HTML is pretty basic and should be easy to understand once you spend 30 minutes with it, but lets start out with how the language defines itself before we begin writing a document.

Tags

A tag is created by first an opening caret (<), followed by the tag name, and ending with a closing caret (>). An example of a tag is <p>, the paragraph tag. Its purpose is to define the content within it to be a block of text within a larger body of text. To use it in context, check out this example:

<p>This is what a paragraphlooks like.</p>

Tags are case insensitive, meaning that it doesn’t matter if the letters are capitalized or not. The common practice among developers is using all lower case though and you should do that as well. Notice the </p> at the end? That is the closing tag. It encapsulates the text within it do define the paragraph element. A majority of tags require the closing tag, but an example of one that self closes is the line break tag:

<br />

The reason the line break tag can close itself is because it will never have content within it. The only function of a line break tag has is to force text to shift one line down. Therefore a closing tag would be redundant and was able to be left out. Once a tag has been properly closed is when it as whole become an “element”.

Elements

An element is the name for the tag and its content as a whole. It can contain optional attributes that define how the structure of the element renders. The simplest attributes are the height and width attributes. The starting tag of an element is the one that attributes can be assigned values to.

<p height="300" width="450">This is what a paragraph looks like.</p>

As you can see here, this will set the values of the height and width attributes of the paragraph element to be 300 pixels high and 450 pixels wide. If the text was long enough inside of the element, once it hits the barrier at 450 pixels the text will shift down to the next lowest line and continue. All elements that don’t self close can also contain other elements, as such:

<p height="300" width="450">This is what a paragraph <br/> looks like.</p>

This would force a line break after the word paragraph, and the text “looks like” would fall to the line below.

Choose the element for the situation

It is vital that you always be conscious of the tag you are using. A lot of tags, once styled with CSS, can act exactly like one another. When you define the content purposefully it keeps your code clean and most importantly semantic. Semantic is a term that might pop up every now and then, it is defined as having code that is meaningful. When code is semantic, any developer can look at it and understand the purpose of the element without having to view it in the browser first. It also helps when search engines crawl your site for content.

List of HTML Elements

I don’t have the time to go over each element, but here is a great list of them and their individual purpose: Click Me

The Document Structure

Creating an HTML document is as simple as opening up a text editor (not microsoft word, we will cover text editors next lesson) and save a file as “filename.html”. You cannot start throwing in tags right away though, there is a specific format that you must first follow before a browser will read the document correctly. Here we will progressively build the bare bones of a HTML document.

The Doctype

The doctype is a necessary element that tells the browser what version of HTML you want to use. This used to have a bunch of gobbledygook with numbers and such, but thankfully those days are behind us. There is now a standard doctype tag, and it will always use the latest version of HTML that the current browser uses. It is the first tag included in an HTML document, does not require a closing tag, and you can pretty much forget about it once it is in place. The tag looks like this:

<!DOCTYPE html>
The HTML Tag

The HTML tag contains all of the elements on the page. It requires a closing tag, and goes in right after the doctype.

<!DOCTYPE html>
<html>
</html>
The Head Tag

You will find that there are some curious names for things in programming languages. The head of a document is an example of this, which is meant to be the brains of the document. Within the head you define such things as the title of the page which displays in the tab bar of the browser, include CSS and Javascript files, and set metadata which helps search engines recognize your website.

<!DOCTYPE html>
<html>
  <head>
    <title>The Game Genome Project</title>
  </head>
</html>

Notice the indentation of the elements within the document. This is a very important practice to maintain as it is very hard to read a document otherwise. This is common practice among all programming languages, some of which require it to run properly. The rule of thumb is that all closing tags be the same indentation as their opening tags. If an element is within another element, it gets tabbed to the right once more than its parent element. Parent is another term that might come up a lot, along with its antonym Child. In the previous case, the <title> tag is a child element of both the <head> tag and the <html> tag. The <html> tag is a parent of both the <head> and <title> tags. The <head> tag however is a parent to the <title> tag but a child to the <html> tag. As you can see, it is just a relative term.

The Body Tag

The <body> tag is what contains all of the content for your page.

<!DOCTYPE html>
<html>
  <head>
    <title>The Game Genome Project</title>
  </head>
  <body>
    <p height="300" width="450">This is what a paragraph looks like</p>
  </body>
</html>

And that is what the most basic HTML document looks like! Take a look over the list of elements I provided and maybe find another tutorial out there if things aren’t too clear. Remember that as a web developer Google is your best friend, even the best programmers out there still need to reference tutorials daily. Next lesson we will go a little bit further and step by step create a more advanced HTML document.

TL;DR

  • Tags look like this: <p>
  • Each tag name represents a different type of content.
  • Some tags need to be closed around their content (<p>I am a paragraph</p>)
  • Some don’t, like the line break: <br />
  • When a tag is properly closed it and the content within it becomes an element
  • Elements can contain attributes to modify themselves  (<p height=”300″ width=”450″>I am a paragraph</p>)
  • You must be semantic with your HTML tags.
  • Here is a list of HTML tags.
  • An example of a basic HTML document structure is at the end of the lesson.
About these ads

One thought on “HTML Basics

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s