HTML Structure

The basic structure of an HTML page consists of a few key elements and tags:

<!DOCTYPE html> <html> <head> <title> This is a Title </title> <script src="main.js"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> This is where the content of the page goes. </body> </html>
  • <!DOCTYPE html> - This tag defines the language written on the page.

  • <html> - This tag signals that start of HTML code.

  • <head> - This tag is where the page metadata lives.

    • <title> - This tag defines the title of the document and displays on the web browsers tab.

    • <script>- This tag is used to embed Javascript as an external script file.

    • <link> - This tag establishes a relationships between the current document and external resources, such as a CSS stylesheet.

  • <body> - This is where the content of the page lives.

There are many different types of HTML tags you can use to build the content of an HTML page, but here are a few key ones that can help with creating simple, efficient HTML.

Tag

Use

Description

Tag

Use

Description

<div>

Divison

A container used for grouping and structuring content. They have have the built in block display (CSS concept).

See the class attribute

<h1>

Heading

Defines a large heading. There are also subheadings h2 - h6.

<p>

Paragraph

Defines a paragraph.

<ul>

<li>

Lists

You can create “unordered“ or “ordered“ lists.

<ul> <li>An item</li> <li>Another item</li> </ul>

<a href=”…”>

Hyperlink

Embeds a hyperlink in the HTML content text.

href is an attribute to specify a URL.

<a href="https://www.interfaceware.com/">iNTERFACEWARE</a>

<img src=”…”>

Image

Embeds an image on the page.

src is an attribute to specify an image file path.