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.