4

Basic HTML Elements

There’s a wide range of HTML elements, and technically all formatting of those elements happens in CSS. But certain HTML elements come with semantic meaning for how text should be presented on the screen.

In this chapter, we look at the most basic elements, and how they can come together to create a well-formatted, readable, and meaningful page.

HTML Text Formatting

If you’ve created text in Word or Google Docs, you’ll know that formatting can be done with the press of a few buttons. Select the text and choose a style from the menu, and formatting is applied. White space is added between paragraphs and headings, bullets are added to unordered lists, you can change the color of text, and more.

It’s not quite like that in HTML. If you just write text in an HTML document, there will be no formatting. All the text will run together, new lines will be ignored, and certain characters will not display properly.

While browsers do use a default style sheet to format all HTML elements, we still need to use HTML to describe every piece of content on the page. Without the HTML, the browser won’t know what kind of text is on the page.

So let’s start with the most common elements: headings and paragraphs.

Paragraphs and Headings

You were introduced to paragraphs in the last chapter. They are blocks of text that generally contain one idea, in one or more sentences.

To create paragraphs:

  1. Open the boilerplate.html file and save it as chapter4.html.

  2. On a new line after the opening <body> tag, type <p>.

  3. Type This is a paragraph!.

  4. Type </p>.

  5. On a new line, type <p>This is another paragraph.</p>.

  6. On a new line, type <p>This is a third paragraph.</p>.

  7. Save the file, then open it in your browser.

    You’ll end up with what you see in FIGURE 4.1.

The output window in HTML shows three lines of text tagged as paragraphs: This is a paragraph!, This is another paragraph, and this is a third paragraph.

Figure 4.1 Three blocks of text, formatted as paragraphs in HTML

Headings are slightly different. HTML allows for six levels of headings, with Heading 1 (<h1>) being the most important and Heading 6 (<h6>) the least important (FIGURE 4.2).

The syntax and the output for all the heading tags from <h1> to <h6> available in HTML are shown.

Figure 4.2 All the headings available in HTML, from <h1> to <h6>

The principal role of headings is to create a visual hierarchy on a page. Paragraphs should be organized into sections, with headings at the top of those sections.

Headings also add meaning to the text—meaning that’s important to search engines.

Semantically, there should only be one Heading 1 on a page. As we move down the page, we should make sure to keep our headings in the right hierarchical order.

The smaller the heading number, the bigger the idea it should represent. So <h2> tags should represent only the big ideas on a page.

Lists

After paragraphs and headings, the next most common element you’ll find in text is a list. If you look back at a Word or Google Doc you’ve done recently, you’ll likely find bulleted lists show up at least a few times.

There are two different types of lists you can create in HTML: ordered and unordered.

Ordered lists (by default) are prefixed by numbers. Unordered lists have bullets (Bullet point) prefixed.

Depending on the type of list you want to create, use an <ol> tag (for an ordered list) or a <ul> tag (for an unordered list). Between the opening and closing tags, each item on the list will be enclosed in <li> tags (for list item).

To create an unordered list:

  1. In your HTML file, type <ul> to begin the list.

  2. Type <li>Apples</li> to create the first of three items on the list.

  3. Type <li>Bananas</li>.

  4. Type <li>Cherries</li>.

  5. Type </ul> to end the list.

    And in FIGURE 4.3, you see how it looks.

The output of the unordered list created by the <ul> tag in HTML is displayed in a browser. Following are listed that are prefixed with bullets: Apples, Bananas, and Cherries.

Figure 4.3 The unordered list you created, as rendered in the browser

Quoting a Block of Text

Traditionally, in printed material, quotations of substantial amounts of text are set apart from the surrounding content by indentations or changing the type style. HTML includes the block-level element <blockquote> (which conveniently contains “block” in its name) to accomplish the same thing in the browser. By default, <blockquote> elements are indented compared to other block elements, but you can use CSS to change the indentation.

To provide a source for the quotation, include the cite attribute with the URL of the source as its value. You can also use the <cite> element to give the title of the source in text (CODE 4.1, FIGURE 4.4). It’s normally styled in italics by the browser, but you can change that with CSS. If you wish to provide a link to the source as well, combine the <cite> element with an <a> element.

The output of quoting a block of text is displayed in a browser. The paragraph content at the top is left aligned and another paragraph below this is center aligned. The cite element "The Importance of Being Earnest" is styled in italics.

Figure 4.4 Code 4.1 as rendered in a browser

To quote a paragraph with citation:

  1. Type <blockquote>.

  2. Type <p>.

  3. Type the quote.

  4. Type </p>.

  5. Type <cite>.

  6. Type the source of the quote.

  7. Type </cite>.

  8. Type </blockquote>.

Formatting Text Inline

The last of the basic elements we’ll cover are inline elements—that is, elements that are used inside other elements.

Paragraphs, headings, and lists are “block-level” elements. They are self-contained sections that start on a new line and take up the entire width of the container. But inline elements do not start on a new line and are only as wide as the content. An example is the <strong> tag.

In the following task you'll create a short paragraph (a block element) and change the formatting of some of the text in the middle of it (an inline element).

To bold text with the <strong> tag:

  1. Type <p>We use the strong tag to.

  2. Type <strong>draw attention</strong>.

  3. Type to text by bolding it.</p>.

    You can see the result in FIGURE 4.5.

The result of the code with the paragraph and strong tags shows the following, We use the strong tag to draw attention to text by bolding it. The words "draw attention" are bolded to highlight the importance among the other words.

Figure 4.5 The paragraph produced by the code in this example

Notice that the <strong> tag is inside the <p> tag but still inline with the text. And by default, the browser bolds <strong> text. However, there’s another benefit to using the <strong> tag. It tells browsers and search engines that this text is slightly more important than the normally formatted text.

The catalog of tags for formatting inline text is extensive; here are the most common ones (FIGURE 4.6):

  • <em> is used for emphasis. It shows as italicized text. Use the <i> tag if you want to set the text apart without semantically noting “emphasis.”

  • <u> is used to underline text. It shows as text with a line drawn under it.

  • <s> is used to cross something out because it is no longer correct. It shows as text with a line through it. You may also come across <strike> in older code, but it’s now been replaced by <s>.

  • <del> looks similar to <s>, but lends a slightly different meaning to text. <del> marks something that has been deleted from the original document.

  • <ins>, which is usually underlined by default, notes something that has been inserted into the document.

  • <mark> is used to highlight text. It adds a yellow background to text, as if a highlighter pen has been drawn across it.

  • <small>, which renders text smaller than the default size, is used for notes, side comments, and fine print.

  • <sup> is superscript, and makes text appear smaller and raised slightly above the baseline. This is often used for exponents, or bibliographic citations.

  • <sub> is used to display subscript text. Like <sup> reduces text size but is lowered below the baseline than normal text.

  • <time> represents a specific time and is often combined with the datetime attribute to convert human readable time into a machine-readable format.

    You’ll find a list of valid datetime values here: developer.mozilla.org/en-US/docs/Web/HTML/Element/time.

  • <abbr> represents an abbreviation and is usually rendered with a dotted underline. You can include the fully expanded version of the abbreviation in the title attribute, which is usually displayed in a tooltip on mouseover.

  • <br> creates a line break. It’s useful for situations when you want to make lines a specific length, as in poetry or in a mailing address.

The list of formatting markup and their default styles in a browser is featured.

Figure 4.6 All of the listed formatting markup and their default styles in Chrome.

Marking Up Code

There are also two HTML tags specifically used for marking up code:

  • <code> is displayed in a monospace font and is used to represent a short snippet of computer code.

  • <pre> is also displayed in a monospace font and represents preformatted text. That means any text, including white spaces, appears exactly as it was typed.

If you need to display multiple lines of code, place the <code> element inside a <pre> element. The only time you should use <code> by itself is for an inline element (CODE 4.2, FIGURE 4.7).

The browser window shows the output of the code 4.2.

Figure 4.7 Code 4.2 as rendered in Chrome.

Wrapping Up

With that, you have the basics down. You know how to format text and create a nice visual hierarchy in the browser. This will make your website much easier to read. Now let’s talk about what makes the web … well, the web: hyperlinks!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset