Tags describe the meaning of the text they contain, some of them are <html>, <head>, <body>, <p>, <title> and more. To tell the browser that something is a tag, simply place the less than (<) and greater than (>) symbol around them. Those symbols are also called angle brackets. Therefore, if you will enclose the word head in between the opening angle bracket “<” and closing angle bracket “>”, you are telling the browser that the word head is a tag.
Tags follow a common structure; we have the start tag just like <i> as an example and a corresponding closing tag which is </i>. Together, a start tag and an end tag with the content in between them form an HTML element. A start tag opens an element and an end tag closes it.
As an example, to make text italic, you use the i element. So, at the point in your text that you want the italic to start, you just place the angle-brackets around i, <i>, and when you want it to stop, you put </i>. An end tag is simply the start tag with a forward slash in front of the element name. In XHTML version, all tags should be properly closed, even if some tags do not require you to place an end tag, it is a good practice to close or end all your tags.
HTML Document Sample
Remember the HTML file below? That file is the one that you have saved in the previous lesson which was named myweb.html. The tags below, those texts enclosed with <>, are the basic tags required in structuring your webpage. Let’s discuss the meaning and function of those tags required in structuring your webpage.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> </head> <body> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
The first part of the HTML file that you see above declares the doctype and it is not something you need to worry about just yet. It just tells your browser which version of HTML you are using in your page. We are going to use HTML 4.01 Transitional, that is, the webpage contains all HTML elements and attributes, including presentational and deprecated elements. In the future, you may use a newer version, but HTML 4.01 Transitional will just be perfect for most of your webpages.
- <html> It is the opening HTML tag. It tells the browser that what follows is an HTML document.
- </html> It is a closing HTML tag, every tag with a “/” after the opening bracket is a closing tag. It tells the browser that the HTML file has ended.
- <head>, </head> They are the opening and closing head tags, respectively. The head tags give information to the person visiting your webpage, the informations needed by the Search Engines are also placed between these tags.
- <title>, </title> These tags are placed between the <head> and </head> tags. The information you provided here will appear on the Title Bar of the browser. This text will also be used if a visitor bookmarks your page and in search engine listings, so take the time to give a good title for each page.
- <body>, </body> The content in between these tags will be displayed on the browser screen. It contains the actual contents of the document.
HTML Element Syntax
We have opening tags, such as <html>, and closing tags, such as </html>. Many elements consist of an opening tag and closing tag. Those elements with opening and closing tags are called container element because anything contained between these tags are affected by the given tags.
An HTML element starts with a start tag or opening tag and ends with an end tag or closing tag. The element content is everything between the start and the end tag. Selected HTML elements have empty content, hence they are called empty element, and they are closed in the start tag, like <br /> or <hr />. Most HTML elements can have attributes to further define the given tag.
You cannot place the closing tags just anywhere. Use the Last In = First Out (LIFO) principle in closing a tag. It means that the Last tag In must be the First tag Out. Trsonext statement is an example of a correct sequence of tags.
<tag1><tag2></tag2></tag1>
<tag1> is the first tag activated and then <tag2>. Therefore using the rule, <tag2> must be terminated first with </tag2> followed by the termination of <tag1> with </tag1>.
HTML Attributes
Attributes are used to provide additional information about an element. When a web browser interprets a tag, it will also search for set attributes and then display the element, tags + attributes, in its entireness. At a certain point you may want to give your body element a background color or maybe change the alignment of the paragraph. All of these effects and other more can be done using attributes.
Attributes such as “width” are always indicated in the start tag. They have two parts: the name of the attribute and value of the attribute, that is, name=”value”. Attribute values should always be enclosed in quotes. It is common to encounter double quotes, but single quotes are also permitted. Attribute names and attribute values are not case sensitive, therefore: name=”value” is the same with NAME=”VALUE”. Though, the World Wide Web Consortium (W3C) recommends lowercase attribute values in HTML 4 recommendation, and XHTML version requires lowercase attributes.
TIP: One of the rules in XHTML is that, all elements must be properly closed. Adding a slash inside the start tag, like <br />, is the proper way of closing an empty elements.
TIP: HTML tags are not case sensitive: <HTML> means the same as <html>. Several websites use uppercase HTML tags. However, it is recommended to use lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and requires lowercase tags in XHTML.
TIP: In certain situations, when the attribute value itself contains quotes, it is needed to use single quotes like: name=’Rosita “Ganda” Mistica’.
7 comments:
Great! I didn't notice this before. I've just started learning HTML.
i learned my first html through a femalenetwork/girl talk webpage that i saved from my floppy. when i got home i popped the floppy disk onto my computer and while reading it, i started getting curious and finally found out what it consisted of, and thank you to google i was able to learn the basics :)
Need to review basic HTML...problem with not using it too often, I forget. :-)
This a great post. I am learning to design my own blog and this will surely help me.
Mommy Maye (http://momayes.blogspot.com/)
I have been saving several links discussing about basic html learning but I haven't started giving much time and focus on it. But I really wanted to learn. :) I need something to light my fire.
http://etc.soundsfunny.ws
Thanks for this info, It's helpful
This one is really helpful :)) I love this post hehehe :))
Post a Comment