Intro to HTML

Introduction to HTML

Nowadays, webpage designers have access to hundreds of different fonts, font sizes, colors, and even alphabets and browsers can for the most part display them accurately. Webpages may also contain images, video clips, and background music. They may include drop-down menus, search boxes, or links you can follow to access other pages (whether on the same site or another site).

A typical webpage depends on several technologies (such as CSS, JavaScript, AJAX, JSON) to control what the end-user sees, but most fundamentally, developers write webpages in HTML, without which there can be no webpages. To display the page on the client-side device, a browser starts out by reading the HTML.

The HTML specification defines a single language that can be written either with the relaxed HTML syntax or the stricter XML syntax (Extensible Markup Language). HTML also addresses the needs of Web apps. HTML only describes the meaning of the content, not style and formatting. To define appearance and layout, please use CSS, not explicit presentational HTML.

What is HTML?

HTML is a markup language. "Markup" now means something slightly different: a language with specific syntax that instructs a Web browser how to display a page.

HTML separates "content" (words, images, audio, video, and so on) from "presentation" (instructions for displaying each type of content). HTML uses a pre-defined set of elements to define content types.

The basic HTML code structure is shown below:


<html>

<head>

    <title>Page title here</title>

</head>

<body>

    This is sample text...

    <!-- We use this syntax to write comments -->

    <!-- Page content and rest of the tags here.... -->

    <!-- This is the actual area that gets shown in the browser -->

</body>

</html>

Most browsers allow the user to view the HTML of any webpage. In Firefox, for example, press Ctrl + U to view the page source. Beginners will find the code nearly unreadable for a complex page, but if you spend some time looking at the code for a simple page and comparing it to the page the code renders, you will soon develop a clear understanding of how the syntax works.

The paragraph element consists of the start tag "<p>" and the closing tag "</p>". The following example shows a paragraph contained within the HTML paragraph element. Remember that your browser will not display more than one space character in a row.


<p>You are beginning to learn HTML.</p>

Usually elements containing content can also contain other elements. For example, the emphasis element ("<em>") can be embedded within a paragraph element, to add emphasis to a word or phrase:

The browser uses tags as an indicator of how to display the content in the tags.

Usually elements containing content can also contain other elements. For example, the emphasis element ("<em>") can be embedded within a paragraph element, to add emphasis to a word or phrase:


<p>You are <em>beginning</em> to learn HTML.</p>

Elements — the basic building blocks

HTML consists of a set of elements, which define the semantic meaning of their content. Elements include two matching tags and everything in between. For example, the "<p>" element indicates a paragraph; the "<img>" element indicates an image. See the HTML Elements page for a complete list. Note: Some tags are self-closing and do not contain any content.

Some elements have very precise meaning, as in "this is an image", "this is a heading", or "this is an ordered list." Others are less specific, such as "this is a section on the page" or "this is part of the text." Yet others are used for technical reasons, such as "this is identifying information for the page, so do not display it." Regardless, in one way or another all HTML elements have a semantic value.

Most elements may contain other elements, forming a hierarchical structure. A very simple but complete webpage looks like this:


<html>

  <head>

    <title>A minimal web page</title>

  </head>

  <body>

    <p>You are in the beginning stage of learning HTML.</p>

  </body>

</html>

As you can see, the <html> element surrounds the rest of the document, and the <body> element surrounds the page content. This structure is often thought of as a tree with branches (in this case, the <body> and <p> elements) growing from the trunk (<html>). This hierarchical structure is called the DOM (document object model).

Tags

HTML documents are written in plain text. You can write HTML in any text editor that lets you save content as plain text (e.g. Notepad, Notepad++, or Sublime Text), but most HTML authors prefer to use a specialized editor that highlights syntax and shows the DOM.

Attributes

The start tag may contain additional information, as in the preceding example. Such information is called an attribute. Attributes usually consist of 2 parts:

  • An attribute name

  • An attribute value

A few attributes can only have one value. They are Boolean attributes and may be shortened by only specifying the attribute name or leaving the attribute value empty. Thus, the following 3 examples have the same meaning:

<input required="required">

<input required="">

<input required>

results matching ""

    No results matching ""