Introduction to HTML

This article is an introduction to HTML. If you have ever been interested in how a web page works, or how web developers and web designers create the Internet, you will need to become familiar with HTML, short for “Hyper Text Markup Language”. HTML gives structure to a web page and defines different parts of the document. The HTML in a document tells a browser what elements to display, however, other technologies are used to tell a browser how the content appears stylistically. The language consists of various elements such as a “title”, or a “paragraph” or an “article” that are distinguished in a text document as “tags”. A “tag” is an element name surrounded with < and >, as in: <title>. A web page written in HTML ultimately tells your web browser that a document consists of a paragraph followed by an image followed by a link, for example.

What is HTML?

The term “Hypertext” in HTML refers to “links” in a web page that connects one page to another. These links can connect pages within a single website or even to pages hosted at other websites. HTML uses “markup language” which refers to the tags of which a web page consists. A web page is made up of special tags like: <title>, <body>, <p>, <a>, <div>, <article>, <head>, <footer>, <address>, <section>, <nav>, <ul>, and many more. These tags surround text that further defines the element. For example:

<h1>Article Title</h1>

<p>This is the text in a paragraph under a heading that defines the article title.</p>

<p>This is the second paragraph under the title.<p>

A more complete list of available tags can be found at Mozilla’s MDN Web Docs – HTML elements reference.

HTML Elements and Tags

An element is added to a web page by use of tags. The tag is often, though not always, the element name surrounded by < and >. Most elements require an opening and a closing tag; a closing tag is the almost the same as the opening tag but has “/” before the element name in the tag. The anatomy of an element is as follows:

The opening tag. The content. The closing tag.

In the example: <h1 class=’title’>Article Title</h1>

The opening tag is <h1>. It is the header 1 element that serves as a section heading. The content of the element is the string “Article Title”. The above line will tell the browser to display a header that reads “Article Title”.

Attributes

Elements can also have attributes within the opening tag. Attributes contain information that is not included in the content of the element. Attributes can be used to set an id for the element, or add a class or style to an element, or to set some sort of option for the element. In the given example, the class attribute with a value of “title” was added to the h1 element. The class attribute is not included in the content when the document is rendered in a browser, and is instead used in setting a class that can be manipulated using cascading style sheets (CSS), or with JavaScript.

There are a few points to note when working with attributes.

  • There should always be a space between the element name and an attribute name.
  • Some attributes are boolean and don’t follow the next two rules. Their presence indicates a true value.
  • The attribute name should be followed with an equals sign (=).
  • The value of the attribute should be surrounded with opening and closing quotation marks.

Empty Tags

Some elements do not have closing tags. Such elements do not have content and therefore do not need a closing tag. For example, the input element:

<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">

The example shows a the input element with seven attributes, one of which is a boolean. The input element does not contain content, and instead embeds a form element. Notice that the element does not have a closing tag.

Nested Elements

It is possible to nest elements inside one of another.

<p>This paragraph has an <a href=”www.highplainsdesignstudio.com”>anchor element</a> nested inside of a paragraph element.</p>

Elements must be properly nested. This means that an element’s opening tag, content, and closing tag must be nested inside the content of its “parent” element. In the previous example, an anchor element was properly nested inside of the paragraph element’s content. However, the next example is incorrect.

<p>This is not a correctly nested <a href=”www.highplainsdesignstudio.com”>anchor element.</p></a>

The HTML Document

All HTML documents should have a few certain tags before more specific content is added.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Document Title</title>
  </head>
  <body>
    <!-- These are comments inside the body of the HTML document. They are  not visible on the page but are useful for developers. Nested within the body element is where all of a page’s content should be located. If this example were to be run in your browser, the page would be blank because there are only HTML comments inside of the body.  –>
  </body>
</html>

The markup above has a few tags that every web page should have. They are:

<!DOCTYPE html> – In previous iterations of HTML, there were different rule sets for different versions of HTML. The doctype served as links to these various sets of rules. These doctypes were specific to the set of rules that you wanted to use. However, in the current iteration, known as HTML 5, the doctype is simply set as “html”. Nonetheless, the doctype tag is required before all other HTML on the page.

<html> – The html element wraps all of the html on the page. It is often referred to as the root element.

<head> – The head element is not meant for human readability. It is meant for machine readable information such as meta information, the document title, scripts, and stylesheets.

<meta> – The meta element is for meta information for the document. In this example, the character set that the document uses is “utf-8”.

<title> – The title element defines the document’s title as shown in a browser’s title bar. This element can only contain text.

<body> – The body element wraps all of the content on the page. All of the visible content on the web page will be nested inside of the body element. There can only be one body element in an HTML document.

<!– –> – Comments are not visible on a web page. They are not required in any document, but they can be helpful for developers. It is considered a good practice to leave informative comments.

Conclusion

At this point, an introduction to HTML has been made to you. You should now have a beginner’s understanding of HTML. You have seen what HTML looks like, seen attributes, and an example of a blank HTML document. Also, you have been given a link to the official MDN Elements Reference that lists all available HTML elements. Using this knowledge, you could begin adding elements into the body of an HTML document.

Leave a Reply

Your email address will not be published. Required fields are marked *