Headers and Paragraphs
Learning Objectives:
In this section, students will:
- Review common terminology used in web development
- Learn HTML headings and the paragraph tag
- Be able to recognize the basics of using HTML tags
Introduction
Entries in HTML are called tags. These enclose text or otherwise provide information about the content to which they are associated.
Using HTML can be thought of, in one way, as “marking-up” (adding code) to an existing text document to change its layout, presentation, and general formatting for a web browser to understand.
Terminology
Document: A collection of HTML tags, text, and/or other media in one file.
Tags: the code that “goes around” some selection or which describes some type of media.
Elements: Both the selection and the tags themselves.
Headings
One of most ubiquitous sets of tags in HTML are the headings.
Headings start with the largest heading <h1> and decreases in size down to the smallest heading tag <h6>. By default, and as influenced by other things like web browser accessibility settings, they scale down by 33% in size per level of heading.
Headings, like other tags, goes around and “mark-up” the text. By putting an opening tag, <h1>, the text, and a closing tag, </h1>, on a line, it will become that heading.
Paragraphs
Like headings, there is also a paragraph tag, <p>.
The paragraph tag, like as its name implies, “goes around” paragraphs. When used with headings, it can mark which selections are headings and which should be considered paragraphs.
Play with the Code:
Take a moment to play with the code and concepts in the embedded viewer below. Watch how code added in the HTML window is updated in the Result window.
Try it Yourself:
Over the course of the HTML modules, we will be creating a curriculum vitae for you to use. In a text editor, create a HTML document with the following:
- H1 Heading with your “Name”
- H2 Subheading of “Skills”
- Three paragraphs of text explaining each skill
Test your response on Mozilla Thimble Links to an external site..