Web Platform HTML

HTML

HTML (HyperText Markup Language) is the documents or pages we see when we use a web browser. It has had a long history, being with us since the beginning of the web, and has been revised and improved ever since. HTML today is mostly used for the structuring of a web site or application, with the formatting performed by CSS and interactivity by Javascript.

HTML is structured as tree, with the HTML element being at its root. All HTML documents start from this root, and branch into HEAD and BODY elements:

<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

As you can see in the above example, HTML has a special way of being written. Usefully, HTML is a simple text file - you can edit it in a range of programs, and if properly formatted can be readable by mere humans. This comes with a downside: HTML is not What-You-See-Is-What-You-Get (WYSIWYG) like a word processor is.

For the most part, any whitespace you add to your text -- such as extra spaces or wrapped lines -- will be ignored. If you want to add extra spacing between elements or control how they wrap, use CSS.

Elements

HTML has a range of pre-defined elements used for the display of different kinds of media, structuring the page, or interactive widgets. We'll only introduce a few basic elements to get started.

Elements are added to a page using a tag such as <html>. A simple tag then is just the name of the element wrapped in angle brackets < ... >.

Most elements can contain text or other elements. In the example above, the HEAD and BODY elements are contained by the HTML element. Another way of putting it is that HEAD and BODY are child elements of the parent element HTML. If an element can contain other things, we have to indicate the end of the element. We do this with the closing tag. This is just a variation of the opening tag with a slash before the element name: </ ...>

<html> ... </html>

A common source of errors is forgetting to close one of the angle brackets or not putting in a closing tag. Pay attention to your text editor's syntax highlighting.

Because HTML doesn't care about your line breaks, the following two fragments are identical:

<p>My paragraph of text</p>

<p>
My
paragraph
of
text
</p>

Attributes

When you use an element, you can also specify attributes, which often work to customising how the element looks or behaves. These are specified within the opening tag (ever the closing tag) like this:

<a href="http://google.com">Google</a>

In the above fragment we are setting the attribute href to be "http://google.com", creating a link. You put multiple attributes in by separating them by a space. In the following, we have a href and target attributes:

<a href="http://google.com" target="_blank">Google</a>

It's usual contain attribute values in inverted commas " ", but in some cases this can be skipped.

If you ever need to put a inverted comma into an attribute, you have to escape it, by putting a slash before each inverted comma you use:

<a title="Takes you to \"Google\"" href="http://google.com">Google</a>

Some attributes are flags, meaning their very presence indicates an 'on' state. For those attributes, you don't need to provide a value. For example the video element has a controls flag: <video controls src="video.ogv"></video>

In this fragment, we change the behaviour of the link so it opens in a new tab or window:

<a href="http://google.com" target="_blank">Google</a>

The attributes of class and id are particularly important for associating CSS rules with HTML elements:

<a id="link1" class="menuItem" href="http://google.com" target="_blank">Google</a>

Special characters

You might need to 'escape' or 'encode' special letters or characters in your HTML. For example if you want to use a < symbol, how does the browser know you want to display the < rather than give it the start a tag?

If a letter you've put into your page doesn't display, or doesn't display the way you expect, you might need to use a special code instead. Here's a great guide to codes for common symbols.

How then do you show a <? Instead, write &lt; (short for 'less than'). > is thus &gt; (greater than). &copy; produces the circled 'c' copyright symbol, and so on. Use can use entities for displaying some basic symbols that can be handy in an interface.

Read more

Reference