At HTML Goodies, we strive to give you as many options as possible for your web design projects. Interviewing experts is a good way to go, because you will learn from working professionals. In this article, we look at the words of Paul Oostenrijk, Ian Reynolds, and Jordi Ensenyat Disseny. Here are 7 things you need to know:
- The first thing to realize is HTML5 is the latest form of the language, offering new elements and type sets that browsers need to support.
- HTML5 comes with descriptive tags. HTML4 had a head and body tag that defined what the element was. HTML5 goes further. Elements such as header, section, and article give good context in the markup language, making it beneficial for browsers and search engines to crawl your website. Other tag options are aside, details, figcaption, figure, footer, main, mark, nav, summary, and time.
Be careful with the <base> tag. If you set that at the top of your page all links will be relative to that base directory. It is usually just easier and more intuitive to read if you use the absolute path.
Tags that do styling are not deprecated. For best results, all styling should happen in CSS to keep things clean.
- With new device types and inputs, there are now new form element types to use. These element types define what kind of validation or input keyboard type can be used. This way, browsers, and devices can show or act differently per form element type with for example email or number form element types.
- It was a big announcement when Apple removed Adobe Flash capabilities from their Safari Mobile browser. There wasn’t any alternative to Flash for developers to show video or add audio media on their websites. HTML5 now includes media HTML elements that make it easy for developers to include video or audio on their website that works on all devices.
- You must declare a DOCTYPE. The declaration should be the first line in the html document. You should use the HTML5 doctype and that will activate standard mode in most browsers. HTML5 was built to be backwards compatible so you don’t need to do older XML attribute declarations, this just clutters the code and is not necessary.
- When writing HTML5 code, a good practice is to name element classes. Write your class-name in front of every element with the first letter of that element followed by the desired class name. As an example, if you are going to name a span element that contains a date, you should name it as something like “sdate.” For a container div it should be “dcontainer,” etc. This will make the code easier to read and will give a better flow to the coding process.
It’s important not to do everything from scratch. When possible, make use of existing libraries, frameworks, and designs that come close to what you want for a finished product. A great ongoing design practice is to create a folder of designs that you like. These will spark your creativity when new projects come along.
Make sure the code is safe and that by using a given approach, that you’re not violating any copyrights. If in doubt, ask. Some software programs such as Adobe Dreamweaver, have frameworks such as Bootstrap, built into the program.
- As with other articles, here’s a grab bag of coding practices to give you the best results:
- Always plan out your projects on paper before you begin (sometimes known as storyboarding). This is where you can fix problems, quickly. It would be harder and more time-consuming later, if you had to do so while coding. Once you have planned out the entire workflow, you have, essentially, built the site. All you have to do is transfer it to code.
- When writing code, make sure you keep detailed notes in the form of commenting in the code, a log book as backup and, if the process is complex, to create a checklist where you detail all the steps and include screen shots, if necessary. This will make like easier for those who come after you.
- Always test your code. Never assume there are no problems when you are done. Few things are worse than finding out, after the fact, that you made mistakes that could have been resolved with testing.
- Of the many software programs which support HTML5, some include sample layouts or basic styles that you can use as a foundation for your own designs.
About the Author
Nathan Segal has been working as a freelance writer for 18 years. In that time he has published more than 1,000 articles and has written 9 books. You can learn more about him at http://NathanSegal.org.
