HTML Text Elements

An XHTML element is a component of an XHTML document.  It is typically comprised of a start tag, an end tag, and some web content in between the start and end tag.

HTML element consist of an opening tag, content and a closing tag.element-name-syntax

We’ve already learned about the <html>, <head>, <body>, <meta>, and <title> elements.  Now let’s learn some elements that we’ll use to present actual text content on our web page:

<h1> – <h6> Headings
<p> Paragraph
<br> Line Break
<hr> Horizontal Rule
<ul> Unordered List
<ol> Ordered List
<li> List Item

The <h1> – <h6> Elements
Heading elements provide structure to a web page:
h1-h6-elementHeading elements add blank lines before and after the text, just like <p> does.
The <h1> element – often referred to as the main heading – indicates the most important heading and should be used no more than once per page.

The role of XHTML is to define and organize content, not to format it.  Heading elements should not be used as a way to bold words on the page.  Rather, they should be used to define the relative importance of content.  Thus, <h2> is more important than <h3>.
Lower elements (e.g. <h4>) can be used, even if higher ones (e.g. <h3>) haven’t.

The <p> Element
The standard way of presenting blocks of text in an XHTML document is to use the <p> (“paragraph”) element:
p-element
Text content can also exist in an XHTML document all by itself.  However, this is not recommended, as it’s easier to format and style text inside a <p> element, as we’ll learn later in the course.

The <br> Element
The <br> (“break”) element creates a line break without adding any blank lines above or below:
br-element

The <hr> Element
The <hr> (“horizontal rule”) element draws a horizontal line across the screen:
hr-elementNote that the <hr> element is another self-closing element and includes the trailing slash.

The <ul> Element
The <ul> element (“unordered list”) creates an indented bullet point list of items:
ul-elementThe <li> element (“list item”) is used for each individual item in a list. They are all nested within the <ul> tags. By default, the list items are shown with bullet points, but this can be changed to squares, circles, or other graphics using CSS, which we will learn later in the course.

The <ol> Element
The <ol> element (“ordered list”) creates an indented list of numbered items:ol-elementThe <ol> element works identically to the <ul> element.  The only difference is whether the listed items are shown with bullet points or numbers. By default, the list items show with incrementing numbers.  By using CSS, we can change this to letters or Roman numerals.

Advertisements