December 31, 2022 · 20 min · 4048 words · Claudia Kelley
Table of Contents
HTML (HyperText Markup Language) is a markup language that is used to structure content for presentation over the web. It’s important to note that HTML is not considered a programming language because it can’t perform mathematical logic or other features that are common in programming languages. The upside is that HTML is super easy to learn!
HTML is one of the main technologies used on the World Wide Web, and it’s an essential tool to know as a web developer. You’ll have to learn HTML and CSS if you want to build anything on the web.
HTML code is sent to the web browser which can understand it and render a web page accordingly. Another essential technology in web development is called CSS, which is used in combination with HTML to style the resulting webpage.
CSS (Cascading Style Sheets) is a style sheet language that is used to style (control the appearance) the presentation of a document that is written in a markup language like HTML.
In other words, we use HTML to define the structure and the meaning of a page, while we use CSS to specify its visual style.
CSS works in combination with HTML. We can create buttons, links, and other elements using HTML and then using CSS we can change those elements’ size, color, position, etc. We have to learn HTML and CSS together to really build anything that users can actually navigate!
To illustrate the roles of HTML and CSS, let’s take a look at a simple webpage. If we strip away all HTML and CSS, this is the underlying text for our example page:
Using HTML, we can add some structure to any webpage we build. We can specify which pieces of text are links and buttons. We can add form inputs, images, and many other elements though our webpage is quite…plain if we just use HTML.
Using CSS, we can add in styles to alter the appearance of the HTML elements we specified.
We write HTML in files that end with the .html extension (like homepage.html).
To write HTML and CSS code, you’ll want to install a code editor. Nowadays, one of the most popular free code editors is Visual Studio Code. Before writing any code, make sure to download and install it from this link. You can find more information about VS Code in this video tutorial. You can also use something like Sublime Text.
To see the resulting page, open the .html file in a web browser. You can do this by double clicking the html file, dragging it into the browser, or using the file → open menu in your browser.
One of the most popular web browsers among developers is Google Chrome. It comes with powerful debugging tools that make our lives easier. You can download and install it on your computer by following this link.
If you feel like you need a more curated version of a curriculum like this and/or mentored help to learn HTML/CSS, check out this HTML/CSS course.
HTML provides tags that are used to create elements on a rendered webpage. Remember, we are “marking up” a document in order to define structure. We often wrap tags around text to indicate which portions of a document are links, headings, bullet points, etc.
An HTML element is an individual component of an HTML document that provides meaning for parts of a webpage. For example, there is an HTML element called title which is used to specify which block of text is the title of the web page/document.
This is the general syntax structure for defining HTML elements, with an opening HTML tag and then a closing HTML tag:
Most HTML elements are written with a start tag (opening tag) and an end tag (closing tag), with content in between:
The h1 (heading) element is written with the
opening tag and the
closing tag, where we place the heading content between those two HTML tags. An
designates something as the most important heading on a page. We also have further subheadings from h2 to h6. This is what they look like rendered, though remember you can change fonts and sizes and colors via CSS:
Similarly, we use the same pattern but with
tags to create a paragram element, which represents a paragraph of text.
Some elements consist of self-closing tags, like br in the example above. The tag is used to add a line break to our page, and it doesn’t have any custom inner content that we need to specify (like headings and paragraphs do).
As we have seen in the example above, tag names are surrounded by angle brackets. The start tag is placed inside angle brackets, as well as the end tag:
The end tag will usually be the same as the start tag, but it will have a forward slash / prefix, as seen in the HTML code above.
Many elements accept HTML attributes that allow of us to define additional properties for those elements.
Most attributes follow this basic pattern:
element
We can add an image element on our page using the tag. We define the source (src) attribute of an image (img) element to tell the browser which image to render to the page. The browser will go and fetch the image data using the src attribute and then display it for a user. Notice that the element consists of a single self-closing tag, rather than an opening and closing tag.
Each HTML document should start with a basic structure which is called the HTML skeleton or HTML boilerplate. You should put this in every HTML document you create:
The first tag tells the browser that we are using HTML5 code (the latest ‘version’ of HTML).
The next mandatory element is theelement. It has a closingthat should enclose ALL the remaining content on our page. It represents the root element of our document.
Inside the html element, we always want to place the head and body elements.
In the
element, we place metadata about the HTML document which isn’t supposed to be visually rendered and shown by the browser. For example, we define theelement which is not shown on the rendered page, but the browser uses it as the window/tab title when the page is loaded. The <head> is also where we include references to external stylesheets, fonts, and scripts.
On the other hand, we place elements that should be visually rendered to the page itself inside the <body> element.
Now, let’s combine things that we learned to create our first valid web page:
Open your code editor and place the following code into a new file. Save the file under the .html extension on your hard drive. index.html is a conventional filename, but you can use any name you like.
Even though it’s not technically required for the code to work correctly, we indent the nested elements for readability.
Next, navigate to the folder where you saved the index.html file and open it in your web browser to see the page rendered.
This is the rendered result you should see in the browser!</p>
<p>
Note that we used the width and height attributes to specify a size for the image element in this simple example. In the real world, once we’ve done more on our quest to learn HTML and CSS, we would use CSS to style and specify the size of our image (img) element.</p>
<h3 id="23-elements">2.3. Elements<a hidden class="anchor" aria-hidden="true" href="#23-elements">#</a></h3>
<p>In this section, we will cover some other important HTML elements and their tags.
Make sure to check the MDN page about HTML to read more.</p>
<h3 id="231-the-div-element">2.3.1. The div element<a hidden class="anchor" aria-hidden="true" href="#231-the-div-element">#</a></h3>
<p>The HTML element <div> represents a division or a section in a document. It’s used to divide content on our page into ‘chunks’ or ‘sections’
We can wrap elements in our page inside div elements and then use CSS to style those sections of the page.
The <div> element should be used only when no other semantic element is appropriate. You can learn about semantic elements in HTML on this link.</p>
<h3 id="232-headings">2.3.2. Headings<a hidden class="anchor" aria-hidden="true" href="#232-headings">#</a></h3>
<p>The HTML <h1>–<h6> elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
Here is the code demonstrating all six heading tags which are used in HTML documents:
When you save that code and open the HTML file in the browser, you should get the following result:</p>
<p>To automatically reload your HTML page after you save any changes in the Visual Studio Code editor, check out the Live Server extension presented in this video tutorial.
It’s important to note that we don’t want to use the heading tags just to change the size of the element. These elements should be used to define headings on our page and provide semantic meaning. Content in an <h1> should be a more “important” heading than content in an <h2>, for example. We can use CSS to change font-sizes when needed later on when we’re more advanced in our progression of learning HTML and CSS.</p>
<h3 id="233-paragraphs">2.3.3. Paragraphs<a hidden class="anchor" aria-hidden="true" href="#233-paragraphs">#</a></h3>
<p>The HTML <p> element represents a paragraph of content.
Here’s an example with two paragraph elements:
The code above would yield the following result in the browser:</p>
<p>Paragraphs are block-level elements which means that each <p> element will take a new line and a separate block on the rendered page. Similarly to that, heading (h1–h6) elements are also block-level. If we write two headings one after another in the code, they will still be placed in separate lines on the page that is rendered in the browser.
On the other hand, we also have inline-level elements in HTML. These don’t take up their own line, but they instead get placed in the same line (content on the left and the right side of the inline element is allowed). Try putting an <a> tag inside a <p> and see what happens!
Read this Stack Overflow answer to learn more about inline and block elements.</p>
<h3 id="234-lists">2.3.4. Lists<a hidden class="anchor" aria-hidden="true" href="#234-lists">#</a></h3>
<p>We can also write lists in HTML, which come in two main flavors: ordered and unordered.
To make an unordered list (with bullet points) we first write a parent <ul> element. We then add individual <li> (list item) elements as children of the <ul>. Each <li> becomes a bullet point in our list:</p>
<p>To make an ordered list (numbered) we follow the same pattern but use an <ol> element as the parent:</p>
<p>We can even combine and nest lists:</p>
<p>There is also an HTML <dl> element (description list) which you can learn more about on this MDN page.</p>
<h3 id="235-tables">2.3.5. Tables<a hidden class="anchor" aria-hidden="true" href="#235-tables">#</a></h3>
<p>In HTML, we can use the <table> element to create tables and display tabular data in rows and columns of table cells.
A word of warning: the markup for creating tables can be a little difficult to remember when you’re just starting out. We often end up using multiple elements, including <table>, <thead>, <tbody>, <tr>, <th>, and <td>. You can refer to existing HTML tables in other websites if you need a refresher on this.
Inside of the <table> tags, we use the <thead> element to specify a table header, and the <tbody> element to specify the table body.
Each table row is specified by the <tr> element, and every cell by the <td> element. Here is an example structure of a HTML table:</p>
<h3 id="236-forms">2.3.6. Forms<a hidden class="anchor" aria-hidden="true" href="#236-forms">#</a></h3>
<p>The <form> element is used to create forms. On its own, the form won’t look like much until we add in different inputs. We can fill a form with text fields, radio buttons, checkboxes, dropdown selections, submit buttons, and many other types of inputs.
Here are examples of two forms (login and sign up) which are present at the Facebook homepage:</p>
<p>The <form> tag has two main attributes: action and method:</p>
<p><strong>action</strong> attribute – specifies the address or the path where the form is submitted. <strong>method</strong> attribute – specifies the type of the HTTP request which is used when the form is submitted.</p>
<p>If you’re just starting out, don’t stress too much about how forms work. To make them functional, we need to learn server-side development so we can create back-end code that can accept and process the forms that we submit. Alternatively, we can use JavaScript to handle form submissions. Either way, with just plain-old HTML our forms aren’t going to do anything for us except look pretty.
The <input> element is the most common form element.
It’s an extremely versatile element. By simply varying the type attribute we can create many different kinds of inputs. Here are some examples:</p>
<p>You can learn about the available input elements on this link.
Here is an example login form:
We can use the <button> element or the <input type="submit"> element to create a button which the user can click to submit the form.
Per the rules of HTML, each input element should have its <label> element which you can read more about on this MDN page. A label’s for attribute and an input’s id attribute enable us to connect the label element with the corresponding input. This is particularly important for people who rely on screen readers. Labels will help screenreaders “understand” the purpose of a given input.
To learn more about forms in HTML, make sure to check all the MDN guides available on this page.</p>
<h2 id="3-css">3. CSS<a hidden class="anchor" aria-hidden="true" href="#3-css">#</a></h2>
<p>CSS (Cascading Style Sheets) is a style sheet language used for website layout and design. You can think of CSS as a way to add ‘adjectives‘ to our HTML document, to style it and make it look better visually. To learn HTML and CSS effectively, we have to understand how the two languages combine, one as structure, the other as style.
Similarly to HTML, CSS is not considered a programming language because it doesn’t have common programming logic features. Because of this, the basic syntax of CSS is super easy to learn. The main challenge in learning CSS is remembering the hundreds of different style options you can alter.
Image: Example of an HTML page before and after using CSS:</p>
<h3 id="31-introduction">3.1. Introduction<a hidden class="anchor" aria-hidden="true" href="#31-introduction">#</a></h3>
<p>In CSS, we write code to target and select specific HTML elements on our page. We can then use a huge number of available CSS properties to style those elements. To learn HTML and CSS properly, we have to understand how CSS interacts with HTML — I would compare HTML to the structure of a house, and CSS to the paint and material you use to modify the walls to make it look like anything you want.
The general syntax structure of CSS looks like this:
Here are some examples:</p>
<h3 id="311-how-to-add-css">3.1.1. How to add CSS<a hidden class="anchor" aria-hidden="true" href="#311-how-to-add-css">#</a></h3>
<p>Before diving deeper into the CSS syntax and all its power, let’s first review where to write CSS code and how to add it to our HTML documents to complete our understanding of how to learn HTML and CSS.
There are 3 main wayward s we can write our CSS styles: inline CSS, internal CSS, and external CSS.</p>
<p>Inline CSS (not preferred)</p>
<p>We can use the style HTML attribute to add styles to a specific element, directly inside the HTML code (adding styles directly to the HTML tags).
This is considered bad practice because it makes our code messy and harder to read. Generally, we want to separate our CSS code from the HTML code to make things more organized and reusable.
Here are some examples of inline CSS added directly to HTML tags:</p>
<p>Internal CSS (not preferred)</p>
<p>We can also write our CSS styles inside of a css <style> element which we typically place in the <head> element of our HTML document.
It’s better than the previous approach because our code is isolated inside the <style> element in the <head> of our document, rather than being spread across individual HTML elements.</p>
<p>External CSS (preferred)</p>
<p>The conventional and recommended way of writing CSS is to use an external file. This allows us to separate our HTML and CSS code, and it makes it much easier to reuse the same CSS stylesheet across multiple HTML documents.
Start by writing your CSS in a file ending in the .css extension. To include those styles in an HTML document. To link to an external CSS file in our HTML document, use the <link> element with an href attribute referencing the path to your CSS file, as shown in the example below:</p>
<p>index.html style.css (located in the same folder)<html> <head> <title>Example Title