HTML Elements & Attributes
An HTML page consists of a series of nested HTML Elements and each element may have one or more qualifying Attributes.
An HTML element usually consists of a start tag and end tag, with the content sandwiched in between:
<tagname>Content goes here…</tagname>
The HTML element is everything from the start tag to the end tag as in these heading elements:
<h1>This is a Heading</h1>
<h2>This is a Heading</h2>
Note that the end tag </h1> is distinguished from the start tag by the inclusion of a forward slash (‘/’)
<p>This is a paragraph. It can rattle on with as many sentences as you like</p>
HTML elements with no content are called empty elements. Empty elements, such as the <br> element (which indicates a line break) are not required to have an end tag. Empty elements can be “closed” in the opening tag like this: <br />. HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML. Get used to it: always use lower case tags.
HTML Attributes provide additional information about HTML elements. Attributes are always specified in the element’s start tag
The lang Attribute:
The language of the document can and should be declared in the start tag of the <html> element.
The language is declared with the lang attribute:
Declaring a language is important for accessibility applications (screen readers) and search engines.
The title Attribute:
In the following HTML code snippet, a title attribute is added to the <p> element.
<p title=”I’m a tooltip”>
This is a paragraph.
The value of the title attribute will be displayed as a tooltip when a visitor’s mouse hovers over the paragraph.
The href Attribute:
The is the nitty gritty of web documents because it is the mechanism by which you can flit from one web page to another or from one website to another. HTML links are defined with the <a> tag. The link address is specified in the href attribute:
<a href=”https://www.epic-site.com”>This is a link</a>
- An HTML document is a series of nested HTML elements
- HTML elements comprise a start tag and end tag, with the content sandwiched in between
- All HTML elements can have attributes
- Attributes qualify an element with additional information
- Attributes are always specified in the start tag
- Attributes usually come in name/value pairs like: name=”value”
- The title attribute provides additional “tool-tip” information
- The href attribute provides address information for an address tag <a>
- The alt attribute provides text for screen readers
- W3C recommends using lowercase attribute names
- W3C recommends enclosing attribute values with double quotes
Note: W3C recommends that attribute values be enclosed by quotes. In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:
<p title=’John “ShotGun” Nelson’>
Or vice versa:
<p title=”John ‘ShotGun’ Nelson”>
For our second web page experiment we shall add some attributes; a lang attribute, a title attribute and an href attribute associated with an address tag (<a>) to create an active link to another website.
Copy your “index01.htm” to “index02.htm” and edit as follows:
<!DOCTYPE html> <html lang="en-US"> <html> <body> <h1>This is a Heading</h1> <p title="I'm a tooltip"> This is a paragraph with a tooltip. </p> <p> This is a paragraph with a link <a href="https://www.epic-site.com">Click Here</a> </p> </body> </html>
Note: additions are in bold text. spaces, tabs or line spaces will be ignored by the browser
Save the HTML page as “index02.htm”
View the HTML Page in Your Browser
Double click on the file “index02.htm”, or right-click – and choose “Open with” and select your preferred browser.
The result will be three lines of text:
This is a Heading This is a paragraph with a tooltip This is a paragraph with a link Click Here
Hover your mouse over the first paragraph and note that a tooltip “I’m a tooltip” appears.
Click on the Click Here text in the second paragraph and note that your browser switches to a different Website.
The fonts and styles of the three lines remain the browser defaults for headings (<h1> ) and paragraphs(<p> ) since our html page has not explicitly set them.
A lang attribute has been added.
A title attribute has been added to a paragraph so that “I’m a tooltip” displays when the mouse hovers over the paragraph.
A second paragraph has been added with an HTML link defined with the <a> tag and link address specified in the href attribute.
Now lets learn a bit more about HTML as we add an image in Minimal Website 03.