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 an utopic 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 sected 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

Not the basics of HTML. This is in fact XML with a structure predefined. So we have elements and attributes that are specific designed for describing a document for internet browsers. This is the big secret that you need to understand before you can grasp HTML much faster. HTML is a data format defined using tags. The data is in fact a document that can be visualized using a browser.

Let’s start with an 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 we have used some of the HTML elements or HTML tags. You can observe the names of the HTML elements are capitalized. However you must know 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.

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