examples of html structure and presentation

Teach Computer Science

HTML Structure and Presentation

Ks3 computer science.

11-14 Years Old

48 modules covering EVERY Computer Science topic needed for KS3 level.

GCSE Computer Science

14-16 Years Old

45 modules covering EVERY Computer Science topic needed for GCSE level.

A-Level Computer Science

16-18 Years Old

66 modules covering EVERY Computer Science topic needed for A-Level.

GCSE Creating web pages using HTML and CSS (14-16 years)

An editable PowerPoint lesson presentation
Editable revision handouts
A glossary which covers the key terminologies of the module
Topic mindmaps for visualising the key concepts
Printable flashcards to help students engage active recall and confidence-based repetition
A quiz with accompanying answer key to test knowledge and understanding of the module

A-Level Designing Web pages using HTML and CSS (16-18 years)

Html structure.

HTML (Hypertext Markup Language) is the recognised markup language utilised in forming web pages. It defines the composition of web pages by using markup. HTML elements are the primary units of HTML pages and are denoted by tags. HTML tags label parts of content like headings, paragraphs, and tables. Browsers do not show the HTML tags, but they are used in the background in order to deliver the content of the page.

HTML tags are element names enclosed by angle brackets. HTML tags usually come in pairs. The first tag in a pair is the start tag, and the second tag is the end tag. The end tag is written like the start tag, but with a forward slash inserted before the tag name. The start tag is sometimes also called the opening tag, and the end tags are the closing tag.

All HTML documents must start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>.

HTML tags are not case sensitive.

HTML Attributes

All HTML elements can have attributes, which provide additional information about the element, and are always specified in the start tag. They usually come in name/value pairs.

CSS (Cascading Style Sheets) defines how HTML elements are to be presented on any given screen, paper or other media. It saves the developer a lot of work since it can control the layout of multiple web pages simultaneously.

Ways to add CSS to HTML Elements

Inline – used to apply a unique style to a single HTML element. It uses the style attribute of an HTML element.
Internal – used to describe a style for one HTML page. It is indicated in the <head> section of an HTML page, within a <style> element.
External – used to define the style for multiple HTML pages by using an external CSS file. You can change the look of an entire website by changing one file. This is the most common way to add CSS to HTML elements.

HTML Structure vs. HTML Presentation

The composition of a webpage could be regarded as a mixture of the following four elements:

Content is the general term used for all the browser-displayed information elements—such as text, audio, still images, animation, video, multimedia, and files belonging to web pages. It does not require any additional presentational markups or styles in order to fully relay its message.
Structure is the name given to the practice of using HTML in content to transmit substance, and also to define how blocks of information are structured in relation to one another. Examples include: “This is a list,” (i, d, k), “This is heading and subheading,” (<h1>, <h2>, …, <h6>), “This section is related to,” (<a>), etc.
Presentation of Style refers to anything related to how the content and structure is presented. Examples include size, color, margins, borders, layout, location, etc.
Behaviour or Interactivity is the implementation of client-side script to generate a two-way flow of information between the webpage and its users. JavaScript is an example of this.

Most of the time it is difficult to clearly distinguish content from the structure. For example, the <img> tag, as a structural element, is used to produce graphical content. In practice, the composition of a webpage can simply be viewed as a mixture of three elements: Structure, Presentation and Behavior.

The following terms are often used in correspondence with one another: separation of content and presentation, separation of meaning and presentation, and separation of structure and presentation. Nonetheless, all of these terms basically make reference to the separation of the content (which is made meaningful by structure and presentation), or simply acknowledge the separation of the structure (HTML) and the presentation (CSS) of any given webpage.

The main goal of HTML 4.01 is the separation of structure and presentation, as specified in section 2.4.1 of HTML 4.01.

HTML Structure

Programmers should follow certain rules about how to structure an HTML file. The rules about how to structure an HTML file and the tags used to lay out this structure are vital to the browser being able to render the page.

Structure Rules

When it comes to laying out the overarching structure of an HTML file, a programmer should follow 5 rules:

Every HTML file needs a DOCTYPE tag, specifying the HTML version used. When using the current version of HTML, the DOCTYPE tag is simple to remember as it is: <!DOCTYPE html> . This is one of few tags that does not require a closing tag.
The <html> tag denotes the beginning and end of the HTML the programmer has written.
The <head> tag contains data about the web page.
The <body> tag contains everything that appears on the page of the document.
The <title> tag goes in the <head> of the document and browsers require it. It gives the title of the web page that appears in the tab.

Here is an example of the structure of an HTML page based off of these rules:

2 3 4 5 6 7 8 9 10

<html> <head> <title>My Web Page</title> content </head> <body> content </body> </html>

Document Head

So other than the title, what goes in the head of an HTML file? The head includes links to other files and other data about the document. Browsers do not display the content in the head.

The head can also include some styling to make the page beautiful. How to do that is covered in the next chapter on CSS.

Document Body

After the programmer has written the head of the document, it is time to move on to the body of the document. The body of the document contains the content that appears on the web page. Within the body tags, programmers add images, text, and even code samples with different HTML tags. Content outside of the body will not appear on the page.

To make HTML more readable to other programmers, programmers write comments in HTML. When adding a comment, the programmer uses  to end the comment, like so:

2 3	> <!-- This is an important comment --> </body>

Spacing and tabs helps many programmers read through theirs and their colleagues’ code. Be aware that doing so in HTML can affect how the browser renders the page in rare instances.

Check Your Understanding

Which HTML tag does not require a closing tag?

Español – América Latina
Português – Brasil
Tiếng Việt

Overview of HTML

HyperText Markup Language, or HTML, is the standard markup language for describing the structure of documents displayed on the web. HTML consists of a series of elements and attributes which are used to mark up all the components of a document to structure it in a meaningful way.

HTML documents are basically a tree of nodes, including HTML elements and text nodes. HTML elements provide the semantics and formatting for documents, including creating paragraphs, lists and tables, and embedding images and form controls. Each element may have multiple attributes specified. Many elements can have content, including other elements and text. Other elements are empty, with the tag and attributes defining their function.

There are several categories of elements, including metadata, sectioning, text, inline semantic, form, interactive, media, component, and scripting. We'll cover most of these in the series. But first, what is an element?

HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear or act in a certain way. HTML elements are delineated by tags, written using angle brackets ( < and > ).

Our page title is a heading, level one, for which we use the <h1> tag. The actual title, "Machine Learning Workshop", is the content of our element. The content goes between the open and closing tags. The entire thing—the opening tag, closing tag, and the content—is the element.

The tags and content that make up an HTML element.

The closing tag is the same tag as the opening tag, preceded by a slash.

Elements and tags aren't the exact same thing, though many people use the terms interchangeably. The tag name is the content in the brackets. The tag includes the brackets. In this case, <h1> . An "element" is the opening and closing tags, and all the content between those tags, including nested elements.

This paragraph element has other elements nested in it. When nesting elements, it's important that they are properly nested. HTML tags should be closed in the reverse order of which they were opened. In the above example, notice how the <em> is both opened and closed within the opening and closing <strong> tags, and the <strong> is both open and closed within the <p> tags.

Browsers do not display the tags. The tags are used to interpret the content of the page.

HTML is very, very forgiving. For example, if we omit the closing </li> tags, the closing tags are implied.

Although it is valid to not close an <li> , it isn't good practice. The closing </ul> is mandatory. If the unordered list's closing tag is omitted, the browser will try to determine where your list and list items end, but you might not agree with the decision.

The specification for each element lists whether the closing tag is mandatory or not. "Neither tag is omissible" in the specification means both an opening tag and a closing tag are required. The specification provides a list of all the required closing tags .

If the <em> or <strong> in the example earlier had not been closed, the browser may or may not close the element for you. Not closing an <em> simply leads to content possibly being rendered differently than you intended. If a </ul> is omitted and the next tag is a closing tag for the list's parent container, you're lucky. If, on the other hand, it's an opening <h1> tag, the browser will assume the header is part of the list, including inheriting styles. Some omitted closing tags cause bigger issues: not closing some tags, such as <script> , <style> , <template> , <textarea> , and <title> , breaks subsequent content as shown in the following example.

Having some content being unintentionally italic or having a heading indented won't destroy your business. Having most of your content appear unstyled in a 200x300 textarea because you forgot to add a </textarea> or not show up at all because you forgot to close a </style> makes the site unusable.

In some cases, browsers will include elements even if the tags aren't present in the markup. Because elements can be implied, an element can exist even when the tags don't. The browser will add a <body></body> around your content and <tbody></tbody> around your table rows, even if you don't. That being said, while it is valid to omit tags, don't. Also, as already mentioned, make sure they are correctly nested. Your future self as a maintainer of markup, and anyone else working on your code base, will thank you.

There are two types of elements: replaced and non-replaced.

Non-replaced elements

The paragraph, header, and lists marked up in the earlier section are all non-replaced. Non-replaced elements have opening and (sometimes optional) closing tags that surround them and may include text and other tags as sub-elements. These enclosing tags can turn a phrase or image into a hyperlink, can make a sentence into a header, can give emphasis to words, and so on.

Replaced and void elements

Replaced elements are replaced by objects, be it a graphical user interface (UI) widget in the case of most form controls, or a raster or scalable image file in the case of most images. Being replaced by objects, each comes with a default appearance. Depending on the type of object and the browser, the applicable styles are limited. For example, most browsers enable limited styling of UI widgets and related pseudo-elements. In the case of raster images, height, width, clipping, and filtering are easily done with CSS, but not much else. On the other hand, scalable vector graphics, using a markup language based on XML similar to HTML are fully scalable (unless they contain raster images). They are also fully styleable. Note that the ability to style an embedded SVG from the CSS linked to the HTML file that embeds it depends on how the SVG is set up.

In this example, the two replaced elements <img> and <input> are replaced by non-text content: an image and a graphical user interface object, respectively.

Output of the above HTML:

Replaced elements and void elements are often confused. Void elements are all self-closing elements and are represented by one tag. This means there is no such thing as a closing tag for a void element. Optionally, you can include a slash at the end of the tag, which many people find makes markup easier to read. Continuing with this example, we self close the tag with a slash:

The slash at the end is old school: it's a way of indicating that the element is self-closing and there will be no matched end or closing tag.

Void elements cannot contain text content or nested elements. Void elements include <br> , <col> , <embed> , <hr> , <img> , <input> , <link> , <meta> , <source> , <track> , and <wbr> , among others.

Most replaced elements are void elements, but not all. The video , picture , object , and iframe elements are replaced, but aren't void. They can all contain other elements or text, so they all have a closing tag.

Most void elements are replaced; but again, not all, as we saw with base , link , param , and meta . Why have a void element, which can't have any content, that isn't replaced and thereby doesn't render anything to the screen? To provide information about the content! The information is provided by the elements' attributes.

You may have noticed the <img> and <input > examples had more than just the element type in their opening tag. These extra bits of space-separated name/value pairs (though sometimes including a value is optional) are called attributes . Attributes are what make HTML so incredibly powerful. We'll be covering hundreds of attributes and attribute values in this series, but here we'll just discuss what they are in general and how to include them.

Attributes provide information about the element. The attribute, like the rest of the opening tag, won't appear in the content, but they do help define how the content will appear to both your sighted and non-sighted (assistive technologies and search engines) users.

Attributes only appear in the opening tag. The opening tag always starts with the element type. The type can be followed by zero or more attributes, separated by one or more spaces. Most attribute names are followed by an equal sign equating it with the attribute value, wrapped with opening and closing quotation marks.

In this example, we have an anchor link with two attributes. These two attributes have converted the content "Registration" into an internal anchor link that scrolls to the attribute id="register" in the current browser tab when the link is clicked, tapped, or activated with the keyboard or other device.

Attributes define the behavior, linkages, and functionality of elements. We'll cover more attributes in the Attributes section of this series. For now, just note that some attributes are global—meaning they can appear within any element's opening tag. Some apply only to several elements but not all, and others are element-specific, relevant only to a single element.

Most attributes are name/value pairs. Boolean attributes, whose value is true, false, or the same as the name of the attribute, can be included as just the attribute: the value is not necessary.

This image has three attributes: src , alt , and ismap . The src attribute is used to provide the location of the SVG image asset. The alt attribute provides alternative text describing the contents of the image. The ismap attribute is Boolean, and doesn't require a value. This is just to explain what attributes are. We'll cover these attributes in more detail in the images section.

While quoting attributes isn't always required, it sometimes is. If the value includes a space or special characters, quotes are needed. For this reason, quoting is always recommended. One or more spaces between attributes if the attribute value is quoted are not actually required, but, to be safe, and for legibility, quotes and spaces are recommended, and appreciated.

HTML is not case-sensitive, but some attribute values are. Values that are defined in the specification are case-insensitive. Strings that are not defined as keywords are generally case-sensitive, including id and class values.

Note that if an attribute value is case-sensitive in HTML, it is case-sensitive when used as part of an attribute selector in CSS and in JavaScript.

To make markup easier to read, it is recommended, but not required, to mark up your HTML using lowercase letters for all your element names and attribute names within your tags, and quote all attribute values. If you ever hear the term "XHTML style markup", this, and self-closing empty elements with a slash at the end, is what that means.

Appearance of elements

The default appearance of semantic elements is set by user-agent stylesheets. Most browsers use actual stylesheets for this purpose, while others simulate them in code. The end result is the same. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers have a lot of latitude, which means some differences exist between browsers.

The element you choose, and therefore the tags you use, should be appropriate for the content you are displaying, as tags have semantic meaning. The semantics , or role , of an element is important to assistive technologies and, in some cases, search engines. HTML should be used to structure content, not to define the content's appearance. Appearance is the realm of CSS. While many elements that alter the appearance of content, such as <h1> , <strong> , and <em> , have a semantic meaning, the appearance can and generally will be changed with author styles.

Element, attributes, and JavaScript

The Document Object Model (DOM) is the data representation of the structure and content of the HTML document. As the browser parses HTML, it creates a JavaScript object for every element and section of text encountered. These objects are called nodes—element nodes and text nodes, respectively.

There is an interface to define the functionality of every HTML element. The HTML DOM API provides access to and control of every HTML element via the DOM, providing interfaces for the HTML element and all the HTML classes that inherit from it. The HTMLElement interface represents the HTML element and all of its descendant nodes. Every other element implements it via an interface that inherits from it. Each inheriting interface has a constructor, methods, and properties. Via the inherited HTMLElement properties, you can access every global attribute, as well as input , pointer , transition , and animation events. Via the individual element's sub-type, such as HTMLAnchorElement and HTMLImageElement , you can access element-specific attribute values and methods.

Check your understanding

Test your knowledge of HTML

HTML elements are used for styling.

Select the replaced elements.

Select all of the true statements.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2022-09-27 UTC.

Learn HTML Basics: Introduction to HTML Structure & Elements

By Faraz - June 07, 2023

Dive into HTML basics with an introduction to its structure and essential elements. Learn how to create headings, paragraphs, links, and images in HTML.

learn html basics introduction to html structure and elements.png

HTML (Hypertext Markup Language) is the foundation of every web page you see on the internet. It provides structure and meaning to the content displayed in web browsers. In this article, we will dive into the basics of HTML, exploring its structure, elements, and various tags that make up a web page.

Introduction to html: the building blocks of the web, what is html, why learn html, setting up your html environment, html syntax: the structure of html documents, html tags: the building blocks of html, html elements: structuring content with html, html attributes: enhancing elements with additional information, html headings: organizing content with headings, html paragraphs: presenting textual content, html links: connecting web pages, html images: visualizing content, html lists: organizing content in lists, html text formatting: enhancing content presentation, html tables: organizing data in rows and columns, html multimedia: adding rich media to web pages, html forms: capturing user input, semantic html: enhancing accessibility and seo, html comments, html entities, best practices for html coding.

Welcome to this beginner's guide on HTML! In this article, we will dive into the basics of HTML structure and elements. HTML, short for HyperText Markup Language, is the standard markup language used for creating web pages. Whether you're a budding web developer or just curious about how websites are built, learning HTML is an essential skill to have.

In this comprehensive guide, we will walk you through the fundamental concepts of HTML, step by step. By the end of this article, you'll have a solid understanding of HTML structure and be able to create your own basic web pages. So, let's get started with the basics of HTML!

HTML is the backbone of the World Wide Web. It provides the structure and format for content on web pages. HTML uses tags to define elements and their attributes, allowing web browsers to interpret and display the content properly. These tags are enclosed in angle brackets ( < > ) and are placed before and after the content they apply to.

HTML is a markup language, meaning it uses predefined tags to mark specific parts of the content. These tags give meaning to the content, such as headings, paragraphs, links, images, and more. By using HTML, you can structure your content and make it accessible to both humans and search engines.

Learning HTML is a great starting point for anyone interested in web development or design. Here are a few reasons why learning HTML is beneficial:

Foundation for Web Development : HTML forms the foundation of web development. It's the first step in creating any website or web application. Understanding HTML is crucial for building and structuring web pages effectively.
Control Over Content : HTML allows you to have full control over the structure and layout of your web content. By learning HTML, you can format text, add images, create links, and organize your content in a way that suits your needs.
Better SEO : Search engines rely on HTML to understand and index web pages. By using proper HTML tags, you can improve your website's search engine optimization (SEO) and increase its visibility in search engine results.
Collaboration with Developers : If you plan to work with web developers or designers, understanding HTML will help you communicate and collaborate effectively. It allows you to understand and contribute to the development process.

Before we delve into the HTML structure and elements, it's important to set up your HTML development environment. All you need to get started with HTML is a text editor and a web browser. Here's a simple step-by-step guide:

Choose a Text Editor : Select a text editor that suits your preferences. Popular choices include Visual Studio Code, Sublime Text, Atom, and Notepad++. These editors provide syntax highlighting and other helpful features for writing HTML code.
Create a New HTML File : Open your chosen text editor and create a new file with a .html extension. For example, you can name it "index.html" or "mywebpage.html." This file will serve as your HTML document.
Write HTML Code : Inside the HTML file, you can start writing your HTML code. We'll cover the basic structure in the next section.
Save the File : Save the HTML file in a location of your choice. Remember to use the .html extension. You can save it in a dedicated folder to keep your project organized.

Open the HTML File in a Web Browser: To see your HTML page in action, open the saved file using a web browser. Simply right-click on the file and select "Open with" followed by your preferred browser.

By following these steps, you'll have your HTML environment ready to go. Now, let's explore the basic structure of an HTML document.

Every HTML document follows a basic structure that consists of an opening and closing tag. Here's an example of a simple HTML document:

Now, let's break down the structure of this HTML document:

<!DOCTYPE html> : This declaration at the beginning of the document tells the browser that the document is written in HTML5.
<html></html> : The <html> tags represent the root element of an HTML page. All other elements are contained within these tags.
<head></head> : The <head> section provides meta-information about the HTML document. It typically includes the title of the page, links to CSS stylesheets, and other metadata.
<title></title> : The <title> tags define the title of the web page, which appears in the browser's title bar or tab.
<body></body> : The <body> tags enclose the visible content of the web page. This is where you place headings, paragraphs, images, links, and other elements that users will see and interact with.
<h1></h1> : The <h1> tags define a top-level heading. Headings are used to structure the content and provide hierarchy. The <h1> tag represents the main heading of the page.
<p></p> : The <p> tags define a paragraph. Paragraphs are used to group blocks of text together.

By understanding this basic structure, you can start creating your own HTML documents. Next, Let's explore the different types of HTML tags in the next section.

HTML tags are used to define the structure and appearance of content within an HTML document. They consist of angle brackets ( <> ) surrounding a keyword that represents a specific element.

Tags are paired, consisting of an opening tag and a closing tag. The opening tag is denoted by <tagname> , while the closing tag is denoted by </tagname> . The content to be affected by the tag is placed between the opening and closing tags.

For example, the <h1> tag is used to define the main heading of a web page. The opening tag <h1> indicates the start of the heading, and the closing tag </h1> indicates the end. Any text placed between these tags will be rendered as a large, bold heading.

Here's an example of how the <h1> tag is used:

In this example, the text "Welcome to My Website" will be displayed as the main heading of the web page.

HTML provides a wide range of tags that you can use to structure and format your web page content. Let's explore some of the most commonly used tags in the next section.

HTML elements are the individual components that make up an HTML document. They are defined by HTML tags and can include text, images, links, tables, forms, and other types of content.

Each HTML element has a specific purpose and semantic meaning, which helps search engines and assistive technologies understand the content of a web page. By using the appropriate elements, you can create well-structured and accessible web pages.

Let's take a look at some of the essential HTML elements:

<h1> to <h6> : These elements represent headings of different levels, with <h1> being the highest and <h6> being the lowest.
<p> : This element is used to define a paragraph of text.
<a> : This element is used to create hyperlinks to other web pages or resources.
<img> : This element is used to embed images into a web page.
<ul> and <ol> : These elements are used to create unordered and ordered lists, respectively.
<li> : This element is used to define list items within a <ul> or <ol> .
<table> : This element is used to create tables for tabular data.
<form> : This element is used to create interactive forms for collecting user input.

These are just a few examples of HTML elements. As you delve deeper into HTML, you will discover many more elements that allow you to structure and present content in different ways.

HTML elements can also have attributes, which provide additional information about the element or modify its behavior. Let's explore HTML attributes in the next section.

HTML attributes are used to provide additional information about an element or modify its default behavior. They are specified within the opening tag of an element and consist of a name and a value, separated by an equals sign ( = ).

For example, the <img> element is used to display images on a web page. It has several attributes that allow you to specify the source of the image, its dimensions, alternative text, and more.

Here's an example of how the src and alt attributes are used with the <img> element:

In this example, the src attribute specifies the path to the image file, while the alt attribute provides alternative text that is displayed if the image cannot be loaded.

Attributes can also be used with other elements to modify their behavior or add specific functionalities. For instance, the <a> element uses the href attribute to specify the URL that the link should point to.

In this example, clicking on the link will navigate to the web page specified by the href attribute.

HTML attributes vary depending on the element they are used with. Some attributes are common across multiple elements, while others are specific to certain elements. The HTML specification provides detailed documentation on the attributes supported by each element.

Now that we have covered the basics of HTML syntax, tags, elements, and attributes, let's move on to organizing content with headings in HTML.

Headings are an essential part of any web page as they provide a hierarchical structure to the content. HTML offers six levels of headings, ranging from <h1> to <h6> . The <h1> element represents the highest level heading, while <h6> represents the lowest level.

Headings not only help users skim through the content but also provide semantic meaning to search engines. Search engines consider headings as important indicators of the page's topic and use them to determine the relevance of the content to a user's search query.

Let's take a closer look at how headings are used in HTML:

Using Headings

Headings are defined using the <h1> to <h6> tags. The text between the opening and closing tags represents the heading content.

Here's an example of how to use headings in HTML:

In this example, we have used headings to structure the content of a personal website. The main heading <h1> represents the title of the page, while the subheadings <h2> and <h3> provide a hierarchical structure to the remaining content.

Choosing the Right Heading Level

When using headings, it's important to choose the appropriate level that reflects the hierarchical structure of your content. The main heading should be represented by an <h1> element, followed by <h2> , <h3> , and so on, in descending order.

Using headings consistently and hierarchically not only helps users navigate the content but also improves the accessibility and SEO of your web page.

Now that we have explored headings, let's move on to presenting textual content using paragraphs in HTML.

Paragraphs are used to present blocks of text in HTML. They are represented by the <p> element and are commonly used for introducing content, providing descriptions, or structuring longer pieces of text.

To create a paragraph in HTML, simply wrap your text within the opening and closing <p> tags. Here's an example:

In this example, the text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis risus et nunc eleifend, a euismod mauris luctus. Aliquam commodo fringilla orci, nec fringilla arcu fermentum at." is wrapped in the <p> tags and will be displayed as a paragraph on the web page.

You can have multiple paragraphs on a web page by using multiple <p> elements. Each <p> element represents a separate paragraph of text.

Now that we have covered paragraphs, let's explore how to create hyperlinks using HTML links.

Hyperlinks, commonly known as links, are used to connect different web pages or resources together. Links allow users to navigate between pages, access external websites, or jump to specific sections within the same page.

HTML provides the <a> element to create links. The <a> element requires the href attribute, which specifies the destination of the link. The destination can be a URL, a file, an email address, or an anchor within the same page.

Let's take a look at some examples of using links in HTML:

Creating a Basic Link

To create a basic link, use the <a> element with the href attribute. The text placed between the opening and closing tags represents the link text.

In this example, clicking on the link text "Visit Example Website" will navigate the user to the web page specified by the href attribute.

Linking to Email Addresses

To create a link that opens the user's email client with a pre-filled email, use the mailto scheme in the href attribute.

In this example, clicking on the link text " Send us an email " will open the user's default email client and populate the recipient address with " [email protected] ".

Linking to Anchors

Anchors are used to link to specific sections within the same page. By assigning an id attribute to an element, you can create an anchor that can be linked to.

In this example, clicking on the links " Go to Section 1 " and " Go to Section 2 " will scroll the page to the respective sections with the specified id attributes.

HTML links offer a powerful way to connect web pages and resources, enhancing the navigation and user experience of your website. Now let's move on to visualizing content using images in HTML.

Images are an integral part of web design, helping to convey information, create visual interest, and enhance the overall user experience. In HTML, images are inserted using the <img> element, which allows you to embed images within your web page.

To insert an image, you need to provide the image's source (URL or file path) using the src attribute. Additionally, you can provide alternative text using the alt attribute, which is displayed if the image cannot be loaded or accessed by screen readers for accessibility.

Let's take a look at how to insert an image in HTML:

In this example, replace " path/to/image.jpg " with the actual source of the image file on your web server or a valid URL. The "Description of the image" should be replaced with a brief, descriptive text that conveys the meaning or context of the image.

It's important to optimize your images for web usage by resizing them appropriately and using compression techniques to reduce file size. This helps to ensure faster page load times and better overall performance.

HTML supports various image formats, including JPEG, PNG, and GIF. Choose the appropriate format based on the content and requirements of your web page.

Now that we have covered images, let's move on to creating lists in HTML.

Lists are used to organize related pieces of information into a structured format. HTML provides two types of lists: unordered lists ( <ul> ) and ordered lists ( <ol> ).

Unordered Lists

Unordered lists are used to present items in no particular order. Each item is represented by a <li> (list item) element.

To create an unordered list, wrap the list items with the <ul> and </ul> tags. Each item is defined using the <li> and </li> tags.

Here's an example of an unordered list:

In this example, the list items "Item 1," "Item 2," and "Item 3" will be displayed as bullet points.

Ordered Lists

Ordered lists are used to present items in a specific order. Each item is numbered by default. Similar to unordered lists, each item is represented by a <li> element.

To create an ordered list, wrap the list items with the <ol> and </ol> tags. Each item is defined using the <li> and </li> tags.

Here's an example of an ordered list:

In this example, the list items "First item," "Second item," and "Third item" will be displayed as a numbered list.

Nested Lists

HTML also allows you to nest lists within lists, creating a hierarchical structure. To create nested lists, simply include another <ul> or <ol> element within an existing list item ( <li> ).

Here's an example of a nested list:

In this example, "Item 2" contains a nested unordered list with "Subitem 1" and "Subitem 2" as list items.

Lists are a versatile way to present information in a structured format. Whether you need to create a simple bulleted list or a complex nested list, HTML provides the necessary elements to organize your content effectively.

Now that we have covered lists, let's move on to formatting text using HTML.

HTML provides various tags and attributes to format and style text within a web page. Let's explore some common text formatting techniques in HTML.

To make text bold, use the <b> or <strong> tags. These tags indicate that the enclosed text should be displayed in a bold font.

Here's an example of using the <b> tag:

In this example, the word "bold" will be displayed in a bold font.

Italic Text

To make text italicized, use the <i> or <em> tags. These tags indicate that the enclosed text should be displayed in an italic font.

Here's an example of using the <i> tag:

In this example, the word "italic" will be displayed in an italic font.

Underlined Text

To underline text, use the <u> tag. This tag indicates that the enclosed text should be underlined.

Here's an example of using the <u> tag:

In this example, the word "underlined" will be displayed with an underline.

Strikethrough Text

To add a strikethrough effect to text, use the <s> or <del> tags. These tags indicate that the enclosed text should be displayed with a line through it.

Here's an example of using the <s> tag:

In this example, the word "strikethrough" will be displayed with a line through it.

Superscript and Subscript Text

To display text as superscript or subscript, use the <sup> and <sub> tags, respectively. The <sup> tag is used for superscript, which is displayed above the normal line of text, while the <sub> tag is used for subscript, which is displayed below the normal line of text.

Here's an example of using the <sup> and <sub> tags:

In this example, the word "superscript" will be displayed above the normal line of text, and the word "subscript" will be displayed below the normal line of text.

HTML provides these text formatting options to enhance the presentation and readability of your content. However, it's important to use them sparingly and purposefully, keeping in mind accessibility and user experience considerations.

Now that we have explored text formatting, let's move on to creating tables in HTML.

Tables are used to organize and present data in a tabular format, with rows and columns. HTML provides the <table> , <tr> , <th> , and <td> elements to create tables.

Creating a Basic Table

To create a table, wrap the table content with the <table> and </table> tags. Each row of the table is represented by the <tr> and </tr> tags. Within each row, you can define the table header cells using the <th> and </th> tags, and the table data cells using the <td> and </td> tags.

Here's an example of a basic table with two rows and two columns:

In this example, the table has two columns, labeled "Header 1" and "Header 2," and two rows of data, with "Data 1" and "Data 2" in the respective cells.

Table Caption and Header Groups

You can add a caption to the table using the <caption> and </caption> tags. The caption provides a brief description or summary of the table.

In this example, the table has a caption "Monthly Expenses" above the table headers.

You can group table headers using the <thead> , <tbody> , and <tfoot> tags. The <thead> element represents the header section of the table, <tbody> represents the body, and <tfoot> represents the footer.

In this example, the table headers are grouped within the <thead> element, the table data is within the <tbody> element, and the table footer is within the <tfoot> element.

Tables in HTML provide a structured and organized way to present data. However, it's important to use tables responsibly and consider alternative approaches, such as using CSS for layout and styling.

Now that we have covered tables, let's move on to embedding multimedia content in HTML.

Multimedia elements, such as images, videos, and audio, can greatly enhance the interactivity and engagement of web pages. HTML provides specific elements and attributes to embed multimedia content within a web page.

Embedding Images

We have already discussed how to insert images using the <img> element. However, HTML also provides the <figure> and <figcaption> elements to add captions or descriptions to images.

Here's an example:

In this example, the <figure> element wraps the <img> element, and the <figcaption> element is used to provide a caption for the image.

Embedding Videos

To embed videos in HTML, you can use the <video> element. The <video> element supports various attributes, such as src (source), controls (display video controls), and autoplay (automatically play the video).

In this example, replace " path/to/video.mp4 " with the actual source of the video file. The controls attribute displays video controls, allowing users to play, pause, and adjust the playback. The autoplay attribute automatically plays the video when the page loads.

If the user's browser does not support the <video> element or the specified video format, the text "Your browser does not support the video tag" will be displayed.

Embedding Audio

To embed audio in HTML, you can use the <audio> element. Similar to the <video> element, the <audio> element supports attributes like src, controls, and autoplay.

In this example, replace " path/to/audio.mp3 " with the actual source of the audio file. The controls attribute displays audio controls, allowing users to play, pause, and adjust the playback. The autoplay attribute automatically plays the audio when the page loads.

If the user's browser does not support the <audio> element or the specified audio format, the text "Your browser does not support the audio tag" will be displayed.

Multimedia elements add visual and auditory appeal to your web pages, making them more engaging and interactive for your visitors. However, it's important to optimize multimedia files for web usage to ensure faster loading times and better performance.

Now that we have covered multimedia elements, let's move on to discussing HTML forms.

HTML forms allow you to capture user input, such as text, selections, and submit it to a server for further processing. Forms are widely used for various purposes, such as contact forms, sign-up forms, and search boxes.

Form Structure

To create a form, use the <form> and </form> tags. The <form> element acts as a container for form elements, such as input fields, checkboxes, radio buttons, and buttons.

Here's an example of a basic form:

Input Fields

Input fields are used to collect text-based input from users. HTML provides several types of input fields, such as text input, password input, email input, and more.

To create a text input field, use the <input> tag with the type attribute set to "text". You can also provide additional attributes, such as name (to identify the field) and placeholder (to display a hint or example value).

Here's an example of a text input field:

In this example, the input field allows users to enter their username.

You can create other types of input fields, such as password fields, email fields, number fields, and more. Simply change the type attribute accordingly.

Checkboxes and Radio Buttons

Checkboxes and radio buttons are used when you want users to select one or more options from a list.

To create a checkbox, use the <input> tag with the type attribute set to " checkbox ". You can also provide a value attribute to specify the value associated with the checkbox.

Here's an example of a checkbox:

In this example, the checkbox has the label "Option 1" and the value "Option 1". When the user checks the checkbox, the value will be included in the form submission.

To create a radio button, use the <input> tag with the type attribute set to " radio ". Each radio button within a group should have the same name attribute but different value attributes.

Here's an example of a radio button group:

Buttons are used to perform actions, such as submitting a form or triggering JavaScript functions.

To create a submit button, use the <input> tag with the type attribute set to " submit ". You can also provide a value attribute to specify the text displayed on the button.

Here's an example of a submit button:

In this example, the button displays the text " Submit ," and when clicked, it submits the form.

You can create other types of buttons, such as reset buttons and buttons that trigger JavaScript functions. Use the appropriate type attribute and provide the necessary attributes and event handlers.

HTML forms provide a way to interact with users and collect data. With various form elements and attributes, you can create complex and interactive forms to suit your needs.

Now that we have covered forms, let's move on to discussing semantic HTML.

Semantic HTML refers to using HTML elements that convey the meaning and structure of content, improving accessibility for users and providing valuable information to search engines for better SEO.

Semantic Elements

HTML5 introduced several semantic elements, such as <header> , <nav> , <article> , <section> , <aside> , and more. These elements define the structure and meaning of different parts of a web page.

For example, the <header> element represents the introductory content of a page or a section, typically containing a logo, navigation menu, and heading.

In this example, the <header> element contains the website's logo and navigation menu.

Similarly, the <article> element represents a self-contained composition within a document, such as a blog post, news article, or product description.

In this example, the <article> element contains the content of a blog post.

Using semantic elements helps improve the structure, accessibility, and SEO of your web pages. Search engines can better understand the content and its context, which can positively impact your search rankings.

Semantic Headings

Headings ( <h1> to <h6> ) play a crucial role in organizing and structuring content. They provide hierarchy and indicate the importance of different sections.

When using headings, it's important to follow the proper hierarchy. Use <h1> for the main heading, <h2> for subheadings, <h3> for further subsections, and so on.

In this example, <h1> represents the main heading, followed by <h2> for subheadings, and <h3> for subsections.

Using proper semantic headings not only improves the structure of your content but also helps screen readers and assistive technologies navigate the page for visually impaired users.

Semantic Links

HTML provides the <a> tag to create links. When using links, it's important to provide descriptive and meaningful link text.

In this example, the link text "Visit Example Website" is descriptive and provides an indication of the destination.

Using semantic links improves accessibility and helps users understand the purpose and context of the link.

HTML comments allow you to add notes or remarks within your HTML code that are not displayed in the browser. Comments are useful for documenting your code, explaining functionality, or temporarily disabling code snippets.

Comments are ignored by web browsers and serve as a useful tool for developers to annotate their code.

HTML entities are special characters that have reserved meanings in HTML. For example, the less than ( < ), greater than ( > ), and ampersand ( & ) characters are used to define tags and entities in HTML. To display these characters as regular text, you need to use their respective HTML entities.

HTML entities ensure that special characters are rendered correctly on web pages.

To ensure your HTML code is well-structured, maintainable, and SEO-friendly, keep these best practices in mind:

Semantic HTML : Use appropriate HTML elements to accurately represent the content's meaning. For instance, use <h1> for main headings, <p> for paragraphs, and <nav> for navigation menus.
Clean and Indented Code : Format your code for readability by indenting nested elements properly. Well-organized code is easier to understand and maintain.
Optimize Images : Compress images to reduce file sizes without sacrificing quality. Large image files can slow down your web page's loading speed, negatively impacting the user experience and search rankings.
Responsive Design : Ensure your web pages are responsive and mobile-friendly. With the increasing use of mobile devices, it's crucial to provide an optimal viewing experience across different screen sizes.
Accessibility : Make your web pages accessible to all users, including those with disabilities. Use proper alt attributes for images, provide descriptive text for links, and structure your content logically.

In this article, we have explored the fundamentals of HTML, including the structure of HTML documents, basic tags and elements, text formatting, links, images, tables, multimedia embedding, forms, semantic HTML, and SEO best practices. HTML serves as the backbone of the web, allowing us to create and structure content that is accessible, engaging, and optimized for search engines.

As you continue your journey in web development, keep experimenting with HTML and exploring its advanced features and capabilities. The possibilities are endless, and with the right knowledge and skills, you can create stunning and interactive web experiences.

Now that you have a solid understanding of HTML, it's time to put your knowledge into practice and start building your own web pages. Happy coding!

Now, let's address some frequently asked questions about learning HTML basics:

Q1: Is it necessary to learn HTML before learning CSS?

A1: Yes, HTML provides the foundation for web development. It defines the structure and content of a web page, while CSS is used to style and enhance the appearance. It's recommended to learn HTML first and then move on to CSS.

Q2: Can I create a website using only HTML?

A2: Yes, you can create a basic website using only HTML. However, for more advanced functionality and styling, you'll need to incorporate CSS and JavaScript.

Q3: Do I need any prior coding experience to learn HTML?

A3: No, HTML is beginner-friendly and doesn't require any prior coding experience. It's a markup language that uses tags to structure content.

Q4: Can I learn HTML on my own?

A4: Absolutely! There are plenty of online resources, tutorials, and interactive platforms available to learn HTML at your own pace. Practice and hands-on experience will help you become proficient.

Q5: Is HTML a programming language?

A5: No, HTML is not a programming language. It's a markup language used to structure and present content on the web. Programming languages like JavaScript are used to add interactivity and functionality to web pages.

Q6: How long does it take to learn HTML?

A6: Learning HTML basics can be accomplished in a relatively short amount of time, depending on your dedication and practice. With consistent effort, you can grasp the fundamentals within a few weeks.

Create a Stunning Resume with Tailwind CSS.jpg

That’s a wrap!

I hope you enjoyed this article

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks! Faraz 😊

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox, latest post.

Create Bootstrap Breadcrumb Navigation | Tutorial

Learn how to create breadcrumb navigation using HTML and Bootstrap in this step-by-step tutorial. Perfect for beginners and web developers.

Create Fortnite Buttons Using HTML and CSS - Step-by-Step Guide

June 05, 2024

Create Star Rating using HTML and Bootstrap (Source Code) - Easy Guide

June 03, 2024

Creating an Engaging Author Bio Block with Avatar: HTML & Tailwind Guide

June 02, 2024

Create a Simple Datepicker with Tailwind CSS and HTML

May 29, 2024

Learn how to create Fortnite-style buttons using HTML and CSS. This step-by-step guide includes source code and customization tips.

How to Create a Scroll Down Button: HTML, CSS, JavaScript Tutorial

March 17, 2024

How to Create a Trending Animated Button Using HTML and CSS

March 15, 2024

Create Interactive Booking Button with mask-image using HTML and CSS (Source Code)

March 10, 2024

Create Shimmering Effect Button: HTML & CSS Tutorial (Source Code)

March 07, 2024

Create Your Own Bubble Shooter Game with HTML and JavaScript

Learn how to develop a bubble shooter game using HTML and JavaScript with our easy-to-follow tutorial. Perfect for beginners in game development.

Build a Number Guessing Game using HTML, CSS, and JavaScript | Source Code

April 01, 2024

Building a Fruit Slicer Game with HTML, CSS, and JavaScript (Source Code)

December 25, 2023

Create Connect Four Game Using HTML, CSS, and JavaScript (Source Code)

December 07, 2023

Creating a Candy Crush Clone: HTML, CSS, and JavaScript Tutorial (Source Code)

November 17, 2023

Create Image Color Extractor Tool using HTML, CSS, JavaScript, and Vibrant.js

Master the art of color picking with Vibrant.js. This tutorial guides you through building a custom color extractor tool using HTML, CSS, and JavaScript.

Build a Responsive Screen Distance Measure with HTML, CSS, and JavaScript

January 04, 2024

Crafting Custom Alarm and Clock Interfaces using HTML, CSS, and JavaScript

November 30, 2023

Detect User's Browser, Screen Resolution, OS, and More with JavaScript using UAParser.js Library

October 30, 2023

URL Keeper with HTML, CSS, and JavaScript (Source Code)

October 26, 2023

Creating a Responsive Footer with Tailwind CSS (Source Code)

Learn how to design a modern footer for your website using Tailwind CSS with our detailed tutorial. Perfect for beginners in web development.

Crafting a Responsive HTML and CSS Footer (Source Code)

November 11, 2023

Create an Animated Footer with HTML and CSS (Source Code)

October 17, 2023

Bootstrap Footer Template for Every Website Style

March 08, 2023

How to Create a Responsive Footer for Your Website with Bootstrap 5

August 19, 2022

HTML Structure and Presentation

Web pages are typically created using three components, HTML , CSS and JavaScript.

HTML	Provides the and structure of each page
CSS	A language used to style the HTML content
JavaScript	A scripting language used to provide additional , interactivity and behaviours

There is a special relationship between HTML and CSS. HTML can exist without CSS, but CSS is pointless without any HTML to style.

Hypertext Markup Language (HTML)

HTML is markup language used to create web pages.

HTML pages are interpreted by a web browser .

HTML tags are added to each element of content in order to provide meaning and context.

Further HTML tags can be used to divide a page into logical sections (divisions), making different layouts possible when combined with CSS.

Images, tables and hyperlinks are also included using HTML.

Although it is entirely possible to make a website just using HTML, it would look bland and unappealing.

To create web pages that are visually stunning and easy to use, we need to use another language called CSS.

Example of HTML

<p> This is a very short paragraph. </p>

Cascading Style Sheets (CSS)

CSS is a presentation language. Its purpose is to provide a web browser with styling instructions for the HTML.

CSS can be included directly in the HTML tags, in the head section of the HTML, or in an entirely separate document (CSS style sheet).

CSS is a very powerful tool, enabling very complex and unique designs to be made possible.

Take a look at the CSS Zen Garden website to see how changing CSS can make a dramatic difference to the appearance of HTML.

Example of CSS

p { color: blue }

Related Theory

Digital Currencies (Cryptocurrencies)
Hypertext Transfer Protocol (HTTP)
Internet Service Provider
IP and MAC addresses
Uniform Resource Locator (URL)
Web Browser

Related Quizzes

The Internet

Sign up for Guru News

Popular downloads.

examples of html structure and presentation

Data Transmission Cheat Sheet

All Quizzes
Computer Science Glossary
Our YouTube Channel
GCSE GURU Revision Tips +

Small Print

Cookie Policy
Privacy Policy
Terms and Conditions

Downloads Shop

Information & Terms

HTML BASICS Slides Presentation

Click to access all Slides..

This slide presentation shows basics of HTML.

HTML and XHTML are the foundation of all web development. HTML is used as the graphical user interface in client-side programs written in JavaScript. Server-side languages like PHP and Java also receive data from web pages and use HTML as the output mechanism. The emerging Ajax technologies likewise use HTML and XHTML as their visual engine. HTML was once a very loosely-defined language with very little standardization, but as it has become more important, the need for standards has become more apparent. Regardless of whether you choose to write HTML or XHTML, understanding the current standards will help you provide a solid foundation that will simplify all your other web coding. Fortunately HTML and XHTML are actually simpler than they used to be, because much of the functionality has moved to CSS.

Common Elements

Every page (HTML or XHTML shares certain elements in common.) All are essentially plain text files, with the .html extension. HTML files should not be created with a word processor, but in some type of editor that creates plain text. Every page has a large container (HTML or XHTML) and two major subcontainers, the head and the body. The head area contains information useful behind the scenes, such as CSS formatting instructions and JavaScript code. The body contains the part of the page that is visible to the user.

Tags and Attributes

An HTML document is based on the notion of tags. A tag is a piece of text inside angle brackets (<>). Tags typically have a beginning and an end, and usually contain some sort of text inside them. For example, a paragraph is normally denoted like this:

The <p> indicates the beginning of a paragraph. Text is then placed inside the tag, and the end of the paragraph is denoted by an end tag, which is similar to the start tag but with a slash (</p>.) It is common to indent content in a multi-line tag, but it is also legal to place tags on the same line:

Tags are sometimes enhanced by attributes, which are name value pairs that modify the tag. For example, the tag (used to embed an image into a page) usually includes the following attributes:

The src attribute describes where the image file can be found, and the alt attribute describes alternate text that is displayed if the image is unavailable.

Nested tags

Tags can be (and frequently are) nested inside each other. Tags cannot overlap, so <a><b></a></b> is not legal, but <a><b></b></a> is fine.

HTML VS XHTML

HTML has been around for some time. While it has done its job admirably, that job has expanded far more than anybody expected. Early HTML had very limited layout support. Browser manufacturers added many competing standards and web developers came up with clever workarounds, but the result is a lack of standards and frustration for web developers. The latest web standards (XHTML and the emerging HTML 5.0 standard) go back to the original purpose of HTML: to describe the structure of the data only, and leave all formatting to CSS (Please see the DZone CSS Refcard Series). XHTML is nothing more than HTML code conforming to the stricter standards of XML. The same style guidelines are appropriate whether you write in HTML or XHTML (but they tend to be enforced in XHTML):

Most of the requirements of XHTML turn out to be good practice whether you write HTML or XHTML. I recommend using XHTML strict so you can validate your code and know it follows the strictest standards.

XHTML has a number of flavors. The strict type is recommended, as it is the most up-to-date standard which will produce the most predictable results. You can also use a transitional type (which allows deprecated HTML tags) and a frameset type, which allows you to add frames. For most applications, the strict type is preferred.

HTML Template

The following code can be copied and pasted to form the foundation of a basic web page:

The structure of your web pages is critical to the success of programs based on those pages, so use a validating tool to ensure you haven't missed anything

Validating Tool	Description
WC3	The most commonly used validator is online at http://validator.w3.org this free tool checks your page against the doctype you specify and ensures you are following the standards. This acts as a 'spell-checker' for your code and warns you if you made an error like forgetting to close a tag.
HTML Tidy	There's an outstanding free tool called HTML tidy which not only checks your pages for validity, but also fixes most errors automatically. Download this tool at http://tidy.sourceforge.net/ or (better) use the HTML validator extension to build tidy into your browser.
HTML Validator extension	The extension mechanism of Firefox makes it a critical tool for web developers. The HTML Validator extension is an invaluable tool. It automatically checks any page you view in your browser against both the w3 validation engine and tidy. It can instantly find errors, and repair them on the spot with tidy. With this free extension available at http://users.skynet. be/mgueury/mozilla/ , there's no good reason not to validate your code.

USEFUL OPEN SOURCE TOOLS

Some of the best tools for web development are available through the open source community at no cost at all. Consider these application as part of your HTML toolkit:

Open Source Tool	Description
Aptana	http://www.aptana.com/ This free programmer's editor (based on Eclipse) is a full-blown IDE customized for HTML / XHTML, CSS, JavaScript, and Ajax. It offers code completion, syntax highlighting, and FTP support within the editor.
Web Developer Toolbar	https://www.addons.mozilla.org/en-US/firefox/addon/60 This Firefox extension adds numerous debugging and web development tools to your browser.
Firebug	https://addons.mozilla.org/en-US/firefox/addon/1843 is an add-on that adds full debugging capabilities to the browser. The firebug lite version even works with IE.

PAGE STRUCTURE ELEMENTS

The following elements are part of every web page.

Element	Description
<html></html>	Surrounds the entire page
<head></head>	Contains header information (metadata, CSS styles, JavaScript code)
<title></title>	Holds the page title normally displayed in the title bar and used in search results
<body></body>	Contains the main body text. All parts of the page normally visible are in the body

KEY STRUCTURAL ELEMENTS

Most pages contain the following key structural elements:

Element	Name	Description
<h1> </h1>	Heading 1	Reserved fo strongest emphasis
<h2> </h2>	Heading 2	Secondary level heading. Headings go down to level 6, but <h1> through <h3> are most common
<p> </p>	Paragraph	Most of the body of a page should be enclosed in paragraphs
<div> </div>	Division	Similar to a paragraph, but normally marks a section of a page. Divs usually contain paragraphs

LISTS AND DATA

Web pages frequently incorporate structured data so HTML includes several useful list and table tag

Element	Name	Description
<ul></ul>	Unordered list	Normally these lists feature bullets (but that can be changed with CSS)
<ol></ol>	Ordered list	These usually are numbered, but this can be changed with CSS
<li></li>	List item	Used to describe a list item in an unordered list or an ordered list
<dl></dl>	Definition list	Used for lists with name-value pairs
<dt></dt>	Definition term	The name in a name-value pair. Used in definition lists
<dd></dd>	Definition description	The value (or definition) of a name, value pair
<table></table>	Table	Defines beginning and end of a table
<tr></tr>	Table row	Defines a table row. A table normally consists of several <tr> pairs (one per row)
<td></td>	Table data	Indicates data in a table cell. <td> tags occur within <tr> (which occur within <table>)
<th></th>	Table heading	Indicates a table cell to be treated as a heading with special formatting

Standard List Types

HTML supports three primary list types. Ordered lists and unordered lists are the primary list types. By default, ordered lists use numeric identifiers, and unordered lists use bullets.

However, you can use the list-style-type CSS attribute to change the list marker to one of several types.

Lists can be nested inside each other

Definition lists

The special definition list is used for name / value pairs. The definition term (dt) is a word or phrase that is used as the list marker, and the definition data is normally a paragraph:

Use of tables

Tables were used in the past to overcome the page-layout shortcomings of HTML. That use is now deprecated in favor of CSS-based layout. Use tables only as they were intended, to display tabular data.

A table mainly consists of a series of table rows (tr.) Each table row consists of a number of table data (td) elements. The table heading (th) element can be used to indicate a table cell should be marked as a heading.

The rowspan and colspan attributes can be used to make a cell span more than one row or column.

Each row of a table should have the same number of columns, and each column should have the same number of rows. Use of the span attribute may require adjustment to other rows or columns.

LINKS AND IMAGES

Links and images are both used to incorporate external resources into a page. Both are reliant on URIs (Universal Resource Indicators), commonly referred to as URLs or addresses.

<a> (anchor) The anchor tag is used to provide the basic web link:

In this example, http://www.example.com is the site to be visited. The text "link to example.com" will be highlighted as a link.

absolute and relative references

<link>

The link tag is used primarily to pull in external CSS files:

<img>

The img tag is used in to attach an image. Valid formats are .jpg, .png, and .gif. An image should always be accompanied by an alt attribute describing the contents of the image.

Image formatting attributes (height, width, and align) are deprecated in favour of CSS.

SPECIALTY MARKUP

HTML / XHTML includes several specialty tags. These are used to describe special purpose text. They have default styling, but of course the styles can be modified with CSS.

<quote>

The quote tag is intended to display a single line quote:

Quote is an inline tag. If you need a block level quote, use <blockquote>.

<pre>

The <pre> tag is used for pre-formatted text. It is sometimes used for code listings or ASCII art because it preserves carriage returns. Pre-formatted text is usually displayed in a fixed-width font.

<code>

The code format is used to manage pre-formatted text, especially code listings. It is very similar to pre.

This tag is used to mark multi-line quotes. Frequently it is set off with special fonts and indentation through CSS. It is a block-level tag.

<span>

The span tag is a vanilla inline tag. It has no particular formatting of its own. It is intended to be used with a class or ID when you want to apply style to an inline chunk of code.

The em tag is used for standard emphasis. By default, <em> italicizes text, but you can use CSS to make any other type of emphasis you wish.

This tag represents strong emphasis. By default, it is bold, but you can modify the formatting with CSS.

Forms are the standard user input mechanism in HTML / XHTML. You will need another language like JavaScript or PHP to read the contents of the form elements and act upon them.

Form Structure

A number of tags are used to describe the structure of the form. Begin by looking over a basic form:

The <form></form> pair describes the form. In XHTML strict, you must indicate the form's action property. This is typically the server-side program that will read the form. If there is no such program, you can set the action to null ("") The method attribute is used to determine whether the data is sent through the get or post mechanism.

Most form elements are inline tags, and must be encased in a block element. The fieldset is designed exactly for this purpose. Its default appearance draws a box around the form. You can have multiple fieldsets inside a single form.

You can add a legend inside a fieldset. This describes the purpose of the fieldset.

A label is a special inline element that describes a particular field. A label can be paired with an input element by putting that element's ID in the label's for attribute.

The input element is a general purpose inline element. It is meant to be used inside a form, and it is the basis for several types of more specific input. The subtype is indicated by the type attribute. Input elements usually include an id attribute (used for CSS and JavaScript identification) and / or a name attribute (used in server-side programming.) The same element can have both a name and an id.

This element allows a single line of text input:

Passwords display just like textboxes, except rather than showing the text as it is typed, an asterisk appears for each letter. Note that the data is not encoded in any meaningful way. Typing text into a password field is still entirely unsecure.

Radio Button

Radio buttons are used in a group. Only one element of a radio group can be selected at a time. Give all members of a radio group the same name value to indicate they are part of a group.

Attaching a label to a radio button means the user can activate the button by clicking on the corresponding label. For best results, use the selected attribute to force one radio button to be the default.

Checkboxes are much like radio buttons, but they are independent. Like radio buttons, they can be associated with a label.

Hidden fields hold data that is not visible to the user (although it is still visible in the code) It is primarily used to preserve state in server-side programs.

Note that the data is still not protected in any meaningful way.

Buttons are used to signal user input. Buttons can be created through the input tag:

This will create a button with the caption "launch the missiles." When the button is clicked, the page will attempt to run a JavaScript function called "launchMissiles()" Standard buttons are usually used with JavaScript code on the client. The same button can also be created with this alternate format:

This second form is preferred because buttons often require different CSS styles than other input elements. This second form also allows an <img> tag to be placed inside the button, making the image act as the button.

The reset button automatically resets all elements in its form to their default values. It doesn't require any other attributes.

Select / option

Drop-down lists can be created through the select / option mechanism. The select tag creates the overall structure, which is populated by option elements.

The select has an id (for client-side code) or name (for serverside code) identifier. It contains a number of options. Each option has a value which will be returned to the program. The text between <option> and </option> is the value displayed to the user. In some cases (as in this example) the value displayed to the user is not the same as the value used by programs.

Multiple Selections

You can also create a multi-line selection with the select and option tags:

DEPRECATED FORMATTING TAGS

Certain tags common in older forms of HTML are no longer recommended as CSS provides much better alternatives.

The font tag was used to set font color, family (typeface) and size. Numerous CSS attributes replace this capability with much more flexible alternatives. See the CSS refcard for details.

I (italics)

HTML code should indicate the level of emphasis rather than the particular stylistic implications. Italicizing should be done through CSS. The <em> tag represents emphasized text. It produces italic output unless the style is changed to something else. The <i> tag is no longer necessary and is not recommended. Add font-style: italic to the style of any element that should be italicized.

Like italics, boldfacing is considered a style consideration. Use the <strong> tag to denote any text that should be strongly emphasized. By default, this will result in boldfacing the enclosed text. You can add bold emphasis to any style with the font-weight: bold attribute in CSS.

DEPRECATED TECHNIQUES

In addition to the deprecated tags, there are also techniques which were once common in HTML that are no longer recommended.

Frames have been used as a layout mechanism and as a technique for keeping one part of the page static while dynamically loading other parts of the page in separate frames. Use of frames has proven to cause major usability problems. Layout is better handled through CSS techniques, and dynamic page generation is frequently performed through server-side manipulation or AJAX.

Table-based design

Before CSS became widespread, HTML did not have adequate page formatting support. Clever designers used tables to provide an adequate form of page layout. CSS provides a much more flexible and powerful form of layout than tables, and keeps the HTML code largely separated from the styling markup.

HTML ENTITIES

Sometimes you need to display a special character in a web page. HTML has a set of special characters for exactly this purpose. Each of these entities begins with the ampersand(&) followed by a code and a semicolon.

Character	Name	Code	Note
	Non-breaking space		Adds white space
	<	Used to display HTML code or mathematics
>	Greater than	>	Used to display HTML code or mathematics
&	Ampersand	&	If you're not displaying an entity but really want the & symbol
©	Copyright	©	Copyright symbol
®	Registered trademark	®	Registered trademark

HTML 5 / CSS3 PREVIEW

New technologies are on the horizon. Firefox 3.5 now has support for significant new HTML 5 features, and CSS 3 is not far behind. While the following should still be considered experimental, they are likely to become very important tools in the next few years. Firefox 3.5, Safari 4 (and a few other recent browsers) support the following new features:

Audio and video tags

Finally the browsers have direct support for audio and video without plugin technology. These tags work much like the img tag.

The HTML 5 standard currently supports Ogg Theora video, Ogg Vorbis audio, and wav audio. The Ogg formats are opensource alternatives to proprietary formats, and plenty of free tools convert from more standard video formats to Ogg. The autoplay option causes the element to play automatically. The controls element places controls directly into the page.

The code between the beginning and ending tag will execute if the browser cannot process the audio or video tag. You can place alternate code here for embedding alternate versions (Flash, for example)

The canvas tag offers a region of the page that can be drawn upon (usually with Javascript.) This creates the possibility of real interactive graphics without requiring plugins like Flash.

This is actually a CSS improvement, but it's much needed. It allows you to define a font-face in CSS and include a ttf font file from the server. You can then use this font face in your ordinary CSS and use the downloaded font. If this becomes a standard, we will finally have access to reliable downloadable fonts on the web, which will usher in web typography at long last.

Weekly Trends and Language Statistics

What Is HTML?

HTML is a programming code that's responsible for text representation, defining visual format, providing search engines with page context and more.

HTML (HyperText Markup Language) is a form of programming code used to instruct a browser to create the structure for individual web pages on a website. This markup language is a fundamental component of how billions of people perceive and consume pages on the internet. HTML is responsible for things like text representation, defining visual format, providing search engines with page context and designating sections of a page.

What Is HTML Used For?

HTML is a written markup language used to annotate text, images and other content in a structured manner for display on the internet.

HTML is used to provide structure to a webpage and make it accessible to users of the internet through text, visual formatting and search factors. It is commonly known as the most basic building block of the web, working alongside CSS and JavaScript to create the websites we see while browsing.

HTML, particularly its most recent form, is a highly capable programming language with a variety of uses when it comes to web browsing and data. Not only do we use HTML for web page development , web document creation and internet navigation, HTML5 introduces advanced APIs , facilitates client-side storage via localStorage and IndexDB, offers data entry support, facilitates offline application use through caching and can even be used in game development .

Related Reading From Built In Experts Optimize the HTML Head Element for a High-Performing Website

What Is HTML Syntax?

Proper syntax is crucial when building out HTML documents. Without proper syntax, webpage elements wouldn’t function in the way they are intended and, more importantly, content would not display to the user in a manner that makes sense. Syntax also allows sections of elements to function alongside each other, rather than independently.

HTML syntax is written within simple text documents that end with a .html extension. HTML documents consist of text elements that can be read and loaded by a web browser. HTML markup functions through the use of elements, which describe its functionality and are placed within a descending tree structure.

Surrounding these elements are angle tags ( <> ) that determine where the elements are placed and how they will function. For every tag that’s opened, a corresponding closing tag must usually be placed in order for it to function. A closing tag is identical to an opening tag, but with a forward slash placed before the element ( </> ). All markup written between these two tags will be structured using the element written within each tag. An example of an element and an opening tag is <head> . To close this tag, you would use the </head> tag.

Additionally, a web browser can read 16 different HTML attributes to communicate certain functionality when used inside of an element. For example, you can use the href attribute to point to a specific link in conjunction with the a element , which determines anchor text. This would be written as <a href=”https://examplesite.com”>Example Anchor Text</a> . Other components of HTML syntax include the ability to leave developer comments that are not processed by the browser and self-enclosing elements that do not contain anything inside of them

Many websites can and do function perfectly with poor syntax, but good code practice exists as a way of eliminating headaches when creating the website, easing troubleshooting operations when things can (and will) go wrong. This practice facilitates collaboration with other developers, streamlined future updates and helps prepare for the eventual handoff of the website’s code when the developer is no longer working on it.

What Are 5 Basic HTML Tags?

There are many HTML elements we can use to structure a web page. While developers choose elements for specific purposes, some tags are crucial to HTML document structure and are used most frequently. These five tags are just a fraction of the basic tags developers consider fundamental to HTML programming:

<html> — The root element tag that defines everything placed between its opening and closing tags as HTML code.
<head> — Defines the head of the web page and is where JavaScript code lives.
<title> — Defines the web page’s title and is often what shows up in search engine results.
<h1> — Defines the most prominent heading on a web page.
<p> — Defines content that lives within a paragraph and allows browsers to insert spaces between paragraphs for legibility.

Other important tags to know when building a page include the <body> , <a> , <div> , <span> and <img> tags.

Recent Expert Contributors Articles

Have a language expert improve your writing

Run a free plagiarism check in 10 minutes, generate accurate citations for free.

Knowledge Base

Methodology

How to Write a Literature Review | Guide, Examples, & Templates

How to Write a Literature Review | Guide, Examples, & Templates

Published on January 2, 2023 by Shona McCombes . Revised on September 11, 2023.

What is a literature review? A literature review is a survey of scholarly sources on a specific topic. It provides an overview of current knowledge, allowing you to identify relevant theories, methods, and gaps in the existing research that you can later apply to your paper, thesis, or dissertation topic .

There are five key steps to writing a literature review:

Search for relevant literature
Evaluate sources
Identify themes, debates, and gaps
Outline the structure
Write your literature review

A good literature review doesn’t just summarize sources—it analyzes, synthesizes , and critically evaluates to give a clear picture of the state of knowledge on the subject.

Instantly correct all language mistakes in your text

Upload your document to correct all your mistakes in minutes

What is the purpose of a literature review, examples of literature reviews, step 1 – search for relevant literature, step 2 – evaluate and select sources, step 3 – identify themes, debates, and gaps, step 4 – outline your literature review’s structure, step 5 – write your literature review, free lecture slides, other interesting articles, frequently asked questions, introduction.

Quick Run-through
Step 1 & 2

When you write a thesis , dissertation , or research paper , you will likely have to conduct a literature review to situate your research within existing knowledge. The literature review gives you a chance to:

Demonstrate your familiarity with the topic and its scholarly context
Develop a theoretical framework and methodology for your research
Position your work in relation to other researchers and theorists
Show how your research addresses a gap or contributes to a debate
Evaluate the current state of research and demonstrate your knowledge of the scholarly debates around your topic.

Writing literature reviews is a particularly important skill if you want to apply for graduate school or pursue a career in research. We’ve written a step-by-step guide that you can follow below.

Here's why students love Scribbr's proofreading services

Discover proofreading & editing

Writing literature reviews can be quite challenging! A good starting point could be to look at some examples, depending on what kind of literature review you’d like to write.

Example literature review #1: “Why Do People Migrate? A Review of the Theoretical Literature” ( Theoretical literature review about the development of economic migration theory from the 1950s to today.)
Example literature review #2: “Literature review as a research methodology: An overview and guidelines” ( Methodological literature review about interdisciplinary knowledge acquisition and production.)
Example literature review #3: “The Use of Technology in English Language Learning: A Literature Review” ( Thematic literature review about the effects of technology on language acquisition.)
Example literature review #4: “Learners’ Listening Comprehension Difficulties in English Language Learning: A Literature Review” ( Chronological literature review about how the concept of listening skills has changed over time.)

You can also check out our templates with literature review examples and sample outlines at the links below.

Download Word doc Download Google doc

Before you begin searching for literature, you need a clearly defined topic .

If you are writing the literature review section of a dissertation or research paper, you will search for literature related to your research problem and questions .

Make a list of keywords

Start by creating a list of keywords related to your research question. Include each of the key concepts or variables you’re interested in, and list any synonyms and related terms. You can add to this list as you discover new keywords in the process of your literature search.

Social media, Facebook, Instagram, Twitter, Snapchat, TikTok
Body image, self-perception, self-esteem, mental health
Generation Z, teenagers, adolescents, youth

Search for relevant sources

Use your keywords to begin searching for sources. Some useful databases to search for journals and articles include:

Your university’s library catalogue
Google Scholar
Project Muse (humanities and social sciences)
Medline (life sciences and biomedicine)
EconLit (economics)
Inspec (physics, engineering and computer science)

You can also use boolean operators to help narrow down your search.

Make sure to read the abstract to find out whether an article is relevant to your question. When you find a useful book or article, you can check the bibliography to find other relevant sources.

You likely won’t be able to read absolutely everything that has been written on your topic, so it will be necessary to evaluate which sources are most relevant to your research question.

For each publication, ask yourself:

What question or problem is the author addressing?
What are the key concepts and how are they defined?
What are the key theories, models, and methods?
Does the research use established frameworks or take an innovative approach?
What are the results and conclusions of the study?
How does the publication relate to other literature in the field? Does it confirm, add to, or challenge established knowledge?
What are the strengths and weaknesses of the research?

Make sure the sources you use are credible , and make sure you read any landmark studies and major theories in your field of research.

You can use our template to summarize and evaluate sources you’re thinking about using. Click on either button below to download.

Take notes and cite your sources

As you read, you should also begin the writing process. Take notes that you can later incorporate into the text of your literature review.

It is important to keep track of your sources with citations to avoid plagiarism . It can be helpful to make an annotated bibliography , where you compile full citation information and write a paragraph of summary and analysis for each source. This helps you remember what you read and saves time later in the process.

Prevent plagiarism. Run a free check.

To begin organizing your literature review’s argument and structure, be sure you understand the connections and relationships between the sources you’ve read. Based on your reading and notes, you can look for:

Trends and patterns (in theory, method or results): do certain approaches become more or less popular over time?
Themes: what questions or concepts recur across the literature?
Debates, conflicts and contradictions: where do sources disagree?
Pivotal publications: are there any influential theories or studies that changed the direction of the field?
Gaps: what is missing from the literature? Are there weaknesses that need to be addressed?

This step will help you work out the structure of your literature review and (if applicable) show how your own research will contribute to existing knowledge.

Most research has focused on young women.
There is an increasing interest in the visual aspects of social media.
But there is still a lack of robust research on highly visual platforms like Instagram and Snapchat—this is a gap that you could address in your own research.

There are various approaches to organizing the body of a literature review. Depending on the length of your literature review, you can combine several of these strategies (for example, your overall structure might be thematic, but each theme is discussed chronologically).

Chronological

The simplest approach is to trace the development of the topic over time. However, if you choose this strategy, be careful to avoid simply listing and summarizing sources in order.

Try to analyze patterns, turning points and key debates that have shaped the direction of the field. Give your interpretation of how and why certain developments occurred.

If you have found some recurring central themes, you can organize your literature review into subsections that address different aspects of the topic.

For example, if you are reviewing literature about inequalities in migrant health outcomes, key themes might include healthcare policy, language barriers, cultural attitudes, legal status, and economic access.

Methodological

If you draw your sources from different disciplines or fields that use a variety of research methods , you might want to compare the results and conclusions that emerge from different approaches. For example:

Look at what results have emerged in qualitative versus quantitative research
Discuss how the topic has been approached by empirical versus theoretical scholarship
Divide the literature into sociological, historical, and cultural sources

Theoretical

A literature review is often the foundation for a theoretical framework . You can use it to discuss various theories, models, and definitions of key concepts.

You might argue for the relevance of a specific theoretical approach, or combine various theoretical concepts to create a framework for your research.

Like any other academic text , your literature review should have an introduction , a main body, and a conclusion . What you include in each depends on the objective of your literature review.

The introduction should clearly establish the focus and purpose of the literature review.

Depending on the length of your literature review, you might want to divide the body into subsections. You can use a subheading for each theme, time period, or methodological approach.

As you write, you can follow these tips:

Summarize and synthesize: give an overview of the main points of each source and combine them into a coherent whole
Analyze and interpret: don’t just paraphrase other researchers — add your own interpretations where possible, discussing the significance of findings in relation to the literature as a whole
Critically evaluate: mention the strengths and weaknesses of your sources
Write in well-structured paragraphs: use transition words and topic sentences to draw connections, comparisons and contrasts

In the conclusion, you should summarize the key findings you have taken from the literature and emphasize their significance.

When you’ve finished writing and revising your literature review, don’t forget to proofread thoroughly before submitting. Not a language expert? Check out Scribbr’s professional proofreading services !

This article has been adapted into lecture slides that you can use to teach your students about writing a literature review.

Scribbr slides are free to use, customize, and distribute for educational purposes.

Open Google Slides Download PowerPoint

If you want to know more about the research process , methodology , research bias , or statistics , make sure to check out some of our other articles with explanations and examples.

Sampling methods
Simple random sampling
Stratified sampling
Cluster sampling
Likert scales
Reproducibility

Statistics

Null hypothesis
Statistical power
Probability distribution
Effect size
Poisson distribution

Research bias

Optimism bias
Cognitive bias
Implicit bias
Hawthorne effect
Anchoring bias
Explicit bias

A literature review is a survey of scholarly sources (such as books, journal articles, and theses) related to a specific topic or research question .

It is often written as part of a thesis, dissertation , or research paper , in order to situate your work in relation to existing knowledge.

There are several reasons to conduct a literature review at the beginning of a research project:

To familiarize yourself with the current state of knowledge on your topic
To ensure that you’re not just repeating what others have already done
To identify gaps in knowledge and unresolved problems that your research can address
To develop your theoretical framework and methodology
To provide an overview of the key findings and debates on the topic

Writing the literature review shows your reader how your work relates to existing research and what new insights it will contribute.

The literature review usually comes near the beginning of your thesis or dissertation . After the introduction , it grounds your research in a scholarly field and leads directly to your theoretical framework or methodology .

A literature review is a survey of credible sources on a topic, often used in dissertations , theses, and research papers . Literature reviews give an overview of knowledge on a subject, helping you identify relevant theories and methods, as well as gaps in existing research. Literature reviews are set up similarly to other academic texts , with an introduction , a main body, and a conclusion .

An annotated bibliography is a list of source references that has a short description (called an annotation ) for each of the sources. It is often assigned as part of the research process for a paper .

Cite this Scribbr article

If you want to cite this source, you can copy and paste the citation or click the “Cite this Scribbr article” button to automatically add the citation to our free Citation Generator.

McCombes, S. (2023, September 11). How to Write a Literature Review | Guide, Examples, & Templates. Scribbr. Retrieved June 10, 2024, from https://www.scribbr.com/dissertation/literature-review/

Is this article helpful?

Shona McCombes

Other students also liked, what is a theoretical framework | guide to organizing, what is a research methodology | steps & tips, how to write a research proposal | examples & templates, "i thought ai proofreading was useless but..".

I've been using Scribbr for years now and I know it's a service that won't disappoint. It does a good job spotting mistakes”

The Best HTML Examples and HTML5 Examples

HTML provides the structure of websites. Here are some examples of how to use HTML syntax to build websites, including some examples of newer HTML5 features.

The A Href Attribute Example

The <a href> attribute refers to a destination provided by a link. The a (anchor) tag is dead without the <href> attribute. Sometimes in your workflow, you don’t want a live link or you won’t know the link destination yet. In this case, it’s useful to set the href attribute to "#" to create a dead link. The href attribute can be used to link to local files or files on the internet.

For instance:

The <a href> attribute is supported by all browsers.

More attributes:

hreflang : Specifies the language of the linked resource. target : Specifies the context in which the linked resource will open. title : Defines the title of a link, which appears to the user as a tooltip.

In-page anchors

It’s also possible to set an anchor to certain place of the page. To do this you should first place a tab at location on the page with tag and necessary attribute “name” with any keyword description in it, like this:

Any description between tags is not required. After that you can place a link leading to this anchor at any palce on same page. To do this you should use tag with necessary attribute “href” with symbol # (sharp) and key-word description of the anchor, like this:

Image Links

The <a href="#"> may also be applied to images and other HTML elements.

The A Target Example

The <a target> attribute specifies where to open the linked document in an a (anchor) tag.

A target attribute with the value of “_blank” opens the linked document in a new window or tab.

A target attribute with the value of “_self” opens the linked document in the same frame as it was clicked (this is the default and usually does not need to be specified).

A target attribute with the value of “_parent” opens the linked document in the parent frame.

A target attribute with the value of “_top” opens the linked document in the full body of the window.

A target attribute with the value of “framename” Opens the linked document in a specified named frame.

The Body Background Attribute Example

If you want to add a background image instead of a color, one solution is the <body background> attribute. It specifies a background image for an HTML document.

background - URL for background image

body-background attribute is depreciated

the body-background attribute been deprecated in HTML5. The correct way to style the <body> tag is with CSS.

There are several CSS properties used for setting the background of an element. These can be used on to set the background of an entire page.

The Body Bgcolor Attribute Example

The <body bgcolor> attribute assigns a background color for an HTML document.

<body bgcolor="color"> The color value can be either a color name (like, purple ) or a hex value (like, #af0000 ).

To add a background color to a webpage you can use the <body bgcolor="######"> attribute. It specifies a color for the HTML document to display.

For example:

You can change the color by replacing ###### with a hexadecimal value. For simple colors you can also use the word, such as “red” or “black”.

All major browsers support the <body bgcolor> attribute.

HTML 5 does not support the <body bgcolor> attribute. Use CSS for this purpose. How? By using the following code: <body style="background-color: color"> Of course, you can also do it in a separate document instead of an inline method.
Do not use RGB value in <body bgcolor> attribute because rgb() is for CSS only, that is, it will not work in HTML.

The Div Align Attribute Example

The <div align=""> attribute is used for aligning the text in a div tag to The Left, Right, center or justify.

This attribute is no longer supported in html5. css is the way to go.

The Div Align attribute can be used to horizontally align the contents within a div. In the below example, the text will be centered within the div.

**This attribute is not supported in HTML5 and CSS Text Align should be used instead

The Font Color Attribute Example

This attribute is used to set a color to the text enclosed in a <font> tag.

This attribute is not supported in HTML5. Instead, this freeCodeCamp article specifies a CSS method, which can be used.

A color can also be specified using a 'hex code' or an 'rgb code', instead of using a name.

Color name attribute

Hex code attribute

RGB attribute

The Font Size Attribute Example

This attribute specifies the font size as either a numeric or relative value. Numeric values range from 1 to 7 with 1 being the smallest and 3 the default. It can also be defined using a relative value, like +2 or -3 , which set it relative to the value of the size attribute of the <basefont> element, or relative to 3 , the default value, if none does exist.

Note : The size attribute of <font> is not supported in HTML5. Use CSS instead.

The Img Align Attribute Example

The align attribute of an image specifies where the image should be aligned according to the surrounding element.

Attribute Values: right - Align image to the right left - Align image to the left top - Align image to the top bottom - Align image to the bottom middle - Align image to the middle

We can also align in right if we want:

Please note the align attribute is not supported in HTML5, and you should use CSS instead. However, it is still supported by all the major browsers.

The Img Width Attribute

The HTML ‘width’ attribute refers to the width of an image. The value in the quotations is the amount of pixels.

For example, if you already have a link to an image set up via the src attribute you can add the width attribute like so:

In the code snippet above there is an image tag and the image is set to a width of 100 pixels. width="100"

The Img Src Attribute Example

The <img src> attribute refers to the source of the image you want to display. The img tag will not display an image without the src attribute. However, if you set the source to the location of the image, you can display any image.

There is an image of the freeCodeCamp Logo located at https://avatars0.githubusercontent.com/u/9892522?v=4&s=400

You can set that as the image using the src attribute.

The above code displays like this:

The src attribute is supported by all browsers.

You can also have a locally hosted file as your image.

For example, <img src="images/freeCodeCamp.jpeg> would work if you had a folder called images which had the freeCodeCamp.jpeg inside, as long as the ‘images’ folder was in the same location as the index.html file.

../files/index.html

..files/images/freeCodeCamp.jpeg

HTML Entity Example

What are html entities.

HTML entities are characters that are used to replace reserved characters in HTML or for characters that do not appear on your keyboard. Some characters are reserved in HTML. If you use the less than(<) or greater than(>) signs in your text, the browser might mix them up with tags.

What are they used for?

As mentioned about HTML entities are used in order to replace reserved characters that are reserved by HTML.

How do you use them?

A character entity looks similar to this:

Reference Guide

This is by no means an exhaustive list but the links below will be able to give you more entities if the ones below do not work for your needs. Happy Coding :bowtie:

HTML Form Example

Basically, forms are used to collect data entered by a user, which are then sent to the server for further processing. They can be used for different kinds of user inputs, such as name, email etc.

Form contains control elements which are wrapped around <form></form> tags, like input , which can have types like:

Code example:

Other elements that form can contain:

textarea - is a multiline box which is most often used for adding some text eg. comment. Size of textarea is defined by number of rows and columns.
select - together with <option></option> tag creates drop-down select menu.
button - The button element can be used to define a clickable button.

MORE INFORMATION ON HTML FORMS.

HTML Forms are required when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc.

A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.

There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has following syntax −

If the form method is not defined then it will default to “GET”.

The form tag can also have an attribute named “target” which specifies where the link will open. It can open in the browser tab, a frame, or in the current window.

The action attribute defines the action to be performed when the form is submitted. Normally, the form data is sent to a web page at the Script URL when the user clicks on the submit button. If the action attribute is omitted, the action is set to the current page.

HTML5 Audio Example

Before HTML5, audio files had to be played in a browser using a plug-in like Adobe Flash. The HTML

The following code snippet adds an audio file with the filename tutorial.ogg or tutorial.mp3 . Theelement indicates alternative audio files which the browser may choose from. The browser will utilize the first recognized format.

The controls attribute includes audio controls like play, pause, and volume. If you don’t use this attribute, then no controls will be shown.

The <source> element enables you to indicate alternative audio files which the browser may choose from. The browser will utilize the first recognize format. The text between the <audio> and </audio> tags may be shown in browser that does not support the HTML5 <audio> element.

The autoplay attribute will automatically play your audio file in the background. It is considered better practice to let visitors choose to play audio.

The preload attribute indicates what the browser should do if the player is not set to autoplay.

The loop attribute will play your audio file in a continous loop if mentioned

Since this is html5, some browser do not support it. You can check it at https://caniuse.com/#search=audio

HTML5 Semantic Elements Example

Semantic HTML elements clearly describe it’s meaning in a human and machine readable way. Elements such as <header> , <footer> and <article> are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.

A Quick History

HTML was originally created as a markup language to describe documents on the early internet. As the internet grew and was adopted by more people, it’s needs changed. Where the internet was originally inteded for sharing scientific documents, now people wanted to share other things as well. Very quickly, people started wanting to make the web look nicer. Because the web was not initially built to be designed, programmers used different hacks to get things laid out in different ways. Rather than using the <table></table> to describe information using a table, programmers would use them to position other elements on a page. As the use of visually designed layouts progressed, programmers started to use a generic “non-semantic” tag like <div> . They would often give these elements a class or id attribute to describe their purpose. For example, instead of <header> this was often written as <div class="header"> . As HTML5 is still relatively new, this use of non-semantic elements is still very common on websites today.

List of new semantic elements

The semantic elements added in HTML5 are:

<article>

<aside>

<details>
<figcaption>
<figure>

<footer>

<header>
<main>
<mark>
<nav>
<section>
<summary>

<time>

Elements such as <header> , <nav> , <section> , <article> , <aside> , and <footer> act more or less like <div> elements. They group other elements together into page sections. However where a <div> tag could contain any type of information, it is easy to identify what sort of information would go in a semantic <header> region.

An example of semantic element layout by w3schools

Benefits of semantic elements

To look at the benefits of semantic elements, here are two pieces of HTML code. This first block of code uses semantic elements:

Whilst this second block of code uses non-semantic elements:

First, it is much easier to read . This is probably the first thing you will notice when looking at the first block of code using semantic elements. This is a small example, but as a programmer you can be reading through hundreds or thousands of lines of code. The easier it is to read and understand that code, the easier it makes your job.

It has greater accessibility . You are not the only one that finds semantic elements easier to understand. Search engines and assistive technologies (like screen readers for users with a sight impairment) are also able to better understand the context and content of your website, meaning a better experience for your users.

Overall, semantic elements also lead to more consistent code . When creating a header using non-semantic elements, different programmers might write this as <div class="header"> , <div id="header"> , <div class="head"> , or simply <div> . There are so many ways that you can create a header element, and they all depend on the personal preference of the programmer. By creating a standard semantic element, it makes it easier for everyone.

Since October 2014, HTML4 got upgraded to HTML5, along with some new “semantic” elements. To this day, some of us might still be confused as to why so many different elements that doesn’t seem to show any major changes.

<section> and <article>

“What’s the difference?”, you may ask. Both these elements are used for sectioning a content, and yes, they can definitely be used interchangeably. It’s a matter of in which situation. HTML4 offered only one type of container element, which is <div> . While this is still used in HTML5, HTML5 provided us with <section> and <article> in a way to replace <div> .

The <section> and <article> elements are conceptually similar and interchangeable. To decide which of these you should choose, take note of the following:

An article is intended to be independently distributable or reusable.
A section is a thematic grouping of content.

<header> and <hgroup>

The <header> element is generally found at the top of a document, a section, or an article and usually contains the main heading and some navigation and search tools.

The <hgroup> element should be used where you want a main heading with one or more subheadings.

REMEMBER, that the <header> element can contain any content, but the <hgroup> element can only contain other headers, that is <h1> to <h6> and including <hgroup> .

The <aside> element is intended for content that is not part of the flow of the text in which it appears, however still related in some way. This of <aside> as a sidebar to your main content.

Before HTML5, our menus were created with <ul> ’s and <li> ’s. Now, together with these, we can separate our menu items with a <nav> , for navigation between your pages. You can have any number of <nav> elements on a page, for example, its common to have global navigation across the top (in the <header> ) and local navigation in a sidebar (in an <aside> element).

If there is a <header> there must be a <footer> . A <footer> is generally found at the bottom of a document, a section, or an article. Just like the <header> the content is generally metainformation, such as author details, legal information, and/or links to related information. It is also valid to include <section> elements within a footer.

<small>

The <small> element often appears within a <footer> or <aside> element which would usually contain copyright information or legal disclaimers, and other such fine print. However, this is not intended to make the text smaller. It is just describing its content, not prescribing presentation.

The <time> element allows an unambiguous ISO 8601 date to be attached to a human-readable version of that date.

Why bother with <time> ? While humans can read time that can disambiguate through context in the normal way, the computers can read the ISO 8601 date and see the date, time, and the time zone.

<figure> and <figcaption>

<figure> is for wrapping your image content around it, and <figcaption> is to caption your image.

HTML5 Video Example

Before HTML5, in order to have a video play in a webpage you would need to use a plugin, like Adobe Flash Player. With the introduction of HTML5, you can now place it directly into the page itself. The HTML

To embed video file into web page, just add this code snippet and change the src of audio file.

The controls attribute includes video controls, similar to play, pause, and volume.

This feature is supported by all modern/updated browsers. However, not all support the same video file format. My recommendation for a wide range of compatibilty is MP4, as it is the most widely accepted format. There are also two other formats (WebM and Ogg) that are supported in Chrome, Firefox, and Opera.

The element enables you to indicate alternative video files which the browser may choose from. The browser will utilize the first recognize format. In HTML5, there are 3 supported video formats: MP4, WebM, and Ogg.

The text between the tags will only be displayed in browsers that do not support the

There are several different elements of the video tag, many of these explanations are based on Mozilla’s web docs (linked below). There are even more if you click the link at the bottom.

“autoplay” can be set to either true or false. You set it to true by adding it into the tag, if it is not present in the tag it is set to false. If set to true, the video will begin playing as soon as enough of the video has buffered for it to be able to play. Many people find autoplaying videos as disruptive or annoying so use this feature sparingly. Also note, that some mobile browsers, such as Safari for iOS, ignore this attribute.

The “poster” attribute is the image that shows on the video until the user clicks to play it.

The “controls” attribute can be set to true or false and will handle whether controls such as the play/pause button or volume slider appear. You set it to true by adding it into the tag, if it is not present in the tag it is set to false.

There are many more attributes that can be added that are optional to customize the videoplayer in the page. To learn more, click on the links below.

HTML5 Web Storage Example

Web storage allows web applications to store up to 5MB of information in browser storage per origin (per domain and protocol).

Types of Web Storage

There are two objects for storing data on the client:

window.localStorage : stores data with no expiration date and lives until removed.

window.sessionStorage : stores data for one session, where data is lost when the browser / browser tab is closed.

Since the current implementation only supports string-to-string mappings, you need to serialize and de-serialize other data structures.

You can do so using JSON.stringify() and JSON.parse().

For e.g. for the given JSON

We first convert the JSON object to string and save in the local storage:

To get the JSON object from the string stored in local storage:

Mailto Links Example

A mailto link is a kind of hyperlink ( <a href=""></a> ) with special parameters that lets you specify additional recipients, a subject line, and/or a body text.

The basic syntax with a recipient is:

More customization, adding a subject to that mail:.

If you want to add a specific subject to that mail, be careful to add %20 or + everywhere there’s a space in the subject line. An easy way to ensure that it is properly formatted is to use a URL Decoder / Encoder .

Adding body text:

Similarly, you can add a specific message in the body portion of the email: Again, spaces have to be replaced by %20 or + . After the subject paramater, any additional parameter must be preceded by &

Example: Say you want users to send an email to their friends about their progress at Free Code Camp:

Address: empty

Subject: Great news

Body: I am becoming a developer

Your html link now:

Here, we’ve left mailto empty ( mailto:? ). This will open the user’s email client and the user will add the recipient address themselves.

Adding more recipients:

In the same manner, you can add CC and bcc parameters. Separate each address by a comma!

Additional parameters must be preceded by & .

Thank you for using this HTML reference. Happy coding!

If this article was helpful, share it .

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Skip to main content
Skip to search
Skip to select language
Sign up for free
Português (do Brasil)

Introduction to HTML

At its heart, HTML is a language made up of elements , which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand HTML.

Prerequisites

Before starting this module, you don't need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up (as detailed in Installing basic software ), and understand how to create and manage files (as detailed in Dealing with files ). Both are parts of our Getting started with the web complete beginner's module.

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch .

This module contains the following articles, which will take you through all the basic theory of HTML and provide ample opportunity for you to test out some skills.

Covers the absolute basics of HTML, to get you started — we define elements, attributes, and other important terms, and show where they fit in the language. We also show how a typical HTML page is structured and how an HTML element is structured, and explain other important basic language features. Along the way, we'll play with some HTML to get you interested!

The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page <title> , links to CSS (if you want to style your HTML content with CSS), links to custom favicons, and metadata (data about the HTML, such as who wrote it, and important keywords that describe the document).

One of HTML's main jobs is to give text meaning (also known as semantics ), so that the browser knows how to display it correctly. This article looks at how to use HTML to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.

Hyperlinks are really important — they are what makes the web a web. This article shows the syntax required to make a link and discusses best practices for links.

There are many other elements in HTML for formatting text that we didn't get to in the HTML text fundamentals article. The elements here are less well-known, but still useful to know about. In this article, you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.

As well as defining individual parts of your page (such as "a paragraph" or "an image"), HTML is also used to define areas of your website (such as "the header", "the navigation menu", or "the main content column"). This article looks into how to plan a basic website structure and how to write the HTML to represent this structure.

Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help.

Assessments

The following assessments will test your understanding of the HTML basics covered in the guides above.

We all learn to write a letter sooner or later; it is also a useful example to test out text formatting skills. In this assessment, you'll be given a letter to mark up.

This assessment tests your ability to use HTML to structure a simple page of content, containing a header, a footer, a navigation menu, main content, and a sidebar.

Create designs that inspire

Trending searches, productivity, social media, fresh picks.

Celebrate an occasion

Rainbow clout white modern-geometric-&-linear

Food and drink

Treat yourself to a smoothie Orange Modern, Bold, Abstract

How it works

Image of various 3D stacked browser windows with organic elements

1. Start with the perfect template

Image of 3D browser windows and design tools

2. Customize it with help from AI

See the templates for:

Image of 3D elements and stacked web pages

3. Share your creation with the world

Purdue Online Writing Lab Purdue OWL® College of Liberal Arts

Welcome to the Purdue Online Writing Lab

Welcome to the Purdue OWL

This page is brought to you by the OWL at Purdue University. When printing this page, you must include the entire legal notice.

Copyright ©1995-2018 by The Writing Lab & The OWL at Purdue and Purdue University. All rights reserved. This material may not be published, reproduced, broadcast, rewritten, or redistributed without permission. Use of this site constitutes acceptance of our terms and conditions of fair use.

The Online Writing Lab at Purdue University houses writing resources and instructional material, and we provide these as a free service of the Writing Lab at Purdue. Students, members of the community, and users worldwide will find information to assist with many writing projects. Teachers and trainers may use this material for in-class and out-of-class instruction.

The Purdue On-Campus Writing Lab and Purdue Online Writing Lab assist clients in their development as writers—no matter what their skill level—with on-campus consultations, online participation, and community engagement. The Purdue Writing Lab serves the Purdue, West Lafayette, campus and coordinates with local literacy initiatives. The Purdue OWL offers global support through online reference materials and services.

A Message From the Assistant Director of Content Development

The Purdue OWL® is committed to supporting students, instructors, and writers by offering a wide range of resources that are developed and revised with them in mind. To do this, the OWL team is always exploring possibilties for a better design, allowing accessibility and user experience to guide our process. As the OWL undergoes some changes, we welcome your feedback and suggestions by email at any time.

Please don't hesitate to contact us via our contact page if you have any questions or comments.

All the best,

Social Media

Facebook twitter.

HTML Tutorial

Html graphics, html examples, html references, html layout elements and techniques.

Websites often display content in multiple columns (like a magazine or a newspaper).

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:

- Defines a header for a document or a section - Defines a set of navigation links - Defines a section in a document - Defines an independent, self-contained content - Defines content aside from the content (like a sidebar) - Defines a footer for a document or a section - Defines additional details that the user can open and close on demand - Defines a heading for the element

You can read more about semantic elements in our chapter.

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:

CSS framework
CSS float property
CSS flexbox

CSS Frameworks

If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap .

Ever heard about W3Schools Spaces ? Here you can create your website from scratch or use a template, and host it for free.

* no credit card required

CSS Float Layout

It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

Learn more about flexbox in our CSS Flexbox chapter.

CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Learn more about CSS grids in our CSS Grid Intro chapter.

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

HTML Structure and Presentation

GCSE Computer Science

A-Level Computer Science

GCSE Creating web pages using HTML and CSS (14-16 years)

A-Level Designing Web pages using HTML and CSS (16-18 years)

HTML Attributes

HTML Structure vs. HTML Presentation

Further Readings:

HTML Structure

Structure Rules

Document Head

Document Body

Check Your Understanding

Overview of HTML

Non-replaced elements

Replaced and void elements

Appearance of elements

Element, attributes, and JavaScript

Check your understanding

Learn HTML Basics: Introduction to HTML Structure & Elements

Table of Contents

Using Headings

Choosing the Right Heading Level

Creating a Basic Link

Linking to Email Addresses

Linking to Anchors

Unordered Lists

Ordered Lists

Nested Lists

Italic Text

Underlined Text

Strikethrough Text

Superscript and Subscript Text

Creating a Basic Table

Table Caption and Header Groups

Embedding Images

Embedding Videos

Embedding Audio

Form Structure

Input Fields

Checkboxes and Radio Buttons

Semantic Elements

Semantic Headings

Semantic Links

Q1: Is it necessary to learn HTML before learning CSS?

Q2: Can I create a website using only HTML?

Q3: Do I need any prior coding experience to learn HTML?

Q4: Can I learn HTML on my own?

Q5: Is HTML a programming language?

Q6: How long does it take to learn HTML?

Subscribe to my Newsletter

Create Bootstrap Breadcrumb Navigation | Tutorial

Create Fortnite Buttons Using HTML and CSS - Step-by-Step Guide

Create Star Rating using HTML and Bootstrap (Source Code) - Easy Guide

Creating an Engaging Author Bio Block with Avatar: HTML & Tailwind Guide

Create a Simple Datepicker with Tailwind CSS and HTML

How to Create a Scroll Down Button: HTML, CSS, JavaScript Tutorial

How to Create a Trending Animated Button Using HTML and CSS

Create Interactive Booking Button with mask-image using HTML and CSS (Source Code)

Create Shimmering Effect Button: HTML & CSS Tutorial (Source Code)

Create Your Own Bubble Shooter Game with HTML and JavaScript

Build a Number Guessing Game using HTML, CSS, and JavaScript | Source Code

Building a Fruit Slicer Game with HTML, CSS, and JavaScript (Source Code)

Create Connect Four Game Using HTML, CSS, and JavaScript (Source Code)

Creating a Candy Crush Clone: HTML, CSS, and JavaScript Tutorial (Source Code)

Create Image Color Extractor Tool using HTML, CSS, JavaScript, and Vibrant.js

Build a Responsive Screen Distance Measure with HTML, CSS, and JavaScript

Crafting Custom Alarm and Clock Interfaces using HTML, CSS, and JavaScript

Detect User's Browser, Screen Resolution, OS, and More with JavaScript using UAParser.js Library

URL Keeper with HTML, CSS, and JavaScript (Source Code)

Creating a Responsive Footer with Tailwind CSS (Source Code)

Crafting a Responsive HTML and CSS Footer (Source Code)

Create an Animated Footer with HTML and CSS (Source Code)

Bootstrap Footer Template for Every Website Style

How to Create a Responsive Footer for Your Website with Bootstrap 5

HTML Structure and Presentation

Hypertext Markup Language (HTML)

Cascading Style Sheets (CSS)

Related Theory

Related Quizzes