HTML5 Semantics: New Elements to Replace Div

Perfect semantics was and will always be the Golden Fleece for web developers. HTML5 has come a long way to become a “messiah” that gives hope for a better future to HTML technology. This language has indisputably evolved unveiling 30 new elements that brought semantics to higher level. New tags were developed to help us create more semantic structure. As you may know, the previous version of this Hyper Text Markup Language – HTML4 has the universal tag div which was widely used to complete various tasks in the HTML structure. This HTML veteran has one important drawback – unskilled users get lost in a code difficulty as it often looks like a wild div mosaic.

With the release of new HTML5 tags, such as article, section, header, footer, nav and figure, many web developers decided that these elements are meant to fully replace our old buddy div. This point of view is not quite right, and it’s too early to retire the div tag. This tag remain to be a fully functional element of the fifth generation of HTML. According to W3C, the div tag defines a division or a section in an HTML document and it can be used to group block-elements and format them with CSS.

Almost 20 new HTML5 elements were created to be used in Document outline, which is the structure of a document including headings, form titles, table titles and other. Today we want to make things clear and tell you about the most popular HTML5 tags that can be used in the Document outline alternatively to the div element. Once again we want to pay your attention that these elements cannot be called div-killers, they only partially replace the usage of div in the markup code, as you can still use the div element while coding new page. Here’s a short guide to help you use HTML5 new semantic elements. 

Article and Section

Tag article is an independent fragment of the content. Blog post, news article or other types of text content clearly illustrate the right area to use tag article. Basically, you can use this element to markup the page component which is meant to be widely used and distributed.

Tag article is an independent fragment of the content. Blog post, news article or other types of text content clearly illustrate the right area to use tag article. Basically, you can use this element to markup the page component which is meant to be widely used and distributed.

Tag section is the most misleading element that is widely deployed by web developers as an alternative to div. You should know that this tag is tightly connected with article and is used for grouping content that differs from other content groupings on the page. The example of a chapter in a book is the perfect one to illustrate the main function of a section. In other words, this element is used for making several thematically different areas on a single page or for making logical chapters in the articles.

Header and Footer

The element header was created for a more semantic presentation of navigation tools and other important data placed in the header of the web page. You can use this element as many times as you want by adding some additional tags like nav to add some navigation menu elements, headings, tables of contents and other things. Tag footer is similar to header and it is used to create the footer for the content structure placed above. You can also use this element multiple times on one page for various blocks. This tag can be used not only for marking up classical “footer” of the web page with all required information about Copyright, Terms of Use and the like, but also for marking up some information about the author of the article, for example.

Nav

This element is used to create navigation menus with links that allow you to navigate through the page and website. Although, not all the links on the web page must be wrapped with the nav element. You can have, for example, a block with Sponsored links or links with the search results. Don’t forget that nav element can be also used for multiple times. Often this tag helps mark up unordered list of links and ordered ones with our old buddies ul and li.

Figure and Figcaption

According to W3C reference, the current element is used to present a block of content with a caption, which is typically referenced as a single unit from the main flow of the document. In other words, you can use it to mark up various media types of content like illustrations, photos, code examples and diagrams.

Aside

Aside element is used for secondary content when not nested within an article element. The most appropriate example of using aside element is the typography insert. We can use this element for nav elements, typographic inserts, advertising banners and simply for content that must be placed separately from the primary content.

There’s no doubt that all those new elements featured above will make you think twice before using the div tag. Well yes, they are all super-cool and add way more semantic value to your code than div does. But don’t forget that officially the div element remains in the HTML5 team and you can always use it if you can’t find any other tag. We believe it’s a wise decision not to forget about this tag due to its versatility and long-term flexibility. So, code wisely, enjoy superb HTML5 semantic code and don’t forget to smile more often.

Written by Edward Korcheg

The Guide How to Make Your Website More Accessible

We want to start with remaindering a well known fact: the right to access information is acknowledged by the United Nations (U.N.). Most people think that this phrase means that we are free to access the information whatever we want and nobody can prevent us from this. That concerns only rights. According to somebody’s mind, some information is inaccessible not due to government request. There are a lot of cases when people unwillingly prevent others from accessing the information. This happens because some people cannot receive the info in the form it comes. If you haven’t caught the thing we are talking about, please be patient and we would return to this question a bit later.

Web accessibility - what is this?

‘Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality.’

This definition is offered by Wikipedia about web accessibility and we find it to be complete enough and easy to understand.

The web was meant to be functional for everybody. Under the word "everybody" we meant all of us notwithstanding physical and mental abilities, hardware, software preferences, language, culture and location we posses. So when everything works as expected, all people should have an ability to enjoy all things that are offered in the web.

The greatest advantage of the web is that it removes all cultural, linguistic, physical borders. It helps people to connect and stay in contact all over the world in spite of all boundaries.

Therefore, when due to some defects in design or programming part somebody is stand off the web, the main purpose of this essence is destroyed.

Who can say that any of us has the right to keep information from others? Wouldn’t it remind the time of totalitarianism? Definitely it is so.

How an accessible website looks like?

There are a lot of nuances that make a site accessible. The main idea is to suggest solutions for everybody. The website is considered to be more accessible if people with limited capacities can understand and navigate through it. Web accessibility comes over all disabilities that can influence the access to the Web; here belong visual, auditory, linguistic, physical, cognitive, and neurological disabilities.

Why accessible Website is desirable?

We can show you three main reasons:

According to the U.N., a human being has a right to access information and communication technologies, including the Web.

Accessibility supports social integration.

Making a Website accessible provides a strong business opportunity.

How to make your website accessible?

Lets see the ways of making the site accessible for everybody.

Visual accessibility.

There is a wide spectrum of visual impairments that can influence the perception process, including blindness, various common types of poor vision and poor eyesight, and various types of color blindness. All those who are suffering from these impairments need a help to access a Website. For instance, your Website can be developed with the help of semantically meaningful HTML, adding textual equivalents to images and providing links with meaningful names.

Implementing all these things can help blind users to receive the information, using text-to-speech software and/or text-to-Braille hardware.

One more helpful thing is to make sure that all text and images are large enough or they can be enlarged as well. This will help blind users to read and percept the info you offer in your content. Web links can be underlined or somehow differentiated from other content without using coloring themes. In this case color blind users will have an ability to find and click on them.

Motor accessibility

There are also people who cannot use a computer mouse. This may happen because of difficulties or inability to use hands, including tremors, muscle slowness, loss of good muscle control due to various conditions. This problem also concerns old users with limited fine motor control. And accessible website implies the ability of navigation without a mouse, keyboard can be used instead.

In this case people with disabilities can use adjuvant technologies that simulate the keyboard, such as speech input.

One more helpful thing is to make sure that all clickable links and areas are large or can be enlarged; this feature can help users, who cannot control a mouse with accuracy, to navigate and enjoy the site.

Auditory accessibility.

It’s evident that deaf people cannot hear audio files. That’s why you can help them to percept audio information in other way, for example by using a text transcript. This feature will make the audio information available for deaf or hard of hearing people.

These transcripts are easy in implementation for developers and don’t require much money to be spent. Another way is to provide video files with subtitles or with a sign language version available.

Accessibility for users who have predisposition to seizures.

Seizures can be caused by visual strobe or flashing effects. If you want to adapt all visitors of your site, who may suffer from seizures, you should be sure that flash effects are excluded or made optional. Thus users prone to seizures caused by these effects will not be compromised.

Accessibility for users who are cognitively or intellectually challenged.

We don’t mean that you have to build your entire site in the way people challenged in this manner can use and understand it. But some part of your content can be written in simple language with instructional diagrams and animations. Such changes will help users with dyslexia and learning difficulties to understand the content of your site.

Only a few guidelines how to make your site accessible are present. This is a very hard work, but we hope it is a thing worth doing.

If you cannot believe in the humanitarian aspect of this idea, you leastwise have to take into consideration the business end of the issue. People that need such accessibility features compose a good market for advertisers and people offering services. You cannot afford yourself to lose potential clients and users, because you haven’t implemented basic facilities of accessibility.

It concerns not only denying people impaired in one or another way to access your website, it also concerns denying the increasing of users and traffic. We consider it to be worth taking into consideration.

I am Hawk Miller from Ukraine, Blogging and internet R&D is my passion. I provide readymade Flash website templates for websites for their better look.

This article is free for republishing
Source: http://hawkmiller.articlealley.com/the-guide-how-to-make-your-website-more-accessible-2386374.html

Website Information

 

Website Information Website Information is a useful resource for people to discover information about websites. ( Google Pagerank, Domain Age, Social Network Rank, Search Engine Stats...)

Calgary SEO and Edmonton To Design Your Website

New technologies are now being used by traditional business owners to more their business. Website designing is now becoming very important as it reflects the business goal and aim. To make the web design more attractive and appealing to the visitors it must be done with attractive colors, graphics and fonts. Apart from business, web design will help in making good impression online. It is essential to know about building tools, what are the requirements of website design and also language to be used.

The Edmonton Web design is famous for creating excellent user interface websites implementing all the techniques of Search Engine Optimization and content management Edmonton web designing team will function effectively in creating e-commerce websites that will be best for daily business. By understanding the requirements in a better way they help by providing best solution.

Professional from Edmonton will help in a better way to boost the business by designing the website efficiently with logos, graphics that are user interface, content development and web hosting. If you think that your website is not having enough number of visitors then it is necessary that you need to restructure the web pages, The Calgary SEO can make the web pages more attractive and appropriate so that it can appear in the first pages of search engines results Since there are millions of websites present online, it may be difficult to keep yourself ahead of competitors. So the best alternative is to implement SEO techniques to your website as you can crawl ahead in Google or any other search engine ranking In this aspect Calgary SEO will analyze the website first to find the drawbacks and restructure according to the standards of SEO to improve its visibility and create traffic.

They evaluate the website to make it identifiable to people by using right key words and description in the content. Our professionals are expertise in implementing the seo friendly code to all your web pages which includes writing the proper html meta tags Telephone number and address must be informed to make the website more accessible and attract potential customers. Thus you can of sure get more traffic and business from SEO friendly websites.

Love Jack Russells Screenshot

Love Jack Russell’s is my latest project. I built the website with the aid of researching into the breed of dog, having an understanding of their owners and making sure my audience was targeted on serious breeders alike. This allowed me to produce the colours and layout used, which gives the site its overall feel and look.

The site was developed using the latest HTML 5 and CSS 3 techniques, which allows me to reduce image load on screen and use special effects to create rounded corners and transitions that are only possible through JavaScript or applying images etc.

Love Jack Russells

Kirkham Design Studio - Freelance Portfolio

Kirkham Design Studio can offer you a great service as well as a first hand visual experience. My aim is to offer you affordable as well as professional web and graphic designs that will ensure your visibility on the World Wide Web. This can also include Branding - for example, Logo designs, Business cards, Complements slips, Letterheads, Banners, Broachers and much more!

Please don't hesitate to have a nosey, and leave me your feedback, or get in touch if you would require my services

Kirkham Design Studio