HTML
In this lesson, we'll learn the basics of HTML! By the end of this lesson, you should be able to comprehend and write basic HTML.
Introduction #
HTML (HyperText Markup Language) is not a programming language. It is a markup language. True programming languages have the ability to describe logic. HTML, however, is used to display and format parts of a webpage. It is strictly presentational.
Tag syntax #
HTML marks up content with HTML ‘tags’. HTML tags are the basic building blocks of all web pages. Essentially, they format the way that information and text is displayed. They put the content into categories (called elements!) such as ‘heading’, ‘paragraph’, and ‘table’. A basic HTML tag consists of a name enclosed within ‘angle brackets’ i.e., less than and greater than symbols. Also, these tags usually come in pairs of opening and closing tags. The closing tag is the same as the opening tag except that the closing tag has a forward slash after the less-than symbol. Have a look at the example below.
<tagname> content </tagname>
Some tags are ‘self-closing’ which means that they don’t require a closing tag. For example,
<selfclosing/> content
The diagram below shows an example of a labeled HTML element.
The <head> and <body> tags #
Furthermore, valid HTML documents require the <head> and <body> tags too as highlighted on lines 2, 4, 6, and 8 below. Also, the head and body tags have nothing to do with where the content is positioned on the output of the browser — they are used to compartmentalize the document itself.
The <head> tag contains metadata such as the page title, links to CSS and JS files, and keywords that are used by search engines like Google. The metadata is not displayed in the browser.
The <body> tag, on the other hand, contains the actual markup like paragraphs, images, and tables that are displayed in the browser.
Doctype #
The doctype is a declaration that tells the browser the HTML version that the document is written in. It should be the absolute first thing on the document. Some common doctypes are listed below.
<!DOCTYPE html> |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
HTML comments #
HTML Comments look like <!-- Comment --> and the browser ignores them; you can just put them there for yourself or for others who might look at your HTML document!
Tag attributes #
All HTML tags can have ‘attributes’ which provide more information about a certain element. Attributes are always placed in the opening tag of an element and exist as key/value pairs. The values are always in quotes (they can be double or single, but they’re usually double). To illustrate,
<tagname attribute = "value"> content </tagname>
Common tags #
The HTML below illustrates how some common tags are used. Notice the <img> tag and how it has an attribute called src.
Test yourself on HTML! #
Which of the following is the name of the largest HTML heading tag?
<head>
<heading1>
<h1>
<Heading>