HTML Introduction

HTML stands for "HyperText Markup Language". It is a markup language used to create web pages and applications that can be displayed on the internet.

If you have always wanted to make your own Web page, but you were under the impression that it would be very difficult, then there should really be no problem. To create your own Web page, all you need to have is a thorough understanding of html. And is not all that difficult to learn

html is the brainchild of Tim Berners­Lee. In 1990, Berners­Lee needed something that would help scientists coming from different colleges and universities access documents and research from other scientists. That problem led to Berners­Lee inventing the World Wide Web, the hypertext transfer protocol or htp, and html.

Why learn HTML?

These days, the proliferation of content management systems such as WordPress as well as HTML editors can help you create a Web page without knowing html.

But even with these tools, knowing how html works plus knowing even just the basic tags can go a long way.

For example, it would make your life easier if you knew how to work with html to correct design flaws. Like if your WordPress installation is using a CSS rule that displays images wrong, you can view the source and correct how your images are being displayed if you know html.

Also, html is very simple and easy to learn. It literally makes no sense why you should not take time to learn it!

HTML Versions

HTML was first developed by British physicist Tim Berners-Lee in 1990. Since that time, there have been many versions of HTML.

What you need to know about HTML to get started

This is another good news: when you are learning html, you do not need much.

You can start with using Notepad, a text editor that is included in your Windows installation. If you are not using Windows, or if you prefer other text editors, there is a lot of free software that you can download from the Internet.

Or you could get one of those HTML or WYSIWYG editors. WYSIWYG stands for "what you see is what you get." Think of it as a layout tool that allows you to easily create an HTML page and format it without bothering too much about tags and elements.

So we do recommend hard­coding if you are still learning. Hard­coding means to write HTML using a text editor. There are two things that you need to know to get started with HTML:

1. The basic tags and elements.
2. The structure of an HTML page

Basic tags and elements

html is a markup language. As such, you will need to know the various tags and elements that it uses.

Tags usually come in pairs. An opening tag will signify that the browser should treat the succeeding text using that tag's properties and a closing tag would end it.

The start tag is written with the tag name enclosed in angle brackets, followed by the end tag with a forward slash (/) before the tag name, also enclosed in angle brackets.

For example, the opening <strong> tag and its corresponding closing </strong> tag will render all the text in between in bold. i.e.,

The content of an HTML element is placed between the start and end tags.

“My name is <strong>Jonh</strong>” will be displayed as: My name is Jonh.

And then there are what we call the "empty elements" or those that work without a closing or opening tag. Empty elements are often described as self­closing tags.

• <area>
• <br>
• <hr>
• <input>
• <meta>
• <link>
• <img>

All of these can stand alone. For example, line breaks in HTML documents are often denoted by <br>.

HTML Attributes

HTML Attributes are used to provide additional information about HTML elements. Attributes are placed within the start tag of an HTML element and provide extra instructions or properties for that element.

For example, the <img> tag, which is used to define an image element, can have attributes such as src, height, and width, which specify the source file, height, and width of the image, respectively.

Attributes are written within the start tag of an HTML element and are separated by spaces, and they have a name and a value, separated by an equal sign (=).

For example, <img src="image.jpg" height="200" width="300"> is an example of an image element with attributes.

HTML page structure

Let's make an example of a proper HTML page.

Things start with the Document Type Declaration (aka doctype), a way to tell the browser this is an HTML page, and which version of HTML we are using.

Modern html uses this doctype:

<!DOCTYPE HTML>
  

HTML is very simple and it is logical. A browser would start reading an HTML page from the top going down, from left going right.

It does follow a basic structure. First, you have to declare that the document is an HTML document. You can do this by using the <!DOCTYPE html> and <html>

Then we have the html element, which has an opening and closing tag: of your document.

<!DOCTYPE HTML>
  <html>
    ...
  </html>

Most tags come in pairs with an opening tag and a closing tag. The closing tag is written the same as the opening tag, but with a / :

<sometag>some content</sometag>

There are a few self-closing tags, which means they don't need a separate closing tag as they don't contain anything in them.

Thehtml starting tag is used at the beginning of the document, right after the document type declaration.

The html ending tag is the last thing present in an HTML document.

Inside html element we have 2 elements: head and body :

<!DOCTYPE HTML>
  <html>
    <head>
      ...
    </head>
    <body>
      ...
    </body>
  </html>

Inside head we will have tags that are essential to creating a web page, like the title, the metadata, and internal or external CSS and Javascript. Mostly things that do not directly appear on the page, but only help the browser (or bots like the Google search bot) display it properly.

This metadata is not displayed on the webpage but provides important information to browsers and search engines.

The title element is placed within the head element and displays the title of the website in the browser tab. document title, styles, and more.

Inside body we will have the content of the page. The visible stuff.

The body element contains the actual content of the webpage, such as text, images, videos, and more. Heading elements, such as h1 to h6, are used to define headings of different levels, wich h1 being the highest level and h6 being the lowest level.

Headings are used to structure the content of a web page and provide hierarchy and organization.

The p element is used to define paragraphs of text on the webpage, and it is used to group and format text content into paragraphs.

Example

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the document</title>
      </head>
      <body>
        <h1>The most important heading.</h1>
        <p> The first paragraph.</p>
        <h2> Subheading</h2>
      </body>
  </html>

To start writing HTML code for your website you will need an HTML editor. Let’s speak about HTML editors in our next chapter.