Getting High Fives with HTML5
BY Justin Torres
LISTEN
The source code of the Internet has always been a loosely interpreted language, with each browser having their own take on how web pages should be rendered for users.
The latest version of HTML is a huge improvement because it normalizes ideas that developers want to write once and work across all browsers.
Standards matter
The standards published by W3C incorporate decades of patterns that simplify the instructions that make up the web. There have been several different variations of HTML such as XHTML and DOM Level 2 HTML, as well as Javascript and CSS, which have all been loosely defined and interpreted differently by browsers. If you wanted to style a box of content to look consistent across different machines, you would have several tricks to ensure the pixels matched.
HTML5 is a generational leap in making the web a better place. It subsumes different variations of syntax into one single standard, introduces many new elements and improves the source code to be more human readable. Unfortunately, a lot of these changes are much needed revisions on old implementations and are not entirely reverse compatible.
Legacy, out-of-date browsers are the most detrimental to the Internet. Since browsers have been around, there have been security holes and exploits in browsers. Not only does running an older browser put your machine and personal data at risk, but web pages will appear ‘broken’ or featureless unless there are fallbacks in place which are expensive to implement.
The era of HTML4 was ruled by Internet Explorer. Browser market share varies depending on the source, but the consensus is that IE now controls less than 50 percent, and its share is steadily declining. HTML5 was released in a time when browsers like Chrome, Firefox and Opera push out quicker updates and reduce the window during which users are behind technologically.
Finally, Markup designed for semantics
The new version of the HTML specification brings a plethora of elements which makes code easier to read and browsers easier to interface. An easy way to tell if you are viewing an HTML5 page is to view the source and look at the very first line for the document declaration. An old declaration will look something like:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
This long string of text would tell browsers and website validators the type of syntax in which the page was supposed to be written. With the new HTML5 specification, which eliminates the need for different specifications, all you should see is:
<!DOCTYPE html>
That’s all that is needed to define the document as the latest spec. Other new tags such as <main>, <header>, <footer>, <content>, and <aside> don’t produce visually different elements but instead give pages a richer semantic structure which makes it easier for search engines to distinguish content and navigational elements.
New APIs for smarter pages
Flash is a tremendous burden on internet users: it’s resource intensive, expensive and difficult to create and has been the target of countless security exploits. It has been kept on life support because of its perceived simplicity in playing audio and video files. Now we have the <video> and <audio> tags, which play hardware accelerated media in as little as one line of code without the need for any plugins.
Consumer hardware is far more powerful than it was 15 years ago, and many presentation elements are being shifted from servers back to the user’s machine. The <canvas> element allows for simple, bitmap based manipulation of 2D elements to be done on the fly. A user could add text or even draw on an image without desktop editing software.
Scalabe Vector Graphics (SVGs) are also enjoying increasing support. Instead of saving an icon or logo as a bitmap image (which is better suited for larger images, photographs), it can be exported into a file which contains the maths that make up the icon. The SVG file can be embedded inside the HTML document itself, which greatly improves page speed by reducing the number of requests it has to make.
Web storage is the likely successor to cookies since it offers a better API, 1,000 times more data capacity per entry and allows web applications to manipulate user specific information all in the browser without needed to have a connection. It means web applications can use your browser as a temporary or semi-permanent database, perfect for offline use.
Safe handling of user input is a mandatory practice. Server side validation should always be done but client-side validation (before information is sent to your server) is not as common because it needed a Javascript approach. Now a few attributes on your form fields will ensure the user is made aware of incorrect data entry and prevent the form from being submitted.
With great markup comes great stylesheets
HTML5 brings desired improvements to the structure of web pages by unifying the various hacks and underdeveloped ideas. This alone doesn’t make beautiful and user-friendly pages. Cascading style sheets, now in its third version (CSS3), separates content and design on web pages.
CSS3 brings greater control over how content can be styled and better effects without the need to use Javascript or pre-made images. Responsive web-design, the de facto method of building web pages, is made possible thanks to media queries: CSS which is only applied when certain conditions about the user’s display are met. Media queries can style the page depending on screen size and even pixel density.
Other changes that have been introduced include 3D transformations, keyframe animation, storing images as data and fancy text decoration techniques such as shadows and borders. These new CSS declarations are great for developers because it means fewer lines of code which are easy to maintain, and great for users because nicer effects are produced from fewer computational resources.
Making a good thing better
With CSS3 and modern Javascript APIs, it’s possible to make beautiful user experiences that work across all browsers. Search engines will also love your site because they put more weight on well formatted pages that use rich markup tags to distinguish content. HTML5 is not the ultimate technology to answer all technology problems, but it is a huge step in defining a cohesive language that has been difficult to understand.
LATEST STORIES
MORE STORIES
Lawyers in New York Used ChatGPT and Now Face Possible Sanctions
Several lawyers are under scrutiny and face potential sanctions after utilizing OpenAI’s advanced language model, ChatGPT, for the drafting of legal documents submitted in a New York federal court. The attention surrounding this matter stems from the erroneous citation of non-existent or irrelevant cases by ChatGPT. The adoption of AI in legal practice is not…
Google has Changed their Mind About AI Generated Content
Their change in terms essentially amounts to, “Yes, you can use AI tools to help create quality content but it had better be good.”
What Makes a Great Law Firm Marketing Director?
In an ever-changing legal landscape, an exceptional Law Firm Marketing Director stays ahead of the curve. They adopt a visionary perspective to navigate through intricate legal landscapes and drive the firm’s marketing initiatives. This involves identifying market trends, predicting client needs, and planning innovative marketing strategies to secure a competitive edge.
