info@irishwebhq.com 
HTML Tags and Attributes
This is part 2 of the free online web design course, helping you to learn HTML and other web design skills. Today we are going to find out more about elements, attributes and the advantage of learning xHTML.
HTML Elements
The HTML instructions, along with the text to which the instructions apply, are called HTML elements.
The HTML instructions are themselves called tags, and look like <element_name>.
They are simply the element name surrounded by left and right angle brackets.
Tag
[sourcecode language=”html”]<p>[/sourcecode]
Element
[sourcecode language=”html”]<p> This is the text in a paragraph </p>[/sourcecode]
Element Attributes
In order to learn HTML you must understand HTML attributes.
Many elements can have arguments that pass parameters to the interpreter handling this element.
These arguments are called attributes of the element. For example, consider the element p, which is used to define a paragraph of text. This element can use the title attribute to enhance the functionality of the element.
[sourcecode language=”html”]<p title="My Paragraph"> This is the text in a paragraph</p>[/sourcecode]
In this case, the title attribute displays the title text when the user places their mouse over the paragraph. Not very useful perhaps, but there are some elements that are of no use without one or more elements. An example of this is the a tag which is used to create a hyperlink on a web page.
[sourcecode language=”html”]<a href="https://www.google.com">Link to Google</a>[/sourcecode]
In the above example the href attribute is used to specify the location that the user should be taken to when they click on the link text “Link to Google”. The link is rendered as follows in a web browser: Link to Google
The attribute href is assigned the indicated value. Note that the a element is not empty, and that it is closed by the tag </a>
End tags never take attributes. The attributes to an element are always placed in the start tag.
The attribute value should be enclosed in double quotes in order to conform to xHTML standards.
Try the following code:
[sourcecode language=”html”]
<html>
<head>
</head>
<body>
<a href="https://www.google.com">Link to Google</a>
</body>
</html>
[/sourcecode]
Naming HTML Documents
(X)HTML files are typically saved as .html extensions. i.e. the part after the . in the filename is html. For example, mypage.html. (X)HTML files can also be saved as .htm. I recommend using the .html OR .htm extension exclusively. Don’t use them interchangably as you will find it difficult to remember which you used for each file. If you link to myfile.htm and the file was actually saved as myfile.html then an error will occur (broken link).
It is good practice to ensure that your filenames are in lowercase as this will prevent typing errors at a later stage, however capitalised words are acceptable also.
Avoid the use of character spaces within filenames. It is recommended to use an underline character (_) to visually separate words within filenames. For example, todays_weather.html
Limit filenames to letters, numbers, underlines.
XHTML – Should I Learn HTML or xHTML?
The Extensible HyperText Markup Language (XHTML) is intended to be a replacement for HTML
XHTML has a stricter syntax than HTML and is the official recommendation of the W3C
XHTML was required because:
- Different browsers were using proprietary tags
- Support for new features was needed
- Poor standard of some HTML documents and the forgiving nature of browsers made the need even greater
Advantages of XHTML
Forward compatibility for your creations since XHTML uses a new set of standards that the web will be built on in the years to come
Writing code is a more streamlined experience, as gone are the days of browser hacks and display tricks
A well-written XHTML page is more accessible than an old style HTML page, and is guaranteed to work in any standards-compliant browser
Some XHTML Rules
All tags must be lowercase.
Tags must be closed:
[sourcecode language=”html”]
<p> PARA TEXT </p>
<br />
[/sourcecode]
In the example above, the p element must be opened and closed explicitly. The br element is self closing. A forward slash at the end of the tag (before the right-angle bracket) is enough to close this element.
You have to open and close tags correctly in XHTML, and nest them properly
Bad:
[sourcecode language=”html”]<p>My coding is <strong> bad </p></strong>[/sourcecode]
Good:
[sourcecode language=”html”]<p>But my coding is <strong>good</strong></p>[/sourcecode]
Remember the simple rule: The first tag you open is the last tag you close
A.B.B.A
Document Type Definition
A Document Type Definition (DTD) is a set of declarations that conform to a particular markup syntax and that describe a class, or “type“ of XML document, in terms of constraints on the structure of those documents.
A DTD specifies the syntax of a language such as HTML or XHTML.
DTD Structure
In a DTD, the structure of a class of documents is described via element and attribute-list declarations. Element declarations name the allowable set of elements within the document.
XHTML Template
The following xHTML template can be used as starting point for your web projects. Copy the code below and save it as template.html. When you are creating a new web page you can open template.html in your editor (Notepad++ or other) and save the file with a different appropriate name.
[sourcecode language=”html”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add Page Title</title>
</head>
<body>
</body>
</html>
[/sourcecode]
In our next lesson we will look at some of the HTML tags that can be used to style and layout our web page text and to add more interesting content to the page.
Follow me on Twitter or Facebook to be the first to know when the next lesson is published.
Get Started - Contact Us
Get in touch to discuss your website or ecommerce design.
Please enter as much information as possible about your website requirements so that we can provide an accurate estimate.
