CO 3713 DIGITAL COMMUNICATION
ASSOCIATE PROFESSOR WENDY ROUSSIN, MFA
wroussin@comm.msstate.edu

Basic HTML Page Elements

A basic page in HTML coding contains required elements, called tags. Please note that most elements have beginning and ending tags. Information must be properly formatted and contained within these tags to be displayed correctly in the browser. Some of the original coding tags used for hand coding sites are now considered obsolete and have been replaced with styles (CSS).  We will use embedded CSS style tags instead of obsolete formatting tags. CSS is slightly more complicated but allows for greater precision and less duplication. Tags should always be written in lowercase.

Many of these tags will be set for us once we begin working with Dreamweaver. However a basic understanding of code and coding terminology will help us understand the structure of an html document and how to make adjustments when WYSIWYG isn’t accurate.

Certain tags such as html, head, body, and title are used only once in an HTML document but others can be reused and changed as necessary.

Beginning tags are identified with "<tag>", while ending tags are identified with "</tag>"
Certain tags do not have a closing tag.

When you are using a tag with attributes, the defining attribute is indicated by <tag attribute="named attribute">.

Common Tags

<html>
This tag identifies that you are creating a page using Hyper Text Markup Language. The browser will interpret the tags contained in your document to display your content. Each web page begins with a <html> tag and ends with a closing </html> tag.

<head>
The head tag contains important elements that your browser need to access in order to display correctly, or for search engines to find your site. If you are using any scripts or style sheets, they will be contained in the head section. Style sheets (CSS) can be inline, embedded, linked or imported. We will use embedded CSS. Head sections end with </head>

<title> ... </title>
The title tag identifies the text seen at the top of the browser.

<style>  … </style>
The style tag sets up formatting such as colors, fonts, fonts sizes, links, and margins.
Individual attributes are set up with attribute {…} within the style section. Some attributes can be combined within the same section. See your Basic CSS Handout for more information.

<body>
The <body> tag contains all of the actual displayed content of a webpage. Text, links, images, tables, and lists are all examples of tagged content that can be added within the body tag. The body section ends with </body>

Tags used inside of the <body> tag:

<p> ... </p> This tag defines a paragraph. It creates some space before and after itself. The </p> tag is somewhat optional.

<br> or </br> This tag sets line breaks. It is an empty tag that does not need to be closed.

<h1>...</h1> thru <h6> …</h6>  These tags are header tags. They are used for titles and sub-titles, like in a table of contents or in a research paper.

<a> This link tag defines an anchor. It can link to a website or email address or to a specific location on your page

NOTE: Text between tags >  < will appear in the browser as the link.
NOTE: adding ?subject= between the end of the email address and the "> will add a subject line to the email address. No spaces.
NOTE: Email links work with email applications. They do not work for webmail.
NOTE: adding target="_blank" between the url and the > creates a link that opens into a new window. target="_blank" goes after the " at the end of the url.

<table> … </table>  sets up a table
<tr>… </tr>               sets up a row in a table
<td>… </td>             sets up a cell in a table

<ol> …</ol> or <ul> … </ul> set up ordered and unordered lists.

We will explore these table and list tags further slightly later in the semester.

Other Basic Tags:
<!--      -->  Comment tag. Can be used for notation or to ‘hide’ items
/*   */           Another form of comment tag, used only inside a style sheet (CSS)

Text and elements between these comments tags are visible in the page source but not on the page

SAMPLE HTML DOCUMENT STRUCTURE: (no content or formatting is included)

<html>
<head> 
<title> </title>
<style> </style>
</head>
 <body>
 The content of your page goes here. Use tags for the different elements
</body>
</html>