Comp 484
Because HTML is often people’s first experience with coding, there can be some apprehension about learning it. Thankfully, HTML syntax is relatively simple and easy to learn. Most people can learn the basics of HTML and begin coding within the same day.
HTML is a markup language, meaning that content on a page is marked up by tags that identify the content inside them. A paragraph, for example, can be identified by placing the opening <p> tag before the content and the closing </p> tag after it.
<p>This is a paragraph.</p>Tags consist of a left angle bracket (<), followed by characters that identify the tag, and a right angle bracket (>). Closing tags are the same as opening tags, but include a forward slash (/). Although many elements require both an opening and closing tag, some elements do not require a closing tag at all.
All HTML documents revolve around three basic elements. The <html> element identifies the document as HTML. Inside it is the <head> element, which contains metadata, the document title, and links to external resources. Following the head is the <body> element, which contains all visible page content.
<html>
<head>
</head>
<body>
</body>
</html>
A doctype declaration appears before the opening HTML tag and tells the browser which version of HTML to expect. In practice, doctypes are mainly used to trigger standards mode rather than quirks mode. For that reason, all HTML documents should include a doctype declaration.
Common doctypes include:
HTML 4.0 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML5
<!DOCTYPE HTML>Some elements can be enhanced using attributes. Attributes provide additional information or functionality and consist of a name and value. Values are typically placed in quotation marks.
<h1 class="headline">Article’s main headline</h1>Some HTML elements are replaced by external resources such as images or videos. These are called replaced elements and often have predefined dimensions.
<img src="photo.jpg" alt="my awesome photo">HTML creates structure by nesting elements inside one another. When nesting elements, child elements must be closed before their parent elements.
This example is incorrect:
<p>You must close all nested tags <strong>first!</p></strong>This is the correct syntax:
<p>You must close all nested tags <strong>first!</strong></p>HTML also has rules about which elements may be nested inside others. Traditionally, HTML distinguished between block-level and inline-level elements. HTML5 expands this concept into several content categories, making nesting rules more detailed but also more flexible.
Comments are used to leave notes within code. They are ignored by browsers and are helpful for documentation and collaboration.
<!-- This is a comment -->Some characters are reserved in HTML and must be written using named character entities. These entities begin with an ampersand and end with a semicolon. For example, to display an ampersand you would use &.
You can find a list of named character entities on the HTML Reference page.