HTML Elements
 |
| The structure on a HTML element |
What are elements in HTML?
The foundations of HTML are elements. Elements give structure to a HTML document and tell the browser how you want your website to be presented. In this section we will learn what elements are, how they work and use a small sample of basic elements. Throughout this series of HTML notes we will be introduced to new elements in each section until we have an understanding of all the main HTML elements.In general, elements consist of a start tag, some content, and an end tag. Tags are labels you use to mark up the beginning and end of an element. All tags have the same format: they begin with a less-than sign '<' and end with a greater-than sign '>'.
Generally speaking, there are two kinds of tags - opening tags such <html> and closing tags like </html>. Notice that the only difference between an opening tag and a closing tag is the forward slash '/'. You label content by putting it between an opening tag and a closing tag. To learn HTML is to learn and use different elements and tags.
Sample HTML Elements
Let's look at some examples. For example the element b is used to markup bold letters so all text between the opening tag <b> and the closing tag </b> is written in bold letters in the browser. ('b' being short for 'bold'.)So the html code below...
Will look like this in the browser...
This text must be bold.
Other basic elements include <p> for paragraph, <i> for italics and <u> for underline. Headings are created using one from a set of six elements, h1, h2, h3, h4, h5 and h6, where h1 is the largest text, h2 is the second and slightly smaller text, and so on right down to h6.
Will look like this in the browser...
This is a heading
This is a subheading
Now lets try out some other elements and see what we can do. The best way to learn HTML is by trial and error but don't worry, there is no way you can break your computer or the Internet by making mistakes. So keep experimenting, that is the best way to gain experience. Some other elements are <p> for paragraph, <i> for italics, <u> for underline and <b> for bold. Multiple elements can also be at the one time, but they must be closed in reverse order, for exampleWill appear in the browser as...
This text is in bold and italics
You can also use elements within elements like this.
Will appear in the browser as...
This word is in bold and this word is in italics.
As they say, there's an exception to every rule and in HTML the exception is that there are a few elements which open and close in the same tag. These so-called empty elements are not connected to a specific passage in the text but rather are isolated labels, for example, a line break which is created with <br /> or a horizontal rule (line) which is created using <hr> do not need to be closed.
Effectively when writing your html code you are giving instructions to a computer so HTML is simple and logical. The browser reads HTML like you read yourself, from the top down and from left to right. Thus, a HTML document begins with what should come first on your page and ends with what should come last and your elements should be arranged accordingly. The first thing you will need to do is to tell the browser that you will 'talk' to it in the language of HTML. This is done with the tag <html>. So directly after your !Doctype, type <html>.
Throughout the next lessons we will learn numerous more elements and attributes but if you cant wait just click here for a full list of all HTML elements and their associated attributes.
Next Up
Learn about HTML Attributes and what you can use them for.
HTML Elements
Reviewed by Opus Web Design
on
March 14, 2016
Rating:
Reviewed by Opus Web Design
on
March 14, 2016
Rating:
