HTML Basics (WIP)

Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript. Wikipedia

Use Case

HTML is foundational for structuring web pages and is used by all websites, whether static or dynamic. It is what the browser receive upon loading any website. The browser first needs to interpret the HTML and then renders its content.

HTML's primary purpose is to structure content on the page. It defines the layout and elements displayed by the browser.

You can link external CSS files to style the page and include JavaScript files for adding interactivity.

In the example below, the <link> tag links to an external CSS file that defines styles, and the <script> tag includes a JavaScript file that adds interactivity to the webpage.

<head>
  <!-- ... -->

  <link rel="stylesheet" type="text/css" href="./assets/css/style.css">
  <script src="./assets/js/script.js"></script>
</head>

In static websites, HTML is predefined, while in dynamic websites, HTML may be generated on the server or client-side based on user interaction or data.

Elements & Tags

Elements are composed of a root node, denoted by an opening tag <root-node> and a closing tag <root-node>. The elements can have children, which can be either one or more elements and/or plain text.

Tags are either self-closing or not. Self-closing tags are tags that don’t have children and a closing tag. Here are some example of self-closing tags.

self-closing-tags.html

<!-- create a text input element -->
<input type="text" id="text-input-id" name="text-input">
<!-- create an image element -->
<img src="/path/to/image.png" alt="descript of your image">

nested-elements.html

<div>
  <p>
    This p is a child node of the enclosing div
  </p>
</div>

Syntax

HTML is a language similar to XML. It is composed of tags which define elements in a document. Some elements are required and others are not. An element is mainly composed of 3 parts.

The opening tag <tagname> which must contain the tag name placed after the opening bracket (<). Most of the elements also require a closing tag </tagname>. The closing tag is the same as the opening tag except that it contains a / placed before the tag name and after the < bracket.

A valid element could look something like this:

<tagname></tagname>

The above represent the element called tagname which currently does not contain any children.

Required Elements

For your HTML document to be valid* you must have at least the minimum required elements.

<!DOCTYPE html>
<html>
  <head>
    <title>Document title</title>
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

The above example, for the most part, is the smallest valid HTML document you can have.

valid* a browser can interpret documents with less structure, but following this template ensures proper rendering.

The first line of any HTML document should always be the unique <!DOCTYPE>. This tag is called a declaration and is not an HTML tag. It is mostly used to pass information to the browser on what type of document it expect. This declaration is not case-sensitive, for example all the following example are equivalent, but the convention is to make it all capital case.

<!DOCTYPE html>
<!DocType html>
<!Doctype html>
<!doctype html>

The line that follow is the <html> element. This is the root element for all elements that are in your HTML document. Normally you should always include the language of the webpage as attribute of the <html> element.

<html lang="en">

We will come back to the attributes a bit later.

Now comes the <head> element. This element is placed as the first child node of the root <html>. It is not used to display/render content on your page, but instead it is for declaring information (metadata) about the page. In the example above the only metadata we have is the <title> which defines the document title, and is displayed by the browser generally as the tab name.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

Here is an example containing more metadata.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Title</title>

  <link rel="stylesheet" type="text/css" href="/assets/css/style.css">
  <script src="/assets/js/script.js"></script>
</head>

Following is a list of elements/tags that can be used inside the <head> tag.

<title> (required in every HTML document)
<style>
<base>
<link>
<meta>
<script>
<noscript>

See the links for more information on each tag.

After the <head> element comes the <body>. This element defines the document’s body. All children nodes of the <body> will be rendered on the page by the browser, meaning all the content on your page will be contained in it.

For example your document body could contain headings, paragraphs, images, hyperlinks, tables, lists, etc. It can also contain plain text.

Here is an example of a body containing some children nodes.

<body>
  <headers>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
    </nav>
  </headers>
  <main>
    <h1>Home Page</h1>
    <p>Hello World!</p>
  </main>
  <footer>
    <a href="https://mywebsite.com">Creator: My Name</a>
  </footer>
</body>

Comments

You can add a code comment in your HTML document using the following syntax.

A comment is composed of its opening  characters.

<!-- This is a comment -->
<!-- This is also a comment
     which contains multiple lines
     and can also contain html code <div> -->

Comments are not rendered in the browser and can be used for documentation or temporarily disabling sections of code.

Attributes

WIP...