HTML5 Fundamentals #2 Elements Explained
In the first part of this series, we gave a brief overview of what an element is; and introduced you to a series of elements known as “structure elements”, which make up the basic framework of our HTML page. Here, we will introduce the various types of elements that are at your disposal, and hopefully give you an idea of the manner in which you’ll be using them.
Later, we will take an in-depth look at the tags in HTML5, several of which date back to the original set of 20 first laid out in late 1991. As the standard has been revised and improved, several tags have been added, some changed, and some removed altogether. With HTML5, we’re presented with the single biggest upgrade to the specification to date.
So in case you’ve had an incredibly hard go at it since our first tutorial, here it is again:
Everything within an HTML document *is* an element, and generally, those elements will have at least one associated attribute and content. Here’s how that would look like:
<tag attribute1=”value” attribute2=”value2″>mycontent</tag>
Generally, we can group according to the function they will serve on the page. As we mentioned, you’ve already been introduced to a few of the “structure” elements that make up the backbone of your HTML document. Now, we’ll briefly take a look at the remaining tag classifications.
The word “Meta “is (very, very roughly) Greek for “about itself”; and accurate or not, that’s the working definition used in the HTML world. Regardless of is technical etymology, that’s what Meta is. It’s quite simply data about data. And we’ve already used a bit of it.
Remember that whole < !DOCTYPE > thing we talked about last time? Well, dear reader, THAT is Meta. It’s information relating to the information contained within our HTML5 document. In fact, so was the < title > we also used, so your already bounds ahead of your peers on the issue. Feels nice, doesn’t it?
Unfortunately, HTML does not live in a WYSIWYG universe. Far from it. If you want your text to look a certain way, you’re going to have to explicitly tell it how you want things to look. No, that doesn’t mean cursing at it (not yet, anyway); rather, using the appropriate < tags > as to inform the browser as to how you’d like your text displayed.
This can range from what are called “block level” elements, which control how entire chunks of text are displayed, to “line level” elements, which dictates how certain words and phrases are displayed, independent from the block. For instance, creating a new paragraph would be a block level action, while italicizing something is a line level action. Simple, right?
While much of what was once exclusively accomplished with text tags is now being done with CSS, it’s still not a terrible idea to familiarize yourself with them. In some cases, it may be far easier to make a small change utilizing your old faithful < text > tags, rather than create a new style.
Whenever you’re dealing with something that isn’t straight text, you’ll be utilizing a media related < tag >, which instructs your browser to include some form of media (and how!) when the page renders in the browser.
Of all of the element classifications, it’s fair to say that this is where HTML5 really shines over previous versions. Traditionally, HTML has been pretty much limited to images and image interaction (< maps >), heavily relying on embedded objects (QuickTime and Flash) for the real interactive ostentation. Now, much of this rich media can be natively displayed within HTML5-compliant browsers; speeding up performance and making it easier on you, the developer, to make such inclusions on your pages.
Table < tags > deal with the creation and formatting of HTML tables, which help you organize your information, and the way your text is rendered to screen. There’s much debate as to if table tags should still be used at all – many suggest that using CSS and/or the < div > tag is far more flexible and efficient – but until officially killed off by the powers that be (as was the case with…say its name…Frames), they’re still likely to find wide usage for a couple of reasons: They’re very simple to use, and they’ve been used FOREVER.
So for the time being, tables still have some legs to…oh never mind.
Generally, whenever a user submits any kind of information to a web page, they’re doing so via a form < tag > of some sort. As rich internet applications have become more and more prevalent, forms have stood as the entré for web materials delivered to the end user dynamically, as opposed to one-size-fits-all static content. HTML5 retains all of the original forms, as well as including new methods of basic interaction, such as sliders and progress bars.
You know a classification effort has officially failed when the result is a genus known as “other”. Unfortunately, not everything in HTML5 is so easily compartmentalized, or just doesn’t have enough members to warrant its own group. Some elements also have soft of a dual-nature about them – initially intended for one function, but quickly found utility in another.
These types of elements we’ve presented are by no means official, nor are they standardized anywhere outside the tiny confines of our own heads. We’ve merely created these as a means of relating < tags > to you in a semi-controlled environment; introducing concepts sequentially as opposed to throwing all the elements at you at once.