How To Access HTML5 data- Attributes With JavaScript/JQuery

In HTML5 data- Attributes were introduced. They are a big improvement, because they allow you to store information within a HTML tag. They look like this:

<div id="abc" data-listsize="20"></div>

You see, the div tag is extended by a data-listsize attribute, which has the value 20. But how can you access this attributes with JavaScript? In this article I’ll show you both ways – with plain JavaScript and with jQuery.

Read moreHow To Access HTML5 data- Attributes With JavaScript/JQuery

3 Great HTML5 Attributes That Simplify Coding

HTML5 offers a lot of new features, which were, in my opinion, long overdue. In this article i will show you three great new HTML5 attributes which will make coding your HTML5 Website easier.

placeholder-Attribute

Do you know this placeholder texts within form fields like e.g. “Enter your email adress here”? Well with HTML5 you can add placeholders quite easily to your form fields. Just add the placeholder attribute to your form tag. No Javascript or other hacks needed anymore.

Read more3 Great HTML5 Attributes That Simplify Coding

Display A HTML-List Horizontally

Normally a HTML-list is displayed vertically, which means that each entry is below the previous entry. But for some reasons you might want to display the list vertically, e.g. for a menubar.
Here is a simple way to do that.

For this example I’ll use the following list:

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

The result looks like this:

  • Item 1
  • Item 2
  • Item 3

Now, we add some CSS:

Read moreDisplay A HTML-List Horizontally

How To Load A Default Image In HTML, If Image Is Not Found

When creating HTML pages, it can always happen, that you include images into a page that can not be displayed. There are several reasons for this, for example when there is a typo in the source code or the image file has been moved or deleted. In this case, using the JavaScript event handler onerror … Read moreHow To Load A Default Image In HTML, If Image Is Not Found

How To Alter Background Colours Of HTML Table Rows With jQuery

If you have long lists of data displayed as tables, it may be a bit confusing to read a line across its columns. But there is an easy way to make your tables more readable. Just alter the background-colour of your list line-by-line. In this post I’ll show you how to do this by using … Read moreHow To Alter Background Colours Of HTML Table Rows With jQuery

Format Bullet Points in HTML Unordered Lists

In HTML there are several ways to show lists. You can use ordered lists ( <ol> Tag), which prefixes each item with a continous number. You can also use unordered lists, which prefix each item with a bullet point by default.( <ul> Tag).
When using unordered lists, you can modify the HTML tag to use other symbols.

Read moreFormat Bullet Points in HTML Unordered Lists