HTML is written in a kind of broken English – more similar to teenage texting grammar than anything else, I’d say – which make it much easier to learn and understand.
‘img’ = ‘image.’ That’s somewhat straightforward. Here’s a few other examples:
‘h1’ = ‘headline text: largest size’
‘h2’ = ‘headline text – second-largest size’
‘p’ = ‘paragraph’
Of course, there are exceptions to this. One common tag whose syntax does not clearly reflect its function is the HTML tag to create a link:
‘a’ = ‘create a link.’
Well, why ‘a?’ Why not ‘link? (short answer: ‘link’ was already taken). In this case, ‘a’ is short for the word ‘anchor.’ Have you ever visited a website that had links at the top of the page, and when you clicked them, the link scrolled you down that same page? Well, that is an ‘anchor.’ To put that another way, anchors can be used to create links on the same page you’re linking from.
If that didn’t make sense, don’t worry – the only thing you need to know is that ‘a’ = ‘link.’
Punctuation
The syntax of HTML uses a lot of punctuation: every tag uses ‘<‘ and ‘>’ and there’s a lot of equals signs and quotes. Well, the good thing is that this syntax is standardized, meaning it’ll never vary in HTML, so you can memorize it:
<tag parameter=”value”> </tag>
Remember, all the HTML mentioned above are ‘tags,’ or pre-written HTML. A ‘parameter’ is a property of a tag that can be modified (example: width=”300px,” where the parameter is ‘width,’ and the value is ‘300px.’).
Also, that slash in the above example indicates that a tag is closing – remember, we’re writing instructions to a browser, so unlike giving instructions to a human being, you have to always clearly indicate when to stop things. So in this ‘real’ example:
<h1>This is a headline</h1>
…if that trailing ‘</h1> tag wasn’t there, our entire page after this point would be a headline (bold, large font size, space above and below).
Structure
All HTML documents are assembled like humans: a <head> on top, filled with information you cannot see, and a <body> underneath it, which you can see. So for this class, you can largely ignore the content in the <head>, and just make sure all of the code you write is inside the <body>.