HTML5 Overview and Introduction
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
White Space and other stuff
Aside from tags you will need to use some escape codes from time to time.
- < or < > < or >
- & or & &
- © © copyright
- " “
- ¢ cent symbol
- £ British money
- ¥ Chinese money
- &euro European money
- ® Registered symbol
- &trade Trademark symbol
- &lsquo &rsquo ‘ ‘
- &ldquo &rdquo ” “
- × x
Common HTML tags
Comments in HTML are like so <!– –>
<address></address> Physical, Email, Phone etc.
<ol> <ul> <li>
<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.
<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.
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.
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.
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 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.
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”.
<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.
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 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.
<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> 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.