CS50 HTML
Overview Key Terms
HyperText Markup Language, or HTML, is the language that describes the contents of • HTML
web pages. It's not a programming language (it doesn't contain loops, if statements, • element
etc.), but it does allow a web designer to decide how a web page is laid out. When a
• tag
user requests a web page, the web server will send the contents of that page in HTML.
• DOM
The web browser interprets this HTML and displays the web page to the user.
• attribute
HTML Basics
To the right is a basic, sample HTML web page. The first line clarifies
that the document is an HTML document (specifically, an HTML5 doc- <!DOCTYPE html>
ument). After that, HTML code is organized as a series of nested ele-
ments. Each element begins and ends with a tag that indicates what <html>
type of element it is. Anything between those tags is the contents of <head>
<title>hello, world</title>
the element. In our example, the outermost element is the html element,
</head>
since it is enclosed with <html> at the start, and </html> at the very end.
<body>
Everything in between those two tags is part of the html element.
Hello!
</body>
In general, opening tags will take the form <tagname> and closing tags
</html>
will take the form </tagname>. Inside of our html element are two other
elements: head and body. The head element contains information about
the webpage that isn't in the body of the web page itself. For instance, the head element here contains a title
element, which sets the title of the webpage to hello, world. Inside of the body element, which defines what's
actually in the main content area of the webpage, is just the word Hello!
You can think of the structure of an HTML document as a tree-like hierarchy. The html element is at the root of
the tree. Branching off of it are the head and body tags. Branching off of the head tag is the title tag, and so
forth. This model of viewing an HTML document as a tree is known as the Document Object Model, or DOM.
Common Tags
HTML offers many tags that can be used to format a web page. The ones in our example – html, head, title, and
body – are very common and will likely appear in every web page we write. Other tags may appear in particular
situations. For example, headings in web pages are denoted by the tags <h1> through <h6>, where <h1> is the
largest, main heading, and each subsequent one is smaller. The <p> tag denotes a paragraph.
Element Attributes
In addition to having a name, HTML elements can also have attributes, which provide additional information
about them. For instance, the <img> (image) tag takes an attribute called src, which specifies the address for, or
where to find, an image. So a tag like <img src="[Link]"> would place the image [Link] on the webpage, so
long as [Link] is in the same directory as the HTML document.
To create links to other pages in HTML, we use the <a> tag. The <a> tag takes an attribute called href, which
specifies what web page the link should link to. As a result, HTML like <a href="[Link]
Here</a> would create a link labeled "Click Here" which, when clicked, would take the user to Google.
All HTML elements can also have an id attribute, which must be unique. The id can help to identify particular
elements in the webpage. HTML elements can also have a class attribute, which does not have to be unique and
can also be used to identify HTML elements. We'll see the utility of the id and class attributes when we begin
dealing more with CSS and JavaScript.
© 2018 This is CS50.