Tags

In HTML, elements (boxes that hold text) are made with tags. All tags must start with an opening tag: <...> and then a closing tag: </...>. Tags are kind of like a tree where you have branches upon branches, and the leaves are text at the end of the branches. Webpages can be formatted into related sections with tags which can make your page look better and make navigation easier. HTML is strongly related to CSS(A styling language) and JS(A programming language).

HTML page structure

You may or may not choose to have <!DOCTYPE html> at the start. It is not required but it is recommended to support older browsers. Then, the <html> tag. It contains an optional <head> tag and <body> tag. The head tag contains metadata about the page such as the title, description, and optional script and style tags, so it is not displayed on the page. The body tag contains the elements and text that are displayed on the page. Elements stack from top to bottom, but this can be changed with CSS. 

<!DOCTYPE html>
<html>
  <head>
    <title>My website</title>
  </head>
  <body>
    <h1>My header</h1>
    <p>My paragraph</p>
  </body>
</html>

My header

My paragraph

Useful tags

Text styling tags

Here are a few tags that style text inside them:

They can even be combined together!

Text formatting tags

Some tags change the position of text, such as these ones:

Table

The <table> tag is used to make rows and columns of text items. It is typically used to present data. 

<table>
  <tr>
    <th>My Links</th>
    <th>Link</th>
  </tr>
  <tr>
    <td>Youtube</td>
    <td>...</td>
  </tr>
  <tr>
    <td>Phone Number</td>
    <td>...</td>
  </tr>
  <tr>
    <td>Email</td>
    <td>...</td>
  </tr>
</table>
My Links Link
Youtube ...
Phone Number ...
Email ...

Inside the table, there are table rows (<tr>), and inside are either table headers (<th>) or table data cells (<td>). You do not need table headers to make a table.

Lists

Lists just.. list stuff. There are 2 kinds of lists, unordered lists: <ul> and ordered lists: <ol>. 

<table>
  <tr>
    <th>My Links</th>
    <th>Link</th>
  </tr>
  <tr>
    <td>Youtube</td>
    <td>...</td>
  </tr>
  <tr>
    <td>Phone Number</td>
    <td>...</td>
  </tr>
  <tr>
    <td>Email</td>
    <td>...</td>
  </tr>
</table>

To make a cake you need:

Steps:

  1. Put it all in a bowl
  2. Bake it
  3. Eat it

Image

Images speak a thousand words, if you know the tag: <img>. 

<img src="neocities.png">

Every src attribute is provided with a directory, a format to direct your computer to somewhere. On your own computer, you probably have a C:/ drive. Inside it you have named folders and files. A website is the same, but instead of the C:/ drive we have the URL of the website. The page you are looking at right now is messymasyn.neocities.org/index.html. However this can also be shortened to a local directory, a directory which is instead relative to the file the directory is in. For this page, it's directory is just htmltutorial.html. If there was a folder of "images" and I needed to get an image from that folder, the directory would then be messymasyn.neocities.org/images/catimage.png, but it could be shortened to /images/catimage.png. If you want to get a file in the same folder your file is in, you can write: ./siblingfile. And to go one more folder level out, you can write ../unclefile. Note that chaining ./ is futile, as you are simply repeatedly getting the same folder.