- HTML Text Formatting
- Paragraphs and Headings
- Lists
- Quoting a Block of Text
- Formatting Text Inline
- Marking Up Code
- Wrapping Up
This chapter is from the book
This chapter is from the book
This chapter is from the book
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:
Type <p>We use the strong tag to.
Type <strong>draw attention</strong>.
Type to text by bolding it.</p>.
You can see the result in FIGURE 4.5.
)
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.
)
FIGURE 4.6 All of the listed formatting markup and their default styles in Chrome.
VIDEO 4.5: Converting a Fully Formatted Word Doc to HTML
You’ve learned enough formatting in HTML to start with a Word document and convert it to HTML.