HTML & CSS - Text

Now that we know the basic structure of an HTML page, it’s time we move on to learning how to add markup (tags) to the contents of the page to provide more meaning and structure to it. Within the second chapter of Jon Duckett’s HTML & CSS, I learned about structural markup which are basically elements that we can use to describe headings and paragraphs. I also learned about semantic markup which provide extra information. Semantic markup shows us where an emphasis is placed in a sentence or where a quotation starts and ends. This gives more meaning to the text.

We first learn about headings and their levels. Headings can be displayed at different sizes on browsers. The <h1> level is used for main headings and is the largest size. The <h6> level is the smallest size. These create sections so you can organize your text and create structure. Don't mistake the heading tag with a title tag because the heading is what appears in the actual page whereas a title tag appears in search engines and your browser's title bar.

When you look at a webpage, there is normally a heading to give you the gist of the content on the page thus making it appear more organized and professional which is what we’re aiming for.

The next area of focus within this chapter was paragraphs. In an HTML page, there is a specific way to format paragraphs. You use the opening tag <p> and the closing </p> tag to indicate the beginning and end of a paragraph. Automatically, your browser should display the paragraphs on a new line with some space between each paragraph. Although the browser will automatically show a new paragraph or heading on a new line, you can also add a line break. When desiring a line break, you may add the <br /> tag within your paragraph or sentence to create that new line. You can also create a break between themes by adding the <hr /> tag between paragraphs. This can be used when there is a change of topic in a book or a new scene in a play.

When adding meaning to the text, you may want to add strong or emphasis tags. The content of your <strong> element will appear in your browser in bold. The use of this element is mainly to emphasize the importance of your content. You can add the <em> element to indicate an emphasis that subtly changes the meaning of your sentence. Automatically, your browser should show the contents of an <em> element in italic. These two elements create a change in your content by adding meaning to it.

There are normally two elements that are frequently used for marking up quotations. These are the <blockquote> and <q> elements. The difference between a <blockquote> element and a <q> element is that a <blockquote> is used for longer paragraphs that possibly take up an entire paragraph whereas a <q> element is used for shorter quotes that sit within a paragraph. Another difference is that browsers display the <blockquote> element with an indent. Browsers normally put quotation marks around the <q> element. Both elements can use the cite attribute to indicate where the quote is from.

Abbreviations and acronyms are written a special way in HTML. For this, you use the <abbr> element. The full term is inserted into the opening tag to show what the whole term of the abbreviation is. For example, NASA is the acronym for the National Aeronautics and Space Administration. The element would be written as <acronym title=“National Aeronautics and Space Administration”>NASA</acronym>. It may sound complicated but it’s quite easy to understand once you understand the basics of HTML.

Citations and definitions have different elements as well. When referring to a piece of work such as a book, the <cite> element can be used to specify where the citation is from. Your browser will display the content in the <cite> element in italics. A <dfn> element can be used to show where you are defining a word in your text. “The <dfn> element is used to indicate the defining instance of a new term.” (Duckett 54). Some browsers may show the content of a <dfn> element in italics and some may not change the appearance.

I had created my own webpage with a musical theme (below). This was interesting to work on because it showed me how HTML may look complicated but once you understand the patterns and format, it's pretty simple. Although, at times, I became confused with where my closing tag went. Currently, my webpage doesn't look like much because I've only used my basic skills to create it. As I learn new skills, I will be applying them to the webpage to create it somewhat visually appealing. Although it may not be the next Facebook or Twitter, it is a start. Now that I knew the basics to HTML code, I had gone to a random website and clicked on 'view source' which allows me to see the HTML code of the webpage. I was able to understand why and how the webpage was formatted the way it was.

With these elements, we are able to add meaning and structure to the content of your HTML page. Every browser is different. "Browsers often display the contents of these elements in a different way." (Duckett 50). Structural markup and semantic markup are important because Google and other search engines see an HTML page without styles. The only way they understand which content is more important than others is through markup. For example, a business or company name can easily get lost within a paragraph tag with the other content without markup. But if you put the name within a <h1> tag, the search engine will know that it is more important.

If you were an expert at web design, what kind of website would you create?

Below is my example text using these elements.

View in TextWrangler

View in Safari