DES 250 Digital Media Design II / Fall '23
DES 250 Digital Media Design II / Fall '23

HTML Basics

HTML Document Structure

HTML Describes the Structure of Pages. To describe the structure of a web page, we add code to the words we want to appear on the page.

<html> </html>

Contains all the other elements/tags. Defines the kind of document.

<head> </head>

The <head> element contains information about the page (not visible in the browser). You will usually find a <title> element inside the <head> element Also the "charset" attribute: The charset attribute specifies the character encoding for the HTML document.

The <title> </title> tags contain the page title. Although it won't be visible in the browser it visible when you bookmark the page or on your browser's page tabs, for example. Don't forgot to define your pages title.

<body> </body>

Everything inside this element is rendered inside the browser window.

HTML code:
<!doctype html>

<html>

<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>

<h1>This is the Main Heading</h1>

<p>This text might be an introduction to the rest of the page. And if the page is a long one it might be split up into several sub-headings.<p>

<h2>This is a Sub-Heading</h2>

<p>Many long articles have sub-headings so to help you follow the structure of what is being written. There may even be sub-sub-headings (or lower-level headings).</p>

<h2>Another Sub-Heading</h2>

<p>Above you can see another sub-heading.</p>

</body>
</html>
result in browser:

HTML Tags

Elements are usually made up of two tags: an opening tag and a closing tag. (The closing tag has an extra forward slash in it.) Each HTML element tells the browser something about the information that sits between its opening and closing tags.

There are a few tags that don't need a closing tag. They don't contain information but have an effect on the layout. Good example is the break tag which simply creates a line break. HTML code:
<br>


PPT Summary

Below is a PPT presentation connected to the book HTML & CSS about the HTML document structure.

Reading

Please download and read the HTML basics excerpt from the book "HTML & CSS – design and build websites".