CSS 3 has quite a few new concepts. Let’s take a look:

New properties

• Borders: border-color, border-image, border-radius, box-shadow.
• Backgrounds: background-origin, background-clip, background-size, layering multiple background images.
• Color: HSL colors, HSLA colors, RGBA colors opacity.
• Text: text-shadow, text-overflow.
• Interface: box-sizing, resize.
• Selectors: attribute selectors.
• Formats: media queries, multiple column layout, speech.

New features

Using these new properties we’ll be able to achieve things such as:

• Borders, background
  CSS 3 will allow images for borders, round corners and shadows. Objects can not only be positioned, but its direction can also be changed (horizontal or vertical).
• Multi-column layout
  Designing pages with multiple columns now will be easier than ever. Until now we needed to enclose the content in two separate DIVs to simulate a two-column layout; now we’ll just use column-count: 2. Not all that hard, right?
• Advanced Layout
  This new feature will allow objects to be distributed along the screen in a better an easier way, and combine them in different manners without additional tags. Besides, the page model will be included: this means that we will be able to indicate page footers, crossed references, and section headers.
• Selectors
  There are new selectors to make it easier locating exactly the element you want:
  E:only-of-type: an element which is unique in its type.
  E:not(s): an element which doesn’t match simple selector.
  E ~ F: an element F with an element E right before.
  E:nth-child: the n-th child element of a parent node. With this selector we’ll be able to implement things such as zebra tables.
  E:nth-last-child: the last child element from a parent node.
  E:nth-of-type: the n-th element which is of a certain type.
  E:first-of-type: the first element which is of a certain type.
• Resizing
  Up till now, if we wanted our elements to be resizable we needed to use Javascript to alter its attributes. With CSS 3 it will now be a task of the browser, just by using the resize property.
• And many more things …

Some properties of CSS 3 are already being implemented in most major browsers. There’s not a 100% fully compliant web browser yet (specially because CSS 3 is not finished yet), but it won’t take much time to have one. This means that maybe we won’t be able to use all of these new features right now, but we can certainly start using some of them. So, what are you waiting for? The sooner the better!

Further reading

• W3C CSS3
• www.css3.info
• 70 Must-Have CSS3 and HTML5 Tutorials and Resources

Related posts:

1. HTML 5: dramatic improvements in the web language
2. The Semantic Web

New tags

• <article /> This new element defines a portion of the content as an article. Perfect for newspapers or blogs.
• <aside /> Represents a fragment of information that slightly relates with the rest of the content.
• <dialog /> Depicts conversations.
• <figure /> Used to associate a caption with an embedded content, such as graphics or video.
• <footer /> Page section to hold author information, copyright statement, etc…
• <header /> Page section to hold some introductory information.
• <nav /> Section oriented to navigation.
• <section /> Element that defines a generic section.
• <audio /> and <video /> Provides multimedia content.
• <embed /> Supports plugin contents.
• <m /> Marked text.
• <meter /> Used to display measures.
• <time /> Used to display dates and/or time.
• <canvas /> Used to show real-time renderized graphics, such as games. For example, Sierra adventure games.
• <command /> Related with commands a user can invoke.
• <datagrid /> Shows additional information if it is requested by the user.
• <datalist /> Used together with the new attribute for <input /> can be used to create comboboxes.
• <output /> Denotes what kind of output the page produces.
• <progress /> Represents a progress bar in a time consuming task, such as donwloading a file.

New local attributes

There’s a few new attributes for some of the elements that were already present in HTML4.

• media: for greater consistency with the link element.
• ping: whitespace-delimited URLs list to which a ping will be produced when the link is followed. For the elements <area /> and <a />.
• target: for greater consistency the <a /> element.
• autofocus: indicates that the <input />, <select />, <textarea /> or <button /> element should get the focus at page load.
• form: attribute for <input />, <ouput />, <select /> <textarea />, <button /> and <fieldset /> which allows them to be associated to a form. This way, they can now be placed anywhere on a page, not as children of the form element.
• replace: will affect the element once changes are performed to it. For elements <input />, <button /> and <form />.
• data: specifies data for the elements <form />, <select /> and <datalist />.
• required: denotes a required element, for <input /> and <textarea />.
• disabled: for the <fieldset /> element.
• autocomplete, min, max, pattern, step: these attributes delimitate the possibilities of the <input /> element.
• list: for <datalist /> and <select /> elements.
• template: for <input /> and <button /> elements, it will be used to repeat templates.
• scoped: for the <style /> element, enables the use of scoped style sheets.
• async: for the <script /> element. AJAX turned into an attribute.

New global attributes

Some attributes that apply to the whole web page document:

• contenteditable: denotes an editable area.
• contextmenu: contextual menu supplied by the user.
• draggable: … needs explanation?
• tabindex: a numeric value representing the order of elements we will tour around when pressing the TAB key.
• irrelevant: … need I say more?
• repeat, repeat-start, repeat-min, repeat-max: these attributes refer to iterations.

HTMLDocument extensions

There are some improvements, and some other elements that finally get standarized:

• getElementsByClassName(): selects elements given a class. Time responses seem to be dramatically improved by using this function.
• innerHTML: present in all ECMAScript implementations, it was not a standard till now.
• activeElement, hasFocus(): will allow us to know which is element is active and which one has the focus.
• getSelection(): returns an object with the current selection.
• designMode, execCommand(): used to edit documents.

HTMLElement extensions:

The DOM element has also had some changes:

• getElementsByClassName(): returns the children of an element that has a given class.
• innerHTML: reads/changes the content of a node.
• classList: a very interesting implementation that, along with className, lets us interact with element classes, providing methods such as has(), toggle(), add() and remove().
• relList: works as classList on the rel attributes of the elements <a />, <area /> and <link />.

This is just a quick overview of the most important changes that HTML will bring. But there’s many more not mentioned here. For a complete reference guide, consult the W3C official draft.

HTML 5 is still a draft. Its definition is not finished yet. But all major browsers are already starting to implement some of its features. There’s still many years to wait for HTML 5 to be as widespread as HTML 4.01 is today, but the improvements this new version bring are so impressive that may affect its adoption speed. The originally proposed name for HTML 5 was Web Applications 1.0, which provides a very good idea about the goal of this new standard.

Further reading

• Yes, you can use HTML 5 today!
• HTML 5 cheat sheet
• Coding an HTML 5 layout from scratch
• A selection of supported features in HTML 5
• Preparing for HTML 5 with semantic class names

Related posts:

1. CSS 3: one more step in the evolution of the web
2. HTML 5 Web Sockets
3. The Semantic Web

Semantics is the study of meaning, usually in language. The word “semantics” itself denotes a range of ideas [...]. It is often used [...] to denote a problem of understanding that comes down to word selection or connotation.

The Semantic Web is an extended web, with a greater meaning, in which users will be able to find answers to their questions faster and easier due to a better-defined information. This meaning-based web is supported by a set of standardized  languages that solve the problems the semantic-less web has, in which access to some information is a difficult and frustrating task.

The web has changed the way we communicate and do our work. Worldwide low-cost instantaneous communication is possible nowadays. We have access to millions of resources, regardless of our geographic location or language. These features have made the web tremendously successful… and at the same time they have provided its biggest problems: information overload and heterogeneity of information sources.

The Semantic Web aims at solving these two great problems, allowing software to perform some of the tasks the user must take care of now. Thanks to semantics in the web, software can process its contents and make logical decisions to solve everyday problems automatically.

Imagine you would want to find the nearest open pharmacy. You would go to your favorite web search engine and type “pharmacies open right now”. Today’s search engines would offer different information about pharmacies, but nothing related to what the user exactly wants to know. The next step would be to go through all the options listed and manually search for the precise information. Figure 1 shows the results a user would get with a regular search engine today.

By building semantics into the core of the web the search results would be accurate. Software would be able to properly understand what the user is asking for. Figure 2 shows results with a semantic search engine. These results give the user the exact information he was looking for. Geographic location would be detected automatically, and words like “right now” acquire greater sense and get translated to today’s date. All the information would be full of meaning.

The way information will be processed won’t be based on input/output parameters, but on its semantics. The Semantic Web provides an infrastructure based on metadata, allowing software to reason on the web, extending its capabilities.

It’s not about a magical artificial intelligence that will enable machines to understand human words… it’s just the skill of a machine to solve well-defined problems through well-defined operations that will be performed on a well-defined data set.

Further reading

This article covered just the very basics of the Semantic Web. If you’re still interested, you can expand your knowledge at:

• Semantic Web
• Web Ontology Language
• semanticweb.org
• Swoogle: experimental semantic search engine (if you’re going to use this, you might as well be interested in the FAQ)

Related posts:

1. HTML 5: dramatic improvements in the web language