What is HTML? Anatomy of an HTML5

4
410
html introduction

What is HTML? ( HTML Introduction )

HTML is a language for creating web pages using ordinary text. HTML is not a complex programming language.

What does HTML stand for?

HTML stands for Hyper Text Markup Language.

Hyper Text: HyperText is text displayed on a computer or device that provides access to other text through links, also known as “hyperlinks”.
Markup Language: A markup language is a programming language that is used make a text more interactive and dynamic.

Every web page you see at is written in a language called HTML. You can think of as HTML as the skeleton.

DOCTYPE

A web browser must know what language a document is written in before they can process the contents of the document. You can let web browsers known that you are using the HTML language by starting your HTML document with a document type declaration.

<!DOCTYPE html>

This declaration is an instruction. It tells the browser what type of the document to expect, along with what version of HTML is begin used in the document.
If you don’t use the doctype declaration, your HTML code will likely still work, however, it’s risk. The browser will correctly assume that are using HTML5, as HTML5 is the current standard and all browser are supported.

Root Element

After the DOCTYPE, the HTML really begins. This is indicated by the HTML Root Element. If Your entire HTML is a tree, this is the root from which everything else sprouts.
To begin adding HTML structure and content, we must first add opening and closing <html> tags, like so:

<!DOCTYPE html>
<html>
 
</html>

Anything between <html> and </html> will be considered HTML code. Without these tags, it’s possible that browsers could incorrectly interpret your HTML code and present HTML content in unexpected ways.

Head Element

The next thing you’ll encounter in an HTML document is the “head” section. The head tag is exactly what you’d expect it to be:

<head>
 <!-- Some Code Goes Here -->
 </head>

The <head> element will contain information about the page that isn’t displayed directly on the actual web page certain things about the page such as the title, the charset, etc. This is also where you traditionally load in important external resources.
There are a few important things that go into a head tag. Let’s look at them one by one.

Meta Tags

As you can probably guess, meta tags hold metadata about the page. Metadata takes many forms and can include keywords, authors, descriptions, etc. Here are a few notable inclusions:
Charset
The charset is typically set to UTF-8 and essentially tells the browser which character encoding to use.
Your pages should definitely include an indication of which charset to use. Don’t over think it, it’s just one of those things you need to stick to your template. Below is a typical charset declaration in HTML5.

<meta charset="utf-8">

Description

<meta name="description" content="Some description about your page">

Author

<meta name="author" content="Josh Johnson">

Title

The browser displays the title of the page because the title can be specified directly inside of the <head> element, by using a <title> element.

<!DOCTYPE html>
<html>
    <head>
        <title>My HTML Article</title>
    </head>
</html>

If we were to open a file containing the HTML code in the example above, the browser would display the words My HTML Article in the title bar

Links and Scripts

The last thing we’ll discuss regarding the head tag is the inclusion of external resources. In a very simple web page, you’ll typically see these take the form of a stylesheet or script:

<link rel="stylesheet" href="style.css">
<script src="js/jquery.js"></script>

Here I’m essentially loading my CSS file as well as jQuery (a JavaScript library) into the page. If these resources are included in the source files but not linked to in the head section, they will not function. Note that the links for these could either point to something in the local folder hierarchy (as above) or something hosted on another web server.

The link used above for the CSS file uses a link relation (rel=”stylesheet”).

Also, as an alternative to linking to external files, you can embed code right into the head element. Here’s an example with CSS, but the same can be done via the “script” tag and JavaScript (embedded scripts are often placed at the end of the body element instead).

<style type="text/css">
  a { text-decoration: none; }
  p { color: #333; }
</style>

Body Element

We have to add a body to the HTML file. Once the file has a body, many different types of content can be added within the body, like text, images, buttons, and much more.

<body>
   <!-- Page Content Goes Here -->
</body>

Complete HTML Structure

<!DOCTYPE HTML>
<html lang="en" xml:lang="en">
  <head>
    <meta charset="utf-8">
    <title>Design Shack</title>
    <meta name="description" content="A Very Basic HTML5 Anatomy">
    <link rel="stylesheet" href="style.css">
    <script src="js/jquery.js"></script>
  </head>
  <body>
     <!-- Page Content Goes Here -->
  </body>
</html>

4 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here