Essential HTML Tags
Published: September 21, 2011
Updated: October 30, 2011
In 1989, Tim Berners-Lee developed the Hyper Text Markup Language (HTML) as a method to share documents over the Internet. The primary Internet users at that time were member agencies of the Defense Advanced Research Projects Agency (DARPA) and university researchers. HTML used over the Hyper Text Transfer Protocol (HTTP), provided a method to link documents together and led to what we now know as the World Wide Web (WWW) so contrary to the claims of Al Gore, the web was not invented by a former Vice President.
Documents created for distribution over the Web use HTML as the mark-up language, which Web Browsers interpret to determine how to render those encoded documents. So, what do mark-up and render mean?
Marking up a document is the process of inserting HTML tags within the document for the browsers to interpret. When a browser interprets the HTML tags and the content of those tags the browser may then display the associated document on the screen of the computer running the browser. Rendering a document is the process of displaying the document as directed by the HTML tags contained within the document.
What HTML Tags Are
As implied earlier, HTML is a tag-based language. Actually HTML comprises two types of tags: Start or opening tags and end or closing tags. Closing tags are identified by containing the forward slash character "/" at the beginning of the tag. Everything between the opening tag and closing tag forms a HTML element. Some elements contain no content, such as the <hr /> tag; which stands for horizontal rule and the <hr /> tag places a horizontal line across the page. These types of tags are known as empty-content tags.
HTML tags may also contain attributes within the tags themselves, which are used to help describe the characteristics of the particular element represented by the tags. For instance, The <table></table> element begins the definition of a table. Adding the width attribute would adjust the width of the table; as in <table width="75%"></table>, which would cause the table to occupy 75% of the browser-screen width.
Essential HTML Tags
There are four tag pairs that must be included in each HTML document. These tags are the tags necessary for the Web browser to identify the language as HTML and render a document. The following snippet illustrates those minimal tag pairs:
<html> <head> <title>This Page</title> </head> <body> Some content. </body> </html>
The Absolute Authority on HTML - W3C: World Wide Web Consortium
- HTML Tutorial
The html Tag
Notice that the entire document in the above snippet is contained within the opening <html> tag and the closing </html> tag. This tag pair forms the HTML element and defines the content of the Web page. This element then identifies the portion of the document that contains HTML code. Why should tags be used to identify the HTML area to the browser?
There are certain directives that may be placed before the HTML content of the page, such as the document type; there are other types of content available over the Internet besides Web pages so the HTML tags instruct the browser to render a Web page.
The HTML Header
After the <html></html> tag pair, the next essential tag pair is the <head></head> tag pair. This tag pair forms the header of the document and is not directly displayed or rendered in the Web page. The header contains the descriptive information or Meta information that describes the file. Meta elements will be covered in a future hub.
There is one required element that the <head> tag pair must contain and that is the title element. The title element is defined between the <title></title> tag pair and will be displayed in the title bar of the Web browser.
Dumbledore's HTML Series
- Text Editors for HTML Programming
- Create a HTML Table
The simplest answer is that a table is a collection of data items displayed in rows and columns; the intersection of a row and column makes up a cell. Learn how to add a HTML table to a Web page.
- Create a Simple Form in HTML
HTML forms help web designers add interactivity to their sites. Discover the methods to create HTML forms.
The HTML Body
The body of the HTML document is contained within the <body></body> tag pair. Between these two tags is where the meat of the document is located. A document could be created by simply placing a chunk of text between these two tags. The document may not appear as the author intended but the browser would display the document.
Other tag pairs within the body permit the author to control the types of information displayed on the page and how that information is displayed. However, a Web page can be created and will render using just the above tags.
The next section describes some of the additional tags used to add content to the Web page:
The "Hello World" program is often assigned as a first programming assignment to learners with no programming experience.
Once you create a form in HTML you may like to act on the data at the client level before sending the data to a server.
Add Content to Your Page
So, once you have created your page, what are you going to do with it? You need to add content. The above elements create a page but display little for the visitor to view and the creator of the page has no control over the look and feel of the page. The most common content in web pages is text so you will probably add some text to your web pages.
Text may be simply typed between the <body> ... </body> tags and will display in a browser but using this method lends no control over the look of the text. The following tags permit the web-author some control to how his text appears:
- the paragraph HTML tag pair <p> .. </p>
- the emphasis HTML tag pair <em> ... </em>
- the bold HTML tag pair <b> ... </b> (now represented using strong) <strong> ... </strong>
- the newline tag <br />
- the horizontal rule tag <hr />
- the table tag pair <table> ... </table>
- the form tag pair <form> ... </form>
If you would like to learn a little more about HTML, continue to Creating a HTML Table.
What are your thoughts?
The author appreciates all comments.