Introduction to Semantic Web Development
Author: C. Sean Burns
Date: 2025-01-10
Email: sean.burns@uky.edu
Website: cseanburns.net
GitHub: @cseanburns
Introduction
This book will serve as an introduction to semantic web development. A more advanced semantic web development course would introduce students to RDFS, SKOS, OWL, SPARQL or more. But this book expects undergraduate students who are new to web development. Therefore this work focuses on entry level topics: HTML5 and its semantic elements, CSS3, and JSON-LD with schema.org.
This book is a work in progress. The goal is to complete an initial draft between January and May 2025.
How to Use this Book
Markup
There are two markup styles that I want to bring to your attention:
Code Blocks
Text that looks like code blocks indicate some kind of command, series of commands, or web code. Do not simply copy and paste the code into your terminal or text editor. You should practice and type all code yourself.
Asides
I occasionally insert asides into the text. These asides generally contain notes or extra comments about the main content. Asides look like this:
This is an aside. Asides will contain extra information, notes, or comments.
Theme
At the top of the page is an icon of a paint brush. The default theme is darker text on a light background, but you can change the theme per your preferences.
Search
Next to the paintbrush is an icon of a magnifying glass. Use this to search this work.
Printing
I intend this book to be a live document, and therefore it'll be regularly updated. But feel free to print it, if you want. You can use the print function to save the entire book as a PDF file. See the printer icon at the top right of the screen to get started.
About This Book
This book works as a live document since I use it for my spring semester Semantic Web Development course. I will update the content as I teach it in order to address changes in the technology and to edit for clarity.
This book is not a comprehensive introduction to semantic web development. It is designed for an entry level course on these topics. It is focused on a select and small range of those topics that have the specific pedagogical aims described above.
I use mdBook to build markdown source files into this final output.
The Semantic Web
The Semantic Web is an extension of the current web. Whereas the current web was designed for people to read, the semantic web is designed to help machines process, intepret, and reuse data. That is, the goal of the semantic web is to allow machines (AI, etc) to understand the words on a webpage with respect to however machines understand anything. The outcome of this goal is a web of data that can be more easily processed by machines, including AI, and allow for enhanced data sharing, integration, and resuse across applications.
The vision of the semantic web originates with Tim Berners-Lee, the inventor of the web. He described the comparison between the web that we know and the semantic web as early as 2000:
"If you think of the web today as turning all the documents in the world into one big book, then think of the Semantic Web as turning all the data into one big database ..." (Berners-Lee et al., 2000).
There are two broad ways to study the semantic web. The more advanced way is to learn how to use semantic web technologies such as:
- Knowledge representation technologies
- Knowledge retrieval technologies
However, the above technologies are more focused on underlying data models and for querying those models rather than website development. To focus on web development, in the sense that we want to create actual websites, then the semantic web technologies we are interested in are a bit different. Specifically, in this book, we will learn about:
- HTML5, which includes semantic elements.
- CSS3, which plays an important role in separating content from presentation.
- JSON-LD (JavaScript Object Notation for Linked Data), which is actually JavaScript agnostic and is used to create linked data for machines to parse and generate.
- Schema.org, which provides a collection of shared vocabularies (or terms and definitions) to annotate web content.
The Use of The Semantic Web
There are several important reasons to make data semantic on the web.
- First, semantic data enhanches searchability. Recipes are a common example. When you search for a recipe, semantic data on recipe web pages allows search engines to parse the ingredients, cooking times, and other factors on those pages.
- Second, the semantic web enables data integration. This is through the use of multiple vocabularies, such as Schema.org, but there are other vocabularies that can be used at the same time. This is a common use case in more advanced cases of the semantic web. For example, scientific databases can be enhanced with semantic data that integrates data from multiple scientific domains.
- Third, the semantic web helps machines process data better and thus begin to automate complex tasks. Personal assistants like Siri and Google Assistant rely on semantic data.
- Fourth, semantic data fosters interoperability between systems and applications. For example, a weather application can integrate data from multiple weather stations in order to provide a comprehensive forecast.
Our Goals
In this book, we will gain hands-on experience with HTML5, CSS3, and JSON-LD. These technologies will help you apply semantic data to websites and make your websites not only more searchable but also more accessible. Our tasks will include:
- We will learn how to structure web pages using HTML5 semantic elements. This will make our web content more meaningful and accessible to users and machines.
- We will learn how to style and present our web pages using CSS3. Cascading Style Sheets (CSS) help us create visually appealing webpages and sites but, importantly, keep content separated from presentation.
- We will embed structured, linked data into our webpages using JSON-LD and Schema.org. This will further enhance our content for machine-readability.
- Finally, throughout this book, we will work on creating a final website using all of these technologies.
Conclusion
While you may not have heard of The Semantic Web, it is an important part of the evolution of the web and internet. When we make our data (content) machine-readable, we add context and meaning to that data for machines to use. This opens up possibilities for data integration, searchability, and automation.
User Experience and Accessibility
Have you ever struggled to access a website on your phone or found a poorly designed form impossible to complete? These barriers are not just frustrating, but they are also examples of poor accessibility. Now, imagine how much more difficult and frustrating this can be when using older hardware, having a poor internet connection, or having limited eyesight. Accessible web design is considering how to create effective web pages and sites that are accessible to as many people as possible, despite the devices they have or their physical conditions.
Accessibility
In this section, we study general web accessibility and how web semantics helps make sites more accessible. I use the term accessibility as a kind of shorthand: I also include, broadly, things like usability and inclusion.
One of our readings makes important distinctions among these terms. That is, accessibility has a distinct definition, as well as the terms usability and inclusion. Our reading from w3.org defines accessibility as that which:
addresses discriminatory aspects related to equivalent user experience for people with disabilities, including people with age-related impairments. For the web, accessibility means that people with disabilities can perceive, understand, navigate, and interact with websites and tools, and that they can contribute equally without barriers.
And then usability is related to user experience design or UX design. Usability is:
about designing products to be effective, efficient, and satisfying. Specifically, ISO (International Organization for Standardization) defines usability as the "extent to which a product can be used by specified users to achieve specified goals effectively, efficiently and with satisfaction in a specified context of use"
Finally, inclusion is referred to as:
Inclusive design, universal design, and design for all involves designing products, such as websites, to be usable by everyone to the greatest extent possible, without the need for adaptation. Inclusion addresses a broad range of issues including access to and quality of hardware, software, and Internet connectivity; computer literacy and skills; economic situation; education; geographic location; and language — as well as age and disability.
Things related to inclusion are pretty broadly defined. This can be related to the responsiveness of a website to various displays, such as mobile phones, and then to the whole ranges of mobile phones that exist, as well as to desktops, laptops, and tablets, and even to smart watches.
We're going to discuss these issues. You're going to identify some websites and rank and judge these sites according to the principles of accessibility, usability, and inclusion by enabling accessibility mode on your laptop/desktop browser and on your phones.
It will help to watch a short video about accessibility on YouTube, which does a really nice job demonstrating all the above issues.
Semantics and Accessibility
Semantics refers to meaning, or what something means. Humans are pretty good (most of the time) at interpreting meaning but not computers. For example, you and I know what a person is, but a computer does not. Yet despite that, if you search for a person on the web, you will likely get accurate results back. The reason this is successful is because information retrieval algorithms use other methods to figure out to identify what is relevant based on what we search.
Thus when we talk about semantics and accessibility, we talk about how to make it so that the structure and the content on our websites can be understood by computers. The result of this is better information search and information retrieval, via search engines and artificial intelligence assistants.
It makes sense then that the meaning of a thing relates to its accessibility. Therefore, one way that we will address accessible web development is through HTML5, which was specifically released to add semantic HTML elements. This helps computer systems (like search engines and screen readers) interpret the meaning of a document's structure better than prior versions of HTML could and provide better accessibility options to people, then, too. Later we'll learn and apply JSON-LD technologies to provide meaning to the content on a page, so that a search technology can have a better understanding of what a webpage is about.
Do More with Less
There is another aspect of HTML and accessibility that we need to consider. You can think of HTML as the least common denominator among the languages that we use to develop websites. That is, a web page can be nothing more than an HTML page since it offers elements that are used to structure and provide content to a website. All other languages and technologies are additions to a web page that work and build on the HTML.
One of the goals in meeting accessibility, usability, and inclusion issues is thus to take advantage of the least common denominator aspect of HTML as much as possible. By this I mean that if you have a choice between a JavaScript (or PHP, Ruby, etc.) solution that will perform some task, and you can do the same thing in HTML, then do it in HTML. As soon as we start to make things more complicated and more sophisticated, then the more likely it becomes that we will break something, and that makes it likely to make a site less accessible, usable, and inclusive.
While using HTML whenever possible is a best practice, there are cases where JavaScript or other languages may be required to achieve specific functionality. For example, it is necessary to use JavaScript (or another language) to create a web app. The key is to ensure that any additional complexity does not create unnecessary barriers to accessibility. Read: Google's JavaScript Warning & How it Relates to AI Search.
The Semantic Structure
I mentioned this above, but we'll talk about semantics in two ways. We we start creating our sites, we will use HTML5 to add semantics to a web page, and later we will use JSON-LD to add additional semantics that describe the content on a webpage. Some example semantic HTML5 elements include:
<article>: "examples include: a forum post, a magazine or newspaper article, or a blog entry"<aside>: examples include: "sidebars or call-out boxes"<figure>: examples include: photos, plots, graphs, etc.<footer>: examples include the footer section of a website or section<header>: examples include the header section of a website (with title) or section<nav>: provides navigation links to parts of a webpage or parts of a website<section>: "represents a generic standalone section" of a webpage<summary>: "specifies a summary, caption, or legend for a<details>element's disclosure box"<time>: "represents a period of time
Below are links to two lists of HTML5 elements. You should begin to review them and save or bookmark these pages for constant reference:
Attempts to provide semantic data were provided for in previous versions of HTML, like XHTML and HTML4,
and through hacks that were not all that ideal, such as excessive use of the <div> element, or through scripting languages like JavaScript.
That is, in the early days of the web, developers often used (and still do, unfortunately) non-semantic elements
like <div> and <span> to structure content.
In the very early days, they structured content using tables (e.g., <table>) elements.
These were sad days because it made it difficult for assistive technologies to interpret content accurately.
However, these deficits led to the development of semantic HTML in HTML5.
That is, HTML5's great benefit is that it provides semantic elements directly.
For example, the <article> element was created to describe an article, like a blog entry, on a web page,
and the <section> element was created to delineate a generic section on a web page.
The <nav> element is another example of a semantic element.
This element defines a site's navigation menu and helps both users and search engines quickly understand the structure of a site.
Screen readers can then provide users with an overview of the site's main sections and thus improve navigation for visually impaired users.
By using such elements, we provide semantic information not just to the user of the site, or to other developers, but also to machines that parse that website for data and information. This includes web crawlers from search engines and screen readers for people who are visually impaired in some way. These semantic elements also provide text-to-speech advantages. These are a few reasons why HTML5 semantic elements are important. You won't have to memorize all of the elements, but there will be ones that you'll use more often, like the ones that I listed above.
Conclusion
In summary, web accessibility is more than a technical requirement. It is a foundational principle of inclusive design that ensures all users, regardless of ability, can access and interact with digital content. By understanding the distinctions between accessibility, usability, and inclusion, web developers can create more effective user experiences. The semantic features of HTML5 and the use of additional technologies like JSON-LD enhance accessibility by improving how content is structured and interpreted by both users and machines. Emphasizing simplicity in web development, and prioritizing solutions that use HTML wherever possible, reduces barriers and promotes greater inclusivity. As we move forward, we should recognize the importance of semantics in web design. This will improve search and retrieval processes but also create a more equitable digital space for all users.
Tools, Setup, and Workflow
Install Software for Web Development
Web developers, and other programmers, rely on a suite of applications to conduct their work. In order to learn how to become web developers, we will need learn how to use some of these applications.
To learn to use these applications, we need to install them. Hence, our first task is to install the software we need to start web development. For this course, we will use the following tools:
- Text editor
- Vector graphics editor
- Version control software
The tricky part about this week is that I cannot show you how to install this software. The installation process is dependent on the operating system you use. Whether you use Windows, macOS, or Linux (as I do), then you should already know the basics of installing. And fortunately, once these tools are up and running on your systems, we'll all be in sync and what you'll see in my instructions going forward will be easier to follow.
Text Editor
Let's start with the most important application: a text editor. Text editors are a programmer's bread and butter. They have a long history and there are even funny cultural wars about text editors. Personally, I use the Vim editor, which is a command line editor. Vim can be difficult to learn, and we don't have the time to learn it. Therefore, for this course you can use a GUI (graphical user interface) text editor.
Note that we do not use a word processor like Microsoft Word or Google Docs in programming. When we write any kind of code, the code needs to be saved as plain text and not as encoded text. Word processors save files as encoded text and text editors save files as plain text (e.g., DOCX versus TXT files).
Also, text editors offer a number of functions that are designed to help us write better programs. Fortunately, many are free and open source software.
For this course, you can use the free VS Code text editor. You are welcome to use another text editor, especially if you are used to working with one and know how to use it. If you use VS Code, feel free to explore it and see what extensions or themes you might like to add. Extensions will extend VS Code's functionality. Themes will alter how VS Code appears.
Download and install VS Code from:
Vector Graphics Editor
When we begin a web development project, it is a pretty bad idea to just sit down and start coding a website without first thinking about its architecture, how it looks, its design, what it contains, who the audience is or are, and so forth. The good idea is to start with a plan.
The same is true for any professional, like an architect, who designs anything in this world. Imagine having the money to build your own home and then hiring a builder who starts assembling a bunch of lumber and pipes and wires with only a vague idea of what they want to accomplish. That would be foolish as well as a waste of money and time. The same is true for any profession that builds or develops anything. If you want to build a website, then you start with a plan.
For this course, I mainly want you to think about how the website you will build will look on a desktop/laptop browser and also on mobile. We could hand draw this, but in some settings, you will want to share your plans with others, and thus it makes more sense to use a drawing tool in order to share native, digital files with your colleagues or customers.
Enter Inkscape, a vector graphics editor. Vector graphics editors are often used to design things like logos. Unlike raster-based editors, like Photoshop or GIMP, vector graphics scale to any size and still maintain quality. Adobe Illustrator is a vector graphics editor, but Inkscape is as advanced as Illustrator and is free and open source software.
If you have and are comfortable using a vector graphics editor, like Illustrator, you are free to use that, but for this course, I will use and demonstrate Inkscape.
Download and install Inkscape:
Version Control
Finally, one of other most important tools for actual web development (and for any kind of programming) is version control. Version control is about project management, such as keeping track of your work and the history of your work, and about collaboration, such as working with other developers. A number of version control software systems are available, but one of the most popular ones is Git, and we'll use that in this course.
Version control systems are enhanced with version control repositories, which are used to send, store, and share code and other work. We could set up our own Git repository, but for this course, we will use GitHub.
I'll show you the basics of using Git and GitHub in this course, but for now, we need to create an account on GitHub, if you don't have one, and download Git on our machines.
GitHub
First, create an account on GitHub, if you don't already have an account. Use a personal email address and not your university email (since it's temporary) when setting up the account:
- Create an account on GitHub
Install Git on Windows
For Windows users, I advise you follow the instructions in this video and on this page:
- Git on Windows: Do not proceed after the 1 minute and 50 second mark
Install Git on macOS
Follow the instructions in the macOS section on Installing on macOS.
Gitting Started
Git Configuration
Once Git is downloaded, we need to configure our system to use it. We do that by giving Git our name, GitHub username, and email address plus some other details. Here we need to be sure to use the same email address that we used to create our accounts on GitHub.
To get started, open a command shell or terminal on your computer (e.g., CMD.exe or PowerShell on Windows or Terminal.app on macOS) and run the following command. Note the quotes around the name but not around the github_username or email address. Use YOUR NAME AND YOUR EMAIL ADDRESS.
git config --global user.name "Your Name"
git config --global user.name github_username
git config --global user.email youremail@example.com
Next, we configure Git to use main as our default branch name. If you are using VS Code, then the second command instructs Git to use it as your default text editor. Run these two commands as-is, but if you are using a different text editor, then be sure to lookup the appropriate command for that editor:
git config --global init.defaultBranch main
git config --global core.editor "code --wait"
We can verify the above settings with the following command:
git config --list
For additional details, see the Git documentation on getting started:
We'll soon begin to use Git and GitHub when we start coding our websites. Next, we need to understand some basic concepts with Git and GitHub.
Git Basics
Repos
The first Git concept to learn is the repository concept. Git uses two kinds of repositories:
- local repository (repo)
- remote repository (repo)
The local repo is a project directory (or folder) on your computer. I will use the term directory and not folder since the former term is more commonly used in tech fields. The project directory contains all the project files and any sub-directories for the project.
The remote repo is where we send, retrieve, or sync the files and directories that are contained in the local repo. We can retrieve projects from other repos that other people or organizations have created, if those repos are public.
With Git and GitHub, we can start a project on the local system (i.e., our computers) or start a project by creating a remote repo on GitHub and then copying it to our local system.
Branches
The second Git concept to learn is:
- branches
When you configure a directory on your local system to become a Git project, you create a default branch for your project. For small projects, we might only work in the default branch. The default branch will be named main.
However, since Git is a version control system, we can create additional branches to test or work on different components of our projects without messing with the main branch. For large or complex projects, we would work and switch among different branches. A large project might be a big website, an software application, or even an operating systems. Working in non-main branches (e.g., a testing branch), allows us to develop components of our project without interfering with the main branch, which might be at a stable version of our project. And then when we are ready, we can merge a testing branch with our main branch, or we can delete the testing branch if we don't want to use it.
We will primarily work with the default, main branch with our projects, but you should read the Git documentation on branches.
Important note: If we create a new repository on our local machines using Git, the default branch might be called master. However, if we create a new repository on GitHub, the default branch will be called main.
There is a long history of using terms like master and slave in various technologies, and the technology industry is beginning to come to terms with this and to use more inclusive terms. You can read more about the reasons here:
- GitHub to replace 'master' with 'main' starting next month
- Tech Confronts Its Use of the Labels 'Master' and 'Slave'
Conclusion
Going forward, we will use Inkscape to design our websites. We will use VS Code with Git and GitHub to:
- Edit and write HTML, CSS, JSON-LD in our local repo.
- Save the edits and new code.
- Stage the changes so that Git tracks the new changes.
- Commit the changes with a meaningful commit message.
- And push the changes to the remote repo.
For future reference, here's a nice cheat sheet of Git commands. Most of these commands are to be used from the command line (Windows, macOS, or Linux), and so if we explore any command line usage of Git, these will be good to have on hand.
Designing with Inkscape
Good website design begins with a solid understanding of layout. Layouts determine how information is structured visually and guide users' interactions with your content. A well-thought-out layout ensures that a website is aesthetically pleasing and functional, and it helps users easily find what they need while enhancing their overall experience.
Fortunately, there are some common web layout designs, just like there are common building layouts or home layouts. This means you do not need to invent anything new and that there is lots to explore as you think about the kind of website you want and the kind of content you want to share. To get started, review the 11 Website Layout Examples for Every Type of Page.
Although some of the layouts at the above link might seem complicated, you can start by considering two common layout structures: Single Column Layout and Two-Column Layout.
The single-column layout can also be framed as a multiple row layout. This layout is organized by rows with a header top row, navigation second row (or shared with the header row), main content third row, and footer as the last row. Although seemingly simple, the main UK website follows a single column layout, except that it contains columns within rows.
Some layouts may follow the above layout but push the navigation to the side, creating a two column layout, with the main content area to the right (usually) or left of the navigation. Many Wikipedia articles following this kind of layout.
Responsive Web Design
One of the biggest challenges in modern web development is designing for multiple screen sizes. Websites must work seamlessly across devices—from large desktop monitors to small mobile screens. This is where responsive web design comes into play. Responsive design adapts a website's layout to screen size, resolution, and orientation of the device used to access your website.
Why Mobile Matters
We need layouts that are usable on large screens, but mobile matters for several reasons:
- Mobile usage trends: Most Americans have a smartphone and use their smartphone browsers for accessing the web. This trend is growing around the world, too, and around 50% of global website traffic comes from mobile devices. As an example, nearly half of Wikipedia's visitors are on mobile (iOS and Android). Ignoring mobile users can therefore result in loss of engagement.
- User expectations: Mobile users expect fast-loading, easy-to-navigate sites with content formatted for smaller screens.
- Search engine optimization (SEO): Search engines like Google prioritize mobile-friendly websites in their rankings. This is called mobile-first indexing.
When we begin coding our sites using HTML and CSS, we'll have to create code that adapts to both large and small screen sizes.
Prototyping with Inkscape
Now that we've covered the importance of layout design and responsiveness, let's discuss how to prototype these designs effectively using Inkscape. Inkscape is a free, open-source vector graphics editor. It's commonly used to create illustrations (such as logos), but it's a fantastic tool for creating website layout prototypes.
Prototyping is an essential step in the web design process. It allows you to experiment with different layouts and identify issues before committing to code. With Inkscape, you can create high-quality, scalable designs for large screens and mobile views.
Getting Started with Inkscape for Layout Design
Step 1: Setting Up Your Canvas
- Open Inkscape and create a new document.
- Adjust the canvas size to match your target screen dimensions.
- Go to File → Document Properties →
- Select Custom size to pixels or px
- For a regular desktop layout: Set the canvas width to 1440 pixels and height to 900 pixels (or a size relevant to your project).
- For a mobile layout: Use dimensions like 360 pixels wide by 640 pixels tall.
- Close Document Properties and press the number 5 to center canvas in Inskcape
- To organize your work:
- Save your desktop sized canvas file as Desktop_Prototype.svg.
- Save your mobile sized canvas file as Mobile_Prototype.svg.
Step 2: Creating a Wireframe
A wireframe is a basic visual guide that represents the skeletal framework of your website. It's generally a good idea to know the content that you want to present on a site before you wireframe, but since we're in the exploration stage, we will worry about content later. When we begin to write CSS but after we have written our HTML, we can revisit and revise our wireframes as needed.
Here's how to create a wireframe in Inkscape:
- Use the Rectangle Tool to define sections such as headers, footers, navigation bars, and content areas.
- Use the Text Tool to label each section; e.g., "Header", "Main Content", "Footer".
- Keep the wireframe simple by using grayscale colors to focus on layout without distractions from design details.
Step 3: Adding Design Elements
Once the wireframe is complete for your Desktop version, you can refine it by adding design elements.
- Use shapes and gradients to visualize buttons, cards, or other interactive elements.
- Add placeholders for images using rectangles with an X through them.
- Experiment with font sizes and text alignment for headings, subheadings, and body content.
- Save as Desktop_Prototype.svg.
Adapting Layouts for Mobile
To create a mobile version of your design:
- Duplicate your desktop wireframe and adjust the canvas size to match mobile dimensions.
- Rearrange elements to fit within the narrower viewport:
- Stack sections vertically
- Resize text and images for smaller screens
- Ensure touch-friendly design by spacing buttons and interactive elements adequately.
- Save as Mobile_Prototype.svg.
Tips for Effective Prototyping
- Keep it simple: Focus on layout and structure during prototyping. Details can be added later.
- Iterate quickly: Experiment with multiple versions to explore different layouts.
- Test early: Share prototypes with peers or users to gather feedback before coding.
- See more tips at Wireframing your layout.
Closing
Designing for both desktop and mobile views is an essential skill in web development. Using Inkscape for layout prototyping helps you visualize your designs, test ideas, and build responsive websites effectively. In the next two chapters, we will explore how to implement these layouts using HTML first and then CSS. For now, experiment with Inkscape and create your own prototypes for both desktop and mobile views.
HTML5 and The Web
In chapter two, we focus on learning HTML5. The goal is to cover:
- Document structure metadata
- Section elements
- Grouping content and text-level semantic elements
- Links and attributes
- Embedded content: images and multimedia
- Tables and forms
In this chapter, I want you to focus solely on learning HTML5. Do not attempt to apply CSS to your content. This will mean that your web content will appear bland, but that's okay. We want to learn one thing at a time and take the time to learn that one thing.
Your Work
As we learn this material, you will do the following:
- Create files in your local repository that modify the lessons covered here.
- Push your files to GitHub.
- In GitHub, begin to build your own website using the skills you learn in this chapter.
- Remember, use HTML5 only. We'll apply CSS3 in the next chapter.
Document Structure and Metadata
Introduction
One of the main purposes of HTML is to structure our web documents and our content. This means that HTML offers a set of elements for this purpose. In this section, we will list, describe, and illustrate how to use these elements.
First, as you learn HTML, please refer to the official documentation at WHATWG. This is the working group for managing the HTML standards, its specifications, and documentation. The documentation for HTML5 should be constantly referenced throughout this work. See:
Mozilla also maintains a solid reference source:
The Structure of an HTML Document
The overall basic structure of an HTML document is fairly simple and straightforward.
An HTML document begins with the DOCTYPE declaration, which declares the document to be HTML.
This is followed by the HTML element <html>, which represents the root of an HTML document
.
The <html> element usually contains a lang attribute that we use to declare the
natural language used in the document.
In our case, that's English, and thus we use <html lang="en">.
Using this helps speech synthesis tools and translation tools to parse our web document (HTML Element).
The HEAD <head> section includes the document metadata and follows the HTML root element.
The BODY <body> section follows and contains the document's content.
The very basic structure of an HTML document looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
You should note that most but not all HTML elements have a start or opening tag and an end or closing tag.
In the above example, the opening tag <html> begins on the second line
and the ending tag is at the last line with </html>.
This tag therefore encompasses the <head> and <body> elements, which themselves will encompass other elements.
The <head> section
Let's focus on the HEAD section, which contains a web document's metadata.
A document's metadata is data that describes the data on the page.
This section of the HTML document typically includes five elements:
<title>, <base>, <link>, <meta>, and <style>, as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<base>
<link>
<meta>
<style></style>
</head>
<body>
</body>
</html>
Like the <html> element,
the <head> element encompasses its own elements (<title>, <base>, <link>, <meta>, and <style>)
since it closes after them with the </head> element.
The <title> element
The <title> element contains the document's title or name.
As an example, if I am writing a web page about Linux systems administration,
then I may include that within the <title> element, like so:
<title>Using the Linux OS for Systems Administration</title>
Note the <title> element closes with </title>.
We can add the title information to our <head> section, as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using the Linux OS for Systems Administration</title>
<base>
<link>
<meta>
<style>
</head>
<body>
</body>
</html>
The <base> element
The <base> element allows authors to specify the document base URL for the purpose of relative URLs
(The base element).
The content of the <base> element depends on your website's domain name.
If I have a website at https://www.example.org/, then I add this information to my <base> element:
<base href="https://www.example.org/">
This allows me to link to other parts of my website without using the full URL or path. For example, if I have a website with two pages: index.html and news.html, then to link to news.html from the index.html page, I only have to name the file:
Read my <a href="news.html">weekly newsletter</a>
If I didn't include the <base> element in my <head> section,
then I would have to reference or link to the full URL, like so:
Read my <a href="https://www.example.org/news.html">weekly newsletter</a>
The difference between these two examples is that the first example resolves the link relative to the <base> URL,
while the second example specifies the full domain and path.
Using the <base> element therefore makes it easier to link to other parts of our websites.
It also makes it easier if we change the domain name of our website.
In such a case, we would only have to update the URL in the <base> element.
Let's modify our <head> section with this new information:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using the Linux OS for Systems Administration</title>
<base href="https://www.example.org/">
<link>
<meta>
<style>
</head>
<body>
</body>
</html>
Note that the <base> element does not close.
The <link> element
The <link> element allows authors to link their document to other resources
(The link element).
Other resources may include external CSS stylesheets, JavaScript code, and more.
We will use this element later when we link to our CSS code or stylesheets.
As an example, we might create a directory in our root project directory called css and
include our CSS code in that directory in a file named style.css.
In this case, we use the <link> element to link to our stylesheet in the following way:
<link rel="stylesheet" href="css/style.css">
In that example, the rel and the href are called attributes.
The rel attribute describes the resource and the href attribute describes the location of the resource.
Since we are using the <base> element, as described above, we only refer to the relative path
of the stylesheet (named style.css) instead of the full path.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using the Linux OS for Systems Administration</title>
<base href="https://www.example.org/">
<link rel="stylesheet" href="css/style.css">
<meta>
<style>
</head>
<body>
</body>
</html>
Note that the <link> element does not close.
The <meta> element
The <meta> element represents various kinds of metadata that cannot be expressed using the
other <head> elements, such as <title>, <base>, <link>, <style>
(The meta element).
The <meta> element has a few use cases.
To keep it simple for now,
we'll cover the basics below and expand on them as we cover other topics.
First, as the documentation states, the <meta> element requires one of three attributes:
name, http-equiv, and charset.
We'll skip the second attribute and discuss the first and third one.
The charset and name attributes
The charset attribute establishes the document's character set and allows proper displaying of non-ASCII characters. In practice, we use this to declare the document's character set to UTF-8.
The name attribute is used with several names that refer to the web/HTML document's metadata. We'll focus on the following four:
- viewport: controls the size and shape of the browser's viewport:
- we use this to make our site mobile friendly by default
- author: names the author of the web document:
- we use this to name the author of the web document
- description: describes the content of the web document:
- we use this to describe the content of the web document
- keywords: lists descriptive keywords that describe the content of the web document:
- we use this to list keywords that describe the content of the web document
Putting this altogether, we have the following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using the Linux OS for Systems Administration</title>
<base href="https://www.example.org/">
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="C. Sean Burns">
<meta name="description" content="An introduction to Systems Administration with Linux OS, including Debian and Ubuntu">
<meta name="keywords" content="systems administration, linux, debian, ubuntu">
<style>
</head>
<body>
</body>
</html>
The <style> element
Finally, the <style> element is used to embed CSS in our <head> section.
Most of the time, we want to use an external stylesheet for CSS code, which we'll cover later.
We want this because it means that we only need to modify one CSS file to style our entire site.
That's particularly nice when our website grows to include many pages.
However, there are times when we want to use a CSS style to modify just one page or some aspect of a single page.
When we use the <style> element, we use CSS syntax, and not HTML, within the <style> tag.
As an example, if we want to specify a specific family of fonts, then we can use the
CSS html selector to specify a font-family for a single webpage.
A CSS selector is often equivalently named to an HTML element.
Such cases are called Type selectors.
Thus, to modify the <html> element on a page, we use the CSS html type selector.
In the following example, we state that the monospace font family should be used for the entire page,
since we attach it to the html selector.
On a multi-page website, this styling would only apply to this one page.
<style>
html { font-family: monospace; }
</style>
Note that the <style> element requires a closing tag.
Once we add that to the <head> section, we have the following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using the Linux OS for Systems Administration</title>
<base href="https://www.example.org/">
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="C. Sean Burns">
<meta name="description" content="An introduction to Systems Administration with Linux OS, including Debian and Ubuntu">
<meta name="keywords" content="systems administration, linux, debian, ubuntu">
<style>
html { font-family: monospace; }
</style>
</head>
<body>
</body>
</html>
Conclusion
In this section, we introduced the basic structure of a web page and covered the basics of a web document's metadata section. The latter included the following elements:
<!DOCTYPE html><html><head><title><base><link><meta><style>
In the next section, we focus on adding content within the <body> element of a web document.
HTML Section Elements
Introduction
In the last section, we covered the basic outline of a web document
and built its metadata section in the web document's <head> section.
At the end of that section, we created the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using the Linux OS for Systems Administration</title>
<base href="https://www.example.org/">
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="C. Sean Burns">
<meta name="description" content="An introduction to Systems Administration with Linux OS, including Debian and Ubuntu">
<meta name="keywords" content="systems administration, linux, debian, ubuntu">
<style>
html { font-family: monospace; }
</style>
</head>
<body>
</body>
</html>
In this section, we shift our focus to the content section of our web document.
This is the area within the opening and closing <body></body> element.
We'll begin with what are called the section elements and
use this to create a broad outline of our web document.
In the next section, we'll cover the grouping elements.
We'll use the grouping elements to begin adding content.
For now, let's focus on sections.
Section Elements
There are ten main HTML section elements, or elements used to define the sections of an HTML document.
We have already covered the first one, which is the <body> element.
The <body> element is the only required section element.
The rest of the elements help us structure the main layout of our web document.
It is not necessary to use them all, but the more structure our document has,
the easier it will be for both visitors and machines to parse our web documents.
These section elements include:
- the
<body>element - the
<article>element - the
<section>element - the
<nav>element - the
<aside>element - the
<h1>,<h2>, ...,<h6>elements - the
<hgroup>element - the
<header>element - the
<footer>element - the
<address>element
See: HTML Sections
We have already covered the <body> element.
All remaining section elements are enclosed in the <body>.
The <article> Element
The <article> element contains a complete, or self-contained, composition in a document, page, application,
or site and that is, in principle, independently distributable or reusable
(The article element).
Examples from WHATWG include parts of a web page like a forum post or a magazine article.
A web document may include multiple <article> elements in a web page, such as with forum posts, but
each instance will indicate a separate, independent piece.
The <article> element may also be nested, which means that there may exist articles within articles.
<body>
<article>
</article>
</body>
The <section> Element
The <section> element is a more generic version of the <article> element.
It functions as a generic section of a document or application
(The section element).
The WHATWG documentation provides examples such as chapters, parts of a home page, etc.
Another example might be a recipe for a dish, where the sections of a recipe include ingredients, methods, etc.
We can enclose a <section> element within an <article> element or use it as a standalone element.
<body>
<article>
<section>
</section>
</article>
</body>
The <nav> Element
The <nav> element is used to contain navigational links to other parts of the site (The nav element).
For example, if a website had a news page and an about page, then links to these pages would be placed in <nav>.
This might be placed near the top of a web document.
<body>
<nav>
</nav>
<article>
<section>
</section>
</article>
</body>
The <aside> Element
The <aside> element functions as a sidebar and is used to represent extra
but related information to the main content (The aside element).
For example, imagine you have written an article on text editors.
In this article, you might want to take note of a historical aspect of a specific text editor, like Vim,
even though the main article isn't about Vim.
This is the kind of function that an <aside> fulfills.
Note that I add an <section> element to illustrate how this can be used repeatedly.
<body>
<nav>
</nav>
<article>
<section>
<aside></aside>
</section>
<section>
</section>
</article>
</body>
The <h1> through <h6> elements
The <h1> through <h6> elements represent section headers
(The h1, h2, h3, h4, h5, and h6 elements).
These are useful for marking the title and subtitles of a web document and
can be used for the entire web document or within specific sections,
such as within <article> or <section> elements.
In the example below, I show how to use these repeatedly throughout a web document.
However, it's best practice to use the <h1> element only once on a web page,
given that it marks a top-level section.
<body>
<nav>
</nav>
<article>
<h1>Some title here</h1>
<h2>Some subtitle here</h2>
<section>
<h2>Section title here</h2>
<aside></aside>
<h3>Subtitle here</h3>
</section>
<section>
<h2>Section title here</h2>
</section>
</article>
</body>
The <hgroup> element
The <hgroup> element is used to bundle section header elements.
It may include <p> elements for paragraphs.
I demonstrate it here for completeness, but in reality, it's probably best to avoid using it.
It's a confusing element and the <header> element, which I describe below, offers more versatility and semantics.
<body>
<nav>
</nav>
<article>
<hgroup>
<h1>Some title here</h1>
<p>A paragraph here, like an introduction.</p>
</hgroup>
<section>
<h2>Section title here</h2>
<aside></aside>
<h3>Subtitle here</h3>
</section>
<section>
<h2>Section title here</h2>
</section>
</article>
</body>
The <header> element
The <header> element is easily confused with the <hgroup> element but it has more versatility
(The header element).
Like the <hgroup> element, it's meant to be used to group section headings
(e.g., the <h1> and etc. elements and even the <hgroup> element).
A good use case is for the main heading area (i.e., the top of a web page),
which could include a website's logo and navigational area.
However, it can be used repeatedly throughout a web document, including in <article> or <section> elements.
In practice, I generally use the <header> element and not the <hgroup> element.
<body>
<header>
<nav>
</nav>
</header>
<article>
<header>
<h1>Some title here</h1>
<h2>Some subtitle here</h2>
</header>
<p>A paragraph here, like an introduction.</p>
<section>
<h2>Section title here</h2>
<aside></aside>
<h3>Subtitle here</h3>
</section>
<section>
<h2>Section title here</h2>
</section>
</article>
</body>
The <footer> element
The <footer> element typically contains information about its section such as who wrote it,
links to related documents, copyright data, and the like
(The footer element).
Like the <header> element, it can be used repeatedly throughout a web document,
such as at the end of an <article> or <section> element.
It's more commonly used at the end of an entire web document, just before the closing <body> element.
This use of course depends on the content of a web page.
Therefore, use it where needed!
<body>
<header>
<nav>
</nav>
</header>
<article>
<header>
<h1>Some title here</h1>
<h2>Some subtitle here</h2>
</header>
<p>A paragraph here, like an introduction.</p>
<section>
<h2>Section title here</h2>
<aside></aside>
<h3>Subtitle here</h3>
</section>
<section>
<h2>Section title here</h2>
</section>
</article>
<footer>
</footer>
</body>
The <address> element
The <address> element is used for contact information (The address element).
It can be used throughout a web document.
If it appears at the end of a <section> element, then it marks the contact information for
perhaps the author of that section.
If it appears in the <footer> element, then it marks the contact information
(email addresses, mailing address, etc.) for the web site owners.
<body>
<header>
<nav>
</nav>
</header>
<article>
<header>
<h1>Some title here</h1>
<h2>Some subtitle here</h2>
</header>
<p>A paragraph here, like an introduction.</p>
<section>
<h2>Section title here</h2>
<aside></aside>
<h3>Subtitle here</h3>
</section>
<section>
<h2>Section title here</h2>
</section>
</article>
<footer>
<address>
<p>111 Main St., Lexington, KY</p>
</address>
</footer>
</body>
Quick Note on HTML Comments
Many programming and markup languages have the ability to add comments to code. This is true for HTML. When we comment HTML code, the browser will not display the contents within the commented section. Adding comments to your HTML code is helpful for two reasons:
- You can leave yourself notes about parts of your web document.
- You can comment out code that you don't want to use but might want to use later.
To comment out HTML code, use the comment tag:
<!-- insert comment here -->
The above line will be ignored by the browser.
You can also comment out multiple lines of HTML code, like so:
<!--
<section>
<h1>Some title here</h1>
<h2>Some subtitle here</h1>
</section>
-->
In that example, all lines between the comment tags will be ignored by the browser.
Putting It Together
With this section and the last, we have created the head of our web document,
which contains the document's metadata, and a basic outline of our web document
using the section elements listed on this page.
Putting it together and using only those HTML elements covered so far, we might have something below:
a starting web document about Linux systems administration.
Note that I've commented out the line with the <base> element since I don't yet have a domain name for this content.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using the Linux OS for Systems Administration</title>
<!-- <base href="https://www.example.org/"> -->
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="C. Sean Burns">
<meta name="description" content="An introduction to Systems Administration with Linux OS, including Debian and Ubuntu">
<meta name="keywords" content="systems administration, linux, debian, ubuntu">
</head>
<body>
<header>
<h1>Introduction to Linux Systems Administration</h1>
<nav>
</nav>
</header>
<article>
<header>
<h2>The Linux Debian and Ubuntu Distributions</h2>
<h3>Getting Started</h3>
</header>
<section>
<header>
<h2>Downloading Debian and Ubuntu</h2>
<aside>Debian was founded in 1993. Ubuntu is a derivative of Debian.</aside>
<h3>Installing Debian in a Virtual Machine</h3>
<h3>Installing Ubuntu in a Virtual Machine</h3>
</header>
</section>
<section>
<header>
<h2>Updating Your Distributions</h2>
</header>
</section>
</article>
<article>
<header>
<h2>Introduction to the Bash Shell</h2>
<h3>The Command Line</h3>
</header>
<section>
<header>
<h2>Knowing Where You Are</h2>
</header>
</section>
</article>
<footer>
<address>
</address>
</footer>
</body>
</html>
Validating Your HTML
When writing code or markup, it's easy to make mistakes. For example, we might leave out a required closing element or make a syntax error. To check for these kinds of mistakes, use the Nu Html Checker. You can paste your code into the text box on that page or later submit a URL when your site is live. If you receive errors or warnings, you will have to read the messages and look closely at your code to spot the error or issue.
Conclusion
As you develop your own <head> and <body> content, you will want to modify your use of the above
elements based on your needs and what your web page contains.
Have fun getting the skeleton of your web page/document written.
Think a lot about the structure of your page.
You'll want to modify that as you add content, which we'll cover next.
But it's often helpful to have a starting outline, and the section elements covered here help with that.
Using VS Code and GitHub
Introduction
Developing a project means managing a project, which includes its source code and its documentation.
To manage our project, we will use Git and GitHub with the Visual Studio (VS) Code editor.
The process is fairly straightforward, and the steps are clearly outlined in
Introduction to Git in VS Code.
However, since we have already begun our project by creating a folder and an index.html file on our local machine,
some additional setup guidance is necessary.
Install Git
Per the VS Code documentation, you need to install git on your computer first.
To install git, visit the Git Downloads page and select your operating system.
The instructions vary by operating system.
If you are using Linux, I will assume git is already installed on your system or you know how to install it.
If you are using Windows, the process should be fairly straightforward for standard .exe files.
However, if you are using macOS, then you should install brew first.
Install Homebrew (brew) and git on macOS
To install Homebrew on macOS, visit the Homebrew page and following the instructions listed there. You will need to open your macOS Terminal.app, then copy and paste the command presented on the Homebrew page:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
And you should be good to go! Please read through the documentation to learn more. (Always read through the documentation.)
Now to use Homebrew to install git, run this command in your Terminal.app:
brew install git
Create GitHub Account
Once git is installed, visit GitHub and create an account if you don't already have one.
Be sure to use your personal email and not your university or other non-permanent email, since you won't always have those accounts.
Local and Remote Repositories
Before we proceed, you should understand two main concepts:
- Local repository (repo)
- Remote repository (repo)
The project folder on your personal computer will function as your local repo. The content in the project folder (your files and directories) will be sent to a GitHub repository. This GitHub repository will function as your remote repo. The main goal is to keep these two repos in sync with each other, such that the work you do in one repo will get sent to the other repo.
Local to Remote
Most of the time you should be working on your local machine.
So let's say that you edit your index.html file using VS Code on your personal computer.
Once you have completed your editing work, you want to do the following things to sync it to your remote repo (i.e., to GitHub):
stagethe file: this tellsgitto take notice of this filecommitthe file: this tellsgitto record the changes in the repository (whether local or remote)commitmessage: add a descriptive message when committing—this is helpful for version control and collaboration
pushthe file: this updates the remote repository with the changes
Remote to Local
It's possible to edit and create files and directories on your remote repo (i.e., GitHub).
I don't suggest doing this because it means using GitHub's web text editor.
Although it's a decent online editor, it's not as powerful as VS Code.
But if you do edit the remote repo through the browser, then you will want to sync any changes to your local repo.
Like editing your local repo, the process involves staging and committing (with a commit) message any changes you've made in your remote repo.
However, you won't push your repo to your local repo.
Instead, you'll pull up VS Code and pull your changes to your local repo.
Gitting Started
Now that you understand the basics of syncing repos, we'll proceed to using Git and GitHub with VS Code.
Again I'm mainly following the steps outlined at Introduction to Git in VS Code.
Now that we have git installed on our systems, open VS Code and access the Accounts menu.
You will want to sign into GitHub in VS Code.
Since we've already created a local folder to work with, which should have our index.html file, we need to turn that local folder into a local repo.
We do that by initializing the folder.
In VS Code, see the instructions at Initialize a repository in a local folder.
In short, the steps are to:
- Open your project folder in VS Code
- Go to the Source Control view and select Initialize Repository
- Add a descriptive
commitmessage and the press Commit - Press Yes to stage your commit
- Then click Publish Branch and the sign-in and authenticate with GitHub.
- Then select Publish to GitHub public repository ....
- We need this to be public for later work
- Open on GitHub to view your uploaded repo!
Remote Sync
I highly encourage you to only work in VS Code and not edit files or create directories directly on GitHub.
But if you do, then from your local machine, you will need to do a pull request in VS Code to sync the changes you made on GitHub to your local repo.
HTML Grouping and Text-Level Semantic Elements
Introduction
In this section, we learn about the most frequent HTML element types: grouping elements and text-level or inline semantic elements. Most of our content will be marked up using these two categories of elements.
The grouping elements we cover here include:
- the
<p>element: paragraphs - the
<hr>element: horizontal rules - the
<pre>element: preformatted text - the
<blockquote>element: block quoted text - the
<ol>and the<ul>elements: ordered and unordered lists- the
<li>element: items in ordered or unordered lists
- the
- the
<dl>element: description list- the
<dt>element: description term - the
<dd>element: description details
- the
- the
<main>element: dominant content - the
<div>element: generic container
For a full list of grouping elements, see: Grouping content
Some of these elements must be used together.
I have indicated these as subitems in this above.
For example, the <ul> and the <ol> elements are used to create unordered and ordered lists, respectively.
However, either of these must include the <li> element to list items.
Likewise, we use the <dl> element to start a description or definition list.
Within that, we use the <dt> element to specify a term in a description/definition list
and the <dd> element to provide the description or definition.
We also cover a range of text-level or inline semantic elements. There are nearly 30 of these elements, but some are used more frequently than others. In this section, we'll cover the following text-level elements.
- the
<a>element: hyperlinks - the
<em>element: emphasis - the
<strong>element: importance - the
<small>element: side comments - the
<s>element: mark inaccurate or irrelevant tet - the
<cite>element: mark titles of works - the
<q>element: mark quoted text - the
<dfn>element: mark defining term - the
<abbr>element: mark abbreviation or acronym - the
<data>element: mark machine-readable values - the
<time>element: mark date text - the
<code>element: mark computer code - the
<var>element: mark variable name - the
<samp>element: mark quoted computer output - the
<kbd>element: mark user input to computer - the
<sub>element: mark subscript - the
<sup>element: mark superscript - the
<i>element: mark alternate mood or voice in text - the
<b>element: mark text to draw attention to it but without suggesting extra importance - the
<mark>element: highlight text - the
<span>element: generic text marking - the
<br>element: add a line break
For the full list, see: Text-level semantics
A Quick Note on HTML Syntax
Closing Tags
Most tags have closing forms.
An opening paragraph tag looks like this: <p>.
It's closing version looks like this: </p>.
The content for the paragraph is placed between the opening and closing tags.
However, some HTML tags are self-closing.
Self-closing means that these tags do not have a closing syntax.
These include tags like <br>, <meta>, <hr>.
For tags like these, there is no such thing as: </br></meta></hr>
Here is where it can get confusing.
In HTML5, some tags have optional closing forms and some tags require closing forms.
For example, the <p> and <li> tags do not have to be closed with </p> and </li>.
But tags like <div> and <span> must be closed with </div> and </span>.
Because of this mix of optional and required closing tags, it's best to close all tags that are not self-closing.
Otherwise, you'll just get into the weeds about what needs closing or not.
Nesting Tags
We have to be careful how we close tags when including tags within tags. For example, if we want to include a small code snippet within a paragraph tag, then we have to close that code tag before closing the paragraph tag.
This is the correct usage:
<p>I use the Python interpreter as a calculator sometimes: <code>2 + 2</code>.</p>
In the above, the <code></code> tags are opened after the opening <p> tag and closed before the closing </p> tag.
This would be incorrect usage:
<p>I use the Python interpreter as a calculator sometimes: <code>2 + 2</p>.</code>
Elements in Use: Grouping Content
The HTML elements above are fairly straightforward, and the best way to learn them is to begin using them. To illustrate, in the text below, I use most of the grouping and text-level semantic elements listed above and then show the output.
<p>This is a paragraph.
If I add sentences to this paragraph on separate lines, the lines will be joined when displayed in a browser.
I keep adding lines until I close the paragraph with its closing tag.
After this paragraph closes, I'll add a horizontal rule to separate this paragraph from the next one.</p>
<hr>
<p>This is the next paragraph, but it's a short paragraph.</p>
<p>Sometimes I want to present computer code. I can do that like so:</p>
<pre>
#!/usr/bin/env bash
# list files in directory
for i in * ; do echo "${i}" ; done
</pre>
> This is a blockquote.
> We use it to quote multiple lines.
> Here's a goofy joke:
> Why did the spider go to school? They wanted to be a web designer.
<p>Sometimes I like to create lists. Here's a list of Unix shells:</p>
<ol>
<li>Bourne shell</li>
<li>Bash</li>
<li>C shell</li>
<li>tcsh</li>
<li>Kornshell</li>
<li>zsh</li>
</ol>
<p>I can also present them as an unordered list:</p>
<ul>
<li>Bourne shell</li>
<li>Bash</li>
<li>C shell</li>
<li>tcsh</li>
<li>Kornshell</li>
<li>zsh</li>
</ul>
<p>Here's a definition:</p>
<dl>
<dt>Linux</dt>
<dd><q>An open-source Unix-like operating system</q> (source: Wikipedia article on <cite>Linux</cite>)</dd>
<dt>FreeBSD</dt>
<dd><q>A free-software Unix-like operating system</q> (source: Wikipedia article on <cite>FreeBSD</cite>)</dd>
</dl>
More Elements in Use: Text-level Semantics
We want to reserve formatting text when we use CSS, but a few HTML tags change how font is rendered. Confusingly, some tags render fonts in the same way. Let's view some of these examples.
The <em> and <i> tags
Both the <em> and the <i> tags will italicize text.
The difference in use between them is literally one of semantics.
If we want to place emphasis on some text, then we use the <em> tag.
If we want to distinguish text from surrounding text in some way, then we use the <i> tag.
In this example, we want to place major emphasis (e.g., a warning) on the word not and so use the <em> tag.
<p>Do <em>not</em> eat that type of mushroom.</p>
Even though the presentation of the text will be the same in the browser, here we simply want to make a slight change to the text to make it stand out.
<p>I study <i>bibliometrics</i>.</p>
The <strong> and <b> tags
The same kind of difference holds true for the <strong> and <b> HTML tags.
Content wrapped within these tags will be rendered as bold in the browser.
In this example, we use the <strong> tag to stress strong importance or urgency.
<p>Please submit your assignments <strong>by the due date</strong>.</p>
However in this example, we use the <b> tag as a purely visual marker:
<p>When you open your Canvas shell, visit the <b>Assignments</b> section to view upcoming work.</p>
In all of the above cases, we will learn how to use CSS later to make the same font changes.
Therefore, in choosing whether how you want to emphasize or bold text, consider the semantic differences.
Also note, your choice will have an impact on how some applications, like screen readers, will present the text.
For example, when using the <strong> rather than the <b> tags, a screen reader's voice will place emphasis on the content
within the <strong> tag.
Other tags with formatting effects
Here are a few other HTML tags with special, semantic purposes:
<p>Be sure to use <mark>highlighting</mark> when taking notes. It helps when reviewing for tests.</p>
<p>I have reduced prices by <s>10%</s> 20%!</p>
<p>The opposite of big is <small>small</small>.</p>
<p>In the <cite>Merchant of Venice</cite>, Shakespeare wrote: <q>All that glitters is not gold</q>.
And in <cite>Pursuit of Happiness</cite>, Kid Cudi sang: <p>Everything that shine ain't always gonna be gold</cite>.</p>
<p>I am a member of <abbr title="Association for Library and Information Science Eduction">ALISE</abbr>.</p>
<p>The date is <time datetime="2025-01-25">January 25, 2025</time>.</p>
<p>In R, we assign a value to a variable named <var>x</var> like so: <code>x <- 45</code>.</p>
<p>To print the output of variable <var>x</var> in R with the value of 45,
I enter the name of the variable, <kbd>x</kbd> and get back: <samp>[1] 45</samp>.</p>
<p>Consider the vector <var>X</var><sub>1</sub>.</p>
<p>Did you solve: 42<sup>2</sup>?</p>
Conclusion
It's important to understand HTML grouping and text-level semantic elements
because we use these elements to structure and present content effectively and semantically.
Grouping elements like <p>, <ul>, <blockquote>, and <main> help organize content.
Text-level semantic elements such as <em>, <strong>, <code>, and <cite> provide meaning within text.
It's crucial to recognize the distinction between purely presentational tags, like <b> and <i>,
and semantic elements, like <strong> and <em>.
These elements affect accessibility and the way content is interpreted by search engines and other assistive technologies.
Apply these elements thoughtfully.
They will help create well-structured, readable, and meaningful web content that enhances both usability and accessibility.
Links and Attributes
Introduction
The ability for a web page to link to other resources is the defining characteristic of the web. According to the HTML specification, there are three types of HTML links. These include:
- links to external resources
- hyperlinks
- internal resource links
Of these three, hyperlinks are the most visible type of link. We use hyperlinks to navigate around the web, from one document, resource, or application to another.
Internal resource links are probably the second most visible type of link. We use these links to jump to different sections of a web page. A prime example is if a web page has a table of contents that we can use to skip to different sections of a page.
Lastly, links to external resources are the least visible type of link.
These links are often used in the <head> section of a web document and
they are used to fetch and process
other resources, such as style sheets, favicons, or JavaScript.
We create links using four different HTML tags:
- the
<a>,<area>, and<form>tags can be used as hyperlinks and as links to internal resources - the
<link>tag is used to link to external resources
In this section, we'll cover the <a> and the <link> tags and save the <area> and <form> tags for upcoming sections.
The <a> Element
The <a> tag, or anchor element, is the primary type of link in HTML.
We use this tag to navigate the web or around a webpage, to download a resource, or to initiate an email or a phone call.
Specifically, there are several use cases for the <a> tag, and these include:
Use Cases for <a>
- External navigation
- To link to another web page, we use the
<a>tag along with thehrefHTML attribute. - Example:
<a href="https://www.example.com/">Visit Example</a>
- To link to another web page, we use the
- Internal page links
- To jump to specific parts of the same page, which is useful for long pages with multiple sections (e.g.,
<section>element). - Example:
<a href="#section2">Go to Section 2</a>
- To jump to specific parts of the same page, which is useful for long pages with multiple sections (e.g.,
- Email links
- To open the user's default email client to send an email. This is useful for contact pages or in the
<footer>section of a page. - Example:
<a href="mailto:someone@example.com">Email us</a>
- To open the user's default email client to send an email. This is useful for contact pages or in the
- Telephone links
- To provide mobile users a way to tap and call a phone number directly. This is useful for contact pages or in the
<footer>section of a page. - Example:
<a href="tel:+12162452368">Call us</a>
- To provide mobile users a way to tap and call a phone number directly. This is useful for contact pages or in the
- File downloads
- To provide a link to download a file directly.
- Example:
<a href="file.pdf" download>Download PDF</a>
Common Attributes for <a>
Many HTML tags can be extended with the use of attributes or require attributes to function fully.
In the above examples, the href is called an HTML attribute, and it's needed for the <a> tag to function as a link.
The <a> tag can use the following attributes:
href: This provides the destination URL or resource: i.e., the site or page you link to.target: This specifies where to open the linked document._blankopens the link in a new tab:- Example:
<a href="https://www.example.com" target="_blank">Visit Example</a>
- Example:
_selfopens the link in the same window/tab. This is the default behavior, and you don't need to specify this unless you want to force the link to open in the same window/tab:- Example:
<a href="https://www.example.com" target="_self">Visit Example</a>
- Example:
rel: This defines the relationship between the current document and the linked document.noopener noreferreris used withtarget="_blank"to disconnect the relationship between the linking document and the linked document when opening a link in a new tab.- Example:
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>
- Example:
nofollowinstructs search engines not to follow the link. Search engines build a knowledge graph based on links, and the more links a page has, the more popular or relevant that page becomes. Thenofollowis used to suppress that behavior in search engines (e.g., if you don't want to promote a page you're linking to).- Example:
<a href="https://www.example.com" target="_blank" rel="nofollow">Visit Example</a>
- Example:
title: This provides additional information about the link and results in displaying a tooltip on hover.- Example:
<a href="https://www.example.com" title="Example.com">Visit Example</a>
- Example:
download: This prompts the browser to download the linked file instead of navigating to it.- Example:
<a href="https://www.example.com/file.pdf" download>
- Example:
The <link> Element
The <link> tag is a self closing tag that's most often placed in the <head> section of a web page or HTML document.
We use this tag to define relationships between our documents and external resources.
Unlike the <a> tag, the <link> tag is not user-interactive.
Instead, it provides the browser with additional context and resources it should load automatically when opening a web page.
These resources may include CSS stylesheets, icons, fonts, and more.
Use Cases for <link>
- Linking stylesheets
- To tell the browser to fetch and apply CSS rules to your HTML document. In the following example, the rules are in a
styles.cssfile in a localcssdirectory. - Example:
<link rel="stylesheet" href="css/styles.css">
- To tell the browser to fetch and apply CSS rules to your HTML document. In the following example, the rules are in a
- Favicons
- To instruct the browser to use an icon that represents your website in browser tabs, bookmarks, and other UI elements. Inkscape is a great application for creating favicons. The following example uses the
favicon.icofile in a localimagesdirectory as the icon file. - Example:
<link rel="icon" href="images/favicon.ico">
- To instruct the browser to use an icon that represents your website in browser tabs, bookmarks, and other UI elements. Inkscape is a great application for creating favicons. The following example uses the
- Preloading and prefetching resources
- To instruct the browser to fetch resources, such as scripts, fonts, and images, early. This helps to optimize performance because it helps to load these resources before the page begins to render. The following example preloads and prefetches a JavaScript file
javascript.jsin a localjsdirectory. - Example:
<link rel="preload" href="js/javascript.js" as="script">
- To instruct the browser to fetch resources, such as scripts, fonts, and images, early. This helps to optimize performance because it helps to load these resources before the page begins to render. The following example preloads and prefetches a JavaScript file
- RSS feeds
- To instruct browsers and feed readers that there is an RSS feed for the site or page.
- Example:
<link rel="alternate" type="application/rss+xml" title="RSS" href="feed.xml">
Common Attributes for <link>
Like the <a> tag, the <link> tab has some common attributes, some of which are shared between the two.
Here are some common attributes for the <link> tag:
rel: This specifies the relationship between the current document and the linked resource. This helps to inform the browser how to treat the linked resource.- Common values include:
stylesheet,icon,preload,prefetch,preconnect
- Common values include:
href: This defines the URL of the resource being linked. Without it, you don't actually link to anything.type: This indicates the MIME type of the linked resource.sizes: This indicates the size of linked images, which is useful for favicons. This is useful for multi-resolution display. A32x32pixel favicon, for example, may be a good size for a laptop browser but you may need a bigger size for a tablet or smaller for a phone.- Example:
<link rel="icon" href="images/favicon.ico" sizes="32x32">
- Example:
crossorigin: This is used to fetch resources from a different domain
As noted above, the <link> tag can be used to load a favicon for your website.
These are the small icons that appear in your browser tab, bookmarks, and other UI elements.
You can use Inkscape to create favicons for your website.
When creating these icons, it's helpful to create multiple versions for different resolutions and use the sizes attribute to refer to them.
In the example below, I also add the MIME type to help the browser recognize the purpose of these files.
These icons would be stored in a directory called images in my project directory.
Here is the example code:
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon_16.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon_32.png">
<link rel="icon" type="image/png" sizes="72x72" href="images/favicon_72.png">
<link rel="icon" type="image/png" sizes="114x114" href="images/favicon_114.png">
Another common example is to use the <link> tag to load external fonts.
We'll cover this in more detail when we learn about styling our sites with CSS.
However, you should know that browsers use the fonts intalled on your operating system as the default.
Thus, basic fonts will display a bit differently depending on your operating system: Windows, macOS, iOS, Android, Linux, etc.
To mitigate this variance, many web developers use external fonts or download fonts to their web source code directory for their websites.
There are several font services available for free, such as Google Fonts.
Google Fonts provides a large range of fonts you can use for your websites and provides instructions on using them.
For example, to use the Roboto font on your website, you can use this code in the <head> section of your page:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
And then add the following to your stylesheet or within the the <style> tag of your HTML document:
html {
font-family: "Roboto", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings: "wdth" 100;
}
Other Attributes
Two additional type of attributes I need to cover are the id and class attributes.
These are commonly used in JavaScript and CSS.
We'll cover them more when we learn about CSS, but the id attribute is also used to create internal resource links.
The class Attribute
The class attribute can be assigned to most HTML tags and is used to group multiple HTML elements together under a common name.
This makes it easier to apply a shared style (CSS) or behavior (JavaScript) to the group of elements.
For example, we can apply a class name to multiple HTML elements to style them similarily:
<main class="dark_background">
<article class="light_background">
<section class="dark_background">
<aside class="light_background"></aside>
</section>
</article>
</main>
In CSS, we would refer to the class name to style classes named dark_background similarily and light_background similarily:
.dark_background {
background-color: black;
color: white;
}
.light_background {
background-color: white;
color: black;
}
The id Attribute
Whereas the class attribute is used to group different elements together,
the id attribute is used to uniquely identify a single element on a page.
This plays in handy for CSS and JavaScript, too, but because it's like applying a fingerprint to a single element,
it can also be used to internal resource links.
Here's an example where we have multiple <h3> elements on a page, but we want to distinguish them from each other:
<h3 id="linux">Linux</h3>
<h3 id="unix">Unix</h3>
<h3 id="cpm">CP/M</h3>
In CSS, we referred to a class name with a dot selector: .dark_background.
But for the id name, we refer to it with a pound selector: #linux, #unix, #cpm.
For example, to style the above h3 elements separately:
#linux {
color: red;
}
#unix {
color: blue;
}
#cpm{
color: green;
}
One nice side effect of being able to uniquely fingerprint an element on a page with the id attribute
is that you can use that attribute to link to it.
This is internal resource linking.
Thus, imagine a long web page with the above <h3> sections, we could create a table of contents that links to each section
using the id attribute:
<a href=#linux">Jump to Linux section</a>
<a href=#unix">Jump to Unix section</a>
<a href=#cpm">Jump to CP/M section</a>
Global Attributes
Other attributes are available to HTML elements and are listed at Global Attributes. We will cover some of these global attributes as we progress through this work.
Conclusion
In summary, HTML links come in three flavors: links to external resources, hyperlinks, and internal resource links.
We covered how to create these three types of links using the HTML <a> and <link> tags.
Using the <link> tag, browsers process external resource links automatically.
For example, this tag is used to bring in stylesheets, icons, or other external resources.
We use the <a> tag to create hyperlinks, which serve as the defining characteristic of the web.
Hyperlinks are used to navigate from site to site, page to page, or within a page, such as with internal resource links.
Embedded Content: Images and Multimedia
Introduction
It's no surprise that multimedia content dominates the web and thus it's no surprise that there are multiple HTML elements that provide methods for publishing multimedia content. In this lesson, we'll cover the following multimedia elements for embedding non-textual content in HTML documents. These include:
- The
<video>element for embedding video content - The
<track>element for providing captioning for video content - The
<audio>element for embedding audio content - The
<img>element for embedding images - The
<picture>element to facilitate how image respond to different device/screen sizes - The
<figure>element to group media content, including images and video, with an optional<figcaption>element for captions - The
<iframe>element is used to embed other HTML pages in our main HTML documents
A couple of things to note about multimedia. First, multimedia content takes up more disk space and bandwidth than text content, and therefore, be mindful of the size of the multimedia files that you are embedding in your web pages. The bigger these files are, the longer they will take to load and to play, in the case of video or audio files.
Second, many hosting providers charge by bandwidth. Therefore, since multimedia content consumes more bandwidth, multimedia content is more costly to host. This is likely why many web developers embed third-party hosting solutions, such as YouTube, Vimeo, and others, to deliver video content. The cost is offset to the owners of those companies, which support their own products via ads and subscriptions. Although that may be a perfectly acceptable route for you to take as web developers, it's still worthy to know how to host and disseminate your own multimedia content, if you desire.
The <video> Element
The <video> element embeds a media player
in a web page (The Video Embed Element).
The element groups other elements, including the <source> element.
The <source> element is used to source various video file formats for full browser support.
In the following example, I use the <source> element to refer to a video file in the mp4 format and to a video file in the webm format.
Both files are stored in a separate multimedia directory in the project folder.
Both videos are otherwise equal,
but providing options for both acts as a fallback mechanism in case a browser doesn't support one or the other format.
<video controls autoplay="false" muted="true" width="600">
<source src="media/example.mp4" type="video/mp4">
<source src="media/example.webm" type="video/webm">
Your browser does not support the video tag.
</video>
The element accepts global attributes but also accepts attributes specific to the element.
These include controls, autoplay, width, and more.
The controls attribute adds functions to the embedded player, such as volume control, pause/resume playback, and more.
The autoplay attribute instructs the browser to enable or disable autoplay upon loading.
If set to false, autoplay is disabled (which is the humane thing to do for your site visitors!).
The width attribute sets a default width size for the embedded player.
An optional height attribute is also available.
Other attributes are listed at the MDN Web Docs link above.
The <audio> Element
The <audio> element is used to embed an audio player in the HTML document (The Audio Embed Element).
It uses some of the same attributes as the <video> element, such as controls to display specific playback controls in the player.
In the example below, I source two versions of the audio for maximum browser support: an mp3 file and an ogg file.
Both files are stored in a multimedia directory in the project's main directory.
<audio controls>
<source src="media/audio.mp3" type="audio/mpeg">
<source src="media/audio.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
The <track> Element
The <track> element is used to provide subtitles, captions, and chapter titles for the <video> and <audio> elements.
This element uses the WebVTT format,
which is expressed as a text file that contains data,
like subtitles, with time stamps to align the data with the audio or video.
WebVTT files usually have .vtt filename extensions and can be created manually or automatically in text transcription software.
For example, Microsoft illustrates how WebVTT files can be created manually for closed caption video.
Other software, like Zoom, automatically creates .vtt audio transcription files for cloud recordings.
In the example code below, I use the <track> element with the kind attribute to indicate that the vtt file is for subtitles.
See the link above for other kind attributes to use.
<video controls autoplay="false" width="600">
<source src="media/example.mp4" type="video/mp4">
<track src="media/captions.vtt" kind="subtitles"
srclang="en" label="English">
</video>
The <img> Element
The <img> element is used to display images, such as png, jpg, and other image files.
The alt attribute provides a textual description of the image in case the image fails to load in the browser.
Images taken with a camera are often too large to be used on the web, and they should be resized to smaller versions in a photo editor.
Once resized, we can use attributes like width and height to adjust how the image displays in the browser.
Note that the resized dimensions should correspond to the image's original dimensions, otherwise the image will be skewed.
For example, my phone camera is configured to take photos with dimensions set at 4038 x 2268 in landscape mode and
2268 x 4032 in portrait mode.
This results in a big file size (around 3.2 MBs), which would display slowly on slow or poor internet connections.
Therefore, I might want to resize such images by a factor of six before using in a web document:
4038 / 6 = 673 and 2268 / 6 = 378.
Then I declare the sizes in the width and height
<img src="media/walking_bridge.jpg"
alt="A walking bridge over a stream"
width="673"
height="378">
See the MDN Web Docs for more details on how to use the <img> element.
The <picture> Element
By default, the above <img> element should react responsively when resizing the display.
This is because browsers apply a default CSS setting (max-width: 100%) to images, which we will discuss later.
However, there may be times when it's helpful to provide different versions of an image by declaring multiple sources.
The <picture> element enables this by serving entirely two different images, depending on the size of the display or device
and not just resolutions (The Picture Element).
In the example below, when the display is equal to or smaller than 672 pixels wide, the image loads walking_bridge_small.jpg,
which I've resized in a photo editor to have dimensions of 403 x 227 pixels.
When the display is equal to or greater than 673 pixels wide,
the image loads walking_bridge_big.jpg, which has dimensions of 673 x 379 pixels.
<picture>
<source srcset="media/walking_bridge_small.jpg" media="(max-width: 672px)">
<source srcset="media/walking_bridge_big.jpg" media="(min-width: 673px)">
<img src="media/walking_bridge.jpg" alt="A walking bridge over a stream">
</picture>
Note the <img> tag is required in the <picture> element even though it primarily functions as a fallback image.
The <source> tags in the <picture> element only provide options to the browser for which source file to load upon which condition is met.
The <figure> Element
We use the <figure> element to group media content, and that may include images or videos (The Figure Element).
This element may also include an optional <figcaption> element, which provides a caption for the media.
This enables the caption to be semantically grouped with the figure.
<figure>
<img src="media/plot.png" alt="a plot">
<figcaption>a scientific plot</figcaption>
</figure>
The <iframe> Element
The <iframe> element is used to embed a different HTML page within the current HTML page (The Inline Frame Element).
We can use this element to embed a regular text-based HTML document in our main HTML page, but
it's commonly used to display video from other sources, such as from YouTube, in our HTML documents.
For example, visit a YouTube video, click the Share button, and click the Embed option.
This will provide <iframe> code to use in our HTML pages.
Here's an example of a video from a great talk by the information scientist, Karen Jones Spärck,
who helped develop the algorithms that search engines and other information retrieval systems use today to find relevant sources:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/5fYeKiebpuo?si=QcvAjF13AjhGkHMq"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
Conclusion
The HTML5 media elements discussed here help seamlessly integrate multimedia content in our HTML pages.
We use the <video> and <audio> elements for rich media,
the <track> element to provide accessibility,
the <img> for images,
the <picture> elements to provide responsive images,
the <figure> element to group media,
and the <iframe> element to embed other HTML pages.
Be aware that the <img> element is inherently responsive in most cases due to browser defaults,
but the <picture> element allows serving different images entirely depending on device and screen size.
Also, be sure to use the alt attribute for images to provide fallback text for screen readers and for when images fail to load.
HTML Tables and Forms
In the previous sections, we discussed several categories of HTML elements to use on our web pages. These categories relate to document structure, document metadata, grouping elements, text level semantic elements, links, attributes, and embedded content like images and multimedia. These elements are regularly used because they represent how we structure our pages and add content to them.
In this section, we learn how to create tables and forms to add to our web pages. These two aspects of HTML are less regularly used. Creating tables is about adding content, but specifically, tabular data only. Forms are used to gather user input and deliver that input to the web site owner or process it through, for example, a server side relational database server, like MariaDB, MySQL, PostgreSQL, etc.
We have a number of types of forms available to us. They include basic text entry forms, drop down lists, and more. One major caveat with forms is that they require additional programming to function. For example, forms are often used with PHP to process the input. However, learning PHP is beyond the scope of this work. We are also using GitHub Pages to render our sites, and GitHub does not provide back-end PHP or relational database support. Therefore, in this section, we mainly learn how to create a variety of HTML forms. We will learn how to style them with CSS in a future section.
The <table> Element
Tables are great for presenting tabular data:
the kind of data that may be presented in spreadsheets or summarized in papers or articles
(The <table> element).
In this demo, I create a simple table that contains the following elements:
<table>: This is the main table element. Other elements are enclosed within the<table>element.<caption>: The<caption>element is used to add captions to tables and should immediately follow the<table>element.<thead>: The<thead>element is semantic and defines table header information.<tbody>: The<tbody>element is semantic and defines table body information.<tfoot>: The<tfoot>element is semantic and defines table footer information.<tr>: The<tr>element defines table row.<th>: The<th>element defines header cell. This is often placed at the top row of a table:- It it often enclosed within the
<thead>element but can be added to the<tbody>section for row headers.
- It it often enclosed within the
<td>: The<td>element defines a specific data cell in the table.
Tables are fairly straightforward but grow complex as more data is added to them.
The following, simple table begins with the <table> tag and is followed by the <caption> tag.
The <caption> tag provides a description of the table and its purpose.
Following this, the table has three main sections, which include: <thead>, <tbody>, and <tfoot>.
While HTML does not require indentation, indentation can help with code readability, and is therefore highly encouraged.
Additionally, one <th> element contains a colspan attribute, which is set to 5, or five columns, in this example.
Since the table only has five columns, this elements spans the width of the entire table.
The scope attribute defines the cells that the header (defined in the
(The <th>) element relates toscope attribute).
It's useful for clearly demarcating the row and column names from the tabular data.
<table>
<caption>Star Trek or Star Wars</caption>
<thead>
<tr>
<th scope="colgroup" colspan="5">Attitude</th>
</tr>
<tr>
<th scope="col">Films</th>
<th scope="col">For</th>
<th scope="col">Undecided</th>
<th scope="col">Against</th>
<th scope="col">Row Marginal</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Star Trek</th>
<td>92</td>
<td>18</td>
<td>90</td>
<td>200</td>
</tr>
<tr>
<th scope="row">Star Wars</th>
<td>68</td>
<td>22</td>
<td>110</td>
<td>200</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Column Marginal</th>
<td>160</td>
<td>40</td>
<td>200</td>
<td>400</td>
</tr>
</tfoot>
</table>
The MDN Web Docs provide thorough documentation on creating basic and more advanced tables:
Forms
Forms are used to collect user input. Visitors can use forms to enter data, make selections, and submit information to a web server, which may either store that information, process it, or transmit it across the internet.
The <form> Element
The <form> element is used to create a form.
It takes at least two attributes: action and method (see additional details: The <form> element).
action: Theactionattribute holds a URL or file path as a value that links to a script, like PHP, which processes the user input.method: Themethodattribute declares the type of HTTP request (GET and POST):- GET and POST are two HTTP methods to request data from web servers
- The
GETrequest forms a query string with name and value pairs. The data pairs are visible in URLs. - The
POSTrequest sends data to a server. Data is not visible in URLs, which makes this method more private by default.
Incomplete example of a basic <form>:
<form action="#" method="get">
</form>
The <label> Element
The <label> element is often associated with various forms and is used to add a caption in the user interface
(The <label> element).
This element takes a for attribute and is useful when a <form> has multiple <input> elements.
Specifically, the for attribute connects the value of for to the value of the id attribute for the <input> element (see below).
Incomplete example of a basic <form> with the <label> element:
<form action="#" method="get">
<label for="name">Enter your name: </label>
<label for="email">Enter your email: </label>
</form>
The <input> Element
The <input> element defines the type of data for the input (The <input> element).
Data types may include buttons, check boxes, dates, email addresses, and more.
This element takes, among others, the following important attributes:
- The
typeattribute specifies the type of input. - The
nameattribute is used to identify the data submitted to the server. - The
requiredattribute specifies that this field is required. - The
idattribute is for labeling unique input and allows for styling with CSS. - The
forattribute in<label>should match theidof the associated<input>.
Complete example of a basic <form> with <label> and <input> elements:
<form action="#" method="get">
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required>
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required>
<input type="submit" value="Submit">
</form>
Form Variations
Create a button
Here's an example of adding a <button> to a form (The <button> element).
<form action="#" method="get">
<button type="submit" name="button_like">Click if you like buttons.</button>
</form>
The <datalist> Element
Here's an example of creating a <datalist> (The <datalist> element).
The <datalist> is used with the <option> element to offer a predefined list of options for the user to select.
This element is often used to suggest pre-defined options but allows for other data to be collected from the user.
<form action="#" method="get">
<label for="myOS">What is your favorite OS?</label>
<input list="OS" id="myOS" name="myOS">
<datalist id="OS">
<option value="GNU/Linux">
<option value="Linux">
<option value="BSD">
<option value="Windows">
<option value="macOS">
</datalist>
</form>
The <select> Element
Like above, the <select> element offers a list of options, but the options are restricted and presented in a drop down box
(The <select> element).
The <optgroup> element groups logical options together.
In the example below, I use <optgroup> to group two types of homes as either traditional or alternative.
<form action="#" method="get">
<label for="home-structure">What kind of house would you like to have?</label>
<select id="home-structure" name="home-structure">
<option value="">--Please choose an option--</option>
<optgroup label="Traditional">
<option value="castle">Castle</option>
<option value="mansion">Mansion</option>
<option value="bungalo">Bungalo</option>
</optgroup>
<optgroup label="Alternative">
<option value="treehouse">Tree House</option>
<option value="tinyhome">Tiny Home</option>
<option value="conversion_van">Conversion Van</option>
</optgroup>
</select>
</form>
The <legend> and <fieldset> Elements
The <fieldset> element is used to group multiple controls (The <fieldset> element).
Adding a <legend> element informs the user what choice to select (The <legend> element).
These elements are used to group inputs visually, but they also improve accessibility;
specifically, they help screen readers convey the purpose of the related inputs.
The name attribute contains the same value for all three options since the user selects only one option.
<form action="#" method="get">
<fieldset>
<legend>Choose your favorite technology: </legend>
<label><input type="radio" name="favtech" value="Pencil"> Pencil</label><br>
<label><input type="radio" name="favtech" value="Smartphone"> Smartphone</label><br>
<label><input type="radio" name="favtech" value="ERM"> ERM Device</label>
</fieldset>
</form>
The <textarea> Element
The <textarea> element provides a way to accept multi-line content from a user (The <textarea> element).
The number of lines and the width of the element are adjustable via the rows and columns attributes.
In the example below, I set the number of rows to 5 and the width of the text area to 100 columns.
<form action="#" method="post">
<label for="thoughts">What are you thinking about ICT nowadays?</label>
<textarea id="thoughts" name="thoughts" rows="5" cols="100">Enter here:</textarea>
</form>
Conclusion
Tables and forms are useful tools for websites. They allow developers to structure data and collect user input, respectively. They each have different purposes. We use tables to display tabular data, and we use forms to collect user input. I grouped these technologies together in a single section not because they are alike but because, unlike the rest of the HTML that we have learned, tables and forms are used sparingly.
With respect to forms, note that HTML (nor CSS) can process form data. Processing form data requires additional programming, such as PHP, which is often used with various database technologies, such as MySQL, MariaDB, PostgreSQL, etc. However, understanding how HTML forms work helps you understand the basics of frontend web application development.
In the next chapter, we begin to study CSS (Cascading Style Sheets). CSS will be used to improve the usability and visual appeal of our rather, so far, bland HTML pages.
CSS3 and Web Design
HTML provides structure and content for web pages. It defines elements like sections, headings, paragraphs, and links. HTML5 adds semantic elements, and these elements enhance the meaning and accessibility of our content. However, HTML is not responsible for presentation, layout, or style. This is the roll of CSS, or Cascading Style Sheets.
A fundamental principle of modern web development is the separate content from presentation. The idea is to use HTML to focus on structure and CSS on styling. By doing so, we create cleaner, more maintainable, and more adaptable web designs.
In this chapter, we'll explore how to use CSS3 to add visual appeal and layouts to our web pages and sites. We will cover techniques for adding color, customizing fonts, styling images and tables, and most importantly, arranging page layouts with CSS.
CSS: Getting Started
As stated by the World Wide Web Consortium (W3C), CSS, or Cascading stylesheets, is:
a language for writing stylesheets, and is designed to describe the rendering of structured documents (such as HTML and XML) on a variety of media. (What is CSS?).
In short, when we write CSS, we create a stylesheet containing rules for document presentation. The presentation does not interfere with or alter the underlying semantics of the page.
CSS is very powerful. As an example, the CSS Zen Garden demonstrates how a single HTML file can be rendered differently simply by applying different CSS rules to it.
Way to Apply CSS
There are three ways to apply CSS to a web page.
We can add external CSS stylesheets using the HTML <link> element in a web document's <head> section.
In the example below, the stylesheet is named style.css and resides in a project's css folder (or directory).
The name of the directory and file are arbitrary, but it's good to use descriptive names.
However, the file must end with the .css file extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>
As long as we add the above line to all the pages on our web site, we are able to apply the same set of CSS rules to all web pages on a web site.
Using external stylesheets has several advantages:
- Efficiency: Applies the same styles across multiple pages without duplicating code.
- Reduced bandwidth: Pages load faster since styles are cached by browsers.
- Consistency: Ensures uniform design across all pages on a site.
- Easier maintenance: Modify one CSS file to update styles for the entire site.
- Minimizes errors and debugging: A single CSS file minimizes potential errors and simplifies debugging.
However, we can also add CSS to a single page using two different methods: internal CSS and inline CSS.
We add internal CSS by using the HTML <style> tag in the <head> section of our web document.
When adding it to a single page, whatever CSS rules we add in the <style> element only apply to that single page.
In the basic example below, I change the color of all <p> elements in a single web page to green using inline CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS</title>
<style>
p { color: green; }
</style>
</head>
<body>
<h1>Heading 1</h1>
<p>This text would be green.</p>
<p>So would this text.</p>
<p>And also this text.</p>
</body>
</html>
We add inline CSS using the style HTML attribute.
Unlike above, in the example below, I change the color of one specific <p> tag on a page at a time.
In this case, the first line is the default color, and then I change the following paragraphs to green, red, and purple.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body>
<h1>Heading 1</h1>
<p>This text is black.</p>
<p style="color:green;">But this text is green.</p>
<p style="color:red;">However, this text is red.</p>
<p style="color:purple;">Now we're out of control: this text is purple.</p>
</body>
</html>
In short, using external, internal, and inline CSS is a matter of applying CSS with greater page and element specificity. External stylesheets can be used by all pages on a website. Internal CSS is used by a single page. Inline CSS is used by a single element in a single page.
Be aware that inline styles override internal and external styles and internal styles override external styles.
That is, if I declare in an external stylesheet that all <p> elements should be red,
but then use <p style=color:green;"> on some page in my site,
green will override the red for that particular case.
Conclusion
In this chapter on CSS, we will primarily use external stylesheets because they offer more advantages than internal or inline styles. External stylesheets don't take away any precision, either. When desired, there are certain methods we can use to apply CSS to single pages or to specific elements, even when CSS code is in an external stylesheet.
In the next two sections, we first learn about CSS selectors, which is the most important and basic aspect of CSS to know. Then will learn how to apply colors and define units of measurement. Later we will learn CSS that will allow us change fonts and add other effects. Then we will acquire an understanding of how CSS controls the elements on a page and use that understanding to create various layouts.
Syntax and Selectors
In HTML, elements define the structure of a webpage.
Common elements include <h1>, <main>, <p>, <table>, and many others.
We also learned that these elements may include attributes.
For example, we can add global attributes, like the class or id attributes, to all tags.
Furthermore, we learned that some elements, like the <th> tag, may have element specific attributes, like colspan.
In order to style the HTML, CSS provides a mechanism to focus on specific elements or attributes.
In CSS, this mechanism is called selectors.
There are multiple types of selectors. These include:
- Universal selector
- Type selectors
- Attribute selectors
- Class selectors
- ID selectors
- Pseudo classes
- Pseudo elements
- Combinators
Each of these selectors are discussed below along with examples. For a deeper understanding of each selector type, refer to the linked resources above.
Also, remember that to use these selectors, we add them to an external stylesheet for the reasons listed in the prior section.
In my previous HTML discussions, I added the following line to the <head> section of my HTML document that links to my external stylesheet:
<link rel="stylesheet" href="css/style.css">
Therefore, when I begin CSS coding, I create rules using these selectors
by adding them to a file called style.css in a css directory in my project repository.
CSS Syntax
CSS generally follows a very simple syntax.
It begins with a selector, which for type selectors is equivalent to the HTML element.
This is followed by an opening curly brace { and a list of properties and values to apply to the element named by the selector.
Each property / value pair is closed with a semicolon ;.
And the selector rule ends with a closing curly brace }.
This is expressed in the following generic example:
selector {
property: value;
property: value;
property: value;
}
As a real example, if we want to change the foreground and background color of all <p> elements in a web document red and black,
respectively, we would write the following rule:
p {
color: red;
background-color: black;
}
Universal Selector
The universal selector is indicated by a single asterisk * and matches all elements in a web document.
In the following example, I use this selector to make all text bold:
* {
font-weight: bold;
}
This selector should be used sparingly, but it has special and advanced use cases when combined with other selector types.
Type selectors
The type selector is the most important selector.
The names for these selectors specifically match the names of their HTML element equivalents.
As an example, the CSS p selector matches the HTML <p> element.
The CSS h1 selector matches the HTML <h1> element.
And so forth.
In the following example, I use three type selectors: html, h1, and p.
I use the html selector to change the foreground and background color to the entire HTML page,
since an entire HTML page is enclose within the <html> element.
I then show how to apply a sans-serif font-family to the <h1> elements,
and a serif font to the <p> elements in a web document:
html {
background-color: red;
color: white;
}
h1 {
font-family: sans-serif;
}
p {
font-family: serif;
}
Attribute selectors
The attribute selector is used to style HTML elements with specific attributes.
For example, if I use the id attribute throughout a web document, then I can apply CSS to all elements that have an id attribute,
regardless of the element type or the value of the attribute.
As an example, let's say I have a web document with the following:
<h1 id="test1">This is test 1.</h1>
<h2 id="test2">This is test 2.</h2>
<section id="test3">
<p>This is test 3.</p>
</section>
Then the following CSS will bold the font for all three heading elements:
[id] {
font-weight: bold;
}
We can also select attributes with specific values:
[att=value]: select by attribute with specific value:- For example,
[id="test1"]would select<h1 id="test1">
- For example,
[att~=value]: select by attribute where value is a separate word:- For example:
[id~="test"]would match<h1 id="test one">and<h2 id="test two">sincetestis separate in each.
- For example:
Class selectors
The class selectors focus on styling attributes with specific class names in an HTML document.
Consider the following HTML that has three <p> tags with three separate classes: bold, italics, and green:
<p class="bold">This text is bold.</p>
<p class="italics">This text is italicized.</p>
<p class="green">This text is green.</p>
To use the class selector, I identify the class name in my CSS with the dot name .class_name syntax:
.bold {
font-weight: bold;
}
.italics {
font-style: italic;
}
.green {
color: green;
}
ID selectors
Like the class selector, ID selectors identify the ID as the property and its value.
To apply an ID selector, we use the pound name syntax #id_name.
Recall that while class attributes can be re-used throughout a web document, ID attributes are unique and can only be used once. Consider the following HTML:
<section id="news">News</section>
<section id="about">About Us</section>
<section id="store">Store</section>
In the above HTML snippet, there can only be one id with a value of news,
one id with a value of about, and one id with a value of store.
To apply CSS to those specific IDs, we select by the value of the ID attributes.
In the example CSS below, I add a black, dotted border that is one pixel thick to the News section,
I change the line-height to 1.5 times the element's font-size in the About section, and
I convert text in the Store section to all upper case:
#news {
border-bottom: 1px solid black;
}
#about {
line-height: 1.5;
}
#store {
text-transform: uppercase;
}
Combinators
Combinators, and the pseudo classes and pseudo elements discussed in the following section, should be used when you start to gain a grasp of the relationships between HTML elements on a web page. Specifically, all elements in an HTML document can be represented in a hierarchical document tree. The hierarchy of elements includes descendant elements, child elements, and sibling elements. You can view the document tree of the HTML in your web browser by accessing Web Developer Tools for your browser.
Descendant combinators
The descendant combinator selects an element that is the descendant of another element in the document tree
(Descendant combinator).
These are elements that are contained within other elements.
For example, in the following code snippet, the <var> element is a descendant of the <p> element
because it is enclosed within the <p> element:
<p>Consider the vector <var>X</var>.</p>
And in the following snippet, the <h2> element is a descendant of the <section> element.
<section>
<h2>Heading</h2>
</section>
To use the descendant combinator, we simply identify both elements in our CSS.
For example, to select the <var> element within the <p> element, we use the following syntax:
p var {
font-size: 10pt;
}
In the above case, the <var> element is a direct descendant of the <p> element.
However, we may also select a grandchild or later element by using the asterisk.
For example, the following selects all <p> elements within all <section> elements in an HTML page:
section * p {
font-size: 14pt;
}
Child combinators
A Child combinator describes a childhood relationship between two elements
(Child combinators).
A prime example of a child combinator is the HTML list.
Consider the following unordered list in HTML, where the <li> element is a child of the <ul> element:
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Grapes</li>
<li>Oranges</li>
</ul>
To select the <li> child element, we use the following CSS syntax, where I convert all items in the unordered list to lowercase.
ul > li {
text-transform: lowercase;
}
Note that a child element is also a descendant element, so the descendant syntax (e.g., ul li) would also work.
The child combinator is simply a more specific type of descendant.
Sibling combinators
Per the W3 documenation, there are two different sibling combinators: the next-sibling combinator and
subsequent-sibling combinator
(Sibling combinators).
The next-sibling combinator selects elements that immediately follow another element.
Consider the following HTML, where a <p> element is followed by an <hr> (horizontal rule) element,
which itself is followed by another <p> element:
<p>42 is the answer to life, the universe, and everything in it.</p>
<hr>
<p>What is the question?</p>
In the above HTML snippet, the <hr> element is a next-sibling of the first <p> element,
and the second <p> element is a next-sibling of the <hr> element.
Therefore, to identify the last <p> element in the above snippet,
which is the next-sibling of the <hr> element, we use the following next-sibling combinator:
hr + p {
font-size: 20pt;
}
A subsequent-sibling combinator simply extends this relationship down the document tree. Consider the following HTML snippet, which includes a bit of the opening to Leo Tolstoy's novel Anna Karenina.
<h1>Anna Karenina / by Leo Tolstoy</h1>
<h2>Chapter 1</h2>
<p>Happy families are all alike; every unhappy family is unhappy in its own way.</p>
<p>Everything was in confusion in the Oblonksy's house....</p>
<h2>Chapter 2</h2>
We could specifically identify the <h2> elements as subsequent-siblings of the <h1> element with the following CSS syntax:
h1 ~ h2 {
color: yellow;
background-color: black;
}
Pseudo-classes and pseudo-elements
Pseudo-classes are used to select a specific state of an element. There are several types of pseudo-classes, but we will focus on just a few from two categories. For more details on other categories of pseudo-classes as well as a full list, see Pseudo-classes.
- Dynamic pseudo-classes:
:link:visited:hover:active:focus
- Structural pseudo-classes:
:nth-child():nth-last-child():first-child
The dynamic pseudo-classes :link and :visited are often used to style hyperlinks (aka, the <a> anchor tag).
In such situations, :link must be used before :visited.
Here is an example of styling hyperlinks in CSS:
a:link {
text-decoration: green wavy underline;
}
a:visited {
text-decoration: underline overline;
}
The :hover pseudo-class is also often paired with the <a> anchor tag, but it can be used on other elements, too.
For example, it's often useful to apply to rows in a <table> to help highlight rows of interest.
This will trigger a style change when the mouse cursor hovers over the element:
a:hover {
color: purple;
font-size: 20pt;
}
Pseudo-elements are methods to create abstractions about the document tree beyond those specified by the document language
(Psuedo-elements).
For example, there is no such element to indicate the first line in a <p> element, but using the pseudo-class for first-line,
we can focus on and style the first line of a <p> (or other) element.
For example, consider the following HTML:
<p>To be, or not to be, that is the question:<br>
Whether 'tis nobler in the mind to suffer<br>
The slings and arrows of outrageous fortune,<br>
Or to take arms against a sea of troubles<br>
And by opposing end them. To die—to sleep,<br>
No more;</p>
Since there is a <br> tag at the end of each line, the first line is To be, or not to be, that is the question:
.
Using the pseudo-element for first-line, we can style it by, for example, converting it to uppercase:
p::first-line {
text-transform: uppercase;
}
Other pseudo-classes that can be used include:
::first-letter::before::after
Conclusion
CSS Selectors and syntax form the foundation of web styling. They allow us to precisely target and modify elements within an HTML document. When we understand type, class, ID, and attribute selectors, and then more advanced combinators and pseudo-classes/elements, we are able to create flexible, maintainable styles that enhance the design and usability of our web pages.
As you explore and apply CSS to your websites, experiment with different selectors to see how they interact. This is especially important when you work with the various combinator selectors, since these depend on how HTML elements are related to each other. It is important to become familiar with the selectors and syntax discussed here, because they are important building blocks to more advanced topics like responsive design. And although we will not use any CSS frameworks in this course, understanding the essentials here will help with those if you eventually use them.
Colors, Units, and Measurements
The Box Model
Margins, Borders, and Padding
Box Sizing
Typography and Text Styles
Fonts and Typography
Text Styles and Effects
Images Multimedia and Backgrounds
Styling Images and Multimedia
Backgrounds
Responsive Layouts with Flexbox and Grid
Flexbox Basics
Grid Layout Basics
Media Queries for Responsive Design
Introduction to JSON-LD and Schema.org
References
Iliadis, A., Acker, A., Stevens, W., & Kavakli, S. B. (2025). One schema to rule them all: How Schema.org models the world of search. Journal of the Association for Information Science and Technology, 76(2), 460–523. doi.org/10.1002/asi.24744