HTML: terms and syntax (a tutorial for beginners)

At the end of October I published a post about CSS terminology which explained the basic usage of Cascading Style Sheets and technical terms used to identify and explain code parts.
Today we are going to do the same for HTML, because I feel that sometimes terms are not properly used, and we surely need to make things clear.
The following will be a short and undoubtedly not complete journey through the basic HTML programming. If you are a little bit experienced, you might find it boring... however, are we fully sure we use the correct terminology?

Follow me and see for yourself.


HTML
HTML stands for HyperText Markup Language and it is the programming language used to build web pages. The first version of HTML was defined in 1991. Today we often talk, write and discuss HTML latest version: HTML5.

The programming language is quite intuitive and it mainly consists of tags.

Tags

To show content on a web page we need to use tags. Basically every element in web page is composed by tags. An element is usually made of tag pairs. So here we go with the first terms! Let's try to explain tags with an example:

Welcome to The Web Thought

is the start tag;
Welcome to the Web Thought is the content;

is the end tag (made of a slash "/" and the tag name again);

Welcome to The Web Thought

is an element.
There are HTML elements that do not have a start tag and an end tag. Those elements consists in only one tag (for example the
element).

Attributes

Every element might have attributes to better define its meaning. Attributes go in the start tag of an element and usually they consist of a name and a value enclosed in quotes.

content

Now, something you might not know: quotes around values are not always needed, infact if the value has no space or any special characters like " ' ` = < and >, we can remove the quotes.
Another thing: we can use double quotes or single quotes, it doesn't matter.

HTML basic structure

The basic structure of an HTML page is made of the following elements:

1. doctype
2. html
3. head
4. body

So, we can create a simple HTML page like:



 
    head content
   
    body content
 


The head content is different from the body content. The body content is where we want to insert our page elements, while in the head we are going to insert the document metadata.

Document metadata

The document metadata consists in a collection of information for the HTML document. The head element usually contains the document title, the character settings, the document description, keywords, scripts and information on stylesheets.
We shouldn't overlook the importance of the head element. First of all, it is to be noted that the document metadata will not be shown on the page (while the body content is). Secondly, in the head is where we insert references to JavaScript libraries such as jQuery, references to external stylesheets, we embed stylesheets and document related metadata such as title, keywords and so on.

Body content

In the body we can insert all the HTML elements that will generate the document as displayed by the browser. The general HTML structure should always be clear and immediately recognisable while programming. Indentation, for example, should be used to preserve the flowing of page elements in code view while consistent closing tags should follow a nesting structure.
An example:

  Welcome to The Web Thought

The above code represents a good way of creating a document structure. Or, being more strict:

 
      Welcome to The Web Thought
 

Remember that the more accurate is the coding process in terms of clarity, the easier it will be to understand and maintain the code itself.

Ok folks!, I think that's enough for today. I believe you've been bored enough.
Have a nice day and share your thoughts as usual!