Basics

Let's kick this off with a straightforward example. You'll get to see the style of the language this way. ```html <!DOCTYPE html> <html> <head> <title>Amazing Title</title> </head> <body> <p>Hello, World!</p> </body> </html> ``` The first thing to note are the tags. These are anything within angle brackets, such as `<head>` and `</body>`. It's also important to notice how an element opens and closes. Elements are accompanied by an opening and closing tag. For example, `<html>` is the opening tag and `</html>` closes it. These two combine to make a html element. Anything with a forward-slash (/) after the first angle bracket (<) is a closing tag. You can see how I'm indenting - every element in an element (also known as a child element) is tabbed to the right once. This is for readability and it does not affect the code at all (except in rare cases). If anything, I could have written my code as ```html <!DOCTYPE html><html><head><title>Amazing Title</title></head><body><p>Hello, World!</p></body></html> ``` but that's annoying to read, right? The last thing you may have noticed is that `<!DOCTYPE html>` does not have a closing tag. This is simply a rare case where a closing tag is not required due to its function. ###Meet the Elements From top to bottom using the above code, here is a breakdown of every element: - `<!DOCTYPE html>`: This is used to specify which version of HTML we are using. It is not actually an element or a tag but rather a legacy string. Specifications for older versions may affect how the browser renders the website, so, if you omit this, the browser may not display the site correctly. This is what's called when a browser enters quirks mode - it resorts to interpreting the HTML itself. In general, you will never encouter an issue by omitting this line, though just to be sure, put it in. (In my experience, I've only ever come across once where there was an inconsistancy in the rendering of something, but that was just with Internet Explorer). - `<html>`: This should be your first element. It's just a container for every other element. Again, this is not necessary, though it is conventional and looks good. - `<head>`: This is for all of the metadata of the website. You should import files (stylesheets, fonts, scripts) here, set the icon, title and other things which are not exactly visible to the user. Do not put any content like text or images in here, that's for the `<body>`. - `<body>`: This is where the main content and code for the site goes. Even in the example, the text is in the body element. This should be used for everything the user can see and interact with. Scripts can optionally be put here too, though if possible, I would reccomend putting them in the `<head>`. - `<p>`: This is a simple paragraph element. It's used for displaying, well, a paragraph of text. You could technically get away without using these but then you'd have a hard time styling content and using Javascript to interact with the contents of the page. If you can't memorise these, don't worry; they'll become second nature soon. ###A Note on <html>, <head> and <body> In the specifications, omitting these tags is allowed. If they are missing, they are instead inferred and those elements which are usually in the `<head>` are put in the head and same for the `<body>`. There is, however, a bug with Internet Explorer 9 where it actually incorrectly infers the placement of the elements. I suppose just to be safe and to make your code look nice, just put them in. If you are doing quick prototypes, it's no big deal.

Continue to A Bit More Than Basics