HTML

1.2. HTML#

HTML (Hypertext Markup Language) is the main language used to create and structure web pages. Web pages are the main content of the world wide web, which is the main public hypertext network used today.

1.2.1. Your First HTML Document#

Below is an example of a simple HTML document.

index.html#

<!DOCTYPE html>    
<html>
    <title>My First HTML Document</title>
    <p>Hello World!</p>
</html>

1.2.2. Web Browser#

A web browser is a software application that transforms HTML documents into interactive pages. Web browsers are available on most modern computing devices inlcuding desktop, laptop and mobile devices. It is likely that you are using a web browser right now to read this text.

Examples of web browsers (sorted by market share [1]):

Chrome
Safari
Firefox
Opera

At the core of a web browser contains is the engine, which is responsible for interpreting HTML and rendering it into a visual form, along with any multimedia to be embedded such as images.

Warning

TODO: ADD IMAGE HERE SHOWING RELATIONSHIP BETWEEN BROWSER, ENGINE AND HTML FILE

1.2.3. HTML Standard#

Note

You can find the latest standard here https://html.spec.whatwg.org.

HTML is standardized by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (Web Hypertext Application Technology Working Group) to make sure that web pages work the same way across different web browsers and devices.

The HTML standard is important because, without a set of common rules, every browser might interpet HTML or display page content differently. Imagine if one browser showed a website with all the images out of order, while another browser made the text really small. The HTML standard creates a consistent and reliable experience for everyone using the web.

The standard is also important for software engineers who are writing HTML. The standard sets rules for how HTML should be written. Software engineers must follow these rules to make sure their site looks and functions properly for everyone, no matter what browser they’re using.

1.2.4. HTML Document Structure#

Tags#

The main building block of HTML are tags, which define how to display different parts of a webpage. Each tag is written inside angle brackets, like this: <tag>. A HTML page is a hierarchy of tags, with tags nesting inside each other.

Most tags come in pairs with an opening tag, like <p>, and a closing tag, like </p>. The closing tag is almost the same as the opening tag, but it has a forward slash / before the name. Everything between the opening and closing tags is affected by them.

Example of the paragraph, <p></p>, tag:

<p>This is a paragraph of text.</p>

Example of a heading, <h1></h1>, tag:

<h1>This is a heading.</h1>

Hint

Further detail about tags can be found on Elements and Tags.

DOCTYPE declaration#

All HTML documents start with a <!DOCTYPE> declaration. This is considered different from a tag and does not have a matching closing tag. This declaration is used to specify the version of HTML standard that the rest of the document uses.

In most cases, you will want to use the HTML5 standard, which is indicated with the declaration

<!DOCTYPE html>

html tag#

Next are the <html></html> tags, which wraps around the rest of the document, including the head and body tags.

<html>
    <!-- Document content goes here -->
</html>

head tag#

The head section, declared with <head></head> tags, contains information about the webpage that is not directly visible to users. This section includes things like the title of the page (which shows up in the browser window or tab), links to external files like CSS for styling, and meta tags that help search engines understand the page.

Example:

<head>
    <title>My Awesome Webpage</title>
    <link rel="stylesheet" href="styles.css">
</head>

Note

We will learn more about the options available in Interactivity (WIP).

body tag#

The body section, declared with <body></body> tags, contains everything that you actually see on the webpage, such as text, images, buttons, and links. This is where the main content of your webpage goes.

Example:

<body>
    <h1>Welcome to My Webpage!</h1>
    <p>This is a paragraph of text.</p>
    <img src="image.jpg" alt="A cool picture">
</body>

Comments#

It is common programming practice to document or explain pieces of code using comments, which are lines in code that are ignored by the interpreter or compiler.

HTML also supports comments

<!--This is a single line comment -->

<!--
    This is a multi-line comment.
    Every line in this comment is ignored by the browser engine.
    <p>Even valid HTML is ignored such as this paragraph!</p>
-->

1.2.5. A Complete Example#