HTML Markup: Elements, Attributes and Values

This is just the continuation of my previous post about Basic HTML. You need this concept especially for the beginners and some of you do not know this yet. This is not for insulting your intelligence but I just want to be detailed on my topic especially on this blog tutorial of HTML. I will start a three new topics on this one post: The HTML Elements, Attributes and Values. These are what we called the three principal types of (X)HTML.

Let's start to differentiate the three topics:

HTML Elements

HTML Elements is the one that structured the different parts of the Web page. This is the header, the paragraph which contains the important informations. Some elements can have one or more attributes which further describe the purpose and the content of the elements.

HTML Elements can contain text or other HTML elements, or they can be also empty. This is simply like a formula. A non-empty elements consists of: opening tag(the element's name with corresponding attributes, if any) enclosed in less than or greater than signs, the content and a closing tag( with a forward slash followed by the elements name, again enclosed with greater than and less than signs). Are you confused? Let's just take an example below:

Example of non-empty HTML Element: The <b>Great Filipino</b>

This is the breakdown of this typical (X)HTML Elements:

• <  > is called the opening tag or the angle brackets.
• Great Filipino is the content or the affected text.
• </> is the closing tag with a forward slash (/).

In other words, HTML Elements is everything within the start tag and a closing tag. There are also have an empty HTML element, which is only a combination of an opening and closing tag. The Elements name was followed by an attributes, a space, forward slash, and a final greater than sign. Let's take a look at the example below:

Example of empty HTML Element: <img src="flower.jpg" />

Noticed the sample above for the empty HTML element. Compared to the first example, it doesn't have any content or text around except that it was only consists of a single tag which serves to open and close the elements. Always remember this: a forward slash shown above is optional in the HTML but in (X)HTML is it required. I will make a post reminder about deciding what to use  about HTML or an (X)HTML before I begin my post on basic web structure.

HTML Attributes and Values

HTML Attributes contains or provides additional information about an element. Take note that attribute values in XHTML must be always enclosed in the quotation mark. In HTML, it is sometimes optional. Let's take another example below about of what I've mentioned above.

Example of HTML Attributes /Values: <img src="flower.jpg" width="50" />

Let's breakdown the HTML elements above:

• src is an attribute of img.
• "flower.jpg" is the value of src.
• width is also an attribute of img.
• "50" is the value for width.

In working with HTML attributes, you will encounter may have any value at all while some are limited or have its predefined values. In this tutorial, I will provide a page for your reference about acceptable values mentioned. But this will come soon. In XHTML, predefined values are always written in lowercase while in HTML, it doesn't matter.

Some HTML attributes are defined with number or percentage for their values in describing sizes, length or width. Some only defined in numeric value (without units). Others have units which are always defined in "pixels". Some HTML attributes contains a value in the form of URL or the Uniform Resource Locator. Let's take a simple example below.

Example of HTML Attributes with URL value: <a href="http://guideforhtml.blogspot.com">HTML for Beginners</a>

Take note that href is an attribute with http://guideforhtml.blogspot.com as the value of href. We'll get into details about link when we begin to discuss the details about HTML tags.

Pardon that we have a lot of topics first to be considered before going into making HTML webpages. Though we already started on how to make your initial web page in HTML Getting Started , it is important to understand every concept first to avoid lot of confusions later. Always stay tune her at:

HTML for Beginners....