HTML has a fairly straight forward syntax, a typical document will have information like paragraphs, headings and a title. HTML is used to denote what each section of a document is supposed to be used for. To do this we use "Tags". There are rules to how the tags are written and used, when we are talking about the way the tags are written we are talking about syntax. So we won't worry to much about what each tag does, we'll just concentrate on how each tag is written.
For our first example we will use a common tag, which is the anchor tag. The anchor tag is used in the following way:
<a href="place uri here">Hyperlink text here</a>
As you may have guessed form the example this produces a hyperlink that you would see on a webpage. There is alot going on here that we have to discuss though. The tag portions of the anchor tag are between the two angle brackets namely '<a href="place uri here">' and '</a>'. Angle brackets in HTML denote tags, in this case it was an anchor tag. Most tags have two parts the opening tag (<a href="place uri here">) and a closing tag (</a>). The rule is that the closing tag is always in the form of a forward slash and the tag name, nothing else can ever be put in the closing tag. The anchor tag is known as a full tag, meaning that it has a start tag and and end tag, in this next example we will see what is known as a single tag.
<img src="uri to picture" title="description of image" alt="alternate description for text browsers">
The above example has created an "image" tag, this will display a picture from the location that you specify. The "src" attribute is used to identify the source of the picture as a URI. The "title" attribute is normally displayed when the user hovers the mouse over the image. The title attribute should be a short description of the image. The "alt" attribute is used to display a description of the image if the browser does not support loading images. This should be different then the "title" tag as users will not be able to see the image if the alternate description is used. The image tag has no end tag, because of this it is known as a single tag. It is very important to note that single tags are denoted by having only a start tag and no end tag. Because of this it can be a little difficult for new programmers to read valid HTML, especially if they are used to using XML. Knowing which tags are full tags and which tags are single tags is something that you learn while using the languages, I do not recommend finding a list and memorizing because that is just boring. Many browsers will work whether you use the tags properly or not, so learning them can be done over time with no real rush.
The Attributes of HTML
In HTML attributes are used to give us more information about the contents of a tag. In the case of the above example the href attribute is a web address that can be easily navigated to if the user so wishes. There are many attributes for each tag and most are shared between tags, so we don't have to memorize a completely different set of attributes for each tag. The following is an example of how to put a link on a web page to this site.
<a href="http://www.howtoprogram.info/">How to Program</a>
So using tags and their attributes are actually very easy but there are alot of attributes. Some of the most common attributes are: id, name, class and href.
Block and Inline Tags
In HTML each and every tag falls into one of two groups "Block Tags" and "Inline Tags", each group has there own rules. Block tags can only be nested within other block tags, but can contain any type of tag themselves. Inline tags can be nested within any other tag, but can only contain other inline tags. The two tags that we looked at already (anchor and image) were both inline tags, this means that we could put an anchor tag around an image to have a picture that will act like a hyperlink. Nesting rules are a very important part of HTML and should be adhered to at all times.
This work is licensed under a Creative Commons License.
Privacy Policy