10 Cool Things HTML Tags Can Do

At the moment there are a total of 142 HTML elements standardized by W3C excluding the ones in the initial phases of standardization and those that went obsolete. That said, it is possible to miss or forget few of them that can be useful when needed.

Earlier we did a recap of some of the best CSS tricks you might have overlooked. This post will remind you some of the HTML tags that you didn’t know you could use to implement features such as:

1. Map Images

The HTML <map> elements can be used to create image maps. Image maps are basically images with clickable areas on them, that can be hyperlinked to another web page or other parts of the same document. You can define which areas of an image are clickable by simply mentioning the corresponding X Y coordinates of those points in the <area> elements nested inside <map>.

Note: The clickable areas cannot be styled through CSS so, if you want those markers to be styled, use a simple image editing software to draw the markers.

Tip: If you want to know the coordinates for a point in an image, open the image in an image editing software and move the cursor to that point, you should be able to see the coordinates of it in the software itself. For GIMP it is shown at left side of the bottom bar.

2. Input suggestions

Use <datalist> to provide a list of relevant suggestions that appear while typing an input value.

3. Highlight Text

Highlighted text usually has dark text color with a light background. You can achieve that highlighted text effect with markup alone. Any text enclosed inside the <mark> will have that effect.

You can customize the highlight color with the background-color CSS property of <mark> and the text color with the color property.

4. Define Templates

Along with HTML5 came the new <template> element. The <template> element holds markup inside it that is not rendered by the browsers, the markup enclosed by it are to be used to generate dynamic contents in the page using JavaScript.

For example, suppose you have a <table> where rows are to be added dynamically, you can simply put the markup of an empty row of that table inside the <template> tag and when needed call a JavaScript function containing script to copy the markup from inside the template tags and add it to the table markup. This is not supported by IE.

5. Fine Print

Fine print refers to the text of document that is typically printed in very small size containing information like conditions, terms, restrictions, citations, legal rights etc. The <small> tag in HTML can be used to show fine prints. From HTML5 onwards the <small> tag not only shows a fine-print styled text but will also semantically define the same as legal disclaimers and caveats.

6. Assign a Base URL

The <base>HTML element is quite handy when you have multiple links in your document with the same domain URLs, it allows you to add a base URL to the document which in turn allows you to add only relative URLs to other links in the page as needed.

Note: All of the relative URLs in the page will be referred based on the base URL, if you have any link with a different domain don’t forget to assign the complete URL to it.

7. Responsive Images

Responsive web development is in vogue with ever growing mobile access. Images can be toggled for different screen sizes with markup. The <picture> HTML5 element lets you add various image sources for different media for the image inside it.

Note: This currently works in Chrome only. You will have to set dom.image.picture.enable to true in about:config in Firefox.

8. Color Picker

HTML5 introduced many new input type elements; the color input element is one of them. It lets you chose a color on a webpage with the help of a color picker.

9. Group options

If you have many options in a dropdown list and would like to show them grouped, the <optgroup> element will get the job done. You can also style the groups with CSS.

10. The <noscript> element

The markup inside <noscript> is rendered by the browser only when the script is disabled. This tag is useful for letting users know when the script is disabled in their browser and to provide any alternate fallback mechanism for components on the web pages that will stop working without JavaScript.

 <head> <noscript><link rel="stylesheet" href="noscript_fallback.css"></noscript> </head> <body> <noscript><h2>Javascript is disabled in your browser.</h2></noscript> </body> 

Now Read:
15 Useful CSS Tricks You Might Have Overlooked

10 Cool Things HTML Tags Can Do

10 Cool Things HTML Tags Can Do

At the moment there are a total of 142 HTML elements standardized by W3C excluding the ones in the initial phases of standardization and those that went obsolete. That said, it is possible to miss or forget few of them that can be useful when needed.

Earlier we did a recap of some of the best CSS tricks you might have overlooked. This post will remind you some of the HTML tags that you didn’t know you could use to implement features such as:

1. Map Images

The HTML <map> elements can be used to create image maps. Image maps are basically images with clickable areas on them, that can be hyperlinked to another web page or other parts of the same document. You can define which areas of an image are clickable by simply mentioning the corresponding X Y coordinates of those points in the <area> elements nested inside <map>.

Note: The clickable areas cannot be styled through CSS so, if you want those markers to be styled, use a simple image editing software to draw the markers.

Tip: If you want to know the coordinates for a point in an image, open the image in an image editing software and move the cursor to that point, you should be able to see the coordinates of it in the software itself. For GIMP it is shown at left side of the bottom bar.

2. Input suggestions

Use <datalist> to provide a list of relevant suggestions that appear while typing an input value.

3. Highlight Text

Highlighted text usually has dark text color with a light background. You can achieve that highlighted text effect with markup alone. Any text enclosed inside the <mark> will have that effect.

You can customize the highlight color with the background-color CSS property of <mark> and the text color with the color property.

4. Define Templates

Along with HTML5 came the new <template> element. The <template> element holds markup inside it that is not rendered by the browsers, the markup enclosed by it are to be used to generate dynamic contents in the page using JavaScript.

For example, suppose you have a <table> where rows are to be added dynamically, you can simply put the markup of an empty row of that table inside the <template> tag and when needed call a JavaScript function containing script to copy the markup from inside the template tags and add it to the table markup. This is not supported by IE.

5. Fine Print

Fine print refers to the text of document that is typically printed in very small size containing information like conditions, terms, restrictions, citations, legal rights etc. The <small> tag in HTML can be used to show fine prints. From HTML5 onwards the <small> tag not only shows a fine-print styled text but will also semantically define the same as legal disclaimers and caveats.

6. Assign a Base URL

The <base>HTML element is quite handy when you have multiple links in your document with the same domain URLs, it allows you to add a base URL to the document which in turn allows you to add only relative URLs to other links in the page as needed.

Note: All of the relative URLs in the page will be referred based on the base URL, if you have any link with a different domain don’t forget to assign the complete URL to it.

7. Responsive Images

Responsive web development is in vogue with ever growing mobile access. Images can be toggled for different screen sizes with markup. The <picture> HTML5 element lets you add various image sources for different media for the image inside it.

Note: This currently works in Chrome only. You will have to set dom.image.picture.enable to true in about:config in Firefox.

8. Color Picker

HTML5 introduced many new input type elements; the color input element is one of them. It lets you chose a color on a webpage with the help of a color picker.

9. Group options

If you have many options in a dropdown list and would like to show them grouped, the <optgroup> element will get the job done. You can also style the groups with CSS.

10. The <noscript> element

The markup inside <noscript> is rendered by the browser only when the script is disabled. This tag is useful for letting users know when the script is disabled in their browser and to provide any alternate fallback mechanism for components on the web pages that will stop working without JavaScript.

<head>
<noscript><link rel="stylesheet" href="noscript_fallback.css"></noscript>
</head>
<body>
 <noscript><h2>Javascript is disabled in your browser.</h2></noscript>
</body>

Now Read:
15 Useful CSS Tricks You Might Have Overlooked

10 Cool Things HTML Tags Can Do

How to Improve HTML Table Accessibility with Markup

Web accessibility refers to designing web applications in a way that it can be used with ease by people with visual disabilities. Some of these users rely on screen readers to read out the content in the web pages. The screen readers interpret the code present on the page and read out its content to the user.

<table> is a widely used HTML element to display data in a structured fashion in webpages. Its design ranges from simple ones to complex ones, complete with row headers, merged headers etc.

If a table is not designed with accessibility in mind, it will be difficult for the screen readers to translate the data in complex tables meaningfully for the users. Hence, to make complex HTML tables more easily understandable, for accessibility, we must ensure that the headers, column groups, row groups, etc. are clearly defined. We’ll see below how this is achieved in markup.

The Scope Attribute

Even for a simple table with <th> tag that clearly defines the headers, you can improve its accessibility with the scope attribute and not give way to any confusion that may arise from similar types of data in the cells.

<table>
 <tr>
 <th scope="col">Employee Name</th>
 <th scope="col">Employee Code</th>
 <th scope="col">Project Code</th>
 <th scope="col">Employee Designation</th>
 </tr>
 <tr>
 <td>John Doe</td>
 <td>32456</td>
 <td>456789</td>
 <td>Director</td>
 </tr>
 <tr>
 <td>Miriam Luther</td>
 <td>78902</td>
 <td>456789</td>
 <td>Deputy Director</td>
 </tr>
</table>

What does scope attribute do? According to W3C:

Note: This attribute specifies the set of data cells for which the current header cell provides header information.

In other words it helps us associate the data cells with their corresponding header cells.

Please note that in the above example you can switch <th> for <td>. As long as its scope has the value col, it will be interpreted as the corresponding column"s header.

The scope attribute can have any one of these four values; col, row, rowgroup, colgroup to refer to a column"s header, a row"s header, a group of columns" header and a group of rows" header respectively.

Complex Tables

Now let us move on to a more complex table.

Above is a table that lists students in a class and their grades in practical and theory for three subjects.

Here is the HTML code for it. The table has used rowspan and colspan to create merged headers for the data cells.

<table>
 <tr>
 <th rowspan="2">Student Name</th>
 <th colspan="2">Biology</th>
 <th colspan="2">Chemistry</th>
 <th colspan="2">Physics</th>
 </tr>
 <tr>
 <th>Practical</th>
 <th>Theory</th>
 <th>Practical</th>
 <th>Theory</th>
 <th>Practical</th>
 <th>Theory</th>
 </tr>
 <tr>
 <th>John Doe</th>
 <td>A</td>
 <td>A+</td>
 <td>B</td>
 <td>A</td>
 <td>A</td>
 <td>A-</td>
 </tr>
 <tr>
 <th>Miriam Luther</th>
 <td>A</td>
 <td>A</td>
 <td>C</td>
 <td>C+</td>
 <td>A</td>
 <td>A-</td>
 </tr>
</table>

In the above table, each data cell, that is each of the table cells displaying the grade, is associated with three pieces of information:

• Which student does this grade belong to?


• Which subject does this grade belong to?


• Is this grade for the Practical or Theory section?

Those three information are defined in three different types of header cells structurally and visually:

• Student name


• Subject name


• Practical or theory

Let’s define the same for accessibility.

<table>
 <col>
 <colgroup span="2"></colgroup>
 <colgroup span="2"></colgroup>
 <colgroup span="2"></colgroup>
 <tr>
 <th rowspan="2" scope="col">Student Name</th>
 <th colspan="2" scope="colgroup">Biology</th>
 <th colspan="2" scope="colgroup">Chemistry</th>
 <th colspan="2" scope="colgroup">Physics</th>
 </tr>
 <tr>
 <th scope="col">Practical</th>
 <th scope="col">Theory</th>
 <th scope="col">Practical</th>
 <th scope="col">Theory</th>
 <th scope="col">Practical</th>
 <th scope="col">Theory</th>
 </tr>
 <tr>
 <th scope="row">John Doe</th>
 <td>A</td>
 <td>A+</td>
 <td>B</td>
 <td>A</td>
 <td>A</td>
 <td>A-</td>
 </tr>
 <tr>
 <th scope="row">Miriam Luther</th>
 <td>A</td>
 <td>A</td>
 <td>C</td>
 <td>C+</td>
 <td>A</td>
 <td>A-</td>
 </tr>
</table>

In the above markup we have added scope to cells that contain heading information about the data cells.

Column Group

Biology, Chemistry and Physics cells are to be associated with a group of two columns each (Theory & Practical). Just adding colspan="2" does not create the column groups, it only indicates that the particular cell is to occupy two cells" worth of space.

To create columns group you must use colgroup and then add the span attribute to it indicating how many columns that column group includes.

Note: You can learn more about col and colgroup elements in this W3C documentation.

The <th rowspan="2" scope="col">Student Name</th> markup with scope="col" helps the assistive technology identify that the cells that follow in the same column are names of students.

Similarly, cells like <th colspan="2" scope="colgroup">Biology</th> containing scope="colgroup" helps users identify that the data in the cells that follow in the column group it spans over are associated with that particular subject.

Then there is the <th scope="row">John Doe</th> markup with scope="row" that defines that the cells following it in the same row, containing the "grade" information regarding that particular student name.

Row Groups

Now let us move onto another example, this example will have almost the same table as the one above except we"ll swap row and column headers, so we"ll be able to work with row groups.

 <table>
 <tr>
 <th colspan="2">Subject</th>
 <th>John Doe</th>
 <th>Miriam Luther</th>
 </tr>
 <tr>
 <th rowspan="2">Biology</th>
 <th>Practical</th>
 <td>A</td> 
 <td>A</td>
 </tr>
 <tr> 
 <th>Theory</th>
 <td>A+</td> 
 <td>A</td>
 </tr>
 <tr>
 <th rowspan="2">Chemistry</th>
 <th>Practical</th>
 <td>B</td> 
 <td>C</td>
 </tr>
 <tr> 
 <th>Theory</th>
 <td>A</td> 
 <td>C+</td>
 </tr>
 <tr>
 <th rowspan="2">Physics</th>
 <th>Practical</th>
 <td>A</td> 
 <td>A</td>
 </tr>
 <tr> 
 <th>Theory</th>
 <td>A-</td> 
 <td>A-</td>
 </tr>
 </table>

Now that we have our sample to work with let us start by creating row groups like we did for the column groups in the previous example.

However, row groups can not be created using a tag like colgroup because there is no rowgroup element.

HTML rows are generally grouped using <thead>, <tbody> and <tfooter> elements. A single HTML <table> element can have one <thead>, one <tfoot> and multiple <tbody>. We"ll use multiple tbody in our table to create the row groups, and add the respective scope to header cells.

<table>
 <colgroup span="2"></colgroup>
 <col>
 <col>
 <thead>
 <tr>
 <th colspan="2" scope="colgroup">Subject</th>
 <th scope="col">John Doe</th>
 <th scope="col">Miriam Luther</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th rowspan="2" scope="rowgroup">Biology</th>
 <th>Practical</th>
 <td>A</td>
 <td>A</td>
 </tr>
 <tr>
 <th>Theory</th>
 <td>A+</td>
 <td>A</td>
 </tr>
 </tbody>
 <tbody>
 <tr>
 <th rowspan="2" scope="rowgroup">Chemistry</th>
 <th>Practical</th>
 <td>B</td>
 <td>C</td>
 </tr>
 <tr>
 <th>Theory</th>
 <td>A</td>
 <td>C+</td>
 </tr>
 </tbody>
 <tbody>
 <tr>
 <th rowspan="2" scope="rowgroup">Physics</th>
 <th>Practical</th>
 <td>A</td>
 <td>A</td>
 </tr>
 <tr>
 <th>Theory</th>
 <td>A-</td>
 <td>A-</td>
 </tr>
 </tbody>
</table>

We have added the rows "Practical" and "Theory" in each tbody creating row groups with two rows in each. We also have added the scope="rowgroup" to the cells containing the heading information about those two rows (which is the subject name the grades belong to in this case).

Note: You can look into more about accessibility guidelines in the W3C site.

Now Read:
Equal Column Height With CSS

Editor’s note: This is written for Hongkiat.com by Preethi R. Preethi is a .NET Web developer with a Java past and a bias for Firefox, Windows & DC Comic movies.

How to Improve HTML Table Accessibility with Markup

How to Improve HTML Table Accessibility with Markup

Web accessibility refers to designing web applications in a way that it can be used with ease by people with visual disabilities. Some of these users rely on screen readers to read out the content in the web pages. The screen readers interpret the code present on the page and read out its content to the user.

<table> is a widely used HTML element to display data in a structured fashion in webpages. Its design ranges from simple ones to complex ones, complete with row headers, merged headers etc.

If a table is not designed with accessibility in mind, it will be difficult for the screen readers to translate the data in complex tables meaningfully for the users. Hence, to make complex HTML tables more easily understandable, for accessibility, we must ensure that the headers, column groups, row groups, etc. are clearly defined. We’ll see below how this is achieved in markup.

The Scope Attribute

Even for a simple table with <th> tag that clearly defines the headers, you can improve its accessibility with the scope attribute and not give way to any confusion that may arise from similar types of data in the cells.

<table> <tr> <th scope="col">Employee Name</th> <th scope="col">Employee Code</th> <th scope="col">Project Code</th> <th scope="col">Employee Designation</th> </tr> <tr> <td>John Doe</td> <td>32456</td> <td>456789</td> <td>Director</td> </tr> <tr> <td>Miriam Luther</td> <td>78902</td> <td>456789</td> <td>Deputy Director</td> </tr> </table> 

What does scope attribute do? According to W3C:

Note: This attribute specifies the set of data cells for which the current header cell provides header information.

In other words it helps us associate the data cells with their corresponding header cells.

Please note that in the above example you can switch <th> for <td>. As long as its scope has the value col, it will be interpreted as the corresponding column"s header.

The scope attribute can have any one of these four values; col, row, rowgroup, colgroup to refer to a column"s header, a row"s header, a group of columns" header and a group of rows" header respectively.

Complex Tables

Now let us move on to a more complex table.

Above is a table that lists students in a class and their grades in practical and theory for three subjects.

Here is the HTML code for it. The table has used rowspan and colspan to create merged headers for the data cells.

<table> <tr> <th rowspan="2">Student Name</th> <th colspan="2">Biology</th> <th colspan="2">Chemistry</th> <th colspan="2">Physics</th> </tr> <tr> <th>Practical</th> <th>Theory</th> <th>Practical</th> <th>Theory</th> <th>Practical</th> <th>Theory</th> </tr> <tr> <th>John Doe</th> <td>A</td> <td>A+</td> <td>B</td> <td>A</td> <td>A</td> <td>A-</td> </tr> <tr> <th>Miriam Luther</th> <td>A</td> <td>A</td> <td>C</td> <td>C+</td> <td>A</td> <td>A-</td> </tr> </table> 

In the above table, each data cell, that is each of the table cells displaying the grade, is associated with three pieces of information:

• Which student does this grade belong to?


• Which subject does this grade belong to?


• Is this grade for the Practical or Theory section?

Those three information are defined in three different types of header cells structurally and visually:

• Student name


• Subject name


• Practical or theory

Let’s define the same for accessibility.

<table> <col> <colgroup span="2"></colgroup> <colgroup span="2"></colgroup> <colgroup span="2"></colgroup> <tr> <th rowspan="2" scope="col">Student Name</th> <th colspan="2" scope="colgroup">Biology</th> <th colspan="2" scope="colgroup">Chemistry</th> <th colspan="2" scope="colgroup">Physics</th> </tr> <tr> <th scope="col">Practical</th> <th scope="col">Theory</th> <th scope="col">Practical</th> <th scope="col">Theory</th> <th scope="col">Practical</th> <th scope="col">Theory</th> </tr> <tr> <th scope="row">John Doe</th> <td>A</td> <td>A+</td> <td>B</td> <td>A</td> <td>A</td> <td>A-</td> </tr> <tr> <th scope="row">Miriam Luther</th> <td>A</td> <td>A</td> <td>C</td> <td>C+</td> <td>A</td> <td>A-</td> </tr> </table> 

In the above markup we have added scope to cells that contain heading information about the data cells.

Column Group

Biology, Chemistry and Physics cells are to be associated with a group of two columns each (Theory & Practical). Just adding colspan="2" does not create the column groups, it only indicates that the particular cell is to occupy two cells" worth of space.

To create columns group you must use colgroup and then add the span attribute to it indicating how many columns that column group includes.

Note: You can learn more about col and colgroup elements in this W3C documentation.

The <th rowspan="2" scope="col">Student Name</th> markup with scope="col" helps the assistive technology identify that the cells that follow in the same column are names of students.

Similarly, cells like <th colspan="2" scope="colgroup">Biology</th> containing scope="colgroup" helps users identify that the data in the cells that follow in the column group it spans over are associated with that particular subject.

Then there is the <th scope="row">John Doe</th> markup with scope="row" that defines that the cells following it in the same row, containing the "grade" information regarding that particular student name.

Row Groups

Now let us move onto another example, this example will have almost the same table as the one above except we"ll swap row and column headers, so we"ll be able to work with row groups.

 <table> <tr> <th colspan="2">Subject</th> <th>John Doe</th> <th>Miriam Luther</th> </tr> <tr> <th rowspan="2">Biology</th> <th>Practical</th> <td>A</td> <td>A</td> </tr> <tr> <th>Theory</th> <td>A+</td> <td>A</td> </tr> <tr> <th rowspan="2">Chemistry</th> <th>Practical</th> <td>B</td> <td>C</td> </tr> <tr> <th>Theory</th> <td>A</td> <td>C+</td> </tr> <tr> <th rowspan="2">Physics</th> <th>Practical</th> <td>A</td> <td>A</td> </tr> <tr> <th>Theory</th> <td>A-</td> <td>A-</td> </tr> </table> 

Now that we have our sample to work with let us start by creating row groups like we did for the column groups in the previous example.

However, row groups can not be created using a tag like colgroup because there is no rowgroup element.

HTML rows are generally grouped using <thead>, <tbody> and <tfooter> elements. A single HTML <table> element can have one <thead>, one <tfoot> and multiple <tbody>. We"ll use multiple tbody in our table to create the row groups, and add the respective scope to header cells.

<table> <colgroup span="2"></colgroup> <col> <col> <thead> <tr> <th colspan="2" scope="colgroup">Subject</th> <th scope="col">John Doe</th> <th scope="col">Miriam Luther</th> </tr> </thead> <tbody> <tr> <th rowspan="2" scope="rowgroup">Biology</th> <th>Practical</th> <td>A</td> <td>A</td> </tr> <tr> <th>Theory</th> <td>A+</td> <td>A</td> </tr> </tbody> <tbody> <tr> <th rowspan="2" scope="rowgroup">Chemistry</th> <th>Practical</th> <td>B</td> <td>C</td> </tr> <tr> <th>Theory</th> <td>A</td> <td>C+</td> </tr> </tbody> <tbody> <tr> <th rowspan="2" scope="rowgroup">Physics</th> <th>Practical</th> <td>A</td> <td>A</td> </tr> <tr> <th>Theory</th> <td>A-</td> <td>A-</td> </tr> </tbody> </table> 

We have added the rows "Practical" and "Theory" in each tbody creating row groups with two rows in each. We also have added the scope="rowgroup" to the cells containing the heading information about those two rows (which is the subject name the grades belong to in this case).

Note: You can look into more about accessibility guidelines in the W3C site.

Now Read:
Equal Column Height With CSS

Editor’s note: This is written for Hongkiat.com by Preethi R. Preethi is a .NET Web developer with a Java past and a bias for Firefox, Windows & DC Comic movies.

How to Improve HTML Table Accessibility with Markup

DribbbleFolio – HTML template

DribbbleFolio is an HTML template to showcase your dribbble portfolio at best with Bootstrap + Jribbble.

The post DribbbleFolio – HTML template appeared first on Freebiesbug.

DribbbleFolio – HTML template

Resume template – PSD + HTML

A resume template for showcasing your resume or to use as personal page. Free PSD and HTML released by Afnizar Nur Ghifari.

The post Resume template – PSD + HTML appeared first on Freebiesbug.

Resume template – PSD + HTML

HTML & CSS Examples of Material Design in Action

We touched on Material Design a few months ago (Material Design GUI kits, you should check them out!) just as Google’s innovative visual language began building up a head of steam. Since then, we’ve seen many, many sites and apps that have incorporated the visual language successfully. This is going to be the year of Material Design, and we love it

Just in case you haven’t jumped on the Material Design bandwagon or aren’t fully convinced of it’s merits as yet, we’ve collected a small collection of HTML and CSS examples from Codepen that will surely convince you. Here they are:

Drawer Motion

A demonstration of how the app drawer is filled with motion in Android Lollipop. By Himateja and Jovie Brett.

Animated Tiles

A CSS-based prototype of Material Design"s animated tiles. By Sergey Kupletsky.

Morphing Icons

A collection of recreated "morphing" icons in a Material Design style. By Alberto Bonvicin.

Subtle Animation

A CSS-only recreation of Material Design"s flawless and subtle animations. By Michiel Bijl.

Immaculate Transitions

Immaculate examples of Material Design"s transitions. By Andrew Tunnecliffe.

Preloader

A Javascript (jQuery plugin) recreation of the Material Design preloader. By Aaron Lumsden.

Scaling Interaction

A simple recreation of Material Design"s scaling interactions. By Dennis Gaebel.

Form Inputs

Examples of the inputs on a Material Design form. By Sergey.

Swipe Animation

A pure-CSS example of Material Design"s intuitive card swipe animation. By Michiel Bijl.

Clean Navigation

A Material Design menu system that slides the page to reveal a clean and simple navigation. By Lewi Hussey.

Hamburger Menu

A CSS (with a sprinkle of JS) hamburger menu that has been animated in a Material Design style. By Chris Wheatley.

Loading Spinner

A CSS and SVG recreation of Material Design"s loading spinners. By Fran Pérez.

Address Bar UI

A CSS mock-up of Chrome"s Material Design address bar (including meaningful transitions). By David Khourshid.

Slide Tabs

A touch enabled side scrolling tab system that mimics Android Lollipop"s stock app drawer. By Adam Crockett.

Concluding

What are your thoughts on Material Design? Have you used it any of your projects? Also, if know of any other animated examples of Material Design, please do share them as well.

The post HTML & CSS Examples of Material Design in Action appeared first on Speckyboy Web Design Magazine.

Related posts:

1. Breaking the Norm: Unusual and Creative Web Layouts


2. 50 Websites with Fantastic Color Schemes


3. Our 50 Favorite Web Designs from 2012

HTML & CSS Examples of Material Design in Action

Specifying Document Base URL With HTML <base> Element

Websites are built with a series of links, pointing to pages and sources like images and stylesheets. There are two ways to specify the URL that links to these sources: either use an absolute path or relative path.

The absolute path refers to specific destination, typically it’s started with the domain name (along with HTTP) like www.domain.com/destination/source.jpg. The relative path is the opposite: the link destination depends on the root location or in most cases the domain name of your website.

A typical relative path would look like this below:

 <img src="/assets/img/image.png" alt=""> 

If your website domain is, for example, hongkiat.com the image path would resolve to hongkiat.com/assets/img/image.png. You should understand this if you have been developing website for a while.

But most of you probably have not heard about the <base> element. This HTML tag has been around since HTML4, yet very little is seen of its implementation in the wild. W3C describes this element as:

“The base element allows authors to specify the document base URL for the purposes of resolving relative URLs, and the name of the default browsing context for the purposes of following hyperlinks.”

This <base> element basically decides the base URL for relative path in web pages. Instead of depending on the root location or the domain of your website, you can point it out to somewhere else, perhaps like the URL where your resources reside in CDN (Content Delivery Network). Let’s see how that actually works.

Using the Base Element

The <base> is defined along side the <meta> and <link> tags within the <head>. Given the following example, we set the base URL to Google.

 <base href="http://hongkiat.maxcdn.com/assets/"> 

This specification will affect all the paths within the document, including one that is specified within the href attribute and the src of the images. So, assuming we have a stylesheet, images, and links in the document set with a relative path like this, for example:

 <link rel="stylesheet" href="path/main.css"> <a href="path/page/sub-page/">Anchor Link</a> <img src="path/image.jpg"> 

Even though our web page is under demo.hongkiat.com the relative path will refer to hongkiat.maxcdn.com, following the base path specified in the <base> tag. Try hovering over the link, and the browser will show you where the path is exactly heading to.

All the relative paths will eventually be:

 <link rel="stylesheet" href="http://hongkiat.maxcdn.com/assets/path/main.css"> <a href="http://hongkiat.maxcdn.com/assets/path/page/sub-page/">Anchor Link</a> <img src="http://hongkiat.maxcdn.com/assets/path/image.jpg"> 

Setting the Default Link target

Aside from defining the base URL, the <base> tag can also set the default link target through the target attribute. Say you want all the link in the document to open in the browser new tab, set the target with _blank, like so.

 <base href="http://hongkiat.maxcdn.com/assets/" target="_blank"> 

Limitations

The <base> tag, however, holds a couple of caveats in some circumstances:

First, the <base> browser support is great; it works in IE6. But, IE6 thinks that it requires a closing tag </base>. This could cause a hierarchy issue in the document, if the closing tag is left unspecified. A simple quick way to address this issue is by adding </base> closing within a comment, <!--[if lte IE 6]></base><![endif]-->.

If you are using # in conjunction with the <base> to link to sections within the document, you may potentially encounter an issue in Internet Explorer 9. Instead of jumping to the referred section, Internet Explorer 9 will reload the page.

Furthermore, a blank href will result in the base URL instead of linking to the current directory where the page resides (this is default browser behavior), which could cause unexpected referencing issues.

Wrap Up

The <base> is a handy HTML feature that may simplify link referencing in a web document. Use the tag considerately to minimize the pitfalls. Follow these reference below for more on the <base> tag:

• Absolute and Relative URLs — MSDN


• HTML Base Element — W3C

Related posts:

1. Web Design: How to Create A Sleek Web Audio Player


2. How to Use Autocompletetype Attribute in HTML Forms


3. A look Into: The Kit Language


4. 5 Things You Can Do With HTML Meta Tag

Specifying Document Base URL With HTML <base> Element

MocKit – HTML iPhone 6 mockups

MocKit is a ready-made iPhone 6 mockup kit built with HTML and CSS. Customisable colours, size and retina ready. Created by @colinkeany.

The post MocKit – HTML iPhone 6 mockups appeared first on Freebiesbug.

MocKit – HTML iPhone 6 mockups