Introduction To HTML Elements and DOM
This article is part of series: Yet Another Full Stack Development Course
Previous article: History and evolution of HTML
You can switch to video version of this article
So finally presenting this article about HTML elements which is an introduction to proper, practical HTML.
I would set the expectation straight here by reminding that this an introduction to ‘basic HTML elements’, where we would introduce some top level elements only, the basic ones, since side effects of introducing all at once can include memory loss, nausea, headache, dancing stars and many more.
So I’ll try to save you from all these symptoms and just ‘introduce’ you to the basic elements in this article. Later, we would steadily introduce detail, and I'll add practice articles with step by step instructions to get hands on with these concepts, and depending on importance, there would be dedicated articles on important html elements.
Please note that if you are wondering what elements are, or what are attributes and tags, you need to refer to pre requisite article in our series below as we shall start explaining html elements directly here without going over basics that are already covered.
Let’s begin
HTML Document
While we have focused on the most defining feature of world wide web i.e. the hyperlink thus far in series, the document or html file that we created which just had a hyperlink, though functional, was not a proper html document as per standard. So a very basic proper html would look like
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Document</title>
</head>
<body>
<h1>Hello HTML</h1>
<p>This is an amazingly <a href="linkeddoc.html">simple</a> sample.</p>
<!-- this is a comment -->
</body>
</html>Whoa!!! A whole bunch of tags, please take a good look, and we shall go over each tag individually and understand them one by one.
HTML document vs XML document
I must clarify (again) before going further, that though HTML is kind of based off XML, its not XML. It’s not even based off XML, it is something called SGML (Standard Generalized Markup Language), which is a very lenient kind of XML. They are both languages, and the output of html is called ‘HTML document’, just like there existed ‘XML document’. So important thing to know at this time is though they are very very similar, there would be HTML specific characteristics in HTML documents.
HTML (Living) Standard
Next I would like you to open up (in new tab/window) http://html.spec.whatwg.org or simply google html standard and load the first result which in all probability would be the same from whatwg.org. This is the HTML standard also commonly known as HTML5 or HTML living standard from whatwg.org, which if you recall from our standards portion of world wide web article, is the organization responsible for standardizing HTML itself, and owner/keeper of its living standard. All html specifications and rules, format etc are defined in this page.
The page is horrific and and an eye sore, I know, I feel you!. Even to a well trained eye it is complicated, but don’t worry, it is a reference for times to come, not right now. I just wanted you to know and bookmark this page for the future. You may never open it again in your life. You can consider it to be like a constitution for your country, which hardly anyone reads, but it governs your life, but for legal advice you go to lawyers who in our example case would be entities like stackoverflow, or my articles where this ‘standard’, kind of ‘terms and conditions’ like document is simplified for your consumption. Once you are expert enough, you can start referencing to it yourself. For now, just know about its existence and importance.
Now take a deep breath, and let’s go back to our example, or best to pause and type it in an HTML file by hand. I insist that you do that!. This is absolute basic, plus no memory is better than muscle memory, and you should be able to write a basic HTML by hand.
Basic HTML elements
Now we shall go over introducing some important HTML elements followed by introduction to DOM, CSS etc. If you get a feeling we are not covering each item in detail, have no worry, no web development series is complete without detailed coverage of important HTML elements and forms, and this article is part of ‘Yet Another Full Stack Development Course’ and everything would be covered in detail later.
Since lab or exercise article would come later, but if you want to try seeing the html elements we introduce in browser, in another tab, open http://w3schools.com/html. This website has a feature where you can try out html editing in an online browser and seeing the results, or just try out existing examples for each type of html element. They have pre built examples you can copy paste in editor too. I would highly recommend typing by hand, but this is a shortcut in case you are not interested. For sake of time, I would go over a subset of elements only, but that website has a comprehensive list which you can keep trying even when I am finished.
Let’s begin with the DOCTYPE declaration.
DOCTYPE Declaration
Let’s begin understanding the HTML document with DocType. Note that all HTML documents MUST start with this declaration, and this is NOT an HTML tag, it’s a declaration. This is an ‘information’ to the browser about what document type to expect. It essentially tells the browser which document type definition standard the contents of this file should be evaluated against. For HTML5 documents, it is as simple as
<!DOCTYPE html>For older documents like HTML4 or XHTML, it must refer to a document type definition present on w3.org website.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">DOCTYPE And Browser Rendering Modes (Standard vs Quirks)
From our history of HTML article, you would know that not all tags are supported in every html version. Also browsers tend to use the ‘standard rendering mode’ for latest HTML5 versions, and for older versions use something called quirks mode. In quirks mode, layout emulates behavior of Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. Before adoption of web standards, these versions had evolved with code to render pages differently than after standards adoption. So if you miss a doctype declaration, or provide an incorrect doctype, the website is rendered as it would in old generation internet explorer 5 or navigator 4. Something you should always avoid unless required, and all you need to do, is to provide a doctype declaration up top.
HTML Element
Html tag or <html> represents the root of an HTML document, and contains all other HTML elements except the <!DOCTYPE > tag, which is not a tag as such anyway (it’s a declaration). Again for a valid HTML document, it MUST be defined. It has a bunch of attributes most important of which is the lang attribute where you specify the language of document and is really helpful for search engines etc. Note that an html file with just abc written in it would render in browsers, but would not be a well formed proper html document. There is a difference. Just like a proper business letter vs a piece of paper saying ‘please do this and that, thank you!!!’ in an envelope. I hope i was able to convey the point.
<!DOCTYPE html>
<html lang="en">
...
</html>Head Element
Head is an almost top level element for html document and mostly contains elements that have nothing to do with content as such. They include title, style, meta, link, script and base tags. As you might guess from that list, it is mostly for metadata, or data about data in html document, and is placed between the html and body tags. Since that data is ‘about’ the html document, it is not displayed in browser.
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
...
</html>Title Element
The most frequently used tag within head, also used in our example is the title element, which gets displayed in the tab or title bar of the web page. Note title tag is also a required element in HTML document, and gets displayed in title bar, search engine links and favorites text.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Document</title>
</head>
...
</html>Link Element
Link element lets you use an external resource in the current document.
In example below, a link element is referring to an external style sheet or css file which would define presentation or styling to be applied on elements in current file. Link can also be used to add a favorite icon to the html document which browsers show on title bar.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" />
</head>
...
</html>Style Element
Style element is used to define presentation characteristics or styling to elements, like color, size, font etc. Style can be per element, per container or per document. The style element in the head element usually define styles for entire HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {background-color: black;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
...
</html>This style would result in your page loading with a black background, and any h1 tag you add anywhere in your document would appear in red color, while paragraphs would have blue text.
Style elements were the dominant way of styling HTML documents and websites until introduction of CSS. Now it is discouraged in favor of CSS because later allows for defining reusable styles across pages and lets you manage changing them from a style specific file. It also results in less complicated HTML file itself. Inline styles are frowned upon now, so use them as last resort if you really need to (read never). Still great for rapid prototyping so you should know about these.
CSS (Cascading Style Sheets)
CSS or cascading style sheets are used to style the web page, from layout to top level elements, elements of a particular type and even individual elements on web page.
They contain the word ‘cascading’ as a style applied on a parent element will also be inherited by its child elements.
There are three types of CSS
- Inline — by adding style attribute in ‘any’ html element.
- Internal — You are already familiar with it as defining a style attribute in head section is called internal CSS
- External — The most encouraged and useful type, where styles are defined in an external file with .css extension and adding a link to it in head section. Browsers apply styles defined in css to elements in web page.
CSS are a completely different topic and would be covered later in its own article, just know the contents of style element can be used as is in an external CSS file, and there can be something called classes which define a set of styling to be applied by name.
Another important and related aspect to styling is ‘class’ attribute. Available on all elements including html and body elements, class attribute is used to point to a class name in a style sheet. For now, this knowledge is enough as we have a lot more to cover.
Body Element
The next required and critically important tag is the body tag, which defines the body of document or its content. It contains all content of HTML document like headings, paragraphs, images, links, tables etc. There can be only one body tag in an html document. It supports global attributes and events in html something which we shall come to.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>My First HTML Document</title>
</head>
<body>
<p>This is an amazingly <a href=”linkeddoc.html”>simple</a> sample.</p>
</body>
</html>Heading Elements (h1..h6)
An HTML document is, well, a document, and the page is supposed to display text in a beautiful way. That was the earliest intention of HTML beside connectivity. So HTML has a lot of support to display a web page as a well crafted document. To that end, it has six pre built headings h1 to h6.
The biggest, boldest and tallest of them all is h1, followed by h2, all the way to h6, h1 being most important or title/subject heading to h6 being the least important heading, one notch above regular text.
Recommended practice is to use h1 only once per page to describe the entire page, and not to skip heading levels meaning after h1, don’t skip to h3 directly, but these are recommendations.
Cross browser issues with HTML
One important thing to note here is that this is the point in your journey where you would encounter the first cross browser problems. Let’s hear our first legal, or ‘terms and conditions’ style nuanced problem. Copying directly from the living standard website,
Because HTML conveys meaning, rather than presentation, the same page can also be used by a small browser on a mobile phone, without any change to the page. Instead of headings being in large letters as on the desktop, for example, the browser on the mobile phone might use the same size text for the whole page, but with the headings in bold.
Reason for emphasizing this so much being that, this is explicitly about headings, but apply to other HTML elements equally. HTML conveys meaning, rather than presentation. This is not heading specific, and means HTML is simply asking browser to keep h1 bigger than h2 and so on, but is not enforcing any style as such. So HTML Browsers would ensure h1 is bigger than h2 all the way to h6. But h1 might not be the same across browsers, or across device types using the same browser.
As a web developer, you might want to keep this in mind from now on.
Paragraph Element (p)
Discussion on a ‘document’ cannot be complete without involving the paragraph element, that, as its name implies, defines a paragraph
Browsers add a single blank line before and after each <p> element.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>My First HTML Document</title>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>Image Element (img)
Get Ali Aslam’s stories in your inbox
Join Medium for free to get updates from this writer.
Images are worth a thousand words or other elements you can say. The wonder tag <img lets you specify an image which can either be loaded locally or from a url
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>My First HTML Document</title>
</head>
<body>
<img src=”profilepic.jpg” alt=”my profile picture” width=”500" height=”600">
</body>
</html>Here browser would try to show an image from file profilepic.jpg placed alongside the html file. It doesn’t matter if html file is on your computer or a web server, the file must be present alongside html file. You can provide a relative path like ./images/profilepic.jpg, or a full file or web path like http://mywebserver.com/images/profilepic.jpg. The picture would be embedded at the location in web page where this tag is defined. <img tag creates a holding space for the referenced image in web page.
It has two required and several optional attributes. The required ones are src and alt, src being the image source file, and alt is a piece of text that specifies an alternate text for the image, something to show if image cannot be displayed due to network error, file not found or any other issue.
Optionally you can specify height and width of image, though not required, it is always best to specify those as they allocate space for image during first render and avoid flickering.
Text vs Image Display
Do remember text is displayed first and images are shown after they are downloaded. We shall look further into performance, rendering and styling and location of images later in the series, but having height and width made known to browser drastically improves its performance. You can use a sizes attribute to indicate image sizes for different page layout, something I would just stop here about.
Image Hyperlinks
Another very useful feature supported by HTML is to use an image as hyperlink. To do that, simply put an image as content of a hyperlink.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>My First HTML Document</title>
</head>
<body>
<a href="http://mywebsite.com/myprofile.html">
<img src="http://mywebsite.com/images/myprofilepic.jpg" alt="My profile picture" width="500" height="600">
</a>
</body>
</html>Now you would see the mouse changing shape as a clickable link when you hover over the image.
You can add a bunch of styling to images to make them appear as desired in web page. There are a ton of styling options for images which are beyond scope of introduction to html article due to time constraint.
We shall cover styling in its own article. That is enough for images.
List Element (list)
Lists are another commonly used element in HTML and come in two flavors, ordered and unordered lists.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>My First HTML Document</title>
</head>
<body>
<ol>
<li>Mouse</li>
<li>Cat</li>
<li>Dog</li>
</ol>
<ul>
<li> Mouse </li>
<li> Cat </li>
<li> Dog </li>
</ul>
</body>
</html>Feel free to try it out in an html page and note the <ol list would be sorted alphabetically and show with numbers, while <ul would be a bulleted list in same order as you specified. Again the styling is browser specific where you can control presentation with styling attributes or CSS.
Table element (table)
Another very important and frequently used element is table.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>My First HTML Document</title>
</head>
<body>
<table>
<tr>
<th>Car</th>
<th>Engine Capacity</th>
</tr>
<tr>
<td>Toyota Corolla</td>
<td>2000 cc</td>
</tr>
</table>
</body>
</html>Defines an html table where <table tag appear once, <tr marks the heading or table row defining the header, and <td elements define a table cell listing the content of each column of the table starting from first to nth. There is much more to table elements as they are one of the most used feature of HTML but we are limited by time budget so more on that later on. For now you just need to know the basics.
Form element (form)
A web developer would probably spend a good amount of time with form element, which is used to display a form to the user to gather data from him.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>My First HTML Document</title>
</head>
<body>
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Here is a form with two input fields and one submit button. If you ever signed up using your user name and password on some website, you have entered data into a form field. I would just take a minute to go over some important related form elements that appear in its content.
<input> element specifies an input field where user can enter data. It is the most important form field, and can take different shape depending on type attribute like checkbox, file, password, text etc.
- <input type=”checkbox”>
- <input type=”text”>
- <input type=”password”>
- <input type=”radio”>
- <input type=”file”>
Unless explicitly specified, the type is text.
<textarea> is a multi line text input control used to take comments or reviews.
<button> is a clickable button. Its content can be text or image. Its most important attribute is type which indicates its purpose like submit, reset etc.
<option> shows a drop down list with multiple options
<form action="/action_page.php">
<label for=”cars”>Choose a car:</label>
<select id="cars">
<option value="apple">Volvo</option>
<option value="orange">Saab</option>
<option value="mango">Opel</option>
<option value="guava">Audi</option>
</select>
</form>And lastly label
Labels as the name suggests are the text portion describing the purpose of input fields in a form
<form action=”/action_page.php”>
<input type=”radio” id=”html” name=”fav_language” value=”HTML”>
<label for=”html”>HTML</label><br>
<input type=”radio” id=”css” name=”fav_language” value=”CSS”>
<label for=”css”>CSS</label><br>
<input type=”radio” id=”javascript” name=”fav_language” value=”JavaScript”>
<label for=”javascript”>JavaScript</label><br><br>
<input type=”submit” value=”Submit”>
</form>Div element (div)
Another critically important html element that we can’t go any further without is div. It is an invisible element, does not have a shape of its own, but acts only as a container for other elements. It is just like body element in this regard, but while there can be only one body element in HTML file, there can be as many divs as you like. What’s the point you would correctly ask? Well it lets you organize elements in HTML file in logical containers. Each div has an id and can have its own styling attributes which get descend to children if not overwritten. Take a note even if you don’t understand it fully as I assure you, you would probably use it more than any other element during your development journey.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>My First HTML Document</title>
</head>
<body>
<div>
<h1>My Awesome Page</h1>
<p>Lovely paragraph in a beautiful page.</p>
<p>Element so nice, you add it twice 😊!!!</p>
</div>
</body>
</html>We covered some very basic html elements so far. This is not a full coverage by any means. Even a quick introduction to basic elements is time consuming, and this is too much terminology for digest in one article alone. We shall cover some of these in detail later on. Now let’s go over some other aspects of an HTML document that you must know about. Again I would just give you a very very brief overview of them, as some of them require not just a article but their own playlist.
Global attributes
Global attributes are HTML attributes that are available to be applied on all html elements, even the top level <html> element.
I would just introduce a few here and you can lookup the rest in living standard or w3schools.
id attribute
The most important one is the id attribute which lets you assign a unique identifier to an html element. If you venture into scripting or styling via external css, id takes absolute center place in identifying the element to style or manipulate via script. CSS can even contain style for a particular id by name, and would be auto applied to an element with given id. Id is unique and cannot be duplicated within a document. It is also case sensitive. It is even more essential in scripting which we would cover next and there it allows you to select an element using a universal getElementById() method.
class attribute
Another important global attribute which you would be using is class. Again used by style and scripts, it lets you point to a class name in style sheet, where a set of styling info is present against a class name. Browser would apply that styling to any elements which bear the class attribute with that name. Multiple elements can point to same class name. Very helpful when you need to have consistent styling for a group or type of elements. Class is used by scripts too where elements can be selected for manipulation by class name.
hidden attribute
Last, and not too important but sometimes useful global attribute is hidden, which lets you create a hidden element, which browser would not render, but it can be enabled via script to be displayed when required. An example being some error like ‘password incorrect’ which only needs to be shown in certain cases.
Script Element
The html element which sounds scary to new developers when it shouldn’t is script tag. This is scary as it is the doorway which takes them from relatively simple HTML to another language called JavaScript. There can be other scripting languages but JavaScript is de-facto standard of the web so we shall stick to this. The script tag is used to embed a client side script in the html document.
What is a script? Well script is a piece of executable code which lets you manipulate elements in the file using a scripting language like javascript. The reason I said it is scary for most is the fear of unknown. Like I am sure you are tired listening to a stream of new terminology by now, and now I am introducing a totally different world to you which you are not ready to absorb. That is why I will introduce you to scripting only, and we shall discuss it in detail later on after you are comfortable with HTML and other web terminology and then you would find it easy to work with. There is nothing much to it, just have a look at that simple script below
<!DOCTYPE html>
<html>
<body>
<h1>The script element</h1>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = “Hello JavaScript!”;
</script>
</body>
</html>Remember I told you about a global attribute called id that is present on all elements and is used to uniquely identify an element on the web page. Now if you have any element say a paragraph <p> element with id attribute with value being ‘demo’, this script would add content “Hello JavaScript” to it.
This is a very simple example and you can do an absolute ton of stuff with your website with JavaScript. Again saying full playlists can be dedicated to that world, so this start is enough for now.
As a final statement, a script tag can contain scripting statements inline like example here, or refer to an external script file through src attribute.
Global events
Now that we know how scripting works, or at least have some idea, lets quickly get sense of events. There are a bunch of global events that can be provided to your JavaScript code on important milestones or actions.
Some of these include onload, which lets you know the page has finished loading and your script can do a bunch of stuff in response, then there is onresize which lets you know the user is meddling with the browser size and you can manipulate your elements according to new size like hide some elements, make text smaller or add … to some elements which had lengthy text earlier which no longer fits.
Onoffline and ononline lets you run some scripts if your browser goes in offline mode or comes back online so that you can respond on your web page accordingly like let user know he can no longer submit a form or query items from web server by showing an alert message.
You get the idea of events. This is good enough for now.
DOM or Document object model
Our last item to cover is an introduction to DOM. DOM or Document object model is a programming specific concept of HTML where an HTML document is parsed and loaded in memory by the browser and an API or application programming interface is provided to the scripting language to manipulate that in memory representation. Is it confusing or scary? No, you just used DOM a second ago on scripting slide. Note we did document.findElementById(“dmeo”) in our script? That operation is performed, not on the text file, but on the document loaded in memory by the browser.
DOM is in memory, not on disc
When you added innerHTML to the demo element, your html file was not modified, but your web page was. How? The browser found the element in memory with the id ‘demo’, and added the innerHTML you provided to its contents, and loaded that portion of page to show the modified content. DOM lets you do all kind of crazy things with the HTML document shown in the browser, while not modifying contents of your html file.
Browser lets you manipulate the DOM by using document or window objects which represent your html document. You can find elements by id, class, attribute and what not, add, remove or modify elements, change their styling, add remove attributes on them, make them responsive to events like onoffline, respond to events like mouse clicks or button clicks and a whole lot more. It makes it really simple by letting you play with a tree like representation of html document and its elements. You can query children or parents of a given element, or perform operations on all elements of a specific type, like change color of all paragraph elements on webpage or a div element to green.
Brief DOM History
Like HTML, DOM has its own history of evolution where first draft was issued in 1998 when scripting was still in early times, and like browsers, there were a bunch of scripting languages in use with similar issues as with HTML itself. I won’t go over these details here, but know that since 2015, DOM specification 4 is the latest published standard. Will cover further details in dedicated DOM article.
Congratulations, you made it to end of the article which it seemed would never finish. Please do practice the concepts learnt in this article on your computer or w3schools website as these are all important elements. If you liked the article, please give a clap and share the article, and do consider subscribing to our YouTube channel to be notified of upcoming content. See you in the next article. Thank you and good bye.
Next article: Setting up Visual Studio Code as your web development coding environment
