HTML Basics

This is about HTML basics. If you are brand new to HTML please see the HTML tutorial for beginners. This article covers:

• HTML tags
• HTML elements
• HTML attributes

HTML Tags

• HTML tags tell the browser how to create the web page. They come in pairs.
• Each tag tells your browser something different.
• This is the starting paragraph tag: <p>. It tells your browser "a new paragraph is starting."
• This is the ending paragraph tag: </p>. It tells your browser "that's the end of the paragraph".
• Everything between <p> and </p> is one paragraph. This is an example of how a paragraph looks in your HTML:

<p>Nothing in this world can take the place of persistence. Talent will not; nothing is more common than unsuccessful people with talent. Genius will not; unrewarded genius is almost a proverb. Education will not; the world is full of educated derelicts. Persistence and determination alone are omnipotent. The slogan "press on" has solved and always will solve the problems of the human race.</p>

By the way… the above paragraph is one of my favorite quotes from Calvin Coolidge.

HTML Elements

It's good to learn exactly what an HTML element is right in the beginning. It's another one of your HTML basics. You will be hearing and reading about elements when you are learning HTML, CSS, or JavaScript (and other things).

Most HTML elements have these four parts:

• A starting tag
  Example: <p>
• An ending tag
  Example: </p>
• The content between the starting and ending tags
  Example: "Once upon a time a girl with… etc."
• Attributes (more about attributes in the next section)
  Example: style="background-color:yellow"

Here's an example of an HTML element:

<p style="background-color:yellow">Once upon a time a girl with beautiful long golden hair… etc.</p>

By the way… there are a few elements that only have one tag. For example:

The <br /> element causes the browser to skip to the next line. It's the "line break" tag. There are no contents or ending tag for these types of elements.

HTML Attributes

A HTML element can have attributes. An attribute gives more information about the contents of an element to the browser. Think of an attribute as quality or characteristic of the element. The attribute of an element is located in the starting tag. Do you see the attribute in this starting <p> tag?

<p style="background-color:yellow">Nothing in this world can take the place of persistence. Talent will not; nothing is more common than unsuccessful people with talent. Genius will not; unrewarded genius is almost a proverb. Education will not; the world is full of educated derelicts. Persistence and determination alone are omnipotent. The slogan "press on" has solved and always will solve the problems of the human race.</p>

This is the attribute in the above paragraph: style="background-color:yellow". It's the style attribute. This particular style attribute tells the browser to make the background color of that paragraph yellow.

If you know your HTML basics it will be much easier for you to learn what you need to know in order to build your website. If you are going to be creating websites for a while (there's a good chance you will be) tags, elements and attributes are things you want to be clear on. See this link for more HTML basics.