Anatomy of HTML/xHTML tags
This tutorial describes some of the main attributes that feature in HTML tags, including style, name, href, title, class, and ID properties.
New eBook - Guide to Semantic HTML
Ben Hunt adds another great eBook to the collection with his "Guide to Semantic HTML". The book gives you advice and tips on how, and why to use semantic HTML.
Included is a comprehensive list of HTML tags, each with their semantically appropriate uses, along with a worked example taking you through the process of how to build a website using semantic HTML.
New eBook - Web page production with xHTML and CSS #1
Experience the thought process of a professional web producer as he guides you through the web page production process, from photoshop design to working HTML template.
The book tells you how to approach web production, beginning with semantic HTML, guiding you through how to slice up a photoshop document, and finally how to use CSS for presentation.
Tags and Attributes
As we covered in Introduction to HTML, HTML tags are defined by angle brackets <tag>.
Sometimes they are stand-alone, like the Image tag <img> or Line-break <br>.
All HTML tags can include one or more attributes.
These give the browser more information about the tag.
Let’s jump in and look at some of the most common attributes for everyday HTML tags.
HTML Style Property
You can apply the style attribute to any visible tag.
It assigns CSS styles inline.
(This is not always a good idea, see: Introduction to CSS.)
Looks like:
Hello mum
HTML Name Property
The name attribute is used by more than one type of tag.
Form elements
Form elements should have a name attribute in order for server-side scripts to work out what was entered into each field.
e.g.
<form action="yourscript.php" method="get"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="submit" /> </form>
On-page anchors
The anchor (<a>) tag isn’t only for creating links.
You can also use them to create places on a page that you can jump to directly from a link.
e.g. You can create an on-page anchor with…
<a name="mainbody"></a>
Which you can then link to with…
<a href="#mainbody">Skip navigation</a>
Which brings us on to…
HTML Href Property
href stands for "hypertext reference", and simply means the target of a link.
e.g. A link to another site…
<a href="http://www.scratchmedia.co.uk/about-us.html">About us</a>
A link to an anchor on this page…
<a href="#product1">Product One</a>
Or a link to an anchor on a different page…
<a href="people.html#geoff">About Geoff</a>
HTML Title Property
The title attribute is different to the <title></title> tag (which goes in the page head and sets the title of your page).
The title attribute provides a bit of extra information for a visible element, like a link, image or button.
In most browsers, it causes a tooltip to appear when the mouse pointer hovers over the element.
e.g.
Looks like…
HTML Class Property
Almost any tag that you put in the HTML body can have one or more classnames.
The example div above has two classnames: "comment" and "code".
At the highest level, a tag’s classes provide additional description about what kind of element the tag is.
For example, the example above is described as a "comment" container and also as "code" container.
These definitions don’t really mean much on their own, but it’s good practice to make sure they make sense (i.e. semantically useful).
(For example, my code snippets get the "code" classname, instead of being called class="greybox" or class="typewriterstyle")
What you can do with Class
You mainly use an element’s classname(s) to assign styles through Cascading Style Sheets, but it’s also possible to read them and do stuff in DHTML.
Example of applying styles in CSS using elements’ class.
The classname is prefixed with a dot/period to specify that it applies to elements with class="comment".
<style type="text/css">
.comment {
border:1px solid white;
background-color:#f6f6ff;
padding:1em;
margin:.5em;
border-left:6px solid #eee;
}
</style>
HTML ID Property
Anything can have an ID attribute.
An element’s ID is its unique identifier.
Note: There should only be one element on each page with a particular ID attribute.
What you can do with ID
Like class, id is frequently used to assign properties through CSS.
Here, note how the id is prefixed with a hash/pound sign, to show that it applies to elements with id="nav".
#nav {
height:76px;
float:right;
display:block;
text-indent:-3000px;
}
(CSS styles assigned to an element’s ID override any of the same style properties assigned through class.)
The ID attribute is particularly useful in DHTML.
It’s very often used to identify a particular element in JavaScript.
e.g. This code finds an element with the ID "nav", and hides it.
<script type="text/javascript">
<!--
if (document.getElementById('nav')) {
document.getElementById('nav').style.display = 'none' ;
}
// -->
</script>
Leave a comment
