Basic HTML

Understanding HTML can be a little intimidating at first, but it doesn’t have to be hard to understand. Basically, every type statement on a website page needs to have tag identifiers to tell the browser what it is and how to interpret it.

But first what does an HTML tag look like. An HTML tag is an identifier surround by the symbols <tag> and <tag/>. Every element has an opening tag, <tag> and the closing tags < />. You can recognize the closing tag by the additional / before the last >.

A basic web page is constructed somewhat like this:

<html>
<head>
</head>
<body>
</body>
</html>

Everything between the <html> and </html> tags is the entire page. Everything between the <head> and </head> tags contains vital information for the site to display and perform properly. Everything between the <body> and </body> tags is the visible part of the web page. You should also note here that <head> and <body> sections of the web page are contained within another tag, <html>. You will see this pattern repeatedly as you build web pages.

Here is another example of a simple HTML page. You will notice that now within the <body> tags, there now appears two more sets of tags that contain specific content. The first set of tags are the <h1></h1> tags that contain the headline, and a set of paragraph tags (<p></p>) containing the first paragraph. All web browsers have automatic settings for these tags, so simply by using these tags alone with no other information, any web browser will render these tags properly. Other standard tags are the subheadings (<h2></h2>,<h3></h3> thru <h6></h6>.

<html>
<head>
</head>
<body>
<h1>This is a Headline.</h1>
<p>This is the first paragraph.</p>
</body>
</html>

When this page renders in a browser, the only thing visible to the reader is the content between the <h1> tags and the <p> tags, as shown below:


This is a Headline.

This is the first paragraph.


Another tag is the <blockquote></blockquote>. This tag offsets its content from the rest of the text. People will recognize this as a callout, quote, highlight, etc. of something you want your audience to pay special attention to, usually something from the text itself.

All of the tags so far have been in some from of a paragraph, that the tags used separated the content inside it from the content inside the other tags. There are other tags, however, that can be used specifically on the content within the tags, such as for bolding and italicizing text. You can use the <strong></strong> tag for bolding text, or the <em></em> tag for italicizing.

<html>
<head>
</head>
<body>
<h1>This is  Headline.</h1>
<p>This is the first paragraph.</p>
<blockquote>This is the blockquote.</blockquote>
<p>This is the second paragraph.</p>
<h2>This is a second-level headline.</h2>
<p>This is the first paragraph <em>after</em> the <strong>second-level heading</strong></p>
</body>
</html>

Again, the following is how the code above would looked rendered inside a typical browser:


This is Headline.

This is the first paragraph.

This is the blockquote.

This is the second paragraph.

This is a second-level headline.

This is the first paragraph after the second-level heading


You can try this out yourself if you have a text editor that can save files in the html format. Simply paste the code above into the text editor, save it appropriately as an html document, and then open it with a web browser. You should see very similar formatting as the formatted text you see here.

This entry was posted in HTML-CSS Lessons and tagged , , , . Bookmark the permalink.

Comments are closed.