05/25, 2007
HTML/XHTML: Common Tags and What They Do
You have built your first web page and are now itching to improve it. Get used to this feeling, it never goes away!
This article will address some of the most commonly used HTML/XHTML tags. I will explain what each of these tags do and give an example of each of them in action. Keep in mind that many of these tags have attributes that can alter how they work. Pretty much all tags can be “styled” in CSS. In other words, you can tell each tag how to behave. This article will not address tag attributes or CSS. Let’s keep it simple for now.
Ready? Let’s begin:
<p></p>
These are your paragraph tags. Wrap these around your text and you have a paragraph. They add space above and below the text.
Text with no paragraph tags:
Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution. Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems. Fundamentally transforming well designed actionable information whose semantic content is virtually null.
Adding paragraph tags:
<p>Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution.</p>
<p>Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems.</p>
<p>Fundamentally transforming well designed actionable information whose semantic content is virtually null.</p>
Display:
Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution.
Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems.
Fundamentally transforming well designed actionable information whose semantic content is virtually null.
<br />
The “break” tag. This tag adds a single line break. Say you want to start some text directly under some other text and you do not want extra space between the two lines. This is the tag you will use. Notice the space and forward slash right after the “br”? That is the XHTML version of the tag. In XHTML, all open tags must be closed at some point. But there are some tags were never intended to surround, or format, text. These tags do not have a closing tag. So adding a space and forward slash at the end of these tags makes them XHTML compliant.
Song lyrics with no line breaks:
I’m going down to alphabet street. I’m gonna crown the first girl that I meet. I’m gonna talk so sexy she’ll want me from my head to my feet. Yeah yeah yeah.
Adding break tags:
I’m going down <br />to alphabet street. <br />I’m gonna crown <br />the first girl that I meet. <br />I’m gonna talk so sexy <br />she’ll want me from my head to my feet. <br />Yeah yeah yeah.
Display:
I’m going down
to alphabet street.
I’m gonna crown
the first girl that I meet.
I’m gonna talk so sexy
she’ll want me from my head to my feet.
Yeah yeah yeah.
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>
These are heading tags. In short, these tags give importance to a line of text by making it bigger and darker, and by also adding space around it. Think of them as headline tags. Like in a newspaper or magazine, these tags can be used draw attention to an article or section of the article. <h1> is the biggest and <h5> is the smallest.
Article with no heading tags:
A Very Important Article
Most of the time people do not read everything on a page. They will quickly scan the page for something of interest. Did this article grab your attention?
Cancer cure discovered
If you were to give a quick glance at this article would you even have seen this section that says there is a cure for cancer?
Adding heading tags:
<h1>A Very Important Article</h1>
Most of the time people do not read everything on a page. They will quickly scan the page for something of interest. Did this article grab your attention?
<h2>Cancer cure discovered</h2>
If you were to give a quick glance at this article would you even have seen this section that says there is a cure for cancer?
Display:
A Very Important Article
Most of the time people do not read everything on a page. They will quickly scan the page for something of interest. Did this article grab your attention?
Cancer cure discovered
If you were to give a quick glance at this article would you even have seen this section that says there is a cure for cancer?
A couple of things to note about the heading tags:
- They are very much like paragraph tags (they add space above and below) but are intended for a short line of text. So there is no need to wrap heading tags around a line of text that is already wrapped by paragraph tags. It will come out looking like 3 paragraphs.
- H1’s should only be used once per page and preferrably at the top of your content, just like a headline.
- Heading tags are highly cutomizable in CSS.
<b></b>/<strong></strong> and <i></i>/<em></em>
Ok, these tags are used to bold or italicize text. There really is no difference between <b></b> and <strong></strong>, which will bold your text, or between <i></i> and <em></em>, which will italicize your text. Due to accessibility concerns and web standards, <i></i>/<em></em> tend to be the preferred method. For this reason it is probably a good idea to get used to using <i></i>/<em></em>.
Text with no formatting:
Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution.
Adding formatting tags:
Perhaps a <strong>re-engineering</strong> of your <strong>current world view</strong> will re-energize your online nomenclature to <em>enable a new holistic interactive enterprise internet communication solution.</em>
Display:
Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution.
There you have it. You have now learned how to use some of the most used tags in HTML/XHTML. You are now well on your way to creating web pages that are clean, attractive, and easy to read. Keep an eye out for more tutorials. I will show you how to add color and images to your page(s). I will also go over how to link to other web site pages.
Thanks for taking the time to learn HTML/XHTML. Hopefully this article was helpful. Happy coding!
Web designer from Houston, TX who intends to make the world a better place... one post at a time.
February 3rd, 2008 at 5:22 pm
I read your blog in a regular manner and just love it
hope there will be more postings from you, keep on going
greetz, carmella