New Structural Tags and Attributes of Html5

In the first few Tags and Attributes of Html5, we’ll talk about how we can use HTML5’s and CSS’s features to improve the interfaces we present to our users. W e ’ l l see how we can create better forms, easily style tables, and improve the accessibility of our pages for assistive devices. W e ’ l l also see how we can use content generation to improve the usability of our print style sheets, and we’ll explore in-place editing with the new contenteditable attribute. First, though, let’s take a look at how Attributes of Html5’s new elements can help us structure our pages better.

I’d like to talk to you about a serious problem affecting many web devel- opers today. Divitis—a chronic syndrome that causes web developers to wrap elements with extra div tags with IDs such as banner, sidebar, arti- cle, and f o o t e r —is rampant. It’s also highly contagious. Developers pass Divitis to each other extremely quickly, and since divs are invisible to the naked eye, even mild cases of Divitis may go unnoticed for years.

Here’s a common symptom of Attributes of Html5 Divitis:

<div id="navbar_wrapper" >
<div id= "navbar" >
<ul> 
<li><a href= "/" >Home</a></li> <li><a href= "/" >Home</a></li> 
</ul> 
</div>
</div>

Here we have an unordered list, which is already a block element, 1 wrapped with two div tags that are also block elements. The id attributes on these wrapper elements tell us what they do, but you can remove at least one of these wrappers to get the same result. Overuse of markup leads to bloat and pages that are difficult to style and maintain.

There is hope, though. The Attributes of Html5 specification provides a cure in the form of new semantic tags that describe the content they contain. Because so many developers have made sidebars, headers, footers, and sections in their designs, the Attributes of Html5 specification introduces new tags specifically designed to divide a page into logical regions. Let’s put those new elements to work. Togetherwith Attributes of Html5, we can help wipe out Divi- tis in our lifetime.

In addition to these new structural tags, we’ll also talk about the meter element and discuss how we can use the new custom attributes feature in Attributes of Html5 so we can embed data into our elements instead of hijacking classes or existing attributes. In a nutshell, we’re going to find out how to use the right tag for the right job.

In this Attributes of Html5, we’ll explore these new elements and features:

  • < header > Defines a header region of a page or section.
  • < footer > Defines a footer region of a page or section.
  • < nav > Defines a navigation region of a page or section.
  • < section > Defines a logical region of a page or a grouping of content.
  • < article > Defines an article or complete piece of content.
  • < aside > Defines secondary or related content.
  • Custom data attributes Allows addition of custom attributes to any elements using the data- pattern. [All browsers support r e a d i n g these via JavaScript’s getAttribute() method.]
  • < meter > Describes an amount within a range.
  • < progress > Control that shows real-time progress toward a goal.

For More about New Structural Tags and Attributes of Html5 Stay with us.

Bootstrap Framework, from Twitter UI

Bootstrap is a toolkit from Twitter designed to kick start development of web apps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more. Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox. Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.

What is it Bootstrap Framework?

Bootstrap Framework is Open-source front-end toolkit HTML, CSS, and now JS Super small footprint (CSS is ~7kb) Supported in IE7 and up Designed as a complete style guide Boatload of design patterns Built on Less CSS.

Bootstrap Framework included with:

  • Scaffolding
  • Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.
  • Base CSS of Bootstrap Framework
  • Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.
  • Bootstrap Framework Components
  • Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.
  • JavaScript plugins use in Bootstrap Framework
  • Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.

Why is HTML5 needed for Web Development?

As we!ve discussed, HTML5 has been created to scratch the proverbial itch.

But what exactly is the itch? And how does HTML5 scratch it? Let!s find out. In HTML 4.01, and earlier versions, we know that there was a document-oriented approach to things. The Web was originally created to display and share scientific documents. That concept of documents continued through the Web!s early life, albeit with more generic information rather than just scientific data. However, in the years after HTML 4.01 there began a rise in dynamic websites and online applications, supported in part by the adoption of Adobe Flash and other third-party plugins that allowed you to create applications full of rich, interactive media. Content management systems (CMS) and services like WordPress started to crop up, offering anyone the ability to create a blog or manage large quantities of content using templates. Flickr allowed for the sharing of photographs, with YouTube doing the same for video. And, once faith was restored in the Internet after the dot com bubble went pop, online stores and auction sites started cropping up all over the place, selling items from books to the unwanted crap in your attic. The Web was becoming less and less static, with more content being user-generated and inherently dynamic. In essence, the Web grew away from its roots in individual static documents, focussing now on large quantities of dynamic data being displayed using templates. It would be wrong to describe the Web in its entirety using this definition, of course, but it highlights a fundamental shift in how the Web was being used. The problem was that HTML was never built to deal with this kind of use; it was built to deal with fairly strict types of document-based content (paragraphs, images, headings, and so on). Anything more exotic, like media or CMS content, required the use of external plugins, like Adobe Flash, and ill-fitting code. Something else was needed that brought HTML up to speed, allowing it to accommodate media and allow for better, more semantic code.

HTML5 brings with it a massive amount of improvements over the old document-oriented Web.

Why is HTML5 needed for Web Development? PHP and ASP

Why is HTML5 needed for Web Development?

New elements have been created to mark up dynamic, templated content. Other elements have been created with the sole purpose of ending our reliance on external plugins to experience audio-visual content. These elements alone solve many of the problems, but the W3C (with credit to the WHATWG) hasn!t stopped there. For example, form validation, previously something only achieved via JavaScript, is also part of HTML5. With practically all user-generated content on the Web being created, in part, using some kind of input form, validation within the browser is more important than ever. As well as HTML5, and intrinsically tied to its development, are other technologies that hope to solve related issues. One such example is the Web today being much more mobile than it was 10 years ago – it!s reckoned that 95% of mobile phones have some sort of Internet browser.4 With more and more people wanting to access content specific to their location, would it not make sense to implement geolocation within the browser? These, among others, are technologies that are being created alongside HTML5 to scratch the itch once and for all. HTML5 introduces a whole host of new functionality, covered in page after page of specification on the W3C and WHATWG websites. This book has been written to give you a foundation for understanding the specification; it will take you through the important new features of HTML5 in detail – in plain English.