HTML

HyperText Markup Language provides the foundation of the web by giving structure and meaning to the content it describes. The information presented to you in a browser is contained in HTML documents.

HTML uses markup in the form of elements or tags to represent structure and meaning. A collection of elements in a file forms a page that is rendered in a browser.

In other words, HTML documents are plain text documents that can be created using any text editor. The text is marked up using elements or tags to present different type of content such as <p></p> for paragraphs, <h1></h1>, <h2></h2>, <h3></h3> for headings and more. These elements or tags are read by the browser and then displayed accordingly.

  • HTML is used to give logical structure to a document's content
  • HTML comprises of various standard tags, these tags only provide structure to the content and does not style it
  • Each tag is interpreted by the browser and the content of the tags are styled accordingly
  • HTML Documents are saved using .html extension

What is a tag ?

HTML tags have the following structure: less than “<”, some text “p”, greater than “>” <p> - this is called a p tag or paragraph tag.

Types of Tags

There are two main types of tags, Paired and Singular

Paired

Has an opening tag <p> and a closing tag </p> and the content is added in between the opening and closing tags

Note: Closing tag has a forward-slash / in the tag before the tag name

Example: paragraph <p>Paragraph of text</p>, important text <strong>Text here</strong>

In Correct : <p></p>Paragraph of text Since the text is not contained in between the opening and closing tags

Closing Order If we have tags inside other tags, we close them in the opposite order of opening them. From the example above we can have a paragraph that contains the important text:

<p>
  This is normal text in the paragraph. 
  Also, we want to say this is <strong>important text</strong>.
</p>

If you notice in the example we open the tags and close them in reverse order <p><strong></strong></p>

Singular

The Singular tags are the once that does not need to be closed, they are also referred to as self closing tags.

These tags to not have any content.

Example: line break <br>, horizontal rule <hr>

Example: Structure of an HTML page

HTML Basics on MDNopen in new window
W3C What isopen in new window

Space in HTML Documents

HTML renders any additional space to one single space. Is we add multiple spaces in between words or multiple line breaks all the space will be converted into a single space when the page is rendered in the browser.

Hello             World!



This is HTML.

The output of the above will be Hello World! This is HTML.