Some Text Elements

The Body of the Page

Every webpage has information that needs to be displayed. If it did not, we would not make a webpage at all! The body element of the page is where the browser renders the vast majority of this information on the page. We will place all the elements covered in this article within the body. To begin and create the body, just place the &ltbody&gt tag after the closing &lt/head&gt tag and the closing &lt/body&gt before the closing &lt/html&gt tag like so:
&lt!DOCTYPE html&gt
&lthtml&gt
&lthead&gt
&nbsp&nbsp&nbsp&lttitle&gtChad's Random Thoughts&lt/title&gt
&nbsp&nbsp&nbsp&ltmeta charset="UTF-8"&gt
&lt/head&gt
&ltbody&gt

&lt/body&gt
&lt/html&gt

Step One:First, type the &ltbody&gt tag after the closing &lt/head&gt tag and the closing &lt/body&gt before the closing &lt/html&gt tag


Now we are ready to start putting things on the screen!!!

Textual information is the simplest type of information to add and we will begin with that. Just like everything else in HTML, you enclose text within tags. These tags tell the browser certain information about the text such as the size of the font and whether that text will start on a completely new line. The two most basic tags for text are heading and paragraph tags denoted by &lth#&gt (where ‘#’ indicates any number 1 through 6 inclusive) and &ltp&gt respectively.

Heading Tags

To create a heading in HTML all you need to do is type in &lth1&gt Some Text &lt/h1&gt. As noted previously, the number in the heading tag can range from 1 to 6 with one defaulting to the largest font-size and 6 defaulting to the smallest font-size. All headings are bolded. The below screenshot gives you an idea of how each header looks when displayed in the browser.

 

Step Two: Next, make a title for your new blog using &lth1&gt&lt/h1&gt and then make titles for two blog posts using the &lth2&gt&lt/h2&gt tags


Paragraph Tags

Next we have the paragraph tag which operates exactly the same as the heading tag (except there are no default variations in size). Enclose the text you want to add within the tags like so, &ltp&gt Some more text &lt/p&gt, and you will now have a paragraph. Paragraphs are not bolded and are meant to contain larger amounts of information to be read (hopefully) by the viewer of your page. Here is an example of several headings mixed with paragraphs.

 

Step Three: Next, below each blog post title, make your post content using &ltp&gt&lt/p&gt tags.


You can use different heading types to do all sorts of things such as create publish dates and annotate authors of blog posts, indicate subtopics within a major topic or…anything really.

 

Step Four: Next, between the title and content of each of your posts, place today’s date using the &lth6&gt&lt/h6&gt tags.


Both heading and paragraph elements are examples of block elements. When an element is on a webpage, and does not use all the available screen space, it can be either displayed in a row with other elements (inline) or on the next available line (block). Both heading and paragraph elements are examples of block elements because, by default, they display on the next available line. Block elements are generally larger and contain more information (or have more elements nested within them) than inline elements.

Some More Block Elements

Tags for other block elements include:

  • ol
  • ul
  • pre
  • address
  • blockquote
  • dl
  • div
  • fieldset
  • form
  • hr
  • noscript
  • table

Don’t worry if you do not recognize any of these-I promise we will go over each of them in detail.

Inline elements and Their Use

Inline tags generally surround specific words or phrases that require special attention. There are also some elements that are automatically displayed inline. If we wanted to make a word bold, for instance, we can use the strong tag to do so. To use the strong tag, all you need to do is enclose whatever word or phrase you want to be bold within &ltstrong&gt &lt/strong&gt.

The inline tag &ltem&gt &lt/em&gt makes all the written content enclosed within italicized and works in the same manner as the &ltstrong&gt &lt/strong&gt tags. You can even enclose some word/phrase/sentence within both to create bolded and italicized written content. To accomplish this, enclose one within the other (the order does not matter).

This is &ltstrong&gt&ltem&gtvery important&lt/em&gt&lt/strong&gt stuff!!!

 

Step Five: Next, use &ltstrong&gt&lt/strong&gt and/or &ltem&gt&lt/em&gt tags to bold/italicize important content within your posts’ content.


Here is a list of more inline elements:

  • b, big, i, small, tt
  • abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
  • a, bdo, br, img, map, object, q, script, span, sub, sup
  • button, input, label, select, textarea

Step Six: Finally, save your work and use the steps from the previous article to view in your browser.


Review Time

Awesome!!! Now we have a webpage with content. Here is what we went over today:

  1. Information that will be displayed is placed within the body element of the page.
  2. Heading tags are numbered 1 through 6 with 1 having the largest font and 6 the smallest.
  3. Paragraph tags display larger amounts of textual content.
  4. Block elements display on the next available line and include:
    • p
    • h1-6
  5. Inline elements display side-by-side and include:
    • strong
    • em