Menu Close

Articles

Understanding HTML Syntax

In this article I will introduce you to HTML syntax. This is what you need to learn when you start any programming language. Once you understand the syntax of HTML you can create static web-pages. Next you need to learn CSS to make a page nice and JavaScript to make a 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.

Introduction to XML

XML = Extensible Markup Language.

Let’s start with XML example. In the next example we have a simple structure for a message:

<!-- secret message -->
<note>
  <to>John</to>
  <from>Marica</from>
  <heading category="secret">Secred Message</heading>
  <body>Please let's meet in the balcony at 3 sharp.</body>
</note>

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:

<HTML>

<HEAD>
   <TITLE>Your Title Here</TITLE>
</HEAD>

<BODY>
   <CENTER><IMG SRC="clouds.jpg" ALIGN="BOTTOM"></CENTER>
   <HR>
   <P>This is a link to our website</P>
   <a href="https://sagecode.net">SageCode Home Link</a>
   <H1>This is a Header</H1>
   <H2>This is a Medium Header</H2>
   <P> This is a new paragraph! </P>
   <P> <B>This is a new paragraph!</B> </P>
   <BR> <B><I>This is a new sentence without a paragraph break, in bold italics.</I></B>
   <HR>
</BODY>

</HTML>

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