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:
Inline elements are found inside sentences usually and wouldn't indicate that content should start on a new line. Examples:
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
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>
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 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, 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.
<button id="play1" onclick="play();"> <image src="play_button.png"/> </button>
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.
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)?
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
<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.
<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
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
<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
You can find more information about the valid values of the rel attribute here.
|Related topics in the||Replies||Views|
|No related topics yet|