Lesson 16: New Tags and Attributes
In this lesson, you will understand get a deep understanding about tags and attributes - and get to learn some new ones.
Block and inline
Most HTML elements are either block-level elements or inline-level elements. Block-level elements just mean that those are the elements that define the structure of the site or they are elements that contain most of the content. Generally, they start on a new line. Examples: <h1>, <p>, <table>, <ul>.
Inline elements are found inside sentences usually and wouldn't indicate that content should start on a new line. Examples: <b>, <img>, <em>.
Structural elements
Structural elements are all block-level elements and help identify the type of content and the area on the page where that content will be placed.
A new structural element is <article>. It is meant for any content that you would consider full and complete on its own: a blog entry, a magazine article, a book, a thesis, a comment. It may have many sections (chapters, parts) to it.
The second structural element you need to know is a <section> and you use it for a section of an article. It's a logical grouping of information and the best test is whether you need a subtitle for it. If you want to stick a title on a subset of paragraphs, then you can use <section>.
Example 1: Article with a section
<body>
<article>
<h1>My Blog Entry</h1>
<p>This blog entry is my first.</p>
<section>
<h2>What I Learned</h2>
<p>HTML5 can have articles and sections.</p>
</section>
</article>
</body>
header and footer are the next new structural elements you need to know. They can hold all sorts of things, but this would be where you for example would put the title of your page (header) or your copyright information (footer).
Let's add those in.
<body>
<header>
<h1>The name of this web page</h1>
<p>Written by me!</p>
</header>
<article>
<h1>My Blog Entry</h1>
<p>This blog entry is my first.</p>
<section>
<h2>What I Learned</h2>
<p>HTML5 can have articles and sections.</p>
</section>
</article>
<footer>
<p> Copyright © 2013 All Rights</p>
</footer>
</body>
You can actually have many headers (and footers) in one page. You might have a header for the entire page and another header for the article. For the page, you would include the name of the web page. For the article, the header could be the title of the article as well as the author and date.
Classes
Classes are a handy little tool that attaches information to an element so you can do more things with some or all elements that belong to a certain class.
For example, if you wanted some of your articles to have a special border or font, you can identify those articles with a class.
<body>
<article class="fancy" >
<h1>My Blog Entry</h1>
<p>This blog entry is my first.</p>
</article>
</body>
Keep classes in mind as you start learning CSS — the piece that lets you format your page.
IDs
IDs, like classes, are metadata that you attach to elements. IDs are unique identifiers for a particular element. They must ALWAYS start with a letter, but you can add numbers afterwards.
You would set an ID on an element if you need to particularly do something with that element, like run some JavaScript on it or even set some unique styling on it.
<button id="play1" onclick="play();">
<image src="play_button.png"/>
</button>
You're most likely to use JavaScript on items that have interactivity. In this case, our play button needs to do something fancy. A piece of Javascript code can retrieve an element by its specific id of "play1" so that when someone clicks on the button (onclick), it will play whatever is needed — defined by the Javascript.
The details of Javascript are a little too advanced for this tutorial, but you do need to understand that adding the ID becomes an essential component of being able to add interactivity to your website.
Global attributes
There are 15 global attributes — attributes you can add to any element. The first and most important is the ID attribute, which we have already explained. You add it to any element you need to specially control.
Other cool attributes that are new to HTML5 include contenteditable, which makes an element's contents editable in the browser, draggable, which lets a user drag that element around, and translate, which can control whether the element's content is translated (or not translated!) when someone accesses it through a browser set up for a different language.
There are also an entire set of attributes specific to forms that we will look at in the next lesson.
Linking
You'll remember that links generally look like this:
<a href="my_second_page.html">Second Page</a>
Well, what if you want that link to open a new browser window (so people don't navigate away from your site)?
The target attribute solves that problem. The target attribute specifies what happens in the browser when someone clicks the link. To open a new window or tab, use the _blank value.
<a target="_blank" href="my_second_page.html">Second Page</a>
Try it yourself by linking one page to a second page that you've created. When you open the page with the link in the browser, as long as you have target="_blank" set, it will open a new tab or window.
You can also identify the type of link that you're using when you specify the rel attribute. You can set this on an <a> element, a <link> element, or an <area> element (a way to put hotspots on an image). This answers the question of why you are pointing to another page.
There are two categories of linking: links to external resources that augment the current document and hyperlinks, which just connects two pages together.
A <link> to an external resource would be rel="stylesheet", which you will learn much more about in CSS tutorial. Most other types of linking would be just a regular hyperlink.
You might be wondering a bit about the difference between the <a> element and the <link> element. They both take the rel attribute, but the <a> element has something clickable inside it (a word, graphic, or button) while the link element doesn't display anything on the page — it's mostly used to link to resources, like a stylesheet.
There are a number of allowed values, but some of the notable ones are author, alternate, help, next, previous, and search.
If the link above was connecting the first page of an article to the second page of an article, you would use the rel attribute with the next value.
<a rel="next" href="my_second_page.html">Second Page</a>
If I was linking to the author's bio or website, I would use the author value instead. If I was linking to some Help document, I would put in the help value.
You can find more information about the valid values of the rel attribute here.
| Related topics in the | Replies | Views |
|---|---|---|
| No related topics yet | ||
<< Lesson 15: HTML5 — The New Kid on the Block
Lesson 17: Invisible Things: Scripts, Metadata, Viewports, and Comments >>