Step 8

HTML Text Tagging

An HTML element usually consists of a start tag and end tag, with the content inserted in between. example:

Content goes here:
The HTML element is everything from the start tag to the end tag. example:

My very first paragraph:.
There are several title (headline) types when using HTML tags.
<h1>through <h6>
<h1></h1> is the largest
<h6></h6> is the smallest
All are all bold by default.

We can change the default size and weight of these titles using CSS code.

We can also tag body copy. This is done by tagging it as a paragraph. example:

Body copy goes here:
There are several other ways to stylize type using html tags. Other tags include:
- <i></> for italic
- <e></em> This stands for emphasis. It is visually identical to italic, but more important to search engines
- <b></b> for bold type
- <strong></strong> This is another way to represent bold type. Again, visually identical but also more important to search engines

About Compound Rules:
We can stylize these different tags to appear different depending on which box they sit in. This is done by making compound CSS rules. For example, instead of making a generic rule for all h1 text we can make different rules for h1 in different boxes. These could include header, main, aside, footer, etc. The compound rule would look like this…

header h1 {
font-family: your choice here;
font-size: your choice here;
font-weight: your choice here;
color: your choice here;
}

main h1 {
font-family: a different choice here;
font-size: a different choice here;
font-weight: a different choice here;
color: a different choice here;
}

aside h1 {
font-family: a third choice here;
font-size: a third choice here;
font-weight: a third choice here;
color: a third choice here;
}

footer h1 {
font-family: a forth choice here;
font-size: a forth choice here;
font-weight: a forth choice here;
color: a forth choice here;
}

Inline CSS Style:
Next we can also change the appearance of the text by using inline CSS coding. This would allow us to make many general rules, but occasionally change some specific text with some inline CSS style code.

An example of that would be…

<p style="color: blue; font-weight: 800;">Paragraph text goes here./p>

The Use of the Span Tag:
Lastly, to change the appearance of text we could use the <span> tag. An example being… <p>This is a <span>paragraph</span></p> the CSS code would be used in the attached style sheet would look like this…

p span {
font-family: a forth choice here;
font-size: a forth choice here;
font-weight: a forth choice here;
color: a forth choice here;
}

tags <h1> - <h6>
<p>
<b> visually similar to <strong>
<i> visually similar to <em>

<pre>
<mark>
<code>

Common
font-size:
font-weight:
font-family:
color: (Note: only applies to typeface color, not background!)
text-align:
text-decoration:
text-transformation:
line-height:

Uncommon
overflow:
text-indentation:
letter-spacing:
word-spacing:
text-shadow:
vertical-align:

Rare
direction:
unicode-bidi:
white-space:
baseline-shift: baseline;
baseline-shift: sub;
baseline-shift: super;
baseline-shift: 10%; /* Percentage */
baseline-shift: 20px; /* Length */

Type List Tags
list items: <li> (Caution: Cannot be used alone. They must go inside an Ordered or Unordered List)

Ordered List: <ol> (displays numbers)
Unordered Lists: <ul> (shows bullet points)

Rarely Used:
Description/Definition list<dl> (does not display a number or bullet but indents item)
Definition Lists must be filled with <dd>
Example:
<dd>Cold drink</dd>

☛ IMPORTANT
Lists can exist as simple list of text on the webpage or they can become more complex structures such as the navbar or a carousel slider.

Common:
list-style:
display:
list-style-type:
(if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)

Uncommon:
list-style-position:
(specifies whether the list-item markers should appear inside or outside the content flow)

Rare:
list-style-image:
(specifies an image as the list item marker)