HTML Basics - Doc Structure

Every HTML page is also called an HTML document. The document has a specific structure. Each HTML document consists of HTML elements. Each element has its opening tag. Most of the element have the closing tag. The element content is everything between the start tag and the end tag. For example, the following defines the body element:

<body> element content is written here </body>

Basic Document Structure

The basic structure of an HTML document is the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>
        Page title is written here
    </title>
</head>
<body>
        Page content is written here
</body>
</html>

The doctype tells the browser what version of HTML that is used in the document. In our case it is HTML5.
The <html> element marks the beginning and the end of the HTML document.
The <head> element contains all the page information which is not shown in the browser.
The <body> element contains the visible page content.

Once we have a document structured, there are a number of elements we will use in order to add content such as headings, paragraphs, links, images, ...

Elements

An HTML element consists of:

Start tag
Attributes list (מאפיינים) - HTML elements may have attributes. The attributes provide additional information about the specific element. Every tag has its own attributes. There are also gloabl attributes common to many tags. An element may have more than one attribute. Attributes are always specified in the opening tag. Most attribute have a value. We write it in the form attribute="value" (quotation marks are optional but it is better to write them).
Element content
End tag (there are elements that don't have a closing tag)

We write an element like the following (in example there are two attributes for an element):

<tag-name attribute-name1="value" attribute-name2="value">
        Element content is written here
</tag-name>

There are empty elements, for example <br> which causes to skip to a new line. Empty elements have no closing tags and no content.

Elements can be nested, for example:

<p>Nested <strong>element</strong> example</p>

Note that p element itself is nested inside the body element.