Home » Software » Understanding the basics of HTML

Understanding the basics of HTML

Nowadays, HTML (HyperText Markup Language) are commonly known as the language of the web. What is HTML? Whenever you go to a website page in your internet browser such as Internet Explorer, Firefox, or Safari, the browser downloads and shows HTML. At its heart, HTML is just a file, much the same as a document you’d create in a word processor. An application like MS Word is used to view word processor files because it knows how to read and display them.

Basics of HTML

In the same way, when it comes to the internet, the web browser is the program that knows how to read and display documents created with HTML. Word processor files can be made and read with a single program application. However, HTML documents need unique programs for creation and reading; you can’t create HTML documents with a browser.

You create HTML documents using a program called an editor. This editor can be as simple as the Notepad program that comes with Microsoft Windows or as complicated as Eclipse or Microsoft Visual Studio. You can generally use the same program to create HTML documents that you use to produce PHP applications. This article describes HTML documents and shows how to build an HTML page that you can view through a web browser using the most up-to-date version, HTML5.

Learning the HTML Building Patterns

HTML documents being just documents, they can be stored on any desktop computer. For instance, an HTML document can be stored in the Documents folder on your computer. However, you would be the only one who could see that HTML file on your desktop computer. To fix that problem, web documents or pages are typically stored on a personal computer with more resources, known as a web server. Storing the file on a web server or web hosting allows other people to view the document. A web server is a computer that runs special software that knows how to send (or serve) web pages to multiple people at the same time. HTML documents are set up in a specific order, with certain parts coming before others. They are designed like this so that the web browser knows how to read and display them. When you create an HTML document, it’s expected that you’ll follow this structure and set up your document so the browser can read it.

HTML Document types

Web browsers can display several types of documents, not just HTML, so when creating a web file the first thing you do is notify the browser what type of document is coming. You declare the type of file with a special line of HTML at the top of the document. Web browsers can usually read documents in many formats, including HTML, XML, XHTML, SVG, and others. Each one of these documents lives by different rules and is set up differently. The document type informs the browser what rules to follow when showing the document. In technical terms, the document type is called the Document Type Declaration, or DTD in short.

In earlier versions of HTML, programmers needed to continuously copy and paste the document type into the document because it was both long and complicated. With the release of the latest version of HTML, called HTML5, the document type has been greatly refined. The document type for HTML5 is <!doctype html> This will be the first line of every HTML file that you create, before starting to write html document. Any time you need to display HTML, you include a document type, sometimes called a doctype. You may be tempted to use <!doctype html5>, but there is no version number associated with the HTML5 document type. When the next version of HTML comes out, you will not have to go back and update all your document types to HTML6 ( except, they change the document type definition again!). You may see the other, older document types in your profession as an HTML developer. They include:

XHTML 1.0 Strict &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

1	XHTML 1.0 Strict <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

XHTML 1.1 DTD &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1// EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”&gt;

1	XHTML 1.1 DTD <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1// EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

HTML 4.01 Strict &lt;!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;

1	HTML 4.01 Strict <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

HTML 4.01 Transitional &lt;!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;

1	HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

Other document types exist as well, and most of them are in the same way complicated and hard to remember. If you see these document types on a web page, you will know that the page may use slightly different syntax to create its HTML file. HTML files are made up of letters and words surrounded in angle brackets, sometimes called less-than or greater-than signs:

&lt; &gt;

< >

For example, here’s the main element in an HTML document, also called the root element:

&lt;html&gt;

<html>

Typically, HTML elements have both opening and closing tags. Elements are enclosed with a front-slash in front of the element name. Seeing <html> in the document implies that later on the file will have </html> to close that element. It is said that everything in between the opening <html> and closing </html> makes up the document and is wrapped inside of those components. Here are the simple html web page example

&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;My Web Page HTML&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;Hello World !!&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;