HTML Tag Anatomy - Learn to Write HTML Code
On this page you will learn a handful of basic concept related to HTML tags. We will even touch upon some basic CSS (Cascading Style Sheets) techniques, but won't go in depth into them just yet. Stand-alone CSS tutorials on this site are made for that.
But the reason I have to briefly talk about CSS when explaining the anatomy of HTML tags has a lot to do with tag attributes. Specifically the attributes called style and class.
In the previous HTML tutorials we learned about the basic tags such as P for paragraph and B for creating bold text. But HTML tags themselves can include additional properties that can further enhance the appearance of HTML elements without having to nest multiple tags in order to achieve a particular effect.
An HTML tag creates a specific element on the screen when viewed in a browser. This element can have multiple properties, aside from its mere tag name definition. These properties are specified inside the opening tag brackets.
These additional parameters are specified by using tag attributes.
The advantages of using STYLE attribute over nested tags
One of the most common HTML tag attributes is the style attribute. The style tag can be added to many HTML tags to specify additional CSS properties of that tag. The style attribute is often thought of as inline CSS style definition of the tag it is attached to. Let's take a look at the following example:
<P style = "color:red;">This text will appear in red</p>The style attribute actually stands for CSS (cascading style sheet) style. And this example demonstrates how to use CSS to color a line of text red.
We are a long way from learning CSS syntax (such as color:red seen in this example) but it is important to understand this behavior even at this point because in general we should avoid using deprecated rules of using tags. I will explain what this means below.
A deprecated rule simply means it is an old way of doing things that is no longer relevant in modern web design practice when writing HTML code. There are all kinds of reasons for this that will eventually become much clear to you. Consider the following example.
<P><B>Bold text</B></P></code>The above is an example of how not to use tags. There are specific reasons for this. Instead, use the style attribute to define inline CSS to make the entire line of text in the paragraph appear bold.
The nesting of B tag inside the P tag may appear to be a more elegant solution t the untrained eye ☺ However, even though it looks simpler and less complicated, using inline CSS as seen in the example below is the proper way to make the paragraph text bold.
<P style = "font-weight: bold">Bold text</p>Why this seemingly (at first) ugly way is the preferred method over nested tags?
In large part, using inline CSS over nested tags has more advantages because of the logical progression of using CSS. The above CSS example demonstrates inline style definition that is typed directly inside of the tag into the style attribute.
Eventually, a web developer or designer comes to the same conclusion. Using external style sheets is more efficient that using nested tags, even though nested tags seem more elegant at first.
You will understand the actual reason for this in the following section where I talk about using the class attribute inside tags, which is used with external CSS definitions.
We are done discussing the style attribute for now. It doesn't mean that there isn't more to it, it's just not within the scope of subjects of this tutorial. Other CSS tutorials located on this site can sharpen your CSS wits in minutes ☺
In the same way as the style attribute, the class attribute is very similar because it pretty much accomplishes exactly the same thing, but in a slight different way. The class attribute is discussed below.
The CLASS attribute
The class attribute is very similar to the style attribute discussed above. The main difference is that the class attribute specifies only a name, instead of the actual style definition.
The class name is simply a name. Let's take a look at this minimalist usage example:
<P class = "RedText">This text will appear red.</P>RedText is the name of a previously defined CSS style. This style can be defined either internally; within the same HTML file, or externally; within a separate file (and later linked up from the HTML file in which the code above will appear).
To define RedText, which can be any name really, for example MyRedText, thistextisred, or whatever you want, we would write the following code:
<head>
<style type = "text/css">
.RedText
{
color: red;
}
</style>
</head>Right now, I am explaining why using the style and eventually the class attribute is a better alternative to nested tags. The CSS code above may seem complicated to you, but I have to go into this level of detail.
If you are not familiar with the syntax above, I don’t encourage you to learn it right this moment. There are other articles you can find on this site that go in depth about using CSS styles and its syntax, when you are ready. But without these examples it would be difficult to explain the purpose of the class attribute in HTML.
In order for the HTML file to "know" that this style is defined. The code above would be placed inside the HTML file that will use the RedText class using the class attribute inside a tag.
But the definition above is still internal. In other words, it is defined inside the file it is being used in. In order to take full advantage of CSS and the class attribute, we must place that CSS definition outside of the HTML file, like this:
.RedText
{
color: red;
}Notice that above is simply a different way to format exactly the same definition as:
.RedText { color: red; }It is up to the web designer to figure out which formatting works best for him or her. However, the first formatting method, the one that uses more spaces, is usually preferred by many web programmers because more than often there will be more than just one style defined between the brackets. For simplicity's sake we are only using color: red definition, but others can be added separated by the semicolon (;) and additional (optional) spacing and line breaks.
Enter the above CSS code into a blank document and save the file as style.css, or any other filename. Remember that CSS code must be saved with the extension of ".css" to let the browser know it's a CSS file.
Notice that when saving a separate CSS file, we no longer need to use neither HEAD nor STYLE tags to enclose this CSS in. We only need these two tags when defining CSS styles internally in the same file we want to use it. But defining CSS in an external file allows us to write "raw" CSS without any HTML.
External CSS files are cached (make your site faster & reduce bandwidth!)
Moreover, defining CSS outside of the HTML file allows the browser to cache the CSS file. Caching the CSS file will store it on the visitor's computer. This means that the browser does not have to download it every time the page is viewed. Effectively, this will reduce the amount of bandwidth your website will use. In the long run, even small amounts such as 256 bit can add up into megabytes.
Yet, another advantage of using external CSS style sheets is to keep your HTML code and page style separate. By doing this you can worry about constructing your entire site inside, say, index.html file, and keep your CSS style sheet separate inside style.css file. Whenever you want to change colors or fonts of the entire website, simply go to your external CSS file and tweak styles there. Without having to touch your website's HTML file at all, you will effectively change its appearance. This is an important reason for using external CSS files.
The difference between internal and inline CSS
Both, internal and inline CSS are defined within the HTML file they are being used in.
The difference is that internal style sheets are specified between STYLE tags within the HEAD tag and are later referred to from within the CLASS or ID attribute of an element.
Inline CSS code is specified directly inside the tag using STYLE attribute.
It is possible to define internal style sheets outside of HEAD tags, within the BODY tag of your webpage’s content, and due to the forgiving rules of HTML, it will still work when viewed in the browser. However, it is advised that your HTML code be organized. Specifying CSS styles within the BODY of your web page using STYLE tag (I’m not talking about the STYLE attribute, which is different) is a good recipe for forgetting where it was first declared.
Stick to specifying all of your CSS code within the header tag, or externally in a separate file. This way you will always know where to go to change your style. If absolutely needed, use inline CSS commands within the STYLE attribute of a particular HTML element. In most scenarios, it is not absolutely needed to do this.
Is there any reason to use internal or inline CSS files at all?
Yes, in some cases, especially when dealing with complex programs, and when there isn't a way (or an easy way) to avoid using internal / inline in some parts of dynamically generated code or scripts. But we're a long way from there! This is a tutorial of CSS basics.
This website contains large amounts of information about HTML. So, you can always find information about advanced CSS subjects later by using the search box in the upper right corner of the screen. For now, let’s continue with learning CSS basics.
Internal (or inline) CSS files do have their own merits even when it comes to simple code, and under special circumstances.
For example, when you need to quickly test a style on a particular element without having to create a separate class for it, use the STYLE attribute to insert your CSS directly into the tag inside the HTML file. No need to spend time creating external definitions for styles you feel undecided about, but want to experiment with.
Another advantage of inline styles is to do with large HTML files. Sometimes your HTML code becomes really big. One of the tricks people who write HTML code use is to add a red border CSS style into the style attribute of a tag, simply to visually locate it on the screen.
Let's say that over a period of time your HTML code accumulates a whole bunch of DIV tags and now contains a great deal of hard to read, confusing code. You can identify a DIV tag inside the code, but you are having difficulty knowing which actual physical location on the screen it refers to.
In order to "identify" this area on the screen, simply add a red border to the DIV tag in question as shown in the code example below:
<DIV style = "border:1px solid red">A block on the screen</DIV></code>The above code will "highlight" the DIV block in a red border of 1 pixel thickness. When you have a lot inside your HTML file, using this trick will help you identify that location when viewing in the browser.
Of course, tools like Chrome allow us to "inspect" HTML pages, and they will even highlight DIV elements automatically when we hover the mouse cursor over blocks of HTML source code text. But this feature was probably invented by someone who was fed up with manually adding their own border:1px solid red CSS code into the style attribute of DIV (or other hard to find) blocks and elements of a webpage.
I know you are probably thinking: didn't we start this discussion to learn about how the CLASS tag attribute works inside HTML tags? Yes! But in order to really know what's going on I had to go into detail about CSS.
As mentioned previously, the class attribute grabs the name of the class that was previously defined using CSS. It doesn't matter whether that CSS definition is internal or external. What matters is that your web page must know that a class with that name has been previously defined and is ready to be used.
Using more than one CSS class inside the STYLE attribute
The following example will show you another interesting scenario. It turns out that the class attribute in an HTML tag allows us to specify more than one class name inside the quotation marks! This means that we can combine multiple classes to be applied to the same element (such as DIV, for example). Take a look at this example:
<DIV class = "Red Bold">This text will be affected by Red and Bold</div>By separating class names with a space, we effectively "add up" definitions stored in Red to definitions stored in Bold, and apply both classes to the same HTML element. This is especially helpful when used in combination with Javascript or jQuery, where you can write dynamic commands to add or remove classes, let's say when a mouse cursor moves over a specific element, and you want to know what it looks like in each case.
Knowing these techniques allows the web designer to leverage a great amount of control over the appearance of the dynamic elements of his or her website.
So how does this Red and Bold example really work in practice? As we learned before, Red and Bold are simple CSS definitions. For example, they can be internally or externally defined as follows:
.Red
{
color: red; /* make text red */
}
.Bold
{
font-weight: bold; /* make text bold */
}Note that just for fun I added CSS comments that describe what each line in each class definition actually does. It's self-explanatory, but knowing how to create CSS comments is also handy.
CSS comments start with a slash and the multiplication sign (/*) and end with the same, but backwards (*/). Whatever is encased inside these two markers will not be processed by the browser as CSS style code. It will simply be ignored. To the web programmer, these comments serve as guidelines or as hints to other programmers who will use code written by you.
And finally, the code below demonstrates the usage of both previously-defined CSS classes in a practical case:
<DIV class = "Red Bold">This font will appear red and bold.</div>As you can see, combining both classes can still be as elegant as nesting HTML tags within each other. Aside from that, by using external CSS definitions (saved as a separate file such as style.css) we increase performance of our websites and reduce bandwidth because external CSS files are cached by web browser.
Learn to make websites yourself. Receive unique HTML tutorials for beginners from Greg, the author of this HTML article and many others. This content is not publically available on the website.
Thanks for visiting websitehomework.com - an website containing html tutorials covering topics such as how to make websites from scratch, css, javascript and other website-related subjects.