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.

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:

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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:

  1. 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.
  2. 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.
  3. We will embed structured, linked data into our webpages using JSON-LD and Schema.org. This will further enhance our content for machine-readability.
  4. 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:

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:

Conclusion

Going forward, we will use Inkscape to design our websites. We will use VS Code with Git and GitHub to:

  1. Edit and write HTML, CSS, JSON-LD in our local repo.
  2. Save the edits and new code.
  3. Stage the changes so that Git tracks the new changes.
  4. Commit the changes with a meaningful commit message.
  5. 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.

Wireframe of example single column layout
Fig. 1. Example Wireframe of a Single Column Layout

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.

Wireframe of example two column layout
Fig. 2. Example Wireframe of a Two Column 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:

  1. 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.
  2. User expectations: Mobile users expect fast-loading, easy-to-navigate sites with content formatted for smaller screens.
  3. 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

  1. Open Inkscape and create a new document.
  2. 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
  3. 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:

  1. Use the Rectangle Tool to define sections such as headers, footers, navigation bars, and content areas.
  2. Use the Text Tool to label each section; e.g., "Header", "Main Content", "Footer".
  3. 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.

  1. Use shapes and gradients to visualize buttons, cards, or other interactive elements.
  2. Add placeholders for images using rectangles with an X through them.
  3. Experiment with font sizes and text alignment for headings, subheadings, and body content.
  4. Save as Desktop_Prototype.svg.

Adapting Layouts for Mobile

To create a mobile version of your design:

  1. Duplicate your desktop wireframe and adjust the canvas size to match mobile dimensions.
  2. Rearrange elements to fit within the narrower viewport:
    1. Stack sections vertically
    2. Resize text and images for smaller screens
  3. Ensure touch-friendly design by spacing buttons and interactive elements adequately.
  4. 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

Document Structure and Metadata

W3C is the organizing body for managing the HTML standards (among other web related technologies), its specifications, and documentation. The documentation for HTML5 should be constantly referenced throughout this course:

  • HTML5 at W3C or the most current draft: https://html.spec.whatwg.org/
  • Specifically the section on semantics: https://html.spec.whatwg.org/#semantics

Another nice reference source is maintained by Mozilla:

The Root Element

The <html> element represents the root of an HTML document (w3org, Root Element section).

This element establishes the root (base) of the document and it follows the DOCTYPE (document type) declaration. The <html> element should be accompanied with a language attribute (more on attributes soon).

<!DOCTYPE html>
<html lang="en">

Document Metadata

The <head> element contains the document's metadata plus other information (w3org, Document Metadata section).

There are five elements that belong to the <head> section. They include:

  • the <title> element: states the document's title
  • the <base> element: declares the base URL
  • the <link> element: establishes links to other resources, such as a CSS stylesheet
  • the <meta> element: provides additional metadata
  • the <style> element: enables internal styling with CSS

HTML Section Elements

There are ten main HTML section elements, or elements used to define the sections of an HTML document. These will be some of the main and most often elements that we'll use in our HTML documents. They include:

  • the <body> element
  • the <section> element
  • the <nav> element
  • the <article> element
  • the <aside> element
  • the <h1>, <h2>, ..., <h6> elements
  • the <hgroup> element
  • the <header> element
  • the <footer> element
  • the <address> element

See: HTML Sections

Grouping Content Elements

The other set of common elements that we'll use quite often are the HTML grouping elements. There are 13 elements categorized as grouping elements. These include:

  • the <p> element
  • the <hr> element
  • the <pre> element
  • the <blockquote> element
  • the <ol> element
  • the <ul> element
  • the <li> element
  • the <dl> element
  • the <dt> element
  • the <dd> element
  • the <figure> element
  • the <figcaption> element
  • the <div> element

Some of these elements must be used together. For example, the