<html lang="es">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
</head>
</html>
Back to HTML5 structural elements, just take a look to this blog. Is splitted (by <div> and CSS) in different parts: a header with the title of the blog, navigation with several links, content of each post (each post has also header, content, footer, comments,...), the footer at the end of the page... You can use <div> tag for everything you want. HTML5 adds new tags: header, footer, nav, article, section... to avoid use div for all. This doesn't mean you don't need div anymore, it is very usefull to add styles for example, but now, the browser knows what is the purpose of every section of the blog. In the image below you can compare HTML structural elements:
Once we have change our tags in HTML file we need to modify our CSS file to add style in our new sections. We were using the style "seccion" for the main content of the blog but now we are using just the tag <section> without define any class in our HTML file. This is why we need to edit our CSS and change the name of the class "seccion" by the name class "section". Same process for header, footer, nav and so. Here below an example:
We can have problems opening this blog in an old browser because it probably doesn't understand all these tags and classes, and the render of the page won't be what we want. Now I will show you a way to avoid this problem by adding the following code to our CSS file:
header, nav, aside, article, section, footer {
display: block;
}
The browser will manage these classes as a block like the div tag. Eventually, for IE8 you also need a small js in the <head> section of our HTML to create all these new tags in the DOM:
document.createElement("header"); document.createElement("nav"); document.createElement("aside"); document.createElement("article"); document.createElement("section"); document.createElement("footer");
Here more useful HTML5 new tags:
- <mark>: used to highlight some text you want the user to focus. Ex.
- <progress>: is a progress bar with different creation ways. Ex
- <meter>: used to measure data within a given range. Ex
- <time>: used to show the time and date in special formats. It has an optional parameter called "pubdate" used to declare the publication date of the page or the article if <time> is inside of it. Ex
Another important part of every blog are the comments. These are always shown below the post and are linked to their contact. The way to create this structure in HTML5 is by using the tag <article> for the post and inside of it use another <article> for the comments, probably in the <footer> of the post. HTML5 says that, when you use one <article> tag inside of another the content of both tags is linked somehow.
We finish this post with the concept: document scheme. We know there are some tags like <h1>, <h2>,..., <h6> to emphasize some parts of our site, Usually the designers never use an h1 after an h2 by logic. HTML5 has created several sections (article, nav, header,...), which define an independent part from the rest of the document. So if we use an <h1> for the title of our comments, but we already have an <h1> for the title of our blog, this won't be a problem for HTML5 due to it will transalte to an <h4>, for example, the title of our comments. This is made by CSS by declaring an style for the tag h1 in our comments:
#comments_post h1 {
font-size: 1.5em;
}
You know we have declare <article> for the post of our blog and for the comments of those posts. This means same style for both. Same way we can declare a special style for the content of the articles in the blog and for the content of the comments. To do it just need to add "body >" to assign this style class only for the elements inside of the tag body, so, the post:
body > article {
border-bottom-style: dotted;
border-bottom-width: 3px;
border-bottom-color: black;
margin-bottom: 20px;
clear: both;
overflow: hidden;
}
Finally if we want to create the style for the comments of our posts we just need to create a style for the articles that are inside of another articles like here below:
article article {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
border-bottom-style: solid;
border-bottom-width: 1px;
padding-top: 10px
}
0 comments:
Post a Comment