HTML Tags for Web Design
written by Kenny Harper
Posted March 15th, 2010
Ever wonder how a web designer makes a web page look like it does? Here is a “peek behind the curtain” to see some important parts of building a web page.
The following YouTube video goes over some of the things mentioned in my blog post below, in regards to HTML (HyperText Markup Language) tags.
Understanding the basics of HTML tags.
To get a browser to render HTML properly, HTML text needs to be wrapped in HTML tags.
In an HTML document like a web page, HTML elements include tags, as well as text; the tags act as indicators to a web browser as to how the document is to be interpreted. An example of a tag is: <p></p> which is a tag for a “paragraph”.
For example, to make a word in HTML bold, wrap the text in a “strong” tag like below:
<strong>Text here</strong> // – - >> Text here
For italic words, use “em”, which stands for embellish.
<em>Text here</em> // – - >> Text here
If you want to use multiple tags, make sure they are opened and then closed in the following sequence, an enclosing method such as:
<tag1><tag2>My words</tag2></tag1>
<strong><em>My words</em></strong> // – - >> My words
Common HTML Tags used in web design
HTML tags commonly have and opening tag and a closing tag such as: <strong></strong>
Tags that have open and closing tags.
Bold - <strong></strong>
Italic – <em></em>
Underline – <u></u>
Paragraph – <p></p>
Text Link – <a href=”http://mysite.com”>Text Link Here</a>
Heading 1 – <h1></h1>
Heading 2 – <h2></h2>
Heading 3 – <h3></h3>
Self closing tags.
The following tags are self-closing, meaning they do not have an associated closing tag. Instead, they close themselves with “/>”.
Image – <img src=”http://mysite.com/images/image.jpg” />
Line Break - <br />
Horizontal Rule – <hr />
Bulleted List.
Lists are an important part of web design. They are commonly used for navigation once they are stylized.
The order of the HTML code tags is important. Notice that first, the Unordered List tag “ul” is opened, then List items “li” are added.
<ul>
<li>bullet 1</li>
<li>bullet 2</li>
<li>bullet 3</li>
</ul>
Other HTML Resources
These are the basic HTML tags, but there are a lot of other HTML tags that can be used in web design. Want to learn about other HTML tags? Just a quick search in Google and you can find quite a few resources, like:
- http://net.tutsplus.com/
- http://websitetips.com/articles/html/basictags/
- http://addedbytes.com/cheat-sheets/download/html-cheat-sheet-v1.pdf
- http://www.webmonkey.com/2010/02/html_cheatsheet/
The Basics of an HTML page
This is a supplementary video that shows the basics of an HTML web page.
Browsers for Web Design
I prefer Firefox as a browser, or Google Chrome, however when building for web you should test your pages in various browsers as the HTML may render differently in different browsers including Safari, Internet Explorer. Also, different platforms like Mac, PC, and Mobile all render things a bit differently.
Hope you have enjoyed learning a little about HTML code and browsers that web designers use to make websites that Rock!
Please share your Comments on this article. If you would like me to help you improve your website, please Contact Me.
Posted in: Web Design | Tags: Web Design Basics
