Category: HTML5

Specificity: Why my CSS is being cancelled out even though it is loaded after other CSS?

Your answer is Specificity

Specificity is a mechanism within the CSS cascade that aids conflict resolution

Basically it determines preference of CSS styles, over and above the cascading nature of stylesheets

Order of Precedence of Specificity:

Type Specificity
Inline Style Highest
Highest Number of #id selectors Wins
Highest number of class, attribute and pseudo selectors Wins
Highest Number of element selectors Wins

HTML Forms and Submit Button Changing Name

This article explores HTML webforms and specifically the submit button in terms of changing the name, id and value. We explore Submit Button Changing Name Examples.

Example 1: Simple form tags and a frugal submit input

<form>

<input type=”submit” />

</form>

Result 1: Submit label is ‘Submit’, Default action is to do a Get.

Example 2: Simple form with post method and frugal submit

<form method=’post’>
<input type=’submit’>
</form>

Result 2: Submit label is ‘Submit’, Does a Post with no form data.

Example 3: Simple Form with Post and submit with id

<form method=’post’>
<input type=’submit’ id=’test’>
</form>

Result 3:  Submit is still called submit, Does a Post with no form data.

Example 4: Simple Form with Post and Submit with a Name

<form method=’post’>
<input type=’submit’ name=’test’>
</form>

Result 4:  Submit is still Submit, Does Post that contains form data: $_POST[‘test’] = ‘Submit’;

Example 5: Simple Form with Post Submit with a Name and a Value

<form method=’post’>
<input type=’submit’ name=’test’ value=’foo’>
</form>

Result 5: Submit is now labelled ‘foo’, does a post of form data: $_POST[‘test’] = ‘foo’;

Example 6: Simple Form with Post Submit with a Value Attribute

<form method=’post’>
<input type=’submit’ value=’foo’>
</form>

Result 6: Submit labelled foo, but no form data.


What is HTML5?

What is HTML5?

What is HTML5?…HTML is the latest version of HTML, Hypertext Markup Language. This is the language used to communicate with web browsers to display web documents displayed in pages. The W3c as of December 2012 has  recommended the use of HTML5 for all new and existing websites.

HTML5 has a number of new features:

  • Section and Article tags
  • API’s that assist with web apps
  • Support for audio and video
  • Reduces the need for plugins

What is HTML5? Structural tags:

Structural tags refer to the structure of the web document, HTML 5 has made structuring the website based on the modern format of web documents.

HTML5-tips-structural-tags
General Structure of HTML5 Website

New HTML5 Structural Tags:

  • Section: Generic Section, splits into distinct regions or chapters.
  • Article: Forum posts, Magazine Articles, Blog entry, Comment for syndication, anything that can be republished on it’s own.
  • Aside: Content related to main content – quotes, ads, relational groupings.
  • Header: Introductory or navigational Aids, wraps tables, search form or logos.
  • Hgroup: heading of a section, group set of headings, related headings.
  • Footer: Information about the writer or copyright information for specific section of whole page.
  • Nav: Section of page providing navigational links to other pages or parts within a page.

What is HTML5? Content tags:

  • Figure: Grouping visual content 
  • Video: Media element video and audio
  • Audio: Media element video and audio
  • Embed: Integration point for external non-HTML application
  • Canvas: Resolution dependent bitmap canvas, rendering graphs, graphics etc.
    puts canvas on page

What is HTML5? Application focused tags:

  • Meter: scalar measurement of known range, disk usage,
    relevance, gauge [only use when range is known]
  • Progress:  Completion of a task [use when range not known]
  • Time: Time(24h) or date – machine readable way only gregorian
    [too specific]
  • Details: Widget displaying extra help info
  • Command:  Command a user can invoke, toolbars, icons
  • Menu: Represents list of commands

What is HTML5? Depreciated HTML tags (Still supported but use is not recommended):

  • basefont
  • big
  • center
  • font
  • s
  • strike
  • tt
  • u
  • frame
  • frameset
  • noframes
  • acronym
  • applet
  • isindex
  • dir

What is HTML5? debated tag attribute removals:

  • rev, charset : FROM : a , link
  • longdesc, name : FROM : img
  • version : FROM : html
  • abbr : FROM : th
  • scope : FROM : td
  • align : FROM : all block elements
  • background : FROM : body
  • hspace, vspace : FROM : img
  • bgcolor : FROM : table, tr, th, td
  • border, cell padding, cell spacing : FROM : table
  • height, width : FROM : td, th
  • valign : FROM : table

What is HTML5? New integrated API’s:

  • Video and Audio playback
  • inline editing: edit text without use of an editor
  • Offline and History API
  • Web protocol API: Application can register the protocol they use
  • Drag and Drop API

What is HTML5? Associated API’s:

  • Geolocation API
  • 2D Canvas API
  • local Storage API
  • Messaging API

What is HTML5? Content Models:

  • Metadata – presentation of rest of content [base, command, link, meta, script, noscript, style, title]
  • embeded – content that imports [audio, canvas, embed, iframe, img, object, video]
  • interactive – user interaction [a, audio, button, details, embed, iframe, img, input, keygen, label, menu object, select, textarea, video]
  • heading – [h1 – h6, hgroup]
  • phrasing – text and text markup, eg. inline [a, abbr, command, code, select, small, object, var, textarea]
  • flow – included in normal flow, in body tag [majority of html: a, article, size, details, div]
  • sectioning – defines scope of headings and footers [article, aside, nav, section]

Display is now controlled with CSS – HTML5 and CSS must work together! 

Easy HTML5 character encoding:

  • Usually http header deals
  • Easier html 5: <meta charset=”utf-8″>

Please check the following links to find out about other new developments and how to apply the new HTML5 tips in your website:

http://www.w3schools.com/html/html5_intro.asp

http://www.w3.org/html/wg/drafts/html/master/What-is-html5

http://html5demos.com/

Find out about HTML6 here:

http://html6spec.com/