SITE NAME

HTML Introduction

HTML Reference

HTML (Hypertext Markup Language) is the basis of your web page. It contains the raw contents of the page, such as all of the text, links, images, tables, etc. It also contains hidden links to other important resources, such as script and styling files.

You can imagine it like a text file written in a way that the computer can understand the contents.

Writing HTML

HTML is very simple to write. If you've ever written any XML, this should be very familiar.

Tags

HTML elements are composed of a starting tag and an ending tag, with some content in the middle.

Starting Tag
|
V
<p>CONTENTS</p>
             ^
             |
             Ending tag

Some elements can be closed without an ending tag

<img/>

Attributes

Some elements have attributes. These are placed on an element like this

<img src=""/>

Attributes are formatted as attribute=value. Some attributes don't take a value, which is represented like this.

<input disabled/>

Nesting

HTML elements can be placed in other HTML elements. To do this, simply place an HTML element inside the contents of another element.

<p>It's <i>that</i> easy!</p>

File Structure

You'll notice that the default Neocities HTML file is quite complex. This is because it contains additional information that the user does not see!

Most basic HTML pages are structured like this

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>The web site of YOUR_NAME_HERE</title>
        <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    </head>
    <body>
        WHAT THE USERS SEE HERE
    </body>
</html>

The <head> section contains information for the browser.

  • The <meta> elements contain metadata (information relating to the data stored in the document)
  • The <title> element contains the text that will appear in the browser's tab list
  • The <link> element tells the browser to load additional files. In this case, it's being used to load an external stylesheet

For now, almost everything in the <head> section can be ignored.

The <body> section contains what you actually want to show to the user.