Tutorial 2: An Introduction To HTML
đŹ âEvery great developer you know got there by solving problems they were unqualified to solve until they actually did it.â (Patrick McKenzie)
Introduction
Welcome to day two of your web development beginnerâs course. Today is the day of HTML! HTML is all about structuring the data. It doesnât concern itself with how something looks; thatâs what CSS is for, which weâll study tomorrow.
Just like a building is only as strong as its foundation, HTML is the skeleton that holds everything together. To put it in a more web-based context, HTML makes sure the page is usable on a variety of devices and browsers and provides a structure for adding CSS, JavaScript, and the content of the website or application itself.
What are we going to do today?
- Learn about HTML and basic HTML syntax
- Learn about the various HTML elements that weâll use in this course
- Create the basic structure for our own webpage
Ready for another adventurous day of data, structure and magic? Letâs go!
1. HTML
Weâve already learned that HTML is a type of language that structures content; in other words, it labels different elements such as images and text in order to tell your browser how to display the content and in what order.
Yesterday, we wrote some HTML and worked with a few HTML elements, tooâbut we havenât really understood them. Letâs change that in this lesson. Weâll look into what HTML is made up ofâin other words, HTML elementsâand then use them to add detail to our portfolio site.
Â
Element tags
Weâve already seen a few HTML elements. You can think of an HTML element as an individual piece of a webpage, like a block of text, an image, a header, and so on. Yesterday you used a heading element, h1, which looked like this:
Every HTML element has HTML tags, and a tag (<h1> or </h1>) is surrounded by angled brackets like < and >. Tags define elements and tell the browser how to display them (for example, they can tell the browser whether an element is an image or a paragraph of text).
Most HTML elements have an opening tag and a closing tag that show where the element begins and ends. The closing tag is just the opening tag with a forward slash (/) before the element name. We can generalize the format of an HTML element as follows:
Here, content is something we add. It can be anything, like âHello worldâ in our h1 example; âelement nameâ, however, has to be one of the predefined tags like h1, h3, p or strong.
Letâs take a look at a few important things to know about HTML elements before we dive in and use them.
Â
Element attributes
HTML elements can have certain attributes that modify their functionality and behavior. These attributes are written inside the opening tag. For example,
We have an image element with a âwidthâ attribute with the value 300 and âheightâ attribute with value 200, which as you might guess, will make the image 300px wide and 200px tall. Letâs look at another example.
The very aptly named textarea element will display a text input field where our users can write text. In this example, rows and cols are attributes that define the number of rows and columns the textarea should span respectively.
Attributes like width and height for img, or rows and cols for textarea are useful directly within HTML. But some attributes have a special meaningâmeaning that they donât do anything on their own, but require us to write additional CSS or JavaScript, and thus connect the three pillars togetherâand weâll be learning more about them later in this course.
Note that some elements donât have any content in them, and hence they donât have to have a closing tag. Images, for example, only need a âsrcâ attribute (short for source, or the location to find the image).
Notice the /> at the end (instead of </img>). This is because image elements have a source attribute (src) which fetches the image to be displayed. Thereâs no content that needs to go inside. There are other elements, similar to img, that donât require a closing tag.
Â
Nesting elements
HTML elements can be nested inside each other; in other words, one element can hold other elements. Take a look at the following block of code.
Notice how we have two strong elements in our paragraph element. Thatâs totally legal.
For ease of reading, we can format the previous block of code as follows:
HTML doesnât care how much space or how many new lines you use. The previous two examples will display in the exact same way (but the latter is easier to read, so we prefer that).
Â
Other rules
Apart from these, there are a few basic rules that apply to all HTML pages. For example, The outermost HTML element needs to be <html> itself. Similarly, all âvisibleâ content goes into <body> while all configuration / metadata (data about the page itself) goes into <head>.
Remember our first webpageâs code from yesterday?
That was the reason <title> went into the <head>, and the browser picked it up and displayed it as the webpageâs title (while it wasnât visible inside the page).
2. HTML elements
Now that we have a basic understanding of HTML elements, letâs look at some of the elements that weâll be using in this course.
Headings
Headings are exactly as the name suggests. In HTML, there are six headings, ranging from h1 to h6. Heading 1, or h1, is the largest and most significant heading; it signals that this is the most important text on the page. The significance decreases gradually as we move towards h6.
Â
Anchor Links
The anchor element, a, enables the HyperText in HTML. It can link to another page on the same or a different website. Hereâs how to create an anchor link to Googleâs homepage:
This code will display as follows. Notice how hovering the mouse pointer on the link shows the anchor href value in the bottom left corner of the page. You mustâve clicked a couple of such anchor links to reach this very page!
Â
Paragraphs
The paragraph element, p, is used for text blocks. We usually style paragraphs such that they have a nice space between one another and between the first paragraph and its heading.
Â
Lists
Lists are very useful for displaying data in an ordered or unordered list. For ordered lists (a list that uses numbers) we use <ol> and for unordered lists (a list with bullet points), we use <ul>. Within one of these elements, each list item is denoted by <li>. Hereâs an example:
Hereâs how our example ârendersâ (which is just a fancy word meaning how it looks in our browser when we refresh the page).
Divisions and spans
Everything on a webpage can be imagined to be contained in a series of boxes. Our job as web developers is to arrange these boxes so that the whole page looks nice on all screens. These boxes contain text, images, and everything else that we see on webpages.
The names of these boxes are divisions (div) and spans (span). Divs and spans donât do anything on their own, but we add things to them, like text and images, and they let us position the text and images as we like.
A good analogy for divs and spans are bags. Bags like handbags or backpacks are not very useful by themselves. No one would carry an empty bag around. They become useful when we store stuff in themâthey help us keep things organized. Thatâs how we like to think of divisions and spans. Theyâre containers for the actual functional elements on your webpage.
Weâll see how they work when we add them to our page below.
Forms
We fill in forms all the time on the internet. Forms and form elements allow us to accept user input. Whether it is for logging into our social media accounts or posting a tweet, anywhere you see a place to add text or click a button or toggle a checkbox, thereâs an HTML form element in the background.
3. Your turn: Creating the basic page layout
Now we know enough HTML elements to start adding HTML to our portfolio page project! Before we get into writing code, letâs take a look at our wireframe. A wireframe is a low fidelity design that we use as a reference to code our website.
In the real world, your team may have dedicated designers whoâll come up with a design that is then handed over to you, the developer, for implementation (converting into actual code). In our case, weâll use a hand drawn design as a starting point. The purpose it serves is similar: it gives us a broad outline for how our end result should look.
Looking at the mockup, we can roughly compartmentalize our page into sections.
- Introduction
- Profile picture
- Name
- Professional title
- Quote
- AboutÂ
- Who I am
- What I like
- Portfolio
- Links and contact form
It is generally helpful to think in terms of sections, because as youâll see, each of these bullet points will become a box in itself, with the sub points getting nested inside the main points. Letâs take each of these points and tackle them separately.
Introduction
The introduction section contains an image (profile picture), a heading (name), a subheading (professional title) and a line of text (quote). We can start with the introduction box and add each of the nested elements into it. Note that this code goes inside the body tag, that is, in between the opening and closing body tag (<body> and </body>).
Remember what we said about the div element? Itâs just like a box that holds our content together. Inside the box, we have all the elements we mentioned above.
Notice the https://via.placeholder.com/150 in image source (<img src=)? That is a placeholder image that we use while weâre developing this website. We can replace it with our own image later once weâre happy with our design.
Letâs see how that looks in a browser.
Did you get that? Thatâs right. We have the first section of our website ready. You can see your code in the browser if you press Ctrl+F12 (in Windows or Linux) or Cmd+F12 in Mac OS.
This is the code that your browser interpreted. You can try clicking on each element (img, h1, etc) and see that the browser highlights them for you.
đPro tip: This window that popped up in our browser is called the developer tools menu and is used extensively in real world web development for checking code and debugging bugs. The best way to get used to this new tool is to play around with it.
About
Next, letâs look at the About section. It has two lists and a heading that goes with each list. Notice that this time we have two boxes (divs) nested within this one larger box. These are the left and the right box, each with its own heading (<h3>) and an unordered list (<ul>). Letâs write code for that just after the ending tag of the previous (Introduction) section </div>
.
Letâs look at the result of that in our browser.
Hereâs a quick reminder: You can click the above Github link to see the exact change that was made. We recommend that you first try to write the code yourself and only look at the Github link if youâve gotten stuck.
Portfolio
Great! Now letâs tackle the Portfolio section. This section will contain four of our chosen project screenshots. Youâll see in our wireframe that weâre planning to arrange them in a 2x2 grid. Weâll be able to do that with CSS later in the course. For now, letâs add a heading and four images using the <img> tag just below the previous section.
Notice weâre again using placeholder images here (but weâve made them 300 now, which is their size, length and width, in pixels).
The result, after adding to our page, should look as follows:
Â
Links and footer
Our final section is our footer (so called because it is the vertical end of the webpage). It contains some links to our online social profiles, like LinkedIn, Github, and Twitter, but you can replace them with your own custom links if youâd like!
Note the <user> placeholder in the href attribute of the anchor element. You have to replace that with your respective usernames for those sites. For example, https://twitter.com/<user> will become https://twitter.com/careerfoundry to link the anchor element to CareerFoundryâs Twitter page, and similarly for other links.Â
Place this section after the closing div tag of the Portfolio section.
Â
Contact form
Weâll also have a âContact meâ form with input fields. On a real website, it would enable people to send us a message. For now, the form that weâre writing is just on the frontend. It wonât work since we do not have a backend for it yet.
Weâve introduced a few elements for the first time here. Letâs look at them one by one and understand what is happening in the lines of code above.
1. <form action=â#â>
- Form element defines an HTML form, which is what you use to login to Twitter or type in a message on Facebook. A form may have one or more inputs, buttons, checkboxes or dropdowns.Â
- A form can be âsubmittedâ, which signals the browser that the user has done entering data into the form. The action attribute is the location where data needs to be sent when the form is submitted (which is our case is â#â, because we do not want to send the data anywhere).
2. <label for=ââ>
- Label marks the label for an input element. It can be the text next to the input fields, or an icon. The for attribute takes in the âidâ attribute of the enclosed input element.Â
3. <input type=ââ>
- Input defines an input element (an element take accepts data from the user). Input element has a type attribute which takes in many values. For example, type=âtextâ will render a text input field, while type=âsubmitâ will render a button that submits the form when we click on it.
4. <textarea>
- As discussed already, textarea element will render a larger box to write text in. Follow the next section and try figuring out whatâs the difference between <input type=âtextâ /> and <textarea>. Hint: One of the two accepts multi-line text input.
Putting the footer together
Just like with the About section, we need the links box and comment box to be aligned side by side, links on the left and comment box on the right. For now, weâll need to add an opening and closing âdivâ around these two sections, essentially wrapping each of these boxes in a bigger box. The end result should look something like this:
Thatâs it! We have the links section and then we have our inputs. Try typing something into the form fields and click Submit. Did you notice any change? Yes, the address bar of the browser now has a â#â pound symbol. Remember where we used it? The formâs action attribute!
Summary
That just about concludes day two. Today we learned about various kinds of HTML elements. We created our first webpage and added the structure and information that weâll work with throughout this course. What we did today is what youâll generally do at the beginning of any web project: structure your data and put into the right HTML elements.
Now that this is done, we can focus on the style and functionality. In other words, now we can add more color, formatting, and positioning to our HTML document. Tomorrow, weâll take a first look into the world of CSS, the language of styles on the internet.
Â
đ§Daily challenge
Try replacing the About and Portfolio section images with your custom images. Ideally they should be square images and not super huge. If youâre having trouble finding nice images, download some images from here.
Â
đReferences
Â
â FAQ
Q. An element is not showing on the screen?
A. Check if that element is properly closed / thereâs no mis-balanced HTML tags in the code. Use the Developer Tools in the browser for faster debugging
Q. Can we use more interesting / colorful images instead of the boring gray ones?
A. Weâll add the final images later when we study CSS. For now, it is easier if we focus on the data first, and get the structure of the page right.
Q. It is hard to remember so many HTML tags and their functionality. Should I learn them off by heart?
A. It happens to all of us in the beginning. The key is to keep practicing, and soon theyâll become second nature to you.
Q. The page looks very dull. Can we add some colors to it?
A. As mentioned previously, weâre only focusing on the content and structure in this tutorial as thatâs what HTML is all about. Later in the course weâll look into styling and colors!
Q. Iâve read about semantic HTML and elements like section, article and nav. Should we use them instead of divs and spans?
A. HTML5 defines a lot of new components that one can use instead of div or span. In the real world, we recommend using semantic HTML components whenever possible. For this course, weâd like to keep the number of new concepts we introduce to a minimum, hence, thereâs no mention of semantic HTML. If youâd still like to learn about them, we can recommend this article.
Alana
Senior Program
Advisor

You can become a job-ready web developer from scratch in as little as 6 months. Arrange a call with your program advisor today to discover how you can change your career from the comfort of your own home with the CareerFoundry Full-Stack Web Development Program.