Intro to HTML

August 25, 2022

What is HTML?

HTML (Hypertext Markup Language)

provides content and structure of web pages

Hypertext: text displayed on an electronic device which contains references (hyperlinks) to other documents which can be quickly accessed through the user interface (mouse click, touchscreen, etc.)

Markup Language: a system used to annotate a document with syntax that is distinguishable from content (Examples: Wikitext, XML, HTML)

HTML Elements

Individual component of an HTML document, consisting of the start tag, child elements or content, and a closing tag (if present)

<p> This is some content </p>

HTML Tags - the HTML tag specifies the name of the element and this is

name is surrounded by angle brackets. Most elements have a start tag and an end tag. The end tag has a forward slash afer the opening bracket.

Opening Tag: <p>
Closing Tag: </p>

HTML Attributes

modifier of an element that is defined in the start tag.

Consistes of both an attribute name and an attribute value, separated by an equal sign. The attribute value should be enclosed in double quotes or single quotes.

In this example the attribute name is “class” and the attribute value is “foo”

<p class="foo"> This is some content. </p>

Simple Web Page

DOCType

This should be the first line of every HTML page you write. This line signals to the browser that it is dealing with an HTML5 document.

<!DOCTYPE html>

HTML

Next, we create the first element of every web page, the html element. This is the parent element of the entire webpage. The “lang” attribute signals to the browser what human written language the page is written in.

<html lang="en">

The html element has both a start and end tag. Just like the <html> at the start of the page there is also a </html> at the end of page as well

HEAD

After the html element, we write the head element. Note that we have not closed the html element yet. The head element contains some meta data for our page.

<head>

Within the head element we create two additional elements before closing it, the meta element, which notes the character encoding of the document and the title element, which notes the title of the document.

<head>
    <meta charset="utf-8">
    <title>This is the title</title>
</head>

Note that we typically indent child elements

BODY

After we close the head element, we start the body element. Within this body element exists the main content of our document. The p annotates a paragraph of text.

<body>
    <p>This is some content.</p>
</body>

Simple Page

The finished product, sometimes referred to as an HTML skeleton

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>This is the title</title>
    </head>
    <body>
        <p>This is some content.</p>
    </body>
</html>