Blog page Design htmlDesign blog page html
To examine this, we look at the marker of a blog. First we will use the headers, footers, mains and navigation items to highlight the wide page layout. Next, we will make blog commentary much more intelligent using the new file type and built-in validations available in HTML 5-enabled webmasters.
Then, we'll work a little on the insides of the page by using the HTML 5 articles element to better highlight blog postings and commentaries and show how to use the section element to better organize available hierarchy headers on CMS-driven websites. Blocks are arranged in chronological order, so we'll see what HTML 5 can do for us to display the date and time.
If HTML 5 is used as simple HTML and not as XHTML 5 siblings, no DOCTYPE is required. However, all web browser do, otherwise they go into Quirksmode, which you don't want: The HTML 5 and Quirksmode clash is like a material and antimatter encounter, leading to a bad inverse of realism that sets your lingerie on fire.
A few websites "use" HTML 5, although in reality they only take their current codes and modify the DOCTYPE. That' s good and nice if you have used good semiantic coding since HTML 5 is very similar to good HTML 4.01. And there are some language variations that are summarized in HTML 5, differs from HTML 4. However, I don't want to just rebadgen my current HTML, I want to use some of the new structure now.
This blog - like a million others - has a headline marked , a bottom line , some posts (packed in a section named "content", ) and some navigations (packed in a section named "sidebar" ). It is easy to modify the HTML Dive into the new items.
My only problem was choosing which item to use to highlight my side bar, as it also included a query box and "rosin" information, as well as location-wide navigational information. The specification says that it is "a section of a page that contains contents that are tangent to, and could be regarded as separated from, the contents around the sub-element," but is still more contents than navigational contents.
Therefore, I chose the navigation device as the most suitable one. I' ve packed the primary contents into a item that is mapped to the iria role=main so that screen readers and other supporting technology can find the primary contents quickly. Please be aware that you should only use this item once per page.
Look at it in the latest release of Opera, as the only full implement at the moment of posting (June 2009), and notice that it also inserts a "mail" symbol in the entry box as a hint to the users. What is good about this new kind of marvelousness is that it revolves around new attribute on an existing item, so that those who use older browser will only see a simple old entry area.
Hopefully the screen readers are prepared for these new interaction; I've asked the html 5 group to officially ask the screen reader providers to join the specifications; as far as I know, nobody has. It is not too difficult to design the new items. All non IE web browser can interpret everything with the help of CSS even a nonsensical part.
What getscha is about is that the latest browser harvest has no "knowledge" about these items, although supporting them is constantly getting better. Each browser has standard preferences for the items they "know" - how much Padding, margin they get, whether it is displayed as a pad or In-line? However, browers don't know anything about headers, navigation and the like, so they don't have standard preferences that match them.
What use are these new structure items? Now, they're adding semantics to the page. Your web browsers now know which area of your site is the headline or the footline because there are headline and footline items, while various can be described as "branding" and "legal" or even "en-tete" and "pied-de-page" or "headline" and "footline".
As a general rule, the response is "to repurpose contents". "I think HTML should only include items that either reveal functions that would otherwise be quite insignificant (e.g. canvas) or offer syntax that helps to reuse them for web browser applications. One is for use in searching engines; it's easily imaginable that Mr. Google or Mr. Yahoo! will give less importance to the contents in bottom line items or more importance to the contents in the headline.
One interesting thing about a blog homepage is that there are generally the last 5 or so postings, each with a headline, a "body" and details about the posting (time who has written it, how many commentaries etc.) and usually a hyperlink to another page that has the full blog posting (if the homepage has only shown an excerpt) and its commentary.
The HTML 5 has an articles tag that I use to package every story: Articles elements represent a section of a page consisting of a combination that constitutes an autonomous part of a documents, page or website. It may be a board contribution, a journal or news paper product, a weblog posting, a user-supplied commentary, or other unrelated work.
Let's take a closer look at how I tag every blog post. It is no longer a general dive, but an item. Inside is a headers that includes a headline (the blog post title) and then the date of publishing tagged with the timing item.
There are also the gems of humor and knowledge that make up each of my contributions, labeled as heels, block quotes, etc. This is followed by information about the blog entry (category, how many comments), which is highlighted as a bottom line, and for pages that show a particular blog entry, there are commentaries that express immortal wonder andove.
After all, there can be a nav from one item to the next. According to the contents, there is some "metadata" about the post: in which categories it is, how many commentaries there are. I put this on the bottom line. Previously I set aside a section of a page that "consists of contents that are related to the contents around the aside item in a tangential way and that can be regarded as separated from that content", but determined that it was too long a distance; contribution information is closely related; the bottom line fits much better:
"Usually a footing contains information about its section, such as who has written it, link to related document, copyrighted information, and the like. "I was first flung off course by the presentation name of the item; my use here is not at the bottom of the page or even at the bottom of the item, but it certainly seems to suit - it's information about its section containing the author's name, link to related documentation (comments) and the like.
There is no need why you cannot have more than one page header; the specification describes: "The page header constitutes a header for the section to which it applies" and a page can have any number of paragraphs. "When nesting item items, the inner item items are items that in essence refer to the content of the external item.
So, for example, a weblog record on a Web site that will accept annotations posted by the users might present the annotations as item items that are interleaved within the item item for the weblog record. They are overwritten with the date and hour of the annotation and the author's name - if you want, you can also put them in a headline, but to me it seems like a mark-up for its own sake. What's more, it's a mark-up for the name of the writer.
The majority of blog posts, message boards and the like offer information for publishing articles. In the microformat I concur with the humans that concealed Meta information is not as good as visual, humans reading information and therefore do not use the publish item of the paper. So I used the HTML 5 page item to give machines a machine-readable date while giving humans a human-readable date.
Blogs get the date, while commentaries get the date and hour. In my view, the specification is quite difficult to comprehend, but the size you are using is 2004-02-28T15:19:21:21+00:00, where T is the date and clock separator and the + (or a -) is the counter of ATC. Strangely enough, the specification proposes that if you use a date without date, you don't need a date zone either.
There is a lot of debate about the timing aspect at the present point. "hCalendar expects to be used primarily for migrating events from a Web page to an app such as iCal. "This seems very stupid to me; if there is a timing item, why don't you allow me to highlight a date or date?
Specification for period does not include forthcoming event-only limitation: "Timing is an exact date and/or hour in the Greek calendars " and gives three instances, two of which refer to the past and none of which are "future events". While the specification does not (currently) restrict the use of the item, it restricts the specification to exact data in the "Proleptic Greek Calendar".
That means that I can tag an archives page for "all blog entries today" over and over again, but not for "all July 2008 entries", since this is not a full YYYYYY-MM-DD date. Nor can you give exact but old data, so that the date of Julius Ceasar's murder, 15 March 44 BC, is incompatible.
Hopefully this short essay (geddit?) has given you a fast survey of the use of some of the new semiantic items.