Home » HTML5 Overview

Share This Post

HTML

HTML5 Overview

HTML5 Overview and Introduction

HTML5 is comprised of tags. Tags are names(elements) inside of < and > (angle brackets). There are two basic types of tags. Structural and Semantic. Structural tags define what is on a web page. Semantic tags define purpose or meaning for some items on a web page and make good hooks for CSS Style rules. Either way they both define structure and not presentation. Presentation is left up to CSS3 or Cascading Style Sheets. And behavior is left up to JavaScript.  Though with CSS you can achieve some effects that resemble behavior. The behavior is part of the browser, not CSS or JavaScript. This article is not about CSS or JavaScript.

Tags (Elements)

Tags define elements. Some tags need open and closing tags and wrap text and other elements. Other tags are “empty” tags and do not need a closing tag but only a /> in the end of the tag which shows it to be empty. Tags can have attributes which are like settings or  properties. These are name=value where the value is in ” “. So name=”value”. There are some attributes in HTML5 that need no value. These are for setting a condition to true or on. If the attribute is present then the value is true or setting is on. If not then it is false or off. Some attributes are called “global” attributes, such as ‘id’ or ‘class’ attributes. That means that all elements can have these attributes. Many attributes are specific to a given element. Some attributes define style such as size, color etc. Do not use these! Use CSS instead. id has to be unique for each element on a page. An element can have multiple classes as a value of class attribute and multiple elements can have the same class values.

Elements define blocks. You can think of each element as being placed inside a box. There are two kinds of elements, block and inline. Block elements return flow below and to the left after the element. Inline continues the flow to the right. Using a book as an analogy for example a page, a paragraph or an illustration might be like a block element. A sentence, a word or a character would be inline elements. There are two generic elements for this. <div></div> is a generic block element. <span></span> is a generic inline element. And how do these work? You style them with CSS. Divs and spans usually have id or class attributes.

The HTML DOM (Document Object Model) explained

The entire web page is loaded as text and parsed into memory in what is called a DOM or Document Object Model. The browser and JavaScript has access to these objects which contain elements or text nodes. The web page forms a tree data structure. An analogy would be your file system which is also a tree data structure, it has a drive which is the root, then folders, then files are the leaves. The DOM has the document as the root, then elements are like branches and the text are like leaves. Netscape made DOM level 0. This has been updated to DOM level 1, DOM level 2 and DOM level 3. DOM level 3 did not add that much and has not been fully or well supported by browsers.

Each node object has methods for getting or setting attributes, or adding and removing attributes. The point is that JavaScript can alter the web page any way it sees fit. It can insert elements into the DOM, remove elements from the DOM. It can change element attributes at will. HTML can be injected into the DOM at any location. CSS rules can then be triggered by the changes which will change the way things appear. Elements can also be hidden rather than removed. Become very familiar with all HTML elements to become a rock star with web development.

White Space and other stuff

White space in HTML documents can cause headaches. Two spaces are counted as one. A line feed is counted as one space. <br/> is used to force a line feed when rendered. Be careful when editing CMS templates. CSS and JavaScript react to the HTML in templates. Simply editing HTML in a template might cause presentation problems or scripts to not function properly

Aside from tags you will need to use some escape codes from time to time.

  • &lt or &#60  &gt   < or >
  • &amp or &#38  &
  • &copy &#169 copyright
  • &quot “
  • &cent cent symbol
  • &pound British money
  • &yen Chinese money
  • &euro European money
  • &reg Registered symbol
  • &trade Trademark symbol
  • &lsquo &rsquo  ‘ ‘
  • &ldquo &rdquo ” “
  • &times x
  • &divide /

Common HTML tags

Comments in HTML are like so <!–  –>

<b></b>

<i></i>

<h1></h1> <h2></h2><h3></h3>

<sub></sub> <sup></sup>

<em></em> <blockquote></blockquote>

<q></q>

<abbr></abbr>

<address></address> Physical, Email, Phone etc.

<s></s>

<ins></ins>

<del></del>

Lists

<ol> <ul> <li>

<dl><dt><dd>

Links

<a></a> Relative or Absolute

id attribute use for on page links which use #idname  at end of url.

Can use an <a> element around entire block of anything to make it a link, but you need to define it as block level element using CSS if its inline.

Images

<img/>  src, title, alt attributes,  align, width and height should be set using CSS though images should be resized to the correct size with a pixel editor to make smaller downloads.Images are measured in pixels. Good SEO (Search Engine Optimization) will always use alt attribute. For padding, margins and vertical alignment use CSS.

  • images, stock photos  Lots of websites that sell photos or images.
    • Images can cost $30 to $500 per month… Can get them as cheap as $15  or $12 per image on click buy or on monthly plans 30 cents up to $3 an image.
    • There are some sites that have free images

You can use a free tool such as GIMP or online tool like pixler.com to edit or create images.

Image file types might be JPG, PNG or GIF. Animated images use GIF. JPG are for images with many colors and offers compression. PNG is a good general purpose image format that I use a lot. GIFs are better for flat images with one or few colors. You can use a pixel editor like GIMP to set a transparency color on an image, usually the color used is white. This will let your background imagery show through.You can view images from web pages in a browser pain and then get its size or save it to your local hard drive.

Tables

Next we have table elements <table></table> which I might call a structural element, but other seem to call it a semantic element. I’m not saying tables should be used for layouts. No, use CSS for layouts. But don’t they show how to structure the data? I don’t know, you make up your  own mind.

<table></table><caption></caption><th></th><tr></tr><td></td>

Table headers can have scope attribute with value of “col” or “row”. So cols can have headers or rows can have headers. colspan or rowspan attributes allow a cell to span multiple rows and/or columns <thead></thead> <tbody></tbody> <tfoot></tfoot>  (order depends on HTML version  4 is <thead><tfoot><tbody>, 5 can be that or <thead> <tbody><tfoot> This allows the table to scroll if its long where header and footer still remain visible. I don’t think this will work for row headers and horizontal scrolling. Though a bit of JavaScript and the effect could be achieved.

All style for tables should be achieved with CSS. Colors, Fonts, Background images, Borders, Margins, Padding etc. So you will be using id and class attributes a lot in the tables.

Forms

HTML Forms are for getting input from the user. <form> element wraps up the other form elements. With an attribute it will show which script on the server to call to handle the form input. It will define a method such as HTTP get or post for sending the form data. Get sends name=value pairs in the url. Post sends data in the response header. Get is used for sending only a few small values. Post is used for lager amounts of data and for uploading files.

Input

<input/><textarea></textarea> input boxes have type attributes associated with them. The three most common are “text”, “password” and “submit”. HTML5 has added many to transfer some of the input validation from your scripts and server to the browser. There is also “color”, “date”,”datetime-local”,”email”,”month”,”number”,”range”,”search”,”tel”,”time”,”url” and “week”. However validation is performed on the client side, it should be double checked on the server side. Validating input data on the client side is more responsive from the user’s point of view. And the server is not worked so hard. Until web browser support is more solid and consistent for this browser validation, JavaScript will remain in use for this purpose.

Input elements can have quite a few attributes. The disabled attribute is used by scripts to gray out or enable the field. The max attribute gives maximum value. The maxlength gives number of characters. The min gives minimum value. The pattern specifies regex expression to match input against. The readonly attribute specifies that it can not be changed which is also probably used by scripts. The required says the user must enter something. The size specifies the width in characters. There is also step which I do not see much use for. There is of course value which sets default value. You can give input boxes an initial value with the value attribute. Textarea’s have col and row attributes for setting their size. Anything between open and close tags would be the initial value in the text area. Most form controls use name attribute so that scripts can find and use them and their values.

Options

For options the name will be the same for each option, the value returned will determine which one was selected. So the value of each option should be unique. Checkbox elements are fairly simple. Options or Checkboxes can have a <label> element in front of or after to explain what the selection is for. labels have a for attribute that specifies which form control they belong to.

There are checked and selected attributes that initialized check boxes and selections. This is what I talked about before in HTML 4 you would use checked=”checked” and all attributes had to have a value. In HTML5 you simply use <input type=”checkbox” checked> If the checked attribute is present then it represents a value of on or true or in this case “checked”.

Drop Down

<selection> elements is for drop down boxes when used with <options>. In this case the <select> tag has a name attribute not the <option> tags. The <option> tags contain the value attributes. <select> has an attribute multiple. When used instead of a drop down box there is a box with several rows of items. The number of items viewed can be set with an attribute I think. The list is scrollable. This option works and looks differently on different operating systems or browsers. So its not used very much. If used you should inform the user that they can multi-select and maybe tell them how. I think multiple values are returned as comma separated.

A <datalist> gives your selection input box a set of predefined list items that is incrementally searched as you type. So you use the attributed list=”name” in your <input> element and id=”name” in the datalist element. Then <option value=””> for the selections.<optgroup></optgroup> groups <option/> elements. <fieldset> groups a set of fields, you can also name it with <legend> element so that there is a box around the group with a title.

XHTML

A little about XHTML. HTML 5 is basically XHTML. Every element needs a closing tag or if empty element it needs /on end of tag. <selection></selection> or <p/>. Attribute names need to be lowercase and have a value that must be in double ” “. HTML5 breaks this rule with some attributes as in checked=”checked”. XHTML can be processed by anything that can process XML. Such as a tree viewer or whatever. It can be used with other forms of XML, such as SVG, mathML formulas, or cML for chemical formulas. Strick HTML is XHTML. Normal HTML is HTML.<doctype> is an element for specifying a DTD for loose,  strict, normal, frameset types of HTML.

There is also a Frameset HTML which is rarely used and should usually not be used. CSS should be used instead. Frames divide the webpage into panes, where each pane can contain a different page. <iframe> or internal frame is different and I will talk about that later. IFrames are used for embedding things like google maps, podcast players, or video from YouTube etc.Important attributes let you set the source  src=”someurl”  and width and height of the frame.

<button> defines a button that a script may react to. <keygen> generates a public and private key that is intended to secure a session. <output> can use values from form fields.

Meta tags

<meta/> tags live inside the <head> tag above the <body> They are empty elements that only have attributes. They may have a name attribute. A robots attribute which tells robots not to index the page or not to follow links on the page. A keywords attribute. keywords are an important recurring theme in web marketing. Most search engines are aware of keyword stuffing and will rank you lower if you try. A description attribute. http-equiv which can have various values. author value, pragma (which means not to cash the page), or expires value.

Video

If you are including video you must provide different video file formats for different browsers or operating systems. Unless you use something like YouTube, which will handle this for you. There are conversion tools on the web for making up these different video file types. I simply use mp4 for YouTube videos and mp3 for podcast. But there is WSF, FLV, webM, OGG and maybe others. If you want to support the different types then you might also have to download players for those types and load them with JavaScript. You can use the <video> element and provide multiple <source src=””> elements. Below is a sample from one of my YouTube videos.

<iframe 
 style="border: none;" 
 src="//html5-player.libsyn.com/embed/episode/id/7235057/height/360/theme/standard/autoplay/no/autonext/no/thumbnail/yes/preload/no/no_addthis/no/direction/backward/" width="100%" 
 height="360" 
 scrolling="no" 
 allowfullscreen="allowfullscreen">
</iframe

Audio

<audio> tag is for playing audio. You can get players from musicplayer.sf.net or wimpyplayer.com. Just like video you may need or want to supply different audio file formats for different browsers. Some support mp3, and some other formats. Tools like Audacity or WavePad or Sox can convert sound or music files from one format to another. Below is an example of embedding a podcast player on a web page from LibSyn. And just like with <video> you may need multiple <source> elements.

<iframe 
 style="border: none" 
 src="//html5-player.libsyn.com/embed/episode/id/7235057/height/360/theme/legacy/autoplay/no/autonext/no/thumbnail/yes/preload/no/no_addthis/no/direction/backward/"
 height="360" 
 width="100%" 
 scrolling="no"  
 allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen>
</iframe>

More new HTML Structural and Semantic tags

HTML5 has more new tags. Some structural tags to note are.These would replace what is commonly done with divs spans and id or class attributes. And there are a few others I didn’t feel worth mentioning.The first 8 below define the parts of a typical modern web page. <aside> is a sidebar. <nav> for menu’s etc. <figure> obviously for book like figures. Sections can have their own header and footers. Some developers use nav elements for links in the footer for contacts, software license etc.  Article elements can be nested. An aside element might be inside or outside of an article. If inside it has content related to the article, outside to the page.<details> is collapsible. <dialog> dialog box. <mark> highlights or selects text. <progress> progress indicator. <time> displays a time. <wbr> possible line break. <hgroup> groups <h1>to <h6> <figure><figcaption> can be used on things other than images, such as videos and other things.

<article><aside><header><footer><main><section><nav>

<figure><figcaption>

<summary><details>

<dialog><mark><progress><time><wbr><hgroup>

HTML5 APIs

You will hear that HTML5 has APIs, yes its now a fully fledged programming language!  Not! Some of these are JavaScript APIs added by browser makers that are not part of the standard JavaScript APIs I think these below are a few that may be part of the JavaScript standard. I also saw one for geolocation. There may be more. Other Web APIs for example.

Web Sockets and Messaging, WebRTC
Drag and Drop, Fullscreen
Canvas, SVG, WebGL
Animation Timing, Media, Pointer Lock, Web Audio
File API, File System API, Indexed DB, Offline, Web Storage
Browser, Shadow DOM, Typed Arrays, Web Workers
DOM
CSS Object Model, Selectors

CSS and JavaScript

Much more can be done with CSS and JavaScript. You may have fast expandable menu’s with CSS hover, float and user list items. CSS has some cool image effects. You can alter images on hover, or image position. One technique places more than one image on a strip. The image can then be moved left or right to show only one of the images on the strip. With JavaScript you can also have nice menus with fade and slide effects. You can have expanding and collapsing menu’s. You can have tabbed  or expandable collapsible content. Tables can be sorted and filtered with ease. And forms can be automated and validated very robustly. And much more.

Share This Post

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>