Introducing the basic structure of HTML with Tags, Elements and Attributes
HTML Tags
HTML tags are the building blocks of HTML webpages, and to make a website which will be interpreted by the browser correctly, it is important to understand the construction and structuring of the tags in their correct order and syntax.
Tag Construction
A simple HTML tag would look something like the following examples:
| Tag | Description |
|---|---|
| <h1> | The "h" represents the word Header so this is a header opening tag. |
| Tag | Description |
|---|---|
| <img> | This would be an image tag and contain the information of where the image is located, and other information used to format the image displayed in the web page. |
Most tags have an opening and a closing tag to dictate to the browser where to start the formatting and where to end. The only difference between the opening and closing tag is the forward slash" / " character:
The header closing tag
</h1>
Example of the opening and closing tag together (making up an Element):
| <h1>header text example</h1> |
Note: Normally tags are not case-insensitive. But it is a good habit to write them in lower case, as later formats of HTML such as XHTML require this.
Not all tags use this format some are special tags (not many) called self closing tags and look like this <hr /> (which is a horizontal line). As normal HTML is forgiving this doesn’t really matter much and <hr> is ok, but if you want a browser to interpret a document as XHTML this absolutely necessary.
For now just bear this in mind but don’t worry too much about it yet.
HTML Elements
Element is the name given to a block of HTML markup from its opening tag to its closing tag and that includes its data or content between. It is used to constuct and contain blocks of HTML so the browser can interpret which format and where to present the element in the document or the browser window.
As we explained above example of what a tag is, now you will see how the opening tag and closing tag construct an element.
Element construction
<h1> Opening tag
The Title of my Webpage Content / Data
</h1> Closing Tag
How HTML elements would look in the editor:
|
<h1>The Header 1 Title of my Webpage </h1> <p>This is a paragraph element</p> <table>This is a table element </table> |
Also elements can be nested and the next example would “center” align the “header” text, and anything else located between the <center tags>, in a web document:
| <center><h1>My Title Header</h1></center> |
HTML Attributes
Attribute is the name given to criteria or parameters assigned to an element. These are options and some elements can contain one or more attributes, which are located in their opening tags, and affect the styling of the elements, for example they may have values such as:
Attribute construction
<p align="center"> some paragraph text</p>.
This example is only a demonstration of attributes; and although for a simple webpage the results you desire can be easily achieved, for more complex web sites the best way to format HTML is through CSS which we will talk about in later tutorials.
The Syntax of HTML Tags, Elements and Attributes
| <Tagname [ attribute {= "value"} ]> Content </Tagname> |
How the elements with their attributes would look in the editor where in following two examples:
The tagname = h1 (header 1) , the attribute = align and value = center .
| <h1 align="center">The Title of my Webpage<h1> |
The tagname = p (Paragraph), the attribute = align and value = left .
| <p align="left">The Sub-Title of my Webpage<p> |
There can also be multiple attributes to an element example:
|
<table width=”200px” cell-padding=”2px”> ... </table> |
The above example tells the browser that the table will be constructed 200 “px” or pixels in width and its cell contents will be padded with 2 pixels of space.