Starting Out With HTML5

This week’s assignment had all of us create a .html file using HTML5.  Pretty basic page that had to include the following:

• Headings
• Embedded pictures
• Paragraph of text
• Link to a website
• Mailto link
• Color change to font or background

Luckily, this wasn’t my first foray into HTML5.  As a part time website developer (technically, website customizer), I’ve spent many hours teaching myself to read HTML5.  But like most foreign languages with me, I can “read” them much better than I can “speak” them.  This brings me to my obstacles that I ran into.  Most of my issues deal with style attributes and how to define them properly.  Most of the tools that I use to create websites utilize a WYSIWYG (What You See Is What You Get) editor.  This is very much like the editor used to create this blog post.  There are buttons one can click to make font bold or italics.  You can define different headings based on highlighting text and selecting the Style drop down.  Change font by clicking that drop down.  And so on.  My point is that there’s a button for almost everything style related.  And I normally take advantage of that.  Instead of writing out the code to build a table, I just click on the “Insert Table” button.  But I do like to toggle over to the HTML source code and look at how it is all constructed.  Adding or tweaking the code from there.

The bad thing about relying on an editor is that you become dependent on it and don’t really learn those little style elements and the best way to write them.  Another bad thing about using editors is that using Copy and Paste from external sources (and sometimes internal sources) causes a ton of extra formatting code to be inserted.  This can cause a huge headache in making sure all of the formatting is consistent.  To prove that, next time you write one of these blog posts or a discussion board post, copy one sentence from inside your editor and paste it inside that same post.  Then click the HTML button to look at your code.  You’ll notice that the editor copied the formatting of the text in the editor to your pasted sentence.  Resulting in a long string of messy, unnecessary code.  Anyway…I digress.

My biggest issue usually has to do with spaces, colons, parenthesis, quotes and the such.  Don’t know how many times I’ve thought, “Ok…is there supposed to be a space here?  Or does it go after the quote?  Wait, do I need a semi-colon here or is that at the end of the string?” To overcome that issue, I usually go to w3schools.com to make sure I’ve properly formatted my content.  There I can find the correct syntax for what I’m trying to accomplish and if that particular bit of functionality is supported by HTML5.

I guess my greatest success in HTML5 comes from just clicking that HTML button or the Source Code button (depending on your editor).  Looking at properly formatted code goes a long way.  So many times, I’ll go to a website I like and right-click and View Source or hit F12.  This lets me look at the code behind the sites.  Most of the sites I build are on Content Management Systems (CMS) like Joomla or WordPress.  Inevitably, I have to customize certain aspects of the system for clients, but it’s nice to see how it’s built and what the correct code should look like.

All that being said, I’m excited for this section of the course because I want to strengthen my HTML5 and CSS knowledge.  Nothing builds that knowledge like just pulling up a text editor and writing code.