HyperText Markup Language Syntax
In my previous post I mentioned something called HTML. I chose to learn HTML before throwing myself into any actual programming languages so that I didn’t scare myself off as it is far more readable. It’s important to note that HTML is NOT a programming language, it is exactly what it’s name suggests: a markup language. HTML structures our websites and makes them easier to read. I read a piece recently that described HTML as “building blocks” and I feel this analogy works well for me. Each HTML tag/element is a block added to your page foundations. There wouldn’t be content to manipulate on your webpage if there was no basic HTML, so I am not saying that it is not worth learning because it definitely has a very important place in web development and is a fantastic place to begin if you’ve never seen any code before.
HTML, for me, made sense because it is a markup language so it is intended to provide semantics. It describes the content that you’re placing in the browser document, marking up paragraphs, headings, images etc. HTML 2.0 was specified as a standard, that new implementations would be based upon, in the 90’s and since then it has expanded. Most recently was the move from HTML4 to HTML5. HTML5 is the current specification, and if you have a burning desire to read through it then you can find the recommendations on the World Wide Web Consortium[ W3C] webpage. If you are serious about learning to code, you probably should glance through the recommendations! HTML5 has added some fantastic new markup which will greatly help the semantics of a page’s markup. For example: prior to HTML5 the < div > tag provided a container which grouped content together, but did not specify what content. In HTML5 we now have the option of more specific elements such as the header, footer, aside, article, main, section and nav *takes a breath* to name just a few. For example, this content could be placed inside an “article”element and that tells the reader that the content is intended as an article. This is just a small area of improvement, you can find a lot more over on W3C: HTML5 Differences from HTML4.
So, HTML5. Let’s say you wanted to start marking up a webpage. The first thing you’ll want to do is download a text editor, personally I use brackets and I’ll be completely honest it’s because my husband already had it installed on the mac, but I know many people will use an editor like sublime, atom or notepad++. I found this article useful though for the differences between them and the available free vs paid editors: Best Text Editors. Open a new page and save it as .html and you have started! It will look something like this:
When you add content it will look a little like this:
The basic syntax of HTML5, the way it is made up, is to use opening and closing tags. You’ll see things that look like this < p > opening tag and < / p > a closing tag, or the div tag that I mentioned earlier would be marked like this < div >some content here< /div >.As you can see we can state it is a closing tag by using / . The tags and the content inside of them make a HTML element:
e.g < p > Hello my name is Emma!< / p >
It is important to close your tags otherwise it makes for messy code and can cause issues such as improperly rendering your page. In theory, you can get away with it and the markup will still work, but it doesn’t take much to close a tag and actually most editors will close your tags for you!
To throw a little spanner in the works, some tags don’t require closing, if they don’t have content between them. For example the < hr > tag is self closing and makes a horizontal line, or the < br > tag produces a line break but does not require a closing tag.
And that’s the basic syntax of HTML5! There is a lot to build on from there, things like attributes etc but I have found that short bursts of information are far more helpful than an essay of text. I hope discussing my learning with you in short bursts will make coding appear more accessible, even if it just gives you a new appreciation for the webpages you browse or provides you with further resources for your own learning!
The the most helpful advice I have had so far is that you will not remember every single available HTML5 tag/element. That is what google is for! It is important you know and memorise the boilerplate or most used tags, but even professional developers still use google if they can’t remember things. The coding community is impressive and keen to share knowledge, so odds are someone will have written about the element/tag you want to find. A good resource for this is Mozilla – provides an absolute wealth of knowledge! I’ll move on to coding our HTML5 boilerplate in my next post.