###############
Syntax
###############
**Syntax** the set of rules and principles that guide a language. HTML, being a language for computers, is designed to be clear and unambiguous to avoid confusing the computer.
HTML documents often start with a strange phrase, . This tells the browser that they are dealing with an HTML document and is a relic of the past. Modern browsers don’t need this, so often you will see this omitted.
We then use our first tag, the tag. This surrounds the head and the body and is called the “root” element.
.. code-block:: html
All Html tags need to open and close. An opening tag looks like this , while a closing tag adds an additional /, like this .
All the stuff inside these tags is considered "wrapped" by the tag. You can include text, or more tags to create the document structure you need.
.. highlights:: **HTML documents are split into two main sections, the Head and the Body.**
1. The **Head** of an HTML document contains information for the computer.
2. The **Body** contains all the information that we want to show to humans.
Some pages don’t have a head at all, and browsers happily display pages without a Head. Usually the Head will contain the title of the page, the author and other data of this kind.
The body is where most of the magic happens, containing all the content that should be displayed to the humans.
Here’s an example of a full HTML page:
.. code-block:: html
Hello!
Hello, world!
HTML does not care about white space, which means that you could have every single tag on the same line and the computer will still understand it in the same way; like this:
.. code-block:: html
Hello!Hello, world!
As you can imagine, this is horrible to work with so a good practice to follow is to indent these sections so that they are clearly separated. Even though your readers won’t see this, it is very helpful for other web developers and yourself, so that you can navigate the HTML document easily.
.. highlights:: **In the same way as a web page has a Head for the computer to read and a Body for the human to read, each tag has content for the humans to read, and can include extra information for the computer.**
We call the information for the computer **Attributes**\ . A good example of this is when you want to show a link to a human. You don’t need humans to see the https://www.something.com address, you only want them to see `Click Here <#>`_. To accomplish this, we need to use an attribute.
The tag is for creating links, here’s an example.
.. code-block:: html
Google
Which displays:
`Google `_
As you can see, the attribute “**href**”, short for “\ **H**\ ypertext **REF**\ erence”, is contained inside the tag, which means that the information is only for the computer. The text “Page 2” is in between the open and the closing , which means that a human will read that.
Web browsers understand what the tag is for, and will automatically make the writing clickable, and have an underline.
Now that you know about HTML documents, we’ll discuss some basic tags in the next post. Continue with HTML: :doc:`basic-tags`
.. toctree::
:hidden:
:maxdepth: 2
basic-tags
more-tags