2. HTML Introduction
Key Terms
- HTML
- CSS
- Elements
- Tags
- Attributes
- DOCTYPE
- head
- body
- Division
- Span
- Block-level Element
- Inline-level Element
The History of HTML
HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. It stands for HyperText Markup Language.
Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether. The latest version is known as HTML5.
A Markup Language is a way that computers speak to each other to control how text is processed and presented. To accomplish this, HTML uses Elements which is comprised of Tags and Attributes.
What Are HTML & CSS?
HyperText Markup Language, or HTML, gives structure and meaning to the document by defining the page’s content as, for example, headings, paragraphs, or images.
Cascading Style Sheets, or CSS, is a presentation language created to style the appearance of content (that you created using HTML). Ways you can style the content, for example, are font-size and background-color. We will take a much deeper dive into CSS in Chapter 2 and Chapter 3 of the curriculum.
Those two languages – HTML and CSS, are independent of one another and should remain that way. It is best practice to not include CSS snippets inside an HTML document and vice versa. It is widely accepted that HTML will always represent content and CSS will always represent the appearance of the content.
What are Elements, Tags, and Attributes?
Elements are comprised of Tags and Attributes and they form the basis of HTML.
What Are HTML Elements?
An HTML element usually consists of a start tag and an end tag, with the content inserted in between. The HTML element includes everything from the start tag to the end tag.
In the following repl.it, line 10 shows an element and line 11 shows another element.
Try to run this code in Repl.it:
Another way to look at this is:
So we just learned how elements are made up of tags and attributes. It is important to realize that while they work together, they perform different functions. Let’s spend a few minutes learning the difference between the two.
What are HTML Tags?
Tags are used to mark up the start of a HTML element and they are usually enclosed in angle brackets. An example of a tag is: <h1>.
For most tags to function, they must be opened and closed. For example, <h1> and </h1>. Pay attention to how the tags are constructed: the only difference between an opening and closing tag is the presence of the forward slash, /, in the closing tag. Opening tags do not have a forward slash whereas closing tags have a forward slash. In HTML, the forward slash represents the closing of a tag.
In this repl.it, line 10 demonstrates the header tag. Line 11 shows a paragraph tag. Note that content have been removed from both of these tags so you don’t confuse them with Elements.
Try to run this code in Repl.it:
What are HTML Attributes?
Attributes contain additional pieces of information. Attributes are placed inside the opening tag (NOT the closing tag).
For example, in this repl.it, line 10 demonstrates the image tag, <img>, with the source attribute, <src>, and the alternate text attribute, <alt>. Note that because the image tag, <img> is a self-closing tag, no closing tag (e.g., </img>) is needed.
Try to run this code in Repl.it:
Golden Rules To Remember
- The vast majority of tags must have an opening tag,
<tag>, and a closing tag,</tag>. Any information you wish to convey to the end user rests between the opening and closing tags. For example:<p>I want to tell you something</p> - When using multiple tags, the tags must be closed in the order they were opened. In the following example, because the
<em>tag is opened inside the<strong>tag, the closing</em>tag also needs to be closed inside the closing</strong>tag. This is the end result:<strong><em>This is really important!</em></strong>