Tags in HTML
Tags
Tags is the way HTML knows that here comes a command/instruction, i.e. something that has to be done, or perhaps stopped. There is two types of tags, a start tag and an end tag, and for the most part, there has to be an end tag to the start tags and vice versa. One of the classic mistakes is to forget end tags, and strange things happens to your site.
The start tag is the two characters less than and greater than, and between these is the tag's function. A table is thus called <TABLE>, a paragraph is called <P> etc.
The end tag is the same as the start tag, except with a slash at the less than character. Table end is thus </TABLE>, a paragraph end is written </P> etc.
A piece of text in bold will look like this as code:
On the page, when shown, it looks like this:
For HTML, the browsers don't care if the tags are written in uppercase og lowercase. For types of programming however, e.g. XML, the case is important. It is a good habit, which will save a lot of frustrations later on in the programming, to make a habit of being consistent in the use of uppercase and lowercase. From experience, the codes are easier to spot on a page if they are uppercase, which is why they are written like that on this site, but in the end, it is a matter of personal preferences.
Tags can be styled, e.g. making it possible to tell which font type or color to use on a text section, or how wide you want the table. This is called the tag's attributes, and they are always put on the start tag. Different tags have different options for styling, i.e. different attributes for different tags. Obviously there will a lot of recurring attributes for the various tags, so there aren't as many variable to keep track of as could be expected. All tags have default values, i.e. values being used if noting else is specified in the attributes. Therefore, a tag will always work, as soon as it is written, sometimes it just has to be adjusted a little to work the right way on the page.
The start tag is the two characters less than and greater than, and between these is the tag's function. A table is thus called <TABLE>, a paragraph is called <P> etc.
The end tag is the same as the start tag, except with a slash at the less than character. Table end is thus </TABLE>, a paragraph end is written </P> etc.
A piece of text in bold will look like this as code:
Here the text is normal, <B>here the text becomes bold,</B> and here the text returns to normal.
On the page, when shown, it looks like this:
Here the text is normal, here the text becomes bold, and here the text returns to normal.
Note
Because the two characters "greater than" and "less than" signifies code, the use of these in the text give some problems running the code the right way. It is not a common problem, but it happens. What you do here, is writing the character's HTML code, which is < for < and > for >. Then the browser knows that it is just supposed to write the character and not treat it as a piece of code.
Because the two characters "greater than" and "less than" signifies code, the use of these in the text give some problems running the code the right way. It is not a common problem, but it happens. What you do here, is writing the character's HTML code, which is < for < and > for >. Then the browser knows that it is just supposed to write the character and not treat it as a piece of code.
For HTML, the browsers don't care if the tags are written in uppercase og lowercase. For types of programming however, e.g. XML, the case is important. It is a good habit, which will save a lot of frustrations later on in the programming, to make a habit of being consistent in the use of uppercase and lowercase. From experience, the codes are easier to spot on a page if they are uppercase, which is why they are written like that on this site, but in the end, it is a matter of personal preferences.
Tags can be styled, e.g. making it possible to tell which font type or color to use on a text section, or how wide you want the table. This is called the tag's attributes, and they are always put on the start tag. Different tags have different options for styling, i.e. different attributes for different tags. Obviously there will a lot of recurring attributes for the various tags, so there aren't as many variable to keep track of as could be expected. All tags have default values, i.e. values being used if noting else is specified in the attributes. Therefore, a tag will always work, as soon as it is written, sometimes it just has to be adjusted a little to work the right way on the page.
Note
Be aware that different browsers have different default values on tags. Not just between different browser types, e.g. Internet Explorer and Firefox, it also applies for different versions of the same browser, e.g. Internet Explorer version 7 and 8. A good rule of thumb is to test the pages in several browsers. If there is a difference, the default values is a good place to start looking for the cause. The solution, if this is the case, is to specify a value, leaving no room for interpretation.
Be aware that different browsers have different default values on tags. Not just between different browser types, e.g. Internet Explorer and Firefox, it also applies for different versions of the same browser, e.g. Internet Explorer version 7 and 8. A good rule of thumb is to test the pages in several browsers. If there is a difference, the default values is a good place to start looking for the cause. The solution, if this is the case, is to specify a value, leaving no room for interpretation.
Attributes, how to get something other than standard settings on your tags
With the tags, there is attributes. Attributes are the settings for the tag, e.g. color or size, or if something is going to happen when you click the tag. There is three types of attributes for a tag: Optional attributes, standard attributes and event attributes.
Optional attributes, are basically a leftover from the early days of HTML. These attributes will often not work, when using strict HTML or HTML 5, and the effect can usually be done using STYLE, which is a standard attribute, in stead.
Standard attributes are, as the name indicates, an attribute that all tags have. Be aware that having an attribute is not the same as the attribute working. For instance, you can give a line break (the tag <BR>) a color, but since line breaks have no actual size, you can't see it.
Event attributes are attributes reacting on events. This is events like clicking on a picture, or text changing color when the cursor is over it. The two other types of attributes are easy to start working with, but event attributes requires a bit of familiarity with HTML, before attempting those.
When going through the various tags, there will be a list of usable attributes.
Optional attributes, are basically a leftover from the early days of HTML. These attributes will often not work, when using strict HTML or HTML 5, and the effect can usually be done using STYLE, which is a standard attribute, in stead.
Standard attributes are, as the name indicates, an attribute that all tags have. Be aware that having an attribute is not the same as the attribute working. For instance, you can give a line break (the tag <BR>) a color, but since line breaks have no actual size, you can't see it.
Event attributes are attributes reacting on events. This is events like clicking on a picture, or text changing color when the cursor is over it. The two other types of attributes are easy to start working with, but event attributes requires a bit of familiarity with HTML, before attempting those.
When going through the various tags, there will be a list of usable attributes.