Before the internet was invented, there were no websites. All information was written or printed on paper. Today, we can easily access information through websites using our phones or other devices. The foundation of the modern World Wide Web is HTML & CSS. HTML (short for Hypertext Markup Language) forms the basic structure of any webpage. It provides structure and meaning to content, similar to how a human body is made up of a head, arms, legs, and everything in between.
Common HTML Terms
Elements: HTML elements define the structure and content of objects within a page. Common elements include headings (h1, h2, h3, h4, h5, h6), paragraphs (denoted by <p>), and much more. Elements are typically enclosed in angle brackets (< and >). Here are some examples:
<p>This is a paragraph</p><h1>This is a heading</h1><strong>This text will be bolded</strong>The list of these elements goes on and on. As you use these elements more often, they’ll stick in your brain. Just remember, elements give meaning to a web page and are enclosed in angle brackets (< and >).
For your web browser to correctly interpret your written code, you need to close your tags. Some tags are self-closing, such as the image tag <img> and the single-line break tag <br>.
Attributes: An attribute provides additional information about an element. Typically, attributes are defined within an opening tag and consist of a name and a value. For instance, a hyperlink is made up of the tag <a> and the href attribute. The href attribute contains a value, which is the link to another web page or content within a page.
For example:
<a href="https://thewhitechild.com">thewhitechild</a>In the example above, we can see a combination of an element in an opening tag (<a>), an attribute (href), a value (https://thewhitechild.com), and the closing tag (</a>). Don’t feel overwhelmed by what you’re seeing, especially if it’s your first time. With constant practice, you’ll get the hang of it.
The HTML Document Structure
HTML documents have a specific structure similar to building a house. Just as you wouldn’t start building a house from the roof, in a typical HTML document, you start with a document type declaration (<!DOCTYPE html>), which informs the web browser about the version of HTML being used (HTML5 is the latest version for now). It’s the first content on any webpage.
Following the declaration, the <html> element indicates the beginning of your webpage to the browser. After that comes the <head> element, which contains the page’s metadata, providing information about the webpage.
The <head> element includes the title of the webpage, which is displayed on the title bar when a visitor accesses your website. It’s important to give your web page a meaningful title, such as Home, Contact Us, or About Us, because if you don’t, it will default to “Untitled”. This is not aesthetically pleasing and might create a bad first impression, as the title is usually the first thing users see before your website finishes loading.
All content inside the <head> element (with the exception of the <title>) is not displayed to the user. All other visible content is contained within the <body> element. A typical HTML structure will look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>Referencing CSS
In short, CSS (Cascading Style Sheets) is used to style your web page, like a makeup kit for a web page. You can link your CSS file in the head tag of your HTML document to tell the web browser where it’s located.
For example:
<head>
<link rel="stylesheet" href="main.css">
</head>HTML Semantics
In simple terms, semantic HTML involves giving structure and meaning to the content of a web page using the appropriate elements, irrespective of the content’s visual style. When you utilize proper semantics, it becomes easier for you and others to comprehend the purpose of each piece of content in your code. Example of semantic elements include <section>, <article>, <header>, <footer>. Common non-semantic elements include <div> and <span>. Semantic elements play a critical role in HTML development. Furthermore, id and class are commonly used attributes for styling.
<div> elements are block-level (they start on a new line, stack on top of each other, and occupy all available width), while <span> elements are inline-level (they follow the normal document flow and only occupy the width of their content). <div> and <span> elements are commonly used in conjunction with class or id for styling purposes.
Comments
I can’t emphasize this enough: there’s nothing worse than an entire document of code without a comment. Think of a situation where someone hands a car key to someone who knows nothing about cars and expects them to drive around town. Comments help you and anyone else looking at your code to understand what’s going on. In HTML, comments start with <!– and end with –>. A typical example of a comment in HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<!--This is a comment-->
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>Headings
Headings are block-level elements and come in six different rankings: h1, h2, h3, h4, h5, h6. They are used to create a hierarchy of content. When using headings, it’s important to follow an order that is relevant to the content of a page. The main heading of a page or section should be marked up with an <h1> element, and subsequent headings should use <h2>, <h3>, <h4>, <h5>, and <h6> elements as needed. Below is an example of HTML for all the different heading levels.
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>Paragraphs
Headings are often followed by supporting paragraphs. Paragraphs are defined using the <p> block-level element. Paragraphs can appear one after the other, allowing information to be added to a page as needed. Here is an example of how to create paragraphs:
An example of a paragraph is:
<p>The world is big circle</p>Notice that every tag has an opening and closing. Never forget that.
Building Structure
In the past, web pages were constructed using <div> tags, which didn’t provide any semantic meaning and made it challenging to understand the purpose of different sections. However, with the introduction of HTML5, new structurally based elements such as <header>, <nav>, <article>, <section>, <aside>, and <footer> were introduced, making it easier to understand the content and purpose of each section.
Header
The <header> element is used to identify the top of a page, article, section, or other segment with a heading, introductory text, and navigation.
Navigation
The <nav> element is used to define a section of important navigational links on a webpage. It should only be used for primary navigation sections such as global navigation, a table of contents, previous/next links, or other significant groups of navigational links.
Article
The <article> element is used to identify a section of independent, self-contained content that can be independently distributed or reused. We often use the <article> element to mark up blog posts, newspaper articles, user-submitted content, and similar items.
Section
The <section> element is used to define a thematic grouping of content. This grouping may or may not include a heading. The content within the <section> element may be generic, but it’s helpful to recognize all of it as related. The <section> element is frequently used to organize and establish hierarchy on a page.
Having trouble deciding on whether to use <article>, <section>, or <div> elements? When you’re not sure which one to pick, it all comes down to the content. Both <article> and <section> are used to organize the structure of a document. If the content is only being grouped for styling reasons and doesn’t really matter for the document’s structure, go with the <div> element. If the content contributes to the document’s structure and can stand on its own, go for the <article> element. If the content adds to the document’s structure and represents a themed group of content, then the <section> element is the way to go!
Aside
The <aside> element contains content that is tangentially related to the main content, such as sidebars, inserts, or brief explanations. When used within an <article> element, the <aside> element may identify content related to the author of the article. Although we might instinctively think of an <aside> element as something that appears off to the left or right side of a page, it’s important to remember that all structural elements, including the <aside> element, are block-level elements. This means they will appear on a new line, occupying the full available width of the page or of the element they are nested within (their parent element). For example, on the Jumia website, there’s a menu on the left-hand side that can be used to filter content. This is an example of content that can use the <aside> tag.
Footer
The <footer> element is used to mark the end of a page or a specific part of a webpage. It’s usually found at the bottom of the page. This part typically contains relevant information and should stay related to the rest of the page.
Links
One of the essential elements of the Internet is the hyperlink. It enables linking from one web page or resource to another. Hyperlinks are created using the <a> anchor, an inline-level element. To establish a link from one page or resource to another, the href attribute, also known as a hyperlink reference, is necessary. The href attribute value specifies the destination of the link. For instance, if you click on the text “TWC” within the anchor element with the href attribute value of https://thewhitechild.com, it will take you to this website.
A sample hyperlink is
<a href="https://twitter.com">Twitter</a>Remember that hyperlinks can also be used to link to an email address or a phone number, not just websites.
For example:
<a href="mailto:hello@thewhitechild.com">Email Us</a>The snippet of code, when clicked, will launch any available email handler and allow a user to send an email.
Tables
When you see a table on a web page, it’s made up of columns and rows that hold information. HTML, the language used to create web pages, has special elements for making tables. At the very least, a table needs to have a <table> tag, a <tr> tag for each row, and a <td> tag for each piece of data. For more structure and meaning, tables can also have a <th> tag for headers and some other tags. When all these tags work together, they create a nice, organized table.
We use the <table> tag to create a table on a web page. It shows that the information inside will be arranged in columns and rows.
<table>
...
</table>Table Row
After creating a table in HTML, you can add rows to it by using something called a <tr> element. A table can have a lot of these rows, depending on how much information you need to show.
<table>
<tr>
...
</tr>
<tr>
...
</tr>
</table>The above snippet will produce a table with two rows.
Table Data
After you’ve made a table and added rows to it, you can put information into the table using the table data, or <td>, element. If you add several <td> elements one after the other, you’ll create columns within a row of the table.
<table>
<tr>
<td>Intro to CSS</td>
<td>In Stock</td>
<td>1</td>
<td>N400</td>
</tr>
<tr>
<td>Introducing HTML5</td>
<td>Out of Stock</td>
<td>1</td>
<td>N200</td>
</tr>
</table>Table Structure
Understanding how to put together a table and organize information is really useful. But there are a few extra parts that help us arrange the information and layout of a table. These parts include <caption>, <thead>, <tbody>, and <tfoot>.
Table Borders
Using borders in tables can make the information easier to understand. Borders around the entire table or individual cells can help users quickly find the information they need. When using CSS to style table borders, there are two key properties to keep in mind: border-collapse and border-spacing. Once you learn more about CSS, we’ll revisit styling tables to give you a better idea of how this works.
Lists
Lists are a part of our daily lives. For example, to-do lists help us figure out what we need to do, and recipes provide lists of ingredients and instructions. There are two types of lists: ordered and unordered.
An unordered list is a list of related items where the order doesn’t matter. In HTML, we create an unordered list using the <ul> element, and each item in the list is marked with the <li> element.
For example:
<ul>
<li>Mango</li>
<li>Pawpaw</li>
<li>Beans</li>
</ul>If I want to make a list that needs to be in a specific order, I can use something called an “ordered list”. This helps me to organize my information in a clear and structured way.
<ol>
<li>Unlock the car</li>
<li>Enter the car</li>
<li>Start the engine</li>
<li>Switch the gear to drive</li>
<li>Move the car</li>
</ol>Remember, when making a list, unordered lists display with bullet points, while ordered lists are numbered starting at 1. If you want your numbered list to start from the highest number and go down to the lowest, you can use the “reversed” attribute.
For example, the previous ordered list example will become:
<ol reversed>
<li>Unlock the car</li>
<li>Enter the car</li>
<li>Start the engine</li>
<li>Switch the gear to drive</li>
<li>Move the car</li>
</ol>This will ensure that the output starts with “Move the car.” Lists can be nested, i.e., a list within another list within another list, and so on.
<ol>
<li>Walk the dog</li>
<li>Fold laundry</li>
<li>
Go to the grocery and buy:
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
</li>
<li>Mow the lawn</li>
<li>Make dinner</li>
</ol>Adding Media
Adding media like videos, images, and audio to a website is easy. For images, we use a simple <img> tag, and a link to the image. Here’s an example:
<img src="twc.jpg" alt="TWC Logo">The “alt” attribute is a description of the image, used for people who may have trouble seeing the image.
Most browsers support popular image formats like JPG and PNG. JPG is commonly used because it creates smaller file sizes, making webpages load faster. There’s also a newer format called WebP, which compresses images even more. In the end, you should use the format that works best for your project.
Adding Audio
You can easily add audio to any website using a simple syntax, similar to how you add images.
<audio src="jazz.ogg"></audio>Just keep in mind that certain browsers may need additional information in order to recognize your audio correctly.
Adding Video
To include a video in an HTML document, you can use the <video> tag.
<video src="earth.mp4" controls></video>Keep in mind that certain additional features may be needed for certain web browsers to correctly display your <video> tag.
Forms
Forms on a website allow you to collect information from visitors. When someone fills out a form, the information they enter can be saved, sent to an email, stored in a database, or shown in a different place on the website. To create a form, you use something called a <form> tag.
<form action="/login" method="post">
...
</form>The <form> element has different attributes that you can use, but the most common ones are ‘action’ and ‘method’. The ‘action’ attribute holds the web address where the information from the form will be sent for the server to process. The ‘method’ attribute tells the web browser the best way to send the form data. These attributes are really important for sending and dealing with information from forms on the web.
Text Fields
When you’re filling out forms online, you’ll often see a box where you can type information. This box is called an “input” element. It’s like a blank space where you can type in things like your name, email, or other details.
The input box can be set up to only accept certain kinds of information, like text. This means you can only type in regular letters and numbers, and not things like pictures or symbols.
It’s also a good idea to give the input box a name. This name helps identify the information you’re typing in, so it can be sent to the right place when you submit the form.
An example:
<input type="text" name="username">The output of this line of code will be an input field that allows a user to enter their username. There are other input types such as password, date, search, email, and month.
In addition to text fields, HTML5 also includes other types of controls like checkboxes, radio buttons, and dropdowns. These help make websites more interactive and user-friendly.
In conclusion, I want to talk about some best practices for writing HTML. HTML is pretty forgiving, which means even if your code is messy, it can still work. But it’s important to learn how to write clean and organized code that not only works well, but is also easy to understand.
Remember these important tips for writing good HTML and CSS:
1. Always use unique IDs for elements on your web page. Each ID should only be used once.
2. Use the right HTML elements for the right job. For example, don’t use CSS tricks to make text look like a heading when you can just use the proper heading tags like <h1> to <h6>.
3. Follow the basic structure of an HTML document, which includes the <!DOCTYPE> declaration, <html>, <head>, and <body> tags.
4. Don’t forget to close your HTML tags properly.
5. It’s helpful to add comments in your code to explain what different parts of your code are doing.
6. Make sure to indent your code properly. It may seem small, but it makes a big difference in how easy it is for others to read and understand your code.
This is horrible:
<Aside>
<h3>Chicago</h3>
<H5 HIDDEN='HIDDEN'>City in Illinois</H5>
<img src=chicago.jpg alt="Chicago, the third most populous city in the United States" />
<ul>
<li>234 square miles</li>
<li>2.715 million residents</li>
</ul>
</ASIDE>This is readable:
<aside>
<h3>Chicago</h3>
<h5 hidden>City in Illinois</h5>
<img src="chicago.jpg" alt="Chicago, the third most populous city in the United States">
<ul>
<li>234 square miles</li>
<li>2.715 million residents</li>
</ul>
</aside>7. Use clear and descriptive names for IDs and Classes.
8. Use “alt” tags to describe your images. This helps people using screen readers as well as improves your website’s search engine optimization (SEO).
9. Avoid putting your CSS styles directly into your HTML code. Instead, put them in a separate CSS file and link that file to your HTML document. This makes your website faster and easier to read. Also, try not to create too many separate CSS files because having too many can slow down your website.