Practical HTML5 and CSS3 for real writers at ASTC (NSW) 2014
I’m attending the annual conference of the Australian Society for Technical Communication (NSW), ASTC (NSW) 2014. These are my session notes from the conference. All credit goes to the presenter, and any mistakes are mine. I’m sharing these notes on my blog, as they may be useful to other technical communicators. Also, I’d like to let others know of the skills and knowledge so generously shared by the presenter.
Dave Gash presented a session on “Practical HTML5 & CSS3 for real writers”. He promised us lots of code, “but nothing you can’t handle”. He also let us know that 11% of Americans think HTML is an STD. 🙂
HTML5
Dave walked us through the current state of HTML, and HTML5 in particular. HTML5 isn’t a single thing. It’s a set of related things, some of which are supported now and some of which will be supported in future. So, when assessing whether a particular browser supports HTML5, you should look on a feature-by-feature basis.
Many of the HTML5 features are not particularly applicable to technical writing: Audio and video, canvas, geolocation, web workers and web sockets, and more.
For us as technical writers, focusing on content, the semantic structural elements are particularly interesting, such as <article>, <aside>, <nav>, and so on, that let us add meaningful HTML tags to our content. In HTML4, there were very few semantic tags. We end up using a large number of DIV tags, in series and nested. It’s very hard to discover the meaning in them. You can’t visualise how they’re used. HTML5 goes towards solving this problem.
To decide on the new tags, the W3C sent out bots that mined existing pages on the Web, analysed all the <div> elements that people are using, and created the new tags based on the results.
Note that the HTML5 tags don’t actually do anything. They don’t have any styles attached. You need to add the styling yourself. Elements that describe their content but don’t add style are the essence of structured authoring.
CSS3
CSS3 also has a lot of stuff that’s not particularly useful to technical writers, as well as features that are.
Live demo
Dave walked us through a live demo, changing an existing web page from HTML4 to HTML5 and giving it structure and style. He showed us how to simplify the <html> and <head> elements, and walked us through the conversion of multiple <div> tags to the new semantic HTML5 elements. The resulting code was much easier to understand. Nesting of elements allows for a lot of flexibility.
The CSS on the sample page was fairly non-specific. It had mostly independent classes, which can apply to any element, and there was no obvious relationship between the content and the structure. The CSS class names used mixed case, which is a disaster waiting to happen. Dave changed this so the code was all lower case, and added dependent classes and descendent (contextual) selectors. These two techniques are useful to restrict the style to elements that are within another element, and thus reduce the chance of mistakenly applying styles to the wrong parts of the page.
Dave also showed us the CSS features that allow you to add rounded corners, shadows, drop caps, and link nudging (moving a link slightly on hover) via CSS3 transitions. First, you define a CSS transition on a specific link. Then use a hover pseudo-class to cause the transition to happen when the cursor hovers over the link.
Conclusion
I love Dave’s style. He had us roaring with laughter, which is quite a feat given the technical nature of the content. Thanks Dave!
Posted on 17 October 2014, in ASTC, technical writing and tagged ASTC, ASTC (NSW). Bookmark the permalink. Leave a comment.
ffeathers 
Leave a comment
Comments 0