Menu Close

Articles

Understanding HTML Syntax

The Syntax: This is what you need to learn when you start HTML. Once you understand the its syntax you can create any static web-pages. Next you need to learn CSS to make a page nice and JavaScript to make the page dynamic.

Introduction to HTML

HTML = Hyper Text Markup Language

So from the name you know that HTML is a language. It is a markup language similar to XML. That means if you understand the basic syntax of XML you will better understand HTML. Therefore we start with XML description.

Understanding XML

XML stands for: Extensible Markup Language.

It is a data oriented language. It is not a Turing complete language so you can not make programs to resolve computation problems. Though an XML based scripting language exist, is called Apache ANT. 

In the next example we show a message file in XML format:

XML Structure

So here are the secret markup symbols: “<” and “>”. This is the core idea behind XML: We use two markup symbols to separate keywords of the language. XML language do not have keywords defined like in other languages. Instead we can invent new keywords ourselves. Therefore this language is extensible.

XML Elements

In the example above we can see the XML is hierarchic. First line is a comment. So we can ignore the comments. The <note> is a tag used to start one element. The element has an end tag </note>. This is the end of the element. Between the start and end of an element we have the “content” of the element.

Element Content

The content of an element can be plain text or other elements. The elements can be side by site (siblings) or nested one inside the other on any number of levels. For example <to>, <from>, <body> are children elements of <note> that is the root element. The root element contains all other elements.

Element Attributes.

The attributes of an element are enumerated after the element name before the end markup “>” separated by space. For example: category=”secret” is an attribute named category with value secret. The values are always enclosed in double quotes. One element can have no attribute one or several attributes. Sometimes the attribute has no value. This is a Boolean attribute. If is present it has value True if is not present has default value that is False.

Back to HTML

HTML is in fact XML with a predefined structure. Therefore HTML is called XHTML. It is XML with predetermined elements and attributes specific describing an Internet document. This is the big secret that you need to know to understand HTML. 

Let’s start with an HTML example:

In the example above we have used some of the HTML elements. You can observe the names of the HTML elements are capitalized. However HTML is not case sensitive. Modern HTML is using lowercase for element names and attribute names. This document contains one image, one link and several lines of text.

Used Tags:

  • <HTML> is the root element;
  • <HEAD> is the html header section;
  • <BODY> is the main content of the page;
  • <HR> is used to insert a horisontal line ;
  • <IMG> is used to insert a image;
  • <a href=””> is used to create a hyperlink;
  • <H1>, <H2> are headers;
  • <P> is paragraph of text.

There are two kind of tags in HTML: 

  • block tags
  • in-line tags

Block Tags

The <HTML> is the root element of HTML files. This has two children: <HEAD> and <BODY>. The spaces used for indentation are ignored. Actually all the spaces are ignored by a browser when rendering the HTML files.  Multiple spaces between words are reduced to one space.

Block elements can display a text on one or more lines. The block element can’t apply to a section of text. A block elements can have multiple other elements inside. The most common block elements are: paragraph <p> and division <div>.

In line Tags

In-line tags can apply to a small portion of text. This elements are usually not containing anything else but a portion of text.  In the example above we have several inline tags: <B> is bold text and <I> is italic text. In-line tags can be combined (nested) and can have a cumulative effect if apply to the same text fragment.

Read next: Most significant HTML tags