Lazy Loading for Images and Iframes

There is a new attribute in town. It's the loading attribute which can be applied to the img element and the iframe element. This can provide the perception of a quicker loading web page when you set the loading attribute to the value "lazy" on img and iframe elements that are not initially in the browser viewport. The resource is only requested when the web page visitor scrolls near the element. See https://web.dev/native-lazy-loading and https://web.dev/iframe-lazy-loading for more info.

Pausing a GIF with details & summary elements

Cool technique — create the effect of pausing an animated gif using the details and summary elements. See the demo and code at https://css-tricks.com/pause-gif-details-summary/ .

10th Edition of Web Development & Design Foundations with HTML5

The 10th Edition!

A promotion trailer for the 10th edition of Web Development & Design Foundations with HTML5 by Terry Felke-Morris. This book is a great choice for a first course in web design. The approach is hands-on with lots of exercises and case studies that run throughout the book. Topics include: HTML5, CSS, Configure images & multimedia, Responsive Web Design techniques, Accessibility, CSS Flexbox Layout, CSS Grid Layout, Introduction to JavaScript, jQuery, and more!

We are still working on the interactive eText features, but I am very pleased to announce that the 10th edition of my Web Development & Design Foundations with HTML5 book is "available" on the: Pearson website

Also see https://webdevfoundations.net for more information and supporting materials.

10th Edition of Web Development & Design Foundations with HTML5!

New 10th Edition!

The 10th edition of Web Development & Design Foundations is currently in press and should be available Spring 2020.

Building on this textbook’s successful ninth edition, new features for the tenth edition include the following:

• Chapter 7 has been renamed Responsive Page Layout, takes a mobile first approach, and has an expanded focus on new layout systems including CSS Flexible Layout Module (Flexbox) and CSS Grid Layout

• Form layout with the CSS Flexbox and Grid Layout Systems

• Updated coverage of HTML5 elements and attributes

• Updated code samples, case studies, and web resources

• Expanded treatment of page layout design and responsive web design techniques

• Updated reference sections for HTML5 and CSS

• Additional Hands-On Practice exercises

Visit http://webdevfoundations.net for more information about the new book.  

Lazy Loading Images and Iframes with the Google Chrome Browser

Lazy loading is a term that describes delaying the loading of  below-the-fold images until the web page visitor scrolls down the page to them. The major benefits are quicker load times, less bandwidth, and reduced memory usage. Until this announcement by Chrome, developers needed Javascript event handlers create this effect.

The latest version of Chrome browser (Chrome 76) will support native lazy loading, by implementing the new HTML loading attribute for img and iframe elements. 
Values for the loading attribute are:

• auto (default browser loading)
• lazy (defer loading the resource until it reaches a calculated distance from the viewport)
• eager  (load the resource immediately)

Here’s an HTML example of adding lazing loading to the img element:

HTML img element with the loading attribute

Although not yet part of an official W3C HTML5 Recommendation, the loading attribute is in the process of being added to the HTML5 standard and is documented at https://whatpr.org/html/3752/urls-and-fetching.html#lazy-loading-attributes. Keep in mind that at this time only the Chrome browser supports native lazy loading and other browsers will ignore the loading attribute. 

10 Skills You Need to Land a Job as a Front-End Developer

The Web Development & Design Foundations with HTML5 and Basics of Web Design: HTML5 & CSS textbooks get you started on the skills you need to become a front-end web developer....

Graphic courtesy of Skillcrush.com

Create Fullscreen HTML5 Page Background Video

Check out Dudley Storey's informative overview of responsive techniques for configuring a video as a full-page background at "Create Fullscreen HTML5 Page Background Video".

Promo Trailer for 3rd edition of Basics of Web Design: HTML5 & CSS3

Check out the promo trailer for the 3rd edition of my book, Basics of Web Design: HTML5 & CSS3

New 3rd Edition for Basics of Web Design: HTML5 & CSS3!

New 3rd Edition!

It's exciting to announce that my new book, the 3rd edition of Basics of Web Design: HTML5 & CSS3, will be available at Amazon in late January! 

The popular Basics of Web Design: HTML5 & CSS3 textbook provides a foundation in the skills and concepts that web designers need:

• Internet and Web concepts overview
• Create web pages with HTML5
• Configure color and text with CSS
• Configure page layout with CSS
• Configure images and multimedia
• Explore new CSS3 properties
• Apply Web Design Best Practices
• Design accessible and usable web pages
• Design for search engine optimization
• Choose a domain name
• Publish to the Web

The third edition builds on the textbook's successful earlier editions. With the widespread support of HTML5, this edition introduces HTML5 structural elements early (in Chapter 2). Chapter 5 now provides an overview of color theory and an expanded treatment of the use of color in web pages. 

Comprehensive instructor materials are available for the the book from the publisher, Pearson Addison-Wesley. Instructors and faculty can access free downloads of:

• sample syllabi
• exercise solutions
• case study solutions
• PowerPoint presentations
• sample test questions
• website project activity with milestone assignments
• a group website design evaluation activity
• a group WebQuest activity

New 7th Edition for Web Development and Design Foundations with HTML5

It's exciting to announce that my new book, the 7th edition of Web Development and Design Foundations with HTML5, is available at Amazon. 

Building on the textbook's successful 6th edition, the 7th edition continues to integrate HTML and CSS topics such as text configuration, color configuration, and page layout with an enhanced focus on the topics of design, accessibility, and Web standards.

 Updates for the 7th edition include:

• Expanded coverage of new HTML5 elements and attributes 
• Expanded coverage of designing for the mobile web with new sections on responsive web design, mobile web design best practices, viewport meta tag, CSS media queries, flexible images, and testing mobile display 
• Expanded coverage of CSS3 properties, including CSS3 flexible box layout 
• New sections providing an introduction to jQuery 
• Updated code samples, case studies, and web resources

The textbook companion website has a page for each chapter in the text containing the links for URLs listed in the book, information on emerging trends, additional examples, corrections, and review activities.

Comprehensive instructor materials are available for the the book from the publisher, Pearson Addison-Wesley. Instructors and faculty can access free downloads of:

• sample syllabi
• exercise solutions
• case study solutions
• PowerPoint presentations
• sample test questions
• website project activity with milestone assignments
• a group website design evaluation activity
• a group WebQuest activity

HTML5 Popularity Among Fortune 500 Companies

Interesting infographic — note the increased trend in use of HTML5!


HTML5 Popularity Among Fortune 500 Companies - An infographic by the team at INCORE Web Design

New main element in HTML5.1

The HTML5 structural elements (header, nav, footer, section, article, and aside) have a long-awaited new friend: the main element. Use the main element to contain the main content of a web page. For more details about the main element, check out the following resources:

• Main element added to HTML 5.1
• W3C HTML5.1 Spec

New 2nd Edition for Basics of Web Design: HTML5 & CSS3

It's exciting to announce that my new book, the 2nd edition of Basics of Web Design: HTML5 & CSS3, is available at Amazon. 

Building on the textbook's successful first edition, we kept what you like — topics introduced in two pages, color illustrations and screen captures, lots of hands-on practice exercises, and a case study website that students build as they work through the book. We heard your suggestions to remove XHTML topics and to add another case study.  There are now two running case study websites for students to practice with. 

Comprehensive instructor materials are available for the the book from the publisher, Pearson Addison-Wesley. Instructors and faculty can access free downloads of:

• sample syllabi
• exercise solutions
• case study solutions
• PowerPoint presentations
• sample test questions
• website project activity with milestone assignments
• a group website design evaluation activity
• a group WebQuest activity

W3C Conference Presentations Streamed Live

W3Conf: Practical Standards for Web Professionals will be held on November 15-16, 2011. There is a well-rounded line up of presentations including web standards, HTML5, CSS, and universal access. See the conference presentation schedule. What's really cool is that the presentations will be streamed live and archived at http://www.w3.org/conf/live.html.

Get Started with HTML5 Today!

There is a lot of buzz about HTML5 these days, which will be the successor to HTML 4 and replace XHTML. If you already use HTML 4 or XHTML to design web pages, you're probably wondering how to begin using HTML5.

Currently in draft statusMoved to Candidate Recommendation status by the W3C in late 2012, HTML5 is a superset of HTML 4, provides for the use of XHTML-like syntax (such as enclosing attributes within quotation marks, and always coding both opening and closing tags), and is intended to be backward compatible. The working draft of HTML5 is available at http://www.w3.org/TR/html5. An explanation of the differences between HTML 4 and HTML5 is located at http://www.w3.org/TR/html5-diff.

It’s possible to begin using HTML5 right away! The recent versions of popular browsers, such as Internet Explorer 9, Firefox 4(and later), Safari 5, Google Chrome, and Opera 10 already support some of the new features of HTML5. When new versions of each browser are released, you can expect increased support of HTML5. As you learn to design web pages you need to not only know what works today in current browsers, but also to get ready to use new HTML5 coding techniques. Since HTML5 is in draft status and may change, so consult http://www.w3.org/TR/html-markup for a current list of HTML5 elements.

Document Type Definition

Because multiple versions and types of HTML and XHTML exist, the W3C recommends identifying the type of markup language used in a web page document with a Document Type Definition (DTD). The DTD identifies the version of HTML contained in your document. Browsers and HTML code validators can use the information in the DTD when processing the web page. The DTD statement, commonly called a doctype statement, is placed at the top of a web page document. The DTD for HTML5 is
<!DOCTYPE html>
That’s a lot easier than the old HTML4 and XHTML DTDs!

Your First HTML5 Web Page

The syntax of HTML5 is streamlined and easier to use than HTML 4.0 and XHTML. You are free to code with upper and lowercase letters as well as optionally close container tags. However, that could lead to web pages with display problems and processing problems when you begin to add technologies such as CSS and JavaScript to the mix. So, I follow the coding conventions for HTML5:

• use lowercase letters
• place quotes around attribute values
• always code closing tags for container elements.

This rigorous coding style will help to prevent many CSS layout and JavaScript processing issues that you might otherwise encounter.

Let's get started with your first HTML5 web page! Just as with XHTML and HTML 4.0, the HTML5 doctype statement is the first line in the document. Next, the web page begins with an opening <html> tag and ends with a closing </html>tag. These tags indicate that the text between them is HTML formatted and tells the browser how to interpret the document. Use the lang attribute on the opening html tag to indicate the language of the web page content. Since our web page is in English, we’ll use lang="en". For example, <html lang="en">
You’ll continue to use head, title, and body elements as you did in earlier versions of HTML/XHTML. Something that may be new is to use the self-contained <meta> tag to indicate the character encoding, which will typically be coded as
<meta charset="utf-8">
Note that self-contained, or stand-alone tags are referred to as void elements in HTML5. Although self-contained elements are coded with an ending slash in XHTML (for example, the XHTML line break tag is coded as <br />), the HTML5 syntax for void elements is more streamlined — the HTML5 code for the line break tag is <br>.
To summarize, every HTML5 web page contains the doctype statement followed by the html, head, title, meta, and body elements. A basic HTML5 web page template is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML5 Web Page</title>
<meta charset="utf-8">
</head>
<body>
Hello World
</body>
</html>
The figure below shows the web page source code displayed in the Notepad text editor.

The figure below depicts the browser display of the web page.

More About HTML5

Now that you’ve seen an example of the syntax; now let’s delve deeper into HTML5.

Structural Elements

Take a moment and think about how you typically structure a web page layout with div elements. You may find that it’s common to use ids or classes with names such as header, nav, or footer. HTML5 has several new structural elements that render as block display specifically intended for organizing web pages:

• <header> contains the heading information for a page area section. The header element is block display and will typically contain one or more heading level elements (h1 through h6) and, optionally, the hgroup element
• <hgroup>The hgroup element groups heading level tags and is useful if the logo header area of a web page contains both the website name and a tagline
• <nav> contains a section of navigation links
• <aside> contains sidebar, note or other tangential content
• <footer> contains the footer of a section.
• <article> contains an independent entry, such as a blog posting, comment, or e-zine article
• <section> contains a “section” of a document, such as a chapter or topic. A section might contain <header>, <footer>, and other elements needed to display the content
• <figure> and <figcaption> associates a caption with an image or video

The wireframe below shows a page layout using the new header, nav, section, figure, and footer elements.

Phrase Elements

HTML5 revisits the former physical style and logical style elements – now called phrase elements. Semantic uses of common phrase elements follow:

• <b> Bold text with no particular importance
• <strong> Bold text with strong importance
• <i> Italic text with no particular emphasis
• <em> Italic text that is emphasized
• <small> Small-size text that semantically indicates small or fine print – like a legal notice

HTML5 adds new inline display elements that are intended to provide more options for semantic markup of web page content. For example, the new <mark> element configures text as “marked” or highlighted.

New Multimedia Elements

HTML 5 contains several new elements that are intended to simplify displaying multimedia in web pages.

• <video> configures embedded video.
• <audio> configures embedded audio.
• <embed> configures plug-in content
• <canvas> provides for dynamically drawing graphics and interactive games with scripting (JavaScript)
   

More New Elements

HTML 5 contains new elements for a variety of purposes, such as progress, meter, dialog, menu, and more. New HTML5 form controls are configures using new attribute values for the input element. And there's even more! See http://www.w3.org/TR/html-markup/ and explore the list of elements.

Elements Eliminated

A number of elements were listed as deprecated in HTML 4 and XHTML. Some of these deprecated elements were eliminated from HTML5, such as <big>, <center>, <frame> , <frameset>, and <noframes>.

HTML5 & Today’s Browsers

Internet Explorer 9 and current versions of Safari, Chrome, Firefox, and Opera offer good support of HTML5 structural elements. The issue is that many people still use earlier versions of browsers. There are two different approaches you can follow if you’d like to begin using HTML5 today: a conservative, straightforward approach and a progressive approach that is more involved and requires JavaScript.

Conservative Approach to Using HTML5 Today

For the best chance at compatibility, code using either HTML5 or XHTML syntax and avoid using the new HTML5 elements. Instead, use <div> tags to structure page areas and configure the new element names as class names or id names. For example, the opening div tag that contains the page footer area could be coded as
<div class="footer"> instead of using the new HTML5 <footer> tag. In this way you’ll become used to the new element names and it will be easier to update the pages to all HTML5 later on. As time goes by and older browsers are used less and less, you’ll be all set!

Progressive Approach to Using HTML5 Today

Code using new HTML5 elements and include CSS that configures older non-supporting browsers to render the HTML5 header, hgroup, figure, figcaption, footer, nav, section, article, and aside elements as block display (use display: block;). This will work well in all browsers except for Internet Explorer 8 and below. The CSS code follows:

header, hgroup, nav, footer, figure, figcaption, section, aside, article { display: block; }

So, what to do about Internet Explorer 8 and below? Remy Sharp offers a solution, called the HTML5 Shim,  to enhance the support of Internet Explorer version 8 and earlier (see http://remysharp.com/2009/01/07/html5-enabling-script). The technique uses conditional comments that are only supported by Internet Explorer and are ignored by other browsers. The conditional comments cause Internet Explorer to interpret JavaScript statements that configure it to recognize and process CSS for the new HTML5 element selectors. Remy Sharp has uploaded the script to Google’s code project and has made it available for anyone to use. Add the following code to the head section of a web page after CSS to cause Internet Explorer (versions 8 and earlier) to correctly render your HTML5 code:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
What's the drawback to this approach? Be aware that your web page visitors using Internet Explorer (version 8 and earlier) may see a warning message and must have JavaScript enabled for this method to work.

Keep in mind that the W3C still needs to complete the process to move HTML5 from draft to recommendation status. Although new browser versions will offer increased support for HTML , not all your website visitors will install the latest version and workarounds will be likely (such as the CSS styles and script shown above). However, it’s important to be aware of HTML5—it’s the way of the future! And, you can confidently use it in a conservative manner today!

Explore the following resources to learn more about HTML5:

• W3C’s Web Developer’s Guide to HTML5
  http://dev.w3.org/html5/html-author
• W3C’s Interactive Chart of HTML 4 and HTML5 Elements
  http://dev.w3.org/html5/html-author/#comparison-of-html-4.01-and-html-5-elements
• HTML5 Doctor
  http://html5doctor.com
• HTML5 Demos
  http://html5demos.com
• HTML5 Cheat Sheet
  http://media1.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf

Adobe's Expressive Web

Adobe's new resource site, http://theexpressiveweb.com, showcases new HTML5 & CSS3 coding techniques, including CSS3 Animations, CSS3 Media Queries, HTML5 Canvas, Web Storage, and more! The site is organized by coding techniques, called "features" by Adobe — and provides for each feature with an overview, examples, browser support chart, detection and fallback strategies, and list of related Adobe technologies.

New HTML5 Logo from the W3C

The W3C's new HTML5 logo is here! Visit http://www.w3.org/html/logo for free downloads of image files, free stickers, and other fun stuff.

Although some may question the need for a "logo", it's one way to spread the word about this emerging technology.

The key is the concept of progressive enhancement — use HTML5 new elements, attributes, and features to enhance web pages rather than for mission critical requirements. My new book, Web Design Basics: HTML5 & CSS3, takes this approach.

New HTML5 & CSS3 Textbook

Looking ahead to an early March, 2011 publishing date for my new textbook, Basics of Web Design: HTML5 & CSS3! The textbook takes a unique approach to prepare students to design web pages that work today in addition to being ready to take advantage of new HTML5 coding techniques of the future.

Use HTML5 Today!

To meet this challenging goal, Basics of Web Design: HTML5 & CSS3 introduces both XHTML syntax and HTML5 syntax, presents coding web pages in HTML5 with backwards-compatible techniques that work in current browsers, and also provides practice with HTML5's new features that will only work in the latest versions of browsers.

Two-Page Sections

Today's learners are busy multitaskers. Basics of Web Design: HTML5 & CSS3 is organized in two-page sections that quickly introduce the reader to new topics, provide examples, and offer hands-on exercises. This approach will get your students up-and-running quickly. Visit http://webdevbasics.net for more info and a table of contents.

HTML5 Online Conference

If you've been looking for a quick way to get up-to-speed on HTML5, check out ThinkVitamin's HTML5 Online Conference on April 12, 2010. It's four hours of online presentations from some leading edge web developers:

• An Introduction to HTML5
  
• HTML5 Canvas, Video & Forms
  
• HTML5 Web Sockets, Web Workers, and Geolocation Unleasehed
  
• HTML5 Storage APIs
  

Purchase HTML5 Conference Ticket Here