what is the difference between 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 and Presentation

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

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.

what is the difference between html structure and presentation

Von Neumann Architecture 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

Lecture 2 Structure: HTML Markup

Topics for today.

Semantic HTML and why it matters
The DOM tree
HTML interactivity and UX concerns
A brief, messy history of HTML (if there’s time)

This is a top level heading

Same visual presentation (though this may differ per browser), but different meaning .

Quiz: What is the difference between the following?

The visual result may be the same, but the semantics are different.
Neither is for purely decorational purposes, that's what CSS styling is for. If the italics are purely decorational, one should go with the last example, since span carries no semantic meaning.
Longer answer on MDN

Why do semantics matter?

Not everyone browsing the web is sighted, screen readers depend on semantically correct html, not everyone browsing the web is able to use a mouse, keyboard navigation depends on semantically correct html.

Focus determines where keyboard events go in the page at any given moment. It is widely understood to be the currently active element.
Try it yourself: Click on the page on the right and press Tab a few times.
By default it's rendered as a blue fuzzy outline or a dotted solid one, but the styling can change with CSS. However, it is very important that there is styling for it, as keyboard users depend on it.
Users with various disabilities use the keyboard for navigation, but also power users often prefer the keyboard, as they find it more efficient.
Introduction to Focus
Specification (WHATWG)
Focusing On Focus (WHATWG blog)

Common focusable elements

Form controls ( input , textarea , select , button )
Links ( <a href> )
Multimedia with visible controls ( <video controls> , <video controls> )
iframe (sort of)
Any element can be made focusable with tabindex ="0"
A negative tabindex attribute removes the element from the tabbing order. Avoid unless you really know what you're doing.
Avoid using tabindex values greater than 0, as they override the natural source order, which is maintenance nightmare.
An exhaustive testsuite of focusable/tabbable elements with results by browser

Use autofocus when there's a clear starting point.
Which dimension of usability does this help?

Not everyone browsing the Web is human

Software (search engines, social media sharing etc) depend on semantically correct html, not every browser is visual, machine readable content is future-proof, semantic html is easier to maintain.

article or li ?

Tables & meaning

Tabular data, semantic html.

HTML elements have meaning (except for div and span )
They should be used according to that meaning, not their sample rendering.
Semantic HTML is more accessible to users with disabilities.
Machine readable content and good hierarchy can be consumed independently of CSS and Javascript
Semantic HTML is like usability: not always straightforward — but even a little effort pays off

More accessible HTML in 2 minutes

Use the alt attribute to describe images to visually impaired users.

Document Object Model (DOM)

Trees (data structure), the dom tree.

Do not think of start and end tags as ON and OFF, like e.g. in RTF
HTML elements are objects , with a hierarchy called DOM tree (Document Object Model)
This distinction is important, as it enables CSS (and some browsers got it wrong at first!).

DOM hierarchy

Remember this.

What we wrote

What the browser generated, our dom tree.

The browser’s internal model of our HTML is called the DOM Tree
Document : This is the root node, and does not correspond to any HTML element.
HTMLElement : Every HTML element, such as html , body , or em is of this type. Usually, they merely inherit from HTMLElement , and are an instance of a more specific type such as HTMLHtmlElement , HTMLBodyElement and so on.
Text : Text nodes, such as "Hello " , "world" , and "!" in our example. These never contain any other element, they are always leaves.
Comment : HTML comments (  ) are represented by objects of this type.
This hierarchy of objects is crucial for CSS styling, as we will see in a couple lectures.
We can interact with, and manipulate the DOM tree via JavaScript!

Same content hierarchy, different DOM tree hierarchy

Css selectors & the dom.

HTML elements are objects , with a hierarchy called DOM tree
List item 2
List item 3
List item 4
List item 5
The DOM represents the hierarchy of objects in an HTML page
Each HTML element is a node
Nesting an element in another creates a parent-child relationship
The DOM tree hierarchy is different than the content hierarchy
The process of turning an HTML document into a DOM tree is called HTML Parsing
Interoperable HTML parsing is crucial for CSS & JS, and took about 25 years!

Types of DOM nodes

Document node, elem ent n odes, other types.

Comment node
Attribute node

Interactivity

Buttons & forms.

The button element creates buttons.
These buttons don’t do anything by themselves, but you can make them useful via JavaScript or form elements.
The action attribute of form elements controls which file will receive the submission. By default it's the current file.
What’s submitted? Only elements that are both enabled and have a name attribute.
target="_blank" works here too, to submit the form in a new tab

Use appropriate controls

Sometimes the differences are subtle

Multiple choices: usability tradeoffs

For < 5 options, prefer radios if there is enough space, as they are the most efficient. Users will be able immediately scan how many options they have and what each of those options are, without clicking (or typing) anything to reveal this information, and make their selection with a single click.
Between 6-20 options, <select> menus are ideal
For longer than 20 options, search time for <select> menus becomes longer than typing the first few characters. In those cases, use <input> with <datalist for autocomplete)

Two choices: Checkbox or radio?

The order of options matters too.

Focusable Hidden content
Links are focusable too
The Tab key moves focus to the next element in the tabbing order .
Form controls
Any element with a non-negative tabindex attribute
Introductiion to Focus

Reactive Templating

Editor-based approaches.

- There are languages that generate HTML as output, allowing for abstractions and automation. Some are regular fully fledged programming languages that can also be used for templating (e.g. PHP) and some are domain specific, and are designed for templating only (e.g. [Nunjucks](https://mozilla.github.io/nunjucks/)).]) - Apps manage data in machine readable form, and an important step is presenting data in human readable form. Templating has emerged as a great way to do that.

But what if the data changes?

Google sheets, css is reactive click me #glow-button { all: revert; transform: scale(3) translate(4em, -.5em); } #glow-button:hover { box-shadow: 0 0 5px gold; }, vuejs (no <v-app>), vuejs is data-first, not just clicks, simple abstractions, web apps with html.

HTML language extension that adds interactivity and storage capabilities to HTML
Developed here, in the Haystack Group at CSAIL
We will use it in assignments to be able to practice HCI before we learn JS

<body> <h1>My tasks</h1> <p>0 done of 1 total</p> <ul> <li> <input type="checkbox" /> <span>Do stuff</span> </li> </ul> </body>

<body mv-app="todo" mv-storage="local" > <h1>My tasks</h1> <p> [count(done)] done of [count(task)] total</p> <ul> <li property="task" mv-multiple > <input property="done" type="checkbox" /> <span property="taskTitle" >Do stuff</span> </li> </ul> </body>

<body mv-app="todo" mv-storage="local"> <h1>My tasks</h1> <p>[count(done)] done of [count(task)] total</p> <ul> <li property="task" mv-multiple> <input property="done" type="checkbox" /> <span property="taskTitle">Do stuff</span> </li> </ul> <button mv-action="delete(task where done)" > Clear completed </button> </body>

Try Mavo out

or just visit play.mavo.io and start coding!

A brief, messy history of HTML

1986 sgml : a meta-language to generate markup languages, with custom syntax, described by a dtd., 1989 tim berners-lee adapts ibm starter set, a markup language written in sgml, adds <a> and calls it html 1. a specification never existed., html 1 elements, 1995 ietf publishes a specification (rfc) for html 2 , using sgml properly, with a dtd. no software actually used the dtd to display html, only validators. in fact, most html documents were not valid sgml., 1995 html 3.0 adds math, figures, tables, stylesheets. ietf rejects as “too ambitious” and closes its html wg., 1997 html moves to w3c, founded by tim berners-lee. the far less ambitious html 3.2 is published standardizing what was already implemented. adds <style> and <script> reserved for future use ., 1997 html 4 deprecates presentational html, adds frames, extends forms., 1998 css starts gaining traction. dom structure becomes actually relevant. html parsing so far is undefined, and every browser does it differently., 2000 xml (extensible markup language), a more restrictive subset of sgml, becomes wildly popular as a data interchange format., 2001 xhtml 1 is published. like html4, but with xml syntax. separates parsing from semantics and makes html extensible. draconian error handling (in theory), 2004 xhtml 2: fresh start, theoretically pure vocabulary with little concern for backwards compatibility. browsers refuse to implement, lose faith in w3c, found whatwg, 2014 html 5 “paves the cowpaths”, standardizes long supported features, adds video, audio, new input types, sectioning, generated graphics, <svg>, <math>, figures, custom data-* attributes. breaks compatibility with sgml, defines its own compatibility-oriented parsing., 2018 w3c and whatwg continue to work on html 5 independently, often diverging. browsers follow the whatwg spec. on 28 may 2019, the w3c announces that whatwg would be the sole publisher of the html and dom standards..

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.

Introduction to HTML What is HTML?
The History of HTML
How HTML Works
Setting Up an HTML Development Environment
Basic HTML Structure The Structure of an HTML Document
HTML Tags and Attributes
Creating Headings and Paragraphs
Adding Images and Links
HTML Formatting and Layout Using Div and Span Elements
Applying Styles with CSS
Creating Lists and Tables
Using HTML Layout Tags
HTML Forms Creating Input Fields and Buttons
Handling User Input with Form Handling Techniques
Validating and Processing Form Data
Advanced HTML Techniques Working with Frames and iFrames
Using HTML5 Semantic Tags
Creating MultiMedia Content with Audio and Video Elements
Using HTML APIs and Web Components
Best Practices and Troubleshooting Tips for Writing Clean, Maintainable HTML Code
Common HTML Mistakes and How to Avoid Them
Debugging and Testing HTML Code
Final Project Building a Complete HTML Website
Putting All of the Skills Learned in the Course into Practice

Participants 976

The Structure of an HTML Document

Yasin Cakal

The structure of an HTML document is the foundation of any web page. It determines how the content of the page is organized and displayed, and it’s important to understand how it works in order to create professional-quality websites.

In this article, we’ll take a deep dive into the structure of an HTML document, including the basic structure, the head and body sections, and the various elements that make up a web page.

Basic Structure of an HTML Document

An HTML document is made up of a series of tags, which are used to mark up the content of the page. These tags tell the browser how to display the content, whether it’s a heading, a paragraph, an image, or a link.

Here’s the basic structure of an HTML document:

The <!DOCTYPE html> declaration tells the browser that this is an HTML document. The <html> element is the root element of the document, and it contains all of the other elements.

The <head> element is used to contain information about the document, such as the title, the style sheet, and any meta tags. The <body> element is used to contain the actual content of the page, such as headings, paragraphs, and images.

Head Section

The head section of an HTML document is used to contain information about the document, such as the title, the style sheet, and any meta tags. Here’s an example of the head section of an HTML document:

The <title> element is used to specify the title of the web page, which is displayed in the browser’s title bar or tab. The <link> element is used to link to a style sheet, which is a separate file that contains CSS rules that control the appearance of the web page. The <meta> element is used to provide additional information about the document, such as a description or keywords.

Body Section

The body section of an HTML document is used to contain the actual content of the web page. This can include headings, paragraphs, lists, images, links, and any other elements you want to include. Here’s an example of the body section of an HTML document:

In this example, we have a heading, a paragraph, and an unordered list. The <h1> element is used to create a heading, the <p> element is used to create a paragraph, and the <ul> element is used to create an unordered list. The <li> element is used to create a list item.

Elements and Attributes

HTML elements are usually written in pairs, with an opening tag and a closing tag, and the content of the tag goes in between. For example, the <h1> element is used to create a heading, and it’s written like this:

HTML also has attributes, which provide additional information about the elements. Attributes are written inside the opening tag, and they consist of a name and a value. For example, the src attribute is used to specify the source of an image, and it’s written like this:

In this example, the src attribute has a value of “image.jpg”, and the alt attribute has a value of “My Image”. The alt attribute is used to provide a text description of the image, which is important for accessibility and search engine optimization.

Block-Level and Inline Elements

HTML elements can be either block-level or inline elements. Block-level elements are elements that create a new block of content, such as headings, paragraphs, and lists. They usually take up the full width of the page and start on a new line.

Inline elements are elements that are used within the flow of text, such as links and images. They don’t create a new block of content and don’t take up the full width of the page.

Here’s an example of block-level and inline elements:

In this example, the <h1> element is a block-level element, and the <p> element is a block-level element. The <a> element is an inline element, and it’s used within the flow of the paragraph.

In this article, we looked at the basic structure of an HTML document, including the head and body sections and the various elements that make up a web page. We also explored elements and attributes, and we learned about the difference between block-level and inline elements.

By understanding the structure of an HTML document, you’ll have a solid foundation for building web pages that are well-organized, easy to read, and visually appealing. With the skills and knowledge you gain in this course, you’ll be well on your way to creating your own stunning websites.

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

What is the root element of an HTML document?

The <html> element is the root element of an HTML document.

What is the purpose of the <head> element in an HTML document?

The <head> element is used to contain information about the document, such as the title, the style sheet, and any meta tags.

What is the purpose of the <body> element in an HTML document?

The <body> element is used to contain the actual content of the web page, such as headings, paragraphs, and images.

What is the purpose of HTML attributes?

HTML attributes provide additional information about the elements. They are written inside the opening tag, and they consist of a name and a value.

True or false: Inline elements create a new block of content and take up the full width of the page.

False. Inline elements are elements that are used within the flow of text, and they don’t create a new block of content or take up the full width of the page. Block-level elements are elements that create a new block of content, such as headings, paragraphs, and lists. They usually take up the full width of the page and start on a new line.

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

Document and website structure

Overview: Introduction to HTML

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

Basic sections of a document

Webpages can and will look pretty different from one another, but they all tend to share similar standard components, unless the page is displaying a fullscreen video or game, is part of some kind of art project, or is just badly structured:

Usually a big strip across the top with a big heading, logo, and perhaps a tagline. This usually stays the same from one webpage to another.

Links to the site's main sections; usually represented by menu buttons, links, or tabs. Like the header, this content usually remains consistent from one webpage to another — having inconsistent navigation on your website will just lead to confused, frustrated users. Many web designers consider the navigation bar to be part of the header rather than an individual component, but that's not a requirement; in fact, some also argue that having the two separate is better for accessibility , as screen readers can read the two features better if they are separate.

A big area in the center that contains most of the unique content of a given webpage, for example, the video you want to watch, or the main story you're reading, or the map you want to view, or the news headlines, etc. This is the one part of the website that definitely will vary from page to page!

Some peripheral info, links, quotes, ads, etc. Usually, this is contextual to what is contained in the main content (for example on a news article page, the sidebar might contain the author's bio, or links to related articles) but there are also cases where you'll find some recurring elements like a secondary navigation system.

A strip across the bottom of the page that generally contains fine print, copyright notices, or contact info. It's a place to put common information (like the header) but usually, that information is not critical or secondary to the website itself. The footer is also sometimes used for SEO purposes, by providing links for quick access to popular content.

A "typical website" could be structured something like this:

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

Note: The image above illustrates the main sections of a document, which you can define with HTML. However, the appearance of the page shown here - including the layout, colors, and fonts - is achieved by applying CSS to the HTML.

In this module we're not teaching CSS, but once you have an understanding of the basics of HTML, try diving into our CSS first steps module to start learning how to style your site.

HTML for structuring content

The simple example shown above isn't pretty, but it is perfectly fine for illustrating a typical website layout example. Some websites have more columns, some are a lot more complex, but you get the idea. With the right CSS, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job .

This is because visuals don't tell the whole story. We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?

Note: Roughly 8% of men and 0.5% of women are colorblind; or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women. Blind and visually impaired people represent roughly 4-5% of the world population (in 2015 there were 940 million people with some degree of vision loss , while the total population was around 7.5 billion ).

In your HTML code, you can mark up sections of content based on their functionality — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screen readers can recognize those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of consequences of not using the right element structure and semantics for the right job .

To implement such semantic mark up, HTML provides dedicated tags that you can use to represent such sections, for example:

header: <header> .
navigation bar: <nav> .
main content: <main> , with various content subsections represented by <article> , <section> , and <div> elements.
sidebar: <aside> ; often placed inside <main> .
footer: <footer> .

Active learning: exploring the code for our example

Our example seen above is represented by the following code (you can also find the example in our GitHub repository ). We'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual.

Take some time to look over the code and understand it — the comments inside the code should also help you to understand it. We aren't asking you to do much else in this article, because the key to understanding document layout is writing a sound HTML structure, and then laying it out with CSS. We'll wait for this until you start to study CSS layout as part of the CSS topic.

HTML layout elements in more detail

It's good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development. You can find a lot of detail by reading our HTML element reference . For now, these are the main definitions that you should try to understand:

<main> is for content unique to this page. Use <main> only once per page, and put it directly inside <body> . Ideally this shouldn't be nested within other elements.
<article> encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post).
<section> is similar to <article> , but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries), or a theme. It's considered best practice to begin each section with a heading ; also note that you can break <article> s up into different <section> s, or <section> s up into different <article> s, depending on the context.
<aside> contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.).
<header> represents a group of introductory content. If it is a child of <body> it defines the global header of a webpage, but if it's a child of an <article> or <section> it defines a specific header for that section (try not to confuse this with titles and headings ).
<nav> contains the main navigation functionality for the page. Secondary links, etc., would not go in the navigation.
<footer> represents a group of end content for a page.

Each of the aforementioned elements can be clicked on to read the corresponding article in the "HTML element reference" section, providing more detail about each one.

Non-semantic wrappers

Sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some CSS or JavaScript . For cases like these, HTML provides the <div> and <span> elements. You should use these preferably with a suitable class attribute, to provide some kind of label for them so they can be easily targeted.

<span> is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. For example:

In this case, the editor's note is supposed to merely provide extra direction for the director of the play; it is not supposed to have extra semantic meaning. For sighted users, CSS would perhaps be used to distance the note slightly from the main text.

<div> is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site:

This isn't really an <aside> , as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). It doesn't even particularly warrant using a <section> , as it isn't part of the main content of the page. So a <div> is fine in this case. We've included a heading as a signpost to aid screen reader users in finding it.

Warning: Divs are so convenient to use that it's easy to use them too much. As they carry no semantic value, they just clutter your HTML code. Take care to use them only when there is no better semantic solution and try to reduce their usage to the minimum otherwise you'll have a hard time updating and maintaining your documents.

Line breaks and horizontal rules

Two elements that you'll use occasionally and will want to know about are <br> and <hr> .

<br>: the line break element

<br> creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:

Without the <br> elements, the paragraph would just be rendered in one long line (as we said earlier in the course, HTML ignores most whitespace ); with <br> elements in the code, the markup renders like this:

<hr>: the thematic break element

<hr> elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just looks like a horizontal line. As an example:

Would render like this:

Planning a simple website

Once you've planned out the structure of a simple webpage, the next logical step is to try to work out what content you want to put on a whole website, what pages you need, and how they should be arranged and link to one another for the best possible user experience. This is called Information architecture . In a large, complex website, a lot of planning can go into this process, but for a simple website of a few pages, this can be fairly simple, and fun!

Active learning: create your own sitemap

Try carrying out the above exercise for a website of your own creation. What would you like to make a site about?

Note: Save your work somewhere; you might need it later on.

At this point, you should have a better idea about how to structure a web page/site. In the next article of this module, we'll learn how to debug HTML .

Almost done...

Room for details

Size of the company 1-10 Employees 11-20 Employees 21-50 Employees 51-100 Employees 101-200 Employees 200+ Employees

Which services/products interest you? Google Ads Display Marketing Webdesign Lead Generation E-Mail Marketing SEO Content Writing Web Development Influencer Marketing Social Media Newsletter Scratchcard Checkout Panda - B2C Selling Weasel - B2C Digital Koala - B2C Auto Monkey - B2B Other

Accept the terms

Display Marketing
Lead Generation
E-Mail Marketing
Content Marketing
Web Development
Influencer Marketing
Social Media Marketing
Newsletter Marketing
Scratch Card
Checkout Panda - B2C
Selling Weasel - B2C
Digital Koala - B2C
Auto Monkey - B2B

Understanding HTML: The Foundation of Web Development Simplified

HTML is at the heart of web development and an essential skill for anyone wanting to delve into programming and online marketing. As a web development agency, ONELINE gives you a simple and understandable insight into the basics of HTML and explains why it is so important for the SEO of your website.

What is HTML?

HTML, or Hypertext Markup Language, is the standard markup language for creating websites and web applications . HTML allows web developers to define the structure and content of a web page by inserting elements such as headings, paragraphs, links and images. It enables the creation of hyperlinks that allow users to navigate between different pages. These elements make it possible to create a clear structure and user guidance that facilitates navigation. HTML documents are the basic building blocks of the internet and are interpreted by web browsers to deliver the visual representation of web pages to users.

How Does HTML Work? Structure, Framework, and Elements

HTML operates through the use of tags, which tell web browsers how to display content. A typical HTML document contains the <html> tag , the <head> element for metadata and scripts, and the <body> element , where the visible content of the webpage is defined. Within the body section, various tags like <p> for paragraphs, <h1> to <h6> for headings, and <a> for links can be used.

Basic HTML Elements

An HTML document always begins with the <!DOCTYPE html> tag, which specifies the document type. The basic structure of an HTML page includes <html>, <head>, and <body> tags. The <head> area contains meta information like the page’s title and links to CSS files, while the <body> area contains the visible content of the page, including texts, images, and links.

HTML is the foundation for structuring and presenting web content, using different elements to define various types of content and functionalities. To ease your start, here are some basic HTML tags introduced:

<html>: The root element that indicates it is an HTML document.
<head>: Contains meta information about the document, like the title and link tags for external resources.
<title>: Defines the title of the webpage, displayed in the browser’s title bar.
<body>: The main part of the document, containing the visible content of the page.
<h1> to <h6>: Heading tags used to structure content. <h1> represents the most important heading.
<p>: Defines a paragraph.
<a>: Stands for a hyperlink, enabling navigation from one page to another.

Besides these, many other important HTML tags are crucial for designing and functionality of web pages , including <img> for images, <b> for bold text, <div> for section containers, <table> for tables, <i> for italic text, and <ul> for unordered lists. These elements significantly extend web design possibilities by offering additional structuring and formatting options.

Structuring and Semantics

Structuring and semantically marking up content with HTML is essential for creating clearly understandable and accessible webpages . The choice of HTML tags should not only be based on their visual outcome but also consider their significance for the content. This significantly enhances the webpage’s readability for both search engines and users.

Effective structuring starts with using header tags (<h1> to <h6>) to organize content by its importance and hierarchy . For example, the <h1> tag marks the main heading of the page, which is a crucial indicator for search engines to understand the page’s main focus. Additional structural elements like <p> for paragraphs, <ul> and <ol> for lists, and <table> for tables help logically and clearly organize information on the page.

Semantic markup goes beyond mere structuring to add an additional layer of meaning to the content. Tags like <article>, <section>, <aside>, and <nav> help define the role of certain content blocks within the document. Using semantic HTML elements enhances understanding of the webpage by screen readers and search engines, and it facilitates content adaptation to different output devices, which is particularly important in responsive design .

By carefully selecting and applying HTML tags based on their semantic meaning, you ensure that your webpages are optimized for both users and search engines. This contributes significantly to improved user experience and stronger SEO performance.

Is HTML a Programming Language?

No, HTML is not a programming language but a markup language. It is used to define the structure and layout of web content. Unlike JavaScript or PHP , it does not contain logic or algorithms typical for programming languages.

What is the Difference Between HTML, CSS, and JavaScript?

HTML is used to define the structure and content of a webpage.
CSS (Cascading Style Sheets) is a stylesheet language that designs the appearance and layout of webpages, including colors, fonts, and layouts.
JavaScript is a scripting language used to create interactive elements on webpages, such as games, responses to user actions, and dynamic data updates.

These technologies work together to create modern webpages and applications, with HTML laying the foundation, CSS defining the presentation, and JavaScript adding interactivity and functionality.

Why is HTML Important for SEO?

HTML is crucial for SEO as it directly impacts how search engines index and understand your website. Properly structured HTML documents with semantically correct tags facilitate search engine crawlers in parsing page content and determining its relevance to search queries. This includes using the appropriate tags for headings, paragraphs, and other elements, as well as optimizing metadata like titles and descriptions for search queries.

Moreover, HTML is instrumental in ensuring your website is accessible and user-friendly, which are factors considered by search engines in ranking pages. By following HTML best practices, you improve both the user experience and your website’s visibility in search engine results.

Tips for Using HTML in Your SEO Strategy

Optimizing your website for search engines is a crucial step to improve the visibility and accessibility of your content on the internet. An effective SEO strategy starts with a sound application of HTML. By using HTML tags strategically, you can clearly communicate the structure of your web pages, which forms the basis for better ranking in search results. Here are some proven tips on how to optimally use HTML in your SEO strategy:

Use semantic HTML tags: This helps search engines understand the structure of your page and the significance of its content.
Optimize the <title> and <meta> tags: These elements are crucial for onpage SEO , as they are displayed in search results.
Structure your content with header tags: A logical hierarchy using <h1> through <h6> improves readability for both search engines and users.
Utilize alt texts for images: Descriptions for images (<img> tag) enhance accessibility and image search.

Understanding HTML and its application is essential for anyone involved in web development or digital marketing. It forms the backbone of web content, enabling the creation of structured, accessible, and SEO-friendly websites. As you delve into web development , mastering HTML will provide a solid foundation for exploring more complex languages and technologies, ultimately enhancing your ability to create effective and engaging online experiences.

We hope you enjoyed this blog article

If you are interested in articles like this for your business, click here.

The sitemap – vital for strong SEO

What are bugs and how to fix them?

Mobile, fast, accessible: The 7 pillars of a successful website

We use cookies to ensure the best possible experience for you and to make our communications with you relevant. Learn more

The web standards model - HTML CSS and JavaScript

Introduction.

Continuing with Web Standards Curriculum , the basic building blocks of the Web — HTML , CSS and JavaScript have been introduced. Now it’s time to dig a little deeper and to look at each of these — what they do, and how the three interact with each other to create a web site.

Why separate?

That’s usually the first question that gets asked about web standards. You can accomplish content, styling and layout just using HTML — font elements for style and HTML tables for layout, so why should we bother with this XHTML/CSS stuff? Tables for layout, etc. is how it used to be done in the bad old days of web design, and many people still do it like this (although you really shouldn’t), which is one of the reasons why we created this course in the first place. We won’t be covering such methods in this course. Here are the most compelling reasons for using CSS and HTML over outdated methods:

Efficiency of code : The larger your files are, the longer they will take to download, and the more they will cost some people to view (some people still pay for downloads by the megabyte.) You therefore don’t want to waste your bandwidth on large pages cluttered up with styling and layout information in every HTML file. A much better alternative is to make the HTML files stripped down and neat, and include the styling and layout information just once in a separate CSS file. To see an actual case of this in action, check out the A List Apart Slashdot rewrite article where the author took a very popular web site and re-wrote it in XHTML/CSS.
Ease of maintenance : Following on from the last point, if your styling and layout information is only specified in one place, it means you only have to make updates in one place if you want to change your site’s appearance. Would you prefer to update this information on every page of your site? I didn’t think so.
Accessibility : Web users who are visually impaired can use a piece of software known as a “screen reader” to access the information through sound rather than sight — it literally reads the page out to them, and it can do a much better job of helping people to find their way around your web page if it has a proper semantic structure, such as headings and paragraphs. In addition keyboard controls on web pages (important for those with mobility impairments that can't use a mouse) work much better if they are built using best practices. As a final example, screen readers can’t access text locked away in images, and find some uses of JavaScript confusing. Make sure that your critical content is available to everyone.
Device compatibility : Because your HTML/XHTML page is just plain markup, with no style information, it can be reformatted for different devices with vastly differing attributes (eg screen size) by simply applying an alternative style sheet — you can do this in a few different ways (look at the [ mobile articles on dev.opera.com ] for resources on this). CSS also natively allows you to specify different style sheets for different presentation methods/media types (eg viewing on the screen, printing out, viewing on a mobile device.)
Web crawlers/search engines : Chances are you will want your pages to be easy to find by searching on Google, or other search engines. A search engine uses a “crawler”, which is a specialized piece of software, to read through your pages. If that crawler has trouble finding the content of your pages, or mis-interprets what’s important because you haven’t defined headings as headings and so on, then your rankings in relevant search results will probably suffer.
It’s just good practice : This is a bit of a “because I said so” reason, but talk to any professional standards-aware web developer or designer, and they’ll tell you that separating content, style, and behaviour is the best way to develop a web application.

Markup, the basis of every page

HTML and XHTML are markup languages composed of elements, which contain attributes (some optional and some mandatory.) These elements are used to mark up the various different types of content in documents, specifying what each bit of content is supposed to be rendered as in web browsers (for example headings, paragraphs, tables, bulleted lists etc.)

Elements define the actual content type, while attributes define extra information about those elements, such as an ID to identify that element, or a location for a link to point to. You should bear in mind that markup is supposed to be as semantic as possible, ie it is supposed to unambiguously describe the function of the content. Figure 1 shows the anatomy of a typical element.

Figure 1: Anatomy of an (X)HTML element.

With that in mind, just what is the difference between HTML and XHTML?

What is XHTML?

HTML is the oldest web language, and the most common one you'll find on the web - it is a bit more forgiving in terms of strict syntax rules. XHTML on the other hand is a reformulation of HTML as an XML vocabulary, XML being a separate markup language with much stricter syntax rules. The difference between XHTML and HTML doesn't really matter so much any more, unless you find youself working in a web team in the future that has coding guidelines that favour one style or another. If you are using HTML5, which we will be doing throughout this course, then you are free to use HTML or XHTML syntax. Choose whatever you are most comfortable with, as long as you stick to the best practices outlined in the course.

Table 1 shows the main syntax differences between HTML and XHTML.

Table 1: Differences between HTML and XHTML.

Validation, what’s that?

Because HTML/XHTML are standards (and CSS too, for that matter), the World Wide Web Consortium (W3C) has created great tools called validators to automatically check your pages for you, and point out any problems/errors your code might have, such as missing closing tags or missing quotes around attributes. The HTML validator is available online . It will automatically detect whether you’re using HTML or XHTML, and which doctype you’re using. If you want to check out your CSS, there is also a CSS validator available . You can also find a special HTML5 validator online, which tends to be more up to date than the W3C one, as far as HMTL5 is concerned.

For more information on validation, see Validating your HTML . For more information on doctypes, see Choosing the right doctype for your HTML documents .

CSS — let’s add some style

Cascading Style Sheets gives you fine control over the formatting and layout of your document. CSS works on a system of rules, which select the elements you want to style, and then set values for different properties of the elements. You can change or add colors, backgrounds, font sizes and styles, and even position things on your web page in different places. Here is an example CSS rule:

Now any content enclosed within <p></p> tags will have double the line height, and be colored green.

The example below will give you more of an idea of how CSS styles HTML; we’ll start looking at CSS in way more detail in CSS basics .

JavaScript — adding behaviour to web pages

Finally, JavaScript is the scripting language that you use to add behaviour to your web pages — it can be used to validate the data you enter into a form (tell you if it is in the right format or not), provide drag and drop functionality, change styles on the fly, animate page elements such as menus, handle button functionality, and a million other things. Most modern JavaScript works by finding a target HTML element, and then doing something to it, just like CSS, but the way it operates, the syntax etc. is rather different.

JavaScript is a more complicated and expansive subject than HTML and CSS, so to keep things simple and avoid confusion at this stage, I won’t be discussing it in the below example. In fact, you won’t be looking at JavaScript in this course again until Programming - the real basics .

An example page

There are a lot of details I haven’t covered here, but we’ll get through everything during this web design course! For now, I’ll present you with a real page example, just to give you a taste of what you’ll be working with in the rest of the articles.

The example I present below is a references page, which you could use to cite references at the end of say, a psychology essay on the group dynamics of a web development team, or a report for work on broadband Internet use in the United States. Please note, that if you’re a stickler for strict academic writing, this example shows APA formatting (I had to pick one) download the example code .

I’m not going to dissect this file line by line, as you’ll see many examples in future articles, however, a few major things to take note of are as follows.

Line 1 is what’s called the document type declaration, or doctype. In this case, the page is an HTML5 page. The original idea of doctypes was to specify a set of rules that your markup has to follow, and can be validated against, but in actual fact all it really does is to make your browser render the page properly, in what is called "standards mode". The HTML5 doctype is therefore the shortest sequence of characters that will do this. See Choosing the right doctype for your HTML documents for more on doctypes.

Lines 5 to 7 import a CSS file into the page — the styles contained in this file will be applied to the various elements on the page. You’ll see the content of the CSS file that handles all of the formatting for the page in the next section. I’ve assigned a different class to each of the different types of reference. Doing this lets me apply a different style to each type of reference — for instance in our example I’ve put a different color to the right of each reference to make it easier to scan the list.

The page looks like Figure 2 without the CSS applied:

Figure 2: the raw HTML, without any CSS styling

Now let’s take a look at the CSS that styles the HTML.

I went a little overboard with styling up this page, adding some neat background effects in order to show you some of the things that can be accomplished using CSS.

Line 1 sets some defaults for the document such as text and background color, width of border to add around the text, etc. Some people won’t bother to explicitly state defaults like these, and most modern browsers will apply their own defaults, but it is a good idea, as it allows you more control over how your web site will look across different browsers.

On the next line I’ve set the page to be 800 pixels wide (although I could have specified a percentage here to have the page expand/contract based on the size of the browser window. The margin setting I’ve used here will ensure that the page content stays centered in the window.

Next let’s turn our attention to the background images used in the page (these are applied using the background: url declarations.) I’ve got 3 different background elements on this page. The first is a gradient that tiles across the top of the page giving us the nice blue fade. Second, I’ve used a semi-transparent PNG for the pen graphic in order to provide enough contrast with the text above it and to pick up the gradient (semi-transparent PNG images don’t work in Internet Explorer 6 or below, but they work in pretty much every modern browser; see Dean Edward's IE-fixing JavaScript for an IE6 solution to this issue, which also fixes some of IE6’s CSS support issues.)

Finally, I’ve used another semi-transparent PNG for the background of our page heading. It gives the heading a little added contrast, and provides a neat effect.

The fully styled example looks like Figure 3.

Figure 3: The finished example with styles applied.

The reality of it all

Something you should bear in mind when learning web standards is that what we are working towards here is an ideal. It would be so much easier if all web designers and developers used modern web standards and best practices to build web sites, and all browsers in use today supported web standards perfectly. Unfortunately, neither is true - for a start, the web professionals making web sites today have learned how to do so in many different ways, and at many different times. Some are still making web sites using bad practices like tables and spacer gifs, which is what most of us used to do back in the late nineties. Most web professionals taught themselves, and even those of us who did do an official qualification of some kind did not necessarily get taught "the right way" to do things. Many of the university and college courses out there are ...shall we say... behind the times.

If you talked to many of those who do things using the old methods about updating their skill set, they would probably say "why bother - my way works, and I don't have time to learn new skills, so I'm just sticking to what I know." You can understand this argument, but if they could just take the time to update their skills, I'm sure they would find creating cross browser web sites and maintaining their code a lot easier. They would also get better accessibility and SEO thrown into the bargain. For now, I'd advise those of you learning to do things right from the start with courses like this to carry on doing what you are doing! Also, if you get the chance to pass on some of these modern best practices to others, then you will be doing the Web a favour.

And in terms of web browser support, all modern browsers now support HTML, CSS and JavaScript really well. The problem lies in legacy support for old versions of Internet Explorer - IE 6, 7 and 8 still have significant usage figures, so you may still be called upon to support these in web projects. You can work around lack of support for various features, and sometimes lack of support will mean a lesser (eg, it may not look as nice) experience that still works ok, rather than the site not working at all. This may still be fine, depending on your particular situation.

We'll include more details on what to do with older browser support in subsequent chapters.

There is nothing mystical about HTML, CSS and JavaScript. They’re simply an evolution of the web. If you’ve already had some exposure to HTML, there is nothing to “unlearn”. Everything you know is still relevant, you’ll just have to handle certain things a different way (and be a little more careful in your markup).

Aside from getting the satisfaction of a job well done, web standards development just makes sense. The counter-arguments to developing with standards is that it’s time consuming and a pain in the neck having to make a layout work across browsers. The opposite argument could be applied to making a non-standards-based layout work across a range of devices and with future browser versions. How can you be certain that your hobbled-together markup will display at all in future versions of Opera, Firefox, Safari, Chrome, Internet Explorer, etc.? You can’t, unless you follow the rules.

Exercise questions

What’s the difference between a class and an ID?
What role do XHTML, CSS and JavaScript each play on a web site?
Add an icon for each of the different reference types (a different icon for articles, books and web resources). Create your own icons for this purpose, and make them appear alongside the different reference types using CSS alone.
Hide the copyright notice at the bottom of the page.
Change the look of the title, make it distinctive.
What sorts of things could you do to the CSS to make this example work well on a mobile phone browser?

Note: This material was originally published as part of the Opera Web Standards Curriculum, available as 4: The Web standards model - HTML, CSS and JavaScript , written by Jon Lane. Like the original, it is published under the Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

Next: Web Design Concepts: Information Architecture - planning out a web site

Toggle limited content width

Learn CSS vs. HTML: What’s the Difference?

Jason Gilmore writes on September 14, 2022

When you start learning about web development, some of the first terms you’ll come across are HTML and CSS. What’s the difference between them and how do they play a role in building websites?

We’ll dive deeper into these two languages later on, but here are the basics: HTML is a markup language for creating the structure of a web page, and CSS is a style sheet language for designing the look and feel of a web page. You’ll typically use the two languages together to build websites.

In this post, we’ll cover the key difference between HTML and CSS. We’ll also discuss how both languages work together to form the content and presentation layers of a website or web application.

What is HTML?

Hyper-text markup language (HTML) is a markup language that’s used to describe the structure and content of a website or web application. A single HTML file contains many different elements, such as headers, paragraphs, tables, lists, and more. Each element has an opening and closing tag, and elements can contain different attributes and properties.

HTML documents consist of a tree structure: the root <html> tag branches out into child tags like the header <head> , body <body> , and footer <footer> of the page. Then these elements can have individual headings ( <h1> , <h2> , etc), paragraphs ( <p> ), and so on. Hyperlinks (the anchor <a> tag) can also be used to link web pages or HTML documents to each other, forming the larger structure of a website.

There are over 100 different HTML tags that browsers can parse to display a web page. That said, you don’t need to memorize all of them to become a front-end web developer. As you continue working with HTML to build more websites and web apps you’ll start to learn the most commonly used tags.

For more information about working with different HTML elements, see the Treehouse course library related to HTML .

Features of HTML

HTML offers over 100 tags to define the basic elements of a web page
The markup language is supported by all major web browsers running on any OS
HTML uses a tree structure to organize the content of a web page
An important aspect of HTML is using links to connect multiple pages into a website
Most front-end developers find HTML easy to learn and understand

What is CSS?

The cascading style sheet (CSS) language is another front-end development tool that’s used to define the look and feel of a website. A CSS file (or inline CSS embedded into an HTML file) contains individual style attributes, such as font sizes, colors, layout, and more. These are applied to different HTML elements based on CSS selectors and declarations.

CSS code can start to get complicated once you start applying different styles for various devices, screen sizes, resolutions, and more. In addition, one of the greatest challenges with CSS is that it is not uniformly supported by different web browsers like Firefox, Safari, and Chrome. That means a web page with the same stylesheet might not look the same on different devices or web browsers.

For more information about using CSS to design web pages, see the Treehouse course library related to CSS .

Features of CSS

CSS offers a range of different declarations and properties for styling pages
The primary advantage of CSS is separating the design from the content of a web page
CSS can be linked to HTML through multiple methods: inline, internal, or external.
Selectors enable you to target any element or group of elements in an HTML file
CSS declarations use a key-value pair format to define different style properties

HTML vs CSS

Key differences between html & css, link css to html.

As you can see, CSS and HTML each serve a very different purpose when building a webpage or website. HTML is used to create the content or structural layer, while CSS is used to create the presentation layer. By keeping these two layers separate, it’s much easier to build and maintain a website.

That said, there are multiple ways that CSS can be linked to CSS:

Inline: By using a style attribute within any HTML tag, we can add CSS code directly to an element. This is useful for very specific style changes to only one element, but this can get messy if used often throughout a large website.
Internal: By using the <style> tag in the page head section, we can add CSS code to a web page. The advantage of using this method is that all of the CSS code for the page is grouped together in one location for easier reference.
External: Instead of putting the CSS code directly in the page head section, we can also add a link to an external CSS file. This allows us to reference the same stylesheet from multiple web pages to leverage the CSS code across a large website.

A Basic Example of CSS and HTML

Here’s a couple quick code snippet to show you the basics of HTML and CSS and how they interact with each other:

<p class=”class-example”>This is a paragraph</p>

In this example, you can see that we’ve used HTML to define a paragraph element with the <p> tag. Our paragraph also has a class attribute with a value of “class-example” so that all the relevant style declarations from that class are applied to it.

Here’s what the CSS for a style declaration for that class could look like:

p.class-example { color: blue; }

This CSS code uses a selector to identify any paragraph element with a class attribute containing my “class-example” and sets its text color to blue. The curly braces can include any number of properties to define how “class-example” paragraphs should look.

The advantage of separating the style from the structure is that the same CSS declaration could be used across multiple web pages or even an entire website. This not only reduces the amount of code a website requires, but also makes it easier to maintain consistency as the site grows.

Where Does JavaScript Fit In?

A third aspect of modern front-end development we haven’t covered in this article is turning a static HTML-based website into a dynamic web app. This behavior layer is built with JavaScript because HTML and CSS aren’t full programming languages, but rather markup and style sheet languages.

JavaScript brings new functionality to a website or web app by making it more dynamic. This includes navigation, buttons, search bars, forms, and other interactive elements that improve the user experience. HTML, CSS, and JavaScript are all critical languages for building a modern web app.

Learn Coding Fundamentals With Treehouse

We’ve covered a lot in this post, but the most important thing to remember is that HTML and CSS play different roles in building a modern web page. HTML defines the structure of the page, while CSS defines its look and feel. Both languages — as well as JavaScript — are crucial for creating a great user experience for a website or web app.

When you get started with front-end web development, you’ll most likely want to learn all three languages at the same time because they complement each other. This may sound intimidating, but most coding students find HTML and CSS very easy and straightforward to pick up. And with the right front-end development courses, you’ll have the resources you need to set yourself up for success.

As part of our Front End Web Development Track , you’ll learn the ins and outs of HTML, CSS, and JavaScript. This guided curriculum starts with the basics of HTML and CSS before moving on to JavaScript and responsive, mobile-first web design. You can also learn about more advanced topics like web accessibility and performance optimization.

If you want to take this a step further, our Front End Web development Techdegree is an online certification program that gives you the real-world experience you need to land a front end development job.

GET STARTED NOW

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

You must be logged in to post a comment.

Are you ready to start learning?

Introduction to HTML and CSS

Foundations course, introduction.

So here it is: it’s time to actually start making things . This section will teach you the basics of HTML and CSS, the two foundational building blocks of pretty much everything on the web.

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

Get a basic overview of HTML, CSS and how they work together.

HTML and CSS

HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!

Many great resources out there keep referring to HTML and CSS as programming languages , but if you want to get technical, labeling them as such is not quite accurate, because they are only concerned with presenting information. They are not used to program any logic. JavaScript, which you will be learning in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. The following lessons focus on giving you the tools you need to be successful once you get to the JavaScript content as you continue through our curriculum!

Read HTML vs CSS vs JavaScript . It’s a quick overview of the relationship between HTML, CSS, and JavaScript.

Knowledge check

This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.

What do HTML and CSS stand for?
Between HTML and CSS, which would you use for putting paragraphs of text on a webpage?
Between HTML and CSS, which would you use for changing the font and background color of a button?
What is the difference between HTML, CSS and JavaScript?

Additional resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

This FreeCodeCamp article goes into a little more depth than the assigned one. It covers things we’ll be teaching explicitly in later lessons though, so don’t worry about memorizing any of the details.

Bookmark DevDocs.io . Read the “Welcome” message. Massive API documentation collection that even works offline. An essential collection of reference material for everything covered and more. (Maintained by FreeCodeCamp )

Support us!

The odin project is funded by the community. join us in empowering learners around the globe by supporting the odin project.

Session 01 - The Internet, World Wide Web, Web Browsers, Web Sites, and HTML

Harvard Extension School Spring 2021

Course Web Site: https://cscie12.dce.harvard.edu/

The Internet and the World Wide Web

A web site over time, components of the web, client-side web parts: markup, style, function, html introduction, markup evolution and standards, html/sgml/xml — what's the difference, file management, relative urls, url to filename mapping.

Session 01 - The Internet, World Wide Web, Web Browsers, Web Sites, and HTML, slide1 The Internet and the World Wide Web, slide2 The Internet: Schematic, slide3 Types of Traffic on the Internet, slide4 Tim Berners-Lee on The World Wide Web, slide5 Features of the World Wide Web, slide6 Approaching the Web, slide7 A Web Site over Time, slide8 A Web Address - URLs (and URIs), slide9 Components of the Web, slide10 Client-side Web Parts: Markup, Style, Function, slide11 Our Solar System: Markup, slide12 Our Solar System: Markup + Style, slide13 Our Solar System: Markup + Style + Function, slide14 HTML Introduction, slide15 Markup - HTML, slide16 Essential HTML5 Document Structure, slide17 Components of HTML Elements, slide18 Elements, Start Tags, Attributes and values, End Tags, Content, slide19 Markup Evolution and Standards, slide20 Benefits of Web Standards, slide21 HTML/SGML/XML — What's the Difference?, slide22 A Tale of Two Documents, slide23 HTML5, slide24 Most commonly used or seen elements, slide25 Page Structure - header, main, footer, slide26 HTML5 Document Template, slide27 File Management, slide28 Relative URLs, slide29 Absolute and Relative Locations, slide30 Relative Paths to Parent Locations, slide31 URL to Filename Mapping, slide32 Directory Requests and "index.html", slide33

Presentation contains 33 slides

Image from Opte Project and is used under the Creative Commons Attribution-NonCommercial 4.0 International License.

The Internet: Schematic

Types of Traffic on the Internet

HTTP, HTTPS
HTTP, RTMP, RTSP
SMTP, IMAP, POP

Tim Berners-Lee on The World Wide Web

Suppose all the information stored on computers everywhere were linked. Suppose I could program my computer to create a space in which everything could be linked to everything. Tim Berners-Lee

The irony is that in all its various guises -- commerce, research, and surfing -- the Web is already so much a part of our lives that familiarity has clouded our perception of the Web itself. Tim Berners-Lee in Weaving the Web (1999)

The Web evolved into a powerful, ubiquitous tool because it was built on egalitarian principles and because thousands of individuals, universities and companies have worked, both independently and together as part of the World Wide Web Consortium, to expand its capabilities based on those principles. Tim Berners-Lee in Long Live the Web (Scientific American, Nov/Dec 2010)

Today, and throughout this year, we should celebrate the Web’s first 25 years. But though the mood is upbeat, we also know we are not done . We have much to do for the Web to reach its full potential. We must continue to defend its core principles and tackle some key challenges . Tim Berners-Lee in Welcome to the Web's 25 Anniversary (2014)

What is Tim Berners-Lee up to today? He's concerned about personal data sovereignty -- and has software and a company to help address it.

Features of the World Wide Web

HyperText Information System
Cross-Platform and Cross-Device ...then and now
263 million unique domains, 196 million active sites, and 10.5 million "web-facing" computers ( Netcraft Web Server Survey , December 2020)
HTML, CSS, JavaScript, HTTP, TCP/IP
Mozilla, WebKit, Apache HTTP Server, JavaScript, PHP, Python, etc.
Information, Shopping, Banking, Communication, Finance, Business, etc.
Dynamic, Interactive, Evolving

Approaching the Web

Variety of users, devices, platforms, connection speeds, displays, web browsers, browser settings, and languages
Open Standards and Open Source
Common expectations for user experience

The White House website over time ( www.whitehouse.gov ).

News, Informational

Page background image
"Virtual" Library
Image icons as links

Good Morning / Good Evening
Header image larger and is a photo
Image icons for different areas

Two columns
Descriptioins with categories
Promotion of items to home page under "What's New" and "Site News"

Major redesign
Horizontal site navigation
Footer navigation
Left-side policies, news
Main content is news stores

Information density increase
Additional left-side categories
Visual news items

Removal of fancy script font in images
Simplified imagery in header
left-side items built out and more spaced

New administration
Visual top stories (rotating 4)
Mega footer

Increased density
Presence of social media links - Facebook, YouTube, Twitter, Vimeo, Flickr, iTunes, MySpace, LinkedIn

Top stories now primary and secondary; no longer rotating
Increased number of images displayed
Social media are now icons only and includes Instagram, GooglePlus; others have gone
Footer links are now blue

Decreased density (?)
Featured stories are primary, secondary, tertiary. Every item has an image

Mega footer goes away
Header menu popout/dropdown (pancake icon)
Visible header categories issue-oriented
Twitter Tweets are now content

No top menu items are visible; only pancake menu
Big first image not associated with a story
Contrast / Text Size controls

Screenshots from my collection and from Internet Archive Wayback Machine

A Web Address - URLs (and URIs)

URL/URI https://www.archives.gov/historical-docs/voting-rights-act

Scheme https ://www.archives.gov/historical-docs/voting-rights-act
Host https:// www.archives.gov /historical-docs/voting-rights-act
Path https://www.archives.gov /historical-docs/voting-rights-act

Aside: Names and Locations: URLs, URIs, and URNs

URL : Uniform Resource Locator
URN : Uniform Resource Name

A book example ("Leadership in Turbulent Times" by Doris Kearns Goodwin).

urn:isbn:978-1476795928 - Uniquely identifies by "name"
https://www.barnesandnoble.com/w/leadership-doris-kearns-goodwin/1128008541?ean=9781476795928#/ - URL, "L" is for "Location"; tells you were something is "at"

Both are "URIs" one is a URN and the other is a URL.

1. HTTP Client

2. http server.

Network connecting HTTP client with server.

Presentation
Manipulations

Our Solar System: Markup

Our Solar System: Markup + Style

Our Solar System: Markup + Style + Function

solarsystem.css

Markup - HTML

How a browser displays it.

How Your Browser Thinks About It

Essential HTML5 Document Structure

Components of HTML Elements

Element Name
Attribute and Value Pairs

A Hypertext Link

Markup for a Hypertext link:

Start Tag <a href="http://www.harvard.edu/"> Harvard</a>

Element Name < a href="http://www.harvard.edu/">Harvard</a>

Attribute <a href ="http://www.harvard.edu/">Harvard</a>

Attribute Value <a href=" http://www.harvard.edu/ ">Harvard</a>

Content <a href="http://www.harvard.edu/"> Harvard </a>

End Tag <a href="http://www.harvard.edu/">Harvard </a>

Elements, Start Tags, Attributes and values, End Tags, Content

Element names.

Element names are defined by the HTML5 Standard

In our "skeleton" document, we've already encountered the html , head , title , meta , body elements.

Attributes and Values

Not all elements will have attributes
Some start tags will have more than one different attributes defined. For example: <link rel="stylesheet" href="styles/site.css" />
Not all elements will have "content". These are often called "empty". Examples include: br , img , link , meta
Content can be text
Content can be other elements
For empty elements, the end tag is part of the start tag! For example: <img src="images/harvard-shield.png" alt="Harvard Veritas Shield" />
Some end tags are optional. But more about this later.

Markup Standards

HTML5 HTML 5 Living Standard (WHATWG), (work on-going)
XHTML 1.0 , a reformulation of HTML 4.01 into XML 1.0 January 2000, revised August 2002
HTML 4.01 , December 1999
HTML 4.0 , December 1997
HTML 3.2, January 1997
HTML 2.0, November 1995

Benefits of Web Standards

Nu Html Checker https://validator.w3.org/nu/
Style (CSS)
Function (JavaScript)
People (Section 508, WAI)
Search Engines
Forward-compatible and backward-compatible.
lighter, cleaner pages
easier maintenance
easier redesign

" Postel's Law " or the " Robustness Principle "

Main differences between HTML/SGML and XML:

Best Practices for Starting Out

Use start and end tags, even if optional
Lower case element and attribute names
Use quotes around attribute values
Preference note: David prefers the "XML" syntax, but that's a preference, not a mandate; also it is a preference not shared by everyone.

A Tale of Two Documents

Cleaner version of sgml/html syntax.

Of course, you can use the SGML/HTML syntax and write HTML that looks better. Just because the syntax allows you shorten things and leave out things, doesn't mean you have to. Like this:

Markup Document (SGML/HTML syntax)
Validate with Nu Html Checker

More information: HTML5 Living Standard from the WHATWG . Section 4 contains the List of elements in HTML .

I've highlighted the 23 elements that you will use and/or see most commonly.

h1 , h2 , h3 , h4 , h5 , h6

Most commonly used or seen elements

How to find out more about them? Two places that I would start are:

Page Structure - header, main, footer

First, recall the basic document structure:

header, main, footer

MDN HTML elements reference: header , main , footer .

HTML5 Document Template

Create a directory or folder for your class work.
Create a "playground" area where you can play.
Assignments - unzip/extract the materials, then move into your class work folder

For Web Sites

Use folders or directories to help organize files. Recommendation is to adopt folder names of styles (for CSS files), scripts (for JavaScript files, and images (for images).
Use index.html filename as appropriate
Prefer filenames that only have lowercase, numeric, underscore or dashes (e.g. avoid spaces, and other things like !@#$%^&*(){}\|?/>

URL https://www.archives.gov/historical-docs/voting-rights-act

Absolute and Relative Locations

Where does https://summer.harvard.edu/ go to?
How about /images/mug.png ?
What about ../styles/site.css ?

Relative locations (URLs) are resolved according to the location (URL) of the containing (starting) document!

Absolute or Fully Qualified URLs

Absolute, or fully-qualified, URLs specify the complete information (scheme, host, port, path).

https://news.harvard.edu/gazette/story/2020/07/public-health-experts-unite-to-bring-clarity-to-coronavirus-response/

Relative or Partial URLs

Relative, or partial, URIs specify partial information. The information not provided is resolved from the current location.

<a href="slide2.html">Slide 2</a>

Relative to Server Root

Is this relative or absolute? Scheme, host, and port would be resolved from current location, but path is absolute

<a href="/copyright.html">copyright information</a>

Relative Paths to Parent Locations

../ refers to the parent directory
./ refers to current directory

Relative links are "transportable":

User directories in a shared environment

Web documents for each user are kept in the user's home directory, in a directory typically named public_html . As an example, for the user jharvard whose home directory is /home/courses/j/h/jharvard

Document Root

The Web documents are typically kept under a single directory, traditionally named htdocs . The full path to this directory is called the "document root" of the Web server, for example, /www/htdocs .

Directory Requests and "index.html"

URL paths that map to a directory. For example the request: http://www.madeupschool.edu/museums/ would return the index.html page in the museums directory.

HTML Tutorial
HTML Exercises
HTML Attributes
Global Attributes
Event Attributes
HTML Interview Questions
DOM Audio/Video
HTML Examples
Color Picker
A to Z Guide
HTML Formatter

Difference between HTML and HTML5

HTML5 Semantics
HTML header Tag
HTML5 <aside> Tag
HTML5 <footer> Tag
HTML5 <summary> Tag
HTML5 <details> Tag
HTML5 <dialog> Tag
HTML 5 <bdi> Tag
HTML5 rt Tag
HTML5 <meter> Tag
HTML 5 <progress> Tag
HTML5 date attribute in <input> Tag
HTML5 rp Tag
HTML <mark> Tag
HTML5 figure Tag
HTML5 figcaption Tag
HTML5 fieldset Tag
HTML5 | Mathematical operators
HTML5 Game Development | Infinitely Scrolling Background
HTML5 translate Attribute
HTML | dropzone Attribute
HTML5 <ruby> Tag
HTML 5 <wbr> Tag

HTML stands for Hyper Text Markup Language . It is used to design web pages using a markup language. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within the tag which defines the structure of web pages. This language is used to annotate (at the note for the computer) text so that a machine can understand it and manipulate text accordingly.

Features of HTML:

It allows the creation of hyperlinks with the <a> tag, connecting different web pages.
Uses tags to mark elements and content, such as headings ( <h1> to <h6> ).
It supports embedding images ( <img> ), videos ( <video> ), and audio ( <audio> ) for multimedia content.
It provides form elements like <form> , <input> , and <button> for user input and data submission.
Semantic tags like <article> , <section> , and <nav> for better document structure and accessibility.

HTML 5 is the fifth and current version of HTML. It has improved the markup available for documents and has introduced application programming interfaces(API) and Document Object Model(DOM). It has introduced various new features like drag and drop, geo-location services

Features of HTML5:

Introduced new semantic elements like <header> , <footer> , <section> , and <article> for improved structure.
Enhances multimedia capabilities with native support for audio and video elements.
Provides the localStorage API, allowing web applications to store data locally on the user’s device.
Enables websites to access a user’s geographical location.
Uses SQL database to store data offline.

There are many HTML elements which have been modified or removed from HTML5. Some of them are listed below:

Many new elements are added in HTML5 like nav, audio, figcaption, progress, command, time, datalist, video, figure, meter, data, section, time, aside, canvas, summary, rp, rt, details, wbr, header, footer, keygen, embed, article, hgroup, bdi, mark, output, source, track, section, ruby and many more.

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples .

Please Login to comment...

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

HTML Tutorial

Html graphics, html examples, html references, html elements.

An HTML element is defined by a start tag, some content, and an end tag.

The HTML element is everything from the start tag to the end tag:

Examples of some HTML elements:

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

Nested HTML Elements

HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements ( <html> , <body> , <h1> and <p> ):

Example Explained

The <html> element is the root element and it defines the whole HTML document.

It has a start tag <html> and an end tag </html> .

Then, inside the <html> element there is a <body> element:

The <body> element defines the document's body.

It has a start tag <body> and an end tag </body> .

Then, inside the <body> element there are two other elements: <h1> and <p> :

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1> :

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p> :

Never Skip the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

However, never rely on this! Unexpected results and errors may occur if you forget the end tag!

Empty HTML Elements

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p> .

The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.

At W3Schools we always use lowercase tag names.

HTML Exercises

Test yourself with exercises.

Insert the correct end tag for the HTML heading.

Start the Exercise

HTML Tag Reference

W3Schools' tag reference contains additional information about these tags and their attributes.

For a complete list of all available HTML tags, visit our HTML Tag Reference .

Video: HTML Elements

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]

Difference Between XML and HTML

Key Differences between XML vs HTML

XML is an abbreviation for Extensible Markup Language, whereas HTML stands for Hypertext Markup Language.
XML mainly focuses on the transfer of data, while HTML focuses on the presentation of the data.
XML is content-driven, whereas HTML is format-driven.
XML is case-sensitive, while HTML is case-sensitive.
XML provides namespace support, while HTML doesn’t provide namespace support.
XML is strict for the closing tag, while HTML is not strict.
XML tags are extensible, whereas HTML has limited tags.
XML tags are not predefined, whereas HTML has predefined tags.

Here, I have analyzed the difference between XML and HTML and will comprehensively evaluate their pros and cons.

What is XML?

XML is a markup language that is designed to store data. It is popularly used for the transfer of data. It is case-sensitive. XML offers you the ability to define markup elements and generate customized markup language. The basic unit in XML is known as an element. The extension of XML files is.xml.

What is HTML?

HTML is the markup language that helps you create and design web content . It has a variety of tags and attributes for defining the layout and structure of the web document. It is designed to display data in a formatted manner. An HTML document has the extension .htm or .html.

You can edit HTML code with any basic code editor , even Notepad. The edited code can be executed in any browser. Browsers render the tags used and present the content you want to display, with or without applied formatting.

What is the Difference between XML and HTML?

The key difference between XML and HTML is that XML is a framework for specifying markup languages (stores and transfers data). In contrast, HTML is a predefined markup language (describes the structure of a webpage).

Features of XML

Reflecting on my work, I have noted the following features of XML:

XML tags are not predefined. You need to define your customized tags.
XML was designed to carry data, not display that data.
The markup code of XML is easy for humans to understand.
A well-structured format makes it easy to read and write from programs.
XML is an extensible markup language like HTML.

Features of HTML

I have worked extensively with HTML, and here are its main features:

It is a simple language that supports the authoring of web pages.
Rich enough to provide support for multimedia embedding in documents
Flexible enough to support hypertext linking

Example of XML

Example of html, difference between xml and html.

Here is the difference between XML and HTML, from my own experience:

Advantages of XML

Here, as I have personally noted, are the significant advantages of XML :

Makes documents transportable across systems and applications. With the help of XML, you can exchange data quickly between different platforms.
XML separates the data from HTML.
simplifies the platform change process.

Advantages of HTML

Here are some benefits of the HTML language that I have discovered:

HTML document browser interfaces are simple to build.
It works across a system that is otherwise unrelated.
HTML is easy to understand because it has a very simple syntax.
You can use many tags to make a webpage.
Allows you to use various colors, objects, and layouts.

Disadvantages of XML

Based on my knowledge, here are a few shortcomings of XML:

XML requires a processing application.
The XML syntax is very similar to other alternative ‘text-based’ data transmission formats, which is sometimes confusing.
There is no intrinsic data type support.
The XML syntax is redundant.
Does not allow the user to create his tags.

Disadvantages of HTML

Here, from my experience, are a few drawbacks of HTML:

HTML lacks syntax checking and structure.
HTML is not suitable for data interchange.
HTML is not context-aware.
HTML doesn’t allow us to describe the information content or the semantics of the document.
HTML is not object-oriented, so it is not an extensible and very unstable language.
Data storage and interchange are not possible using HTML.

Version History of HTML and XML

History of HTML

History of XML

How to Choose Between XML and HTML

In my view, XML and HTML serve distinct purposes beautifully; XML facilitates data transportation with its flexibility in tag creation, while HTML excels in presenting data on the web with predefined tags, enhancing the ease of use.

Perl Tutorial: Variable, Array, Hashes with Programming Example
WebPagetest API Tutorial with Example
Difference Between Waterfall vs Spiral and Incremental Model
Capability Maturity Model (CMM) & it’s Levels in Software Engineering
Incremental Model in SDLC: Use, Advantage & Disadvantage
What is RAD Model? Phases, Advantages and Disadvantages
Spiral Model: When to Use? Advantages and Disadvantages
What is Waterfall Model in SDLC? Advantages and Disadvantages

COMMENTS

HTML Structure and Presentation
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.
HTML Structure and Presentation
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.
Lecture 2: HTML
In the previous lecture, we talked about the difference between structure and presentation. So what is structure, and what is presentation? Take a look at these two elements. They look identical. But they do not have the same *meaning*. One is a top-level heading, and the other is regular text, styled to look big and bold. What difference does ...
HTML basics
HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way.The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.
HTML: HyperText Markup Language
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation ( CSS) or functionality/behavior ( JavaScript ). "Hypertext" refers to links that connect web pages to one another ...
Overview of HTML
HTML is the foundation of every web page. In this course, you will learn the basics of HTML syntax, structure, and semantics. You will also discover how to use HTML to create responsive and accessible web pages that adapt to different devices and preferences. Whether you are a beginner or a seasoned web developer, this course will help you master the power and beauty of HTML.
The Structure of an HTML Document
The structure of an HTML document is the foundation of any web page. It determines how the content of the page is organized and displayed, and it's important to understand how it works in order to create professional-quality websites. ... We also explored elements and attributes, and we learned about the difference between block-level and ...
Structure vs. Presentation
Structure vs. Presentation The makeup of a webpage could be viewed as a combination of the following four elements: Content is the collective term for all the browser-displayable information elements such as text, audio, still images, animation, video, multimedia, and files (e.g., Word, PowerPoint, PDF, etc.) of web pages. Content does not require any additional presentational markups or ...
Document and website structure
Previous ; Overview: Introduction to HTML; Next ; In addition to defining individual parts of your page (such as "a paragraph" or "an image"), HTML also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column"). This article looks into how to plan a basic website structure, and write the HTML to ...
Introduction to HTML
HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content. HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is ...
css
The whole distinction between "presentation" elements versus "structure" element is, in my opinion, a matter of common sense, not something defined by W3C or anyone else. :-P. An element that describes what its content is (as opposed to how it should look) is a structure element. Everything else is, by definition, not structural, and therefore ...
Session 01
File Management. Course Web Hosting Server: URLs and File locations. Session 01 - The Internet, World Wide Web, Web Browsers, Web Sites, and HTML, slide1 The Internet and the World Wide Web, slide2 The Internet: Schematic, slide3 Types of Traffic on the Internet, slide4 Tim Berners-Lee on The World Wide Web, slide5 Features of the World Wide ...
HTML vs HTML5: Core Differences
The following image is a simple example of how the hypertext markup language (HTML structure) looks when rendering a text with a title and paragraph. However, more than text quotes, the markup language can also categorize the presentation of embedding links, images, and interactive forms.
Understanding HTML: The Foundation of Web Development
HTML allows web developers to define the structure and content of a web page by inserting elements such as headings, paragraphs, links and images. It enables the creation of hyperlinks that allow users to navigate between different pages. These elements make it possible to create a clear structure and user guidance that facilitates navigation.
The web standards model
XHTML on the other hand is a reformulation of HTML as an XML vocabulary, XML being a separate markup language with much stricter syntax rules. The difference between XHTML and HTML doesn't really matter so much any more, unless you find youself working in a web team in the future that has coding guidelines that favour one style or another.
HTML Course Structure of an HTML Document
An HTML Document is mainly divided into two parts: HEAD: This contains the information about the HTML document. For Example, the Title of the page, version of HTML, Meta Data, etc. BODY: This contains everything you want to display on the Web Page. HTML Document Structure. Let us now have a look at the basic structure of HTML.
CSS vs. HTML: What's the Difference?
Link CSS To HTML. As you can see, CSS and HTML each serve a very different purpose when building a webpage or website. HTML is used to create the content or structural layer, while CSS is used to create the presentation layer. By keeping these two layers separate, it's much easier to build and maintain a website.
Difference between HTML and CSS
HTML. CSS. HTML is a markup language used to define a structure of a web page. CSS is a style sheet language used to style the web pages by using different styling features. It consists of tags inside which text is enclosed. It consists of selectors and declaration blocks. HTML doesn't have further types.
Introduction to HTML and CSS
HTML and CSS. HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage ...
Session 01
URL to Filename Mapping. Session 01 - The Internet, World Wide Web, Web Browsers, Web Sites, and HTML, slide1. The Internet and the World Wide Web, slide2. The Internet: Schematic, slide3. Types of Traffic on the Internet, slide4. Tim Berners-Lee on The World Wide Web, slide5. Features of the World Wide Web, slide6. Approaching the Web, slide7.
Difference between HTML and HTML5
Uses SQL database to store data offline. HTML. HTML5. It didn't support audio and video without the use of flash player support. It supports audio and video controls with the use of <audio> and <video> tags. It uses cookies to store temporary data. It uses SQL databases and application cache to store offline data.
HTML Elements
Learn the basics of HTML in a fun and engaging video tutorial. Templates. We have created a bunch of responsive website templates you can use - for free! Web Hosting. Host your own website, and share it to the world with W3Schools Spaces. Create a Server. Create your own server using Python, PHP, React.js, Node.js, Java, C#, etc. ...
Difference Between XML and HTML
What is the Difference between XML and HTML? The key difference between XML and HTML is that XML is a framework for specifying markup languages (stores and transfers data). In contrast, HTML is a predefined markup language (describes the structure of a webpage). Features of XML. Reflecting on my work, I have noted the following features of XML:

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 and Presentation

Hypertext Markup Language (HTML)

Cascading Style Sheets (CSS)

Related Theory

Related Quizzes

Sign up for Guru News

Von Neumann Architecture Cheat Sheet

Small Print

Downloads Shop

Lecture 2 Structure: HTML Markup

This is a top level heading

Quiz: What is the difference between the following?

Why do semantics matter?

Common focusable elements

Not everyone browsing the Web is human

article or li ?

Tables & meaning

More accessible HTML in 2 minutes

Document Object Model (DOM)

DOM hierarchy

What we wrote

Same content hierarchy, different DOM tree hierarchy

Types of DOM nodes

Interactivity

Use appropriate controls

Sometimes the differences are subtle

Multiple choices: usability tradeoffs

Two choices: Checkbox or radio?

Reactive Templating

But what if the data changes?

Try Mavo out

A brief, messy history of HTML

Overview of HTML

Non-replaced elements

Replaced and void elements

Appearance of elements

Element, attributes, and JavaScript

Check your understanding

Participants 976

The Structure of an HTML Document

Yasin Cakal

Basic Structure of an HTML Document

Head Section

Body Section

Elements and Attributes

Block-Level and Inline Elements

What is the root element of an HTML document?

What is the purpose of the <head> element in an HTML document?

What is the purpose of the <body> element in an HTML document?

What is the purpose of HTML attributes?

True or false: Inline elements create a new block of content and take up the full width of the page.

Document and website structure

Basic sections of a document

HTML for structuring content

Active learning: exploring the code for our example

HTML layout elements in more detail

Non-semantic wrappers

Line breaks and horizontal rules

<br>: the line break element

<hr>: the thematic break element

Planning a simple website

Active learning: create your own sitemap

Understanding HTML: The Foundation of Web Development Simplified

What is HTML?

How Does HTML Work? Structure, Framework, and Elements

Basic HTML Elements

Structuring and Semantics

Is HTML a Programming Language?

Why is HTML Important for SEO?

Tips for Using HTML in Your SEO Strategy

More topics for you

The sitemap – vital for strong SEO