structure with cross shaped glass

HTML Basic Structure

Leave a comment

Overview

In this lesson you will learn about the doctype declaration as well as three of the main elements for creating and organizing your code; html, head, and body. Take a look at the code below and take notice of the elements mentioned.

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title Goes Here</title>
    </head>
    <body>
        <h1>Page Header</h1>
        <p>Paragraph Text</p>
    </body>
</html>

Doctype Declaration

The doctype declaration is placed at the top of every HTML page. This is not an html element or a tag. It is simply information provided to the web browser regarding the version or standard of HTML to expect. The most recent version, HTML5, uses the simple declaration <!DOCTYPE html>.

HTML Tags

The opening <html> tag and the closing <\html> tag form a wrapper for all of your HTML content. All other HTML elements are placed within these tags.

Head Tags

Items found between the open and closing head tags are not visible on the page. These are items that provide information to the browser, such as the page title, page author, links to stylesheets, scripts, etc.

Body Tags

The body of your HTML page is where all the visible elements live. As you scroll through this page, you may notice a navbar, an image, links to other pages, sections of text, etc. All of this was created with elements placed between the opening and closing body tags.

grayscale photo of laptop computer

Intro To HTML

Leave a comment

What is HTML?

HTML is one of the three main languages used in creating web pages. It is the standard markup language that gets translated by your web browser and is typically used along with a styling language known as CSS (Cascading Style Sheet) and a programming language called JavaScript.

Typical web pages will include items like titles, subtitles, navbars, links, images, videos, forms, buttons, etc. Each of the items on a web page are created using HTML markup.

Hypertext Markup Language

HTML is short for Hypertext Markup Language. Though it may sound complicated, it is really just a text document containing special markup. The markup is written between angle brackets < > and are referred to as tags. These tags are used to create HTML elements. In the example below you can see a few common elements.

<html>
    <body>
        <h1>Header text</h1>
        <p>Paragraph text</p>
    </body>
</html>

Most elements, like the ones above contain an opening tag and a closing tag. Notice the closing tags contain a forward slash right after the first angle bracket.

More About Tags

Tags can contain attributes. An attribute provides information about an element. For example, you may want to give an element a unique id or a specific class that can be used to style the text a certain way.

<html>
    <body>
        <h1 id="main-header">This is the main header</h1>
        <p id="main-text" class="red-text">This text will be red</p>
    </body>
</html>

Each attribute is made up of a name and a value. The h1 element shown above has an attribute named id with a value of main-header. Notice the p tag has two attributes. Elements can have multiple attributes separated by a space.

Summary

HTML is a text based markup language used to build web pages. Elements are created using tags. Attributes can be added to an opening tag to provide information about an element.