5 Essential Basic HTML Rules for Beginners
-
- 4
The HTML markup language provides a backbone for web developers or business owners working on their own sites or their CMS. Especially if you add CSS and JavaScript, learning HTML means you will have a solid foundation for building and redesigning websites.
Before you begin building your page, you’ll need to decide on a basic layout. To do this, sit down with some old-fashioned paper and a pencil and start sketching, blocking out the page’s elements. You may be itching to get coding, but by drawing your site out first, you can rearrange designs to your heart’s content without coding and recoding.
Once you’ve settled on the organization of your site, it’s time to begin creating your pages with HTML tags – the instructions that surround material such as text, images, and links to other pages and tell the viewer’s web browser how to display them. If you want an image to show up on the left side of the page, a certain word to appear bold, or another word to link to an outside resource, you’ll use HTML tags to do it.
Five rules for coding With HTML tags
There are five important rules for coding with HTML tags.
- Tags are always surrounded by angle brackets (less-than/greater-than characters), as in
<HEAD>. - Most tags come in pairs and surround the material they affect. They work like a light switch: the first tag turns the action on, and the second turns it off. (There are some exceptions. For instance, the
<BR>tag creates a blank line and doesn’t have an “off switch.” Once you’ve made a line break, you can’t unmake it.) - The second tag–the “off switch”–always starts with a forward slash. For example, you turn on bold with
<B>, shout your piece, and then return to regular text with</B>. - First tag on, last tag off. Tags are embedded, so when you start a tag within another tag, you have to close that inner tag before closing the outer tag. For instance, the page will not display properly with the tags in this order:
<HEAD><TITLE>Your text</HEAD></TITLE>.
The correct order is:<HEAD><TITLE>Your text</TITLE></HEAD>. - Many tags have optional attributes that use values to modify the tag’s behavior. The
<P>(paragraph) tag’sALIGNattribute, for instance, lets you change the default (left) paragraph alignment. For example,<P ALIGN=CENTER>centers the next paragraph on the page.
Remember, too, that HTML is always evolving, and older browsers often don’t support the newest tags. When a browser encounters an HTML tag it doesn’t understand, it will usually ignore both the tag and the material it affects. This way, the newest elements will appear to viewers with newer browsers without causing problems for viewers using older browsers, who will only see material their browsers recognize. On the downside, browsers treat coding errors like unfamiliar code. If you’ve made a mistake while building your page, you won’t necessarily see an error message; you might just see nothing at all.
SEE: Get answers to real-world questions from fellow web developers in the TechRepublic forums.
You should always closely check all of your pages in a browser to make sure everything that’s supposed to be there appears properly. We recommend looking at your pages in more than one version of Google Chrome, Microsoft Edge, and Apple’s Safari — on both PC and Mac platforms and mobile devices, if possible — to make sure everything looks how you intended. Not every browser type or version behaves the same way.
What are the 10 basic HTML tags?
<doctype> : When crafting an HTML document from scratch, start with <!DOCTYPE html>. This will tell the browser how your website works. In HTML5, the DOCTYPE will always be html. At the end of your document, close this tag with </html>.
<h1> : This tag creates text headings. H1 creates the largest size heading. Heading sizes go from one to six, descending in size. As is the case with most html tags, close the heading tag with a backslash (</h1> in the case of a heading size 1).
<body> : This tag indicates body text.
<p> : This tag indicates a paragraph break. Enclose both the beginning and end of paragraphs to separate them. For example:
<code><p>This article is an introduction to HTML.</p>
<p>HTML helps format web content.</p></code>
<br> : <br> creates a line break. You may prefer it over the paragraph tag if you want to separate text with a specific number of lines, as opposed to just one. You don’t have to close <br>. It is essentially a placeholder.
<i> : This tag formats font in italics.
<b> : This tag formats font in bold.
<a href> : The <a> element is a bit complicated but very useful. It embeds links. The HTML code for adding links is:
<code><a href=”url”>link text</a></code>
Add the URL where indicated, making sure to include the quotation marks. Change the link text to the text you prefer. The result: Clicking on the link text will open the URL.
<img> : This tag embeds images. The way this tag is usually used is:
<code> <img src=”url” alt=”alternatetext”> </code>
The src attribute directs the browser to the image. If you host an image on your own website or server, you can use the file name as shown above. If not, you can direct the src attribute to a URL instead.
The alt attribute holds a place for alternate text. This is important for accessibiity, or when slow internet might prevent the image from loading. Write a short description of the image in the alternate text section, making sure to include the quotation marks.
You can change the size of images by adding <code> style </code> within the brackets. This will look like:
<code> <img src=”url” alt=”alternatetext” style=”width:500px;height:600px;”></code>
Here you can adjust the width and height.
The <img> tag does not need to be closed.
<blockquote> : This tag indents text in order to set it apart, showing the text is a quotation.
These are just some of the many tags at your disposal. W3Schools offers a free tutorial for more. Some others are:
Text color can be set with either pre-established color names or color values in RGB, HEX, or HSL. This looks like:
<code> <h1 style=”background-color:value;”>…</h1></code>
<table> creates a table. Create rows by using <tr> and populate columns using <td>.
<form> can be used to create a form such as an email submission box.
How to learn HTML as a beginner
In my experience, the key to learning HTML is knowing what you want to build. From building an entire website to adding some formatting to a blog post or comment, determine how your end goal will benefit from the changes made possible with HTML. From there, experiment with a text editor.
A great way to learn about more complicated HTML is to look over the shoulders of other web page creators. If you see a website you like, just view the page’s source to see how it was done. You should never just copy another builder’s design, but most developers do borrow inspiration from other sites. Methods for viewing the source vary by browser, but it’s usually as simple as selecting View Page Source or Source with a right click. Stick with viewing source code on fairly simple sites until you’re more familiar with web building.
When viewing source code, you’ll sometimes see organizational comments from the page’s author near the top of (or scattered throughout) the file. These comments are inserted with the <COMMENT> or <!--> tag and often contain useful information for those who view them. For a simple exercise in reading source code, try viewing a well-commented Web page from your browser and then viewing the source code of that page. Compare the two documents side by side, using the author’s comments to match sections of code with the visual elements they represent. You’ll soon be able to zero in on specific lines of code to understand how to achieve individual effects.
Update information: Megan Crouse updated this 2003 article in 2024. She has used HTML in CMS tools and social media for decades and referred to W3Schools for help compiling some of the tagging information. The original version of this article was contributed by Fred Dekker and Donald St. John. Fred Dekker is one of the Founders of The H.E.L.P. Community, an online resource for beginning Webmasters. Donald St. John was the founding Webmaster at PC Games magazine.
The HTML markup language provides a backbone for web developers or business owners working on their own sites or their CMS. Especially if you add CSS and JavaScript, learning HTML means you will have a solid foundation for building and redesigning websites. Before you begin building your page, you’ll need to decide on a basic…
The HTML markup language provides a backbone for web developers or business owners working on their own sites or their CMS. Especially if you add CSS and JavaScript, learning HTML means you will have a solid foundation for building and redesigning websites. Before you begin building your page, you’ll need to decide on a basic…