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.

Further Readings:

  • HTML element

Computer Science GCSE GURU

HTML Structure and Presentation

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

HTMLProvides the and structure of each page
CSSA language used to style the HTML content
JavaScriptA scripting language used to provide additional , interactivity and behaviours

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

Hypertext Markup Language (HTML)

HTML is markup language used to create web pages.

HTML pages are interpreted by a web browser .

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

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

Images, tables and hyperlinks are also included using HTML.

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

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

Example of HTML

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

Cascading Style Sheets (CSS)

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

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

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

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

Example of CSS

p { color: blue }

Related Theory

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

Related Quizzes

  • The Internet

Sign up for Guru News

Popular downloads.

what is 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

Copyright © Computer Science GCSE GURU

Computer Science GCSE GURU

Web Development

What is html.

HTML

HTML stands for H yper T ext M arkup L anguage

HTML is the standard markup language for Web pages

HTML elements are the building blocks of HTML pages

HTML elements are represented by <> tags

HTML Elements

An HTML element is a start tag and an end tag with content in between:

Start tag Element content End tag
<h1> This is a Heading </h1>
<p> This is paragraph. </p>

HTML Attributes

  • HTML elements can have attributes
  • Attributes provide additional information about the element
  • Attributes come in name/value pairs like charset="utf-8"

A Simple HTML Document

Try it Yourself »

Example Explained

HTML elements are the building blocks of HTML pages.

  • The <!DOCTYPE html> declaration defines this document to be HTML5
  • The <html> element is the root element of an HTML page
  • The lang attribute  defines the language of the document
  • The <meta> element contains meta information about the document
  • The charset attribute defines the character set used in the document
  • The <title> element specifies a title for the document
  • The <body> element contains the visible page content
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

HTML Documents

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 Document Structure

Below is a visualization of an HTML document (an HTML Page):

Note: Only the content inside the <body> section (the white area above) is displayed in a browser.

HTML Headings

HTML headings are defined with <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading: 

Advertisement

HTML Paragraphs

HTML paragraphs are defined with <p> tags:

HTML links are defined with <a> tags:

The link's destination is specified in the href attribute. 

HTML Images

HTML images are defined with <img> tags.

The source file ( src ), alternative text ( alt ), width , and height are provided as attributes:

HTML Buttons

HTML buttons are defined with <button> tags:

HTML lists are defined with <ul> (unordered/bullet list) or <ol> (ordered/numbered list) tags, followed by <li> tags (list items):

HTML Tables

An HTML table is defined with a <table> tag.

Table rows are defined with <tr> tags.

Table headers are defined with <th> tags. (bold and centered by default).

Table cells (data) are defined with <td> tags.

Programming HTML

Every HTML element can have attributes .

For web development and programming, the most important attributes are id and class. These attributes are often used to address program based web page manipulations.

Attribute Example
id <table ="table01"
class <p ="normal">
style <p ="font-size:16px">
data- <div -id="500">
onclick <input ="myFunction()">
onmouseover <a ="this.setAttribute('style','color:red')">

Full HTML Tutorial

This has been a short description of HTML.

For a full HTML tutorial go to W3Schools HTML Tutorial .

For a full HTML tag reference go to W3Schools Tag Reference .

Get Certified

COLOR PICKER

colorpicker

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]

Top Tutorials

Top references, top examples, get certified.

What Is HTML? A Beginner’s Guide

People gatherer around learning about html

You want to create your dream website, but you don’t want it to look like a cookie-cutter template. Anyone well-versed in web design  will tell you that you need to know HTML first. But what is HTML, and how can you learn it?

You want the website you publish  to stand out and be original. You want elements and designs that no one else in your industry is using. After all, your website is the first impression that many potential customers get about your business.

But before you can do that, you need to learn a computer language called HTML . Essentially, it’s the language that lays out what a web browser should show to a visitor when they arrive on your website.

In this article, we’re going to explain what HTML is, how it came to be, how it’s used, how it works, and offer you some basic HTML training with advice on how you can learn more.

Are you ready to learn how to code your website without creating a broken page? Let’s jump right in.

What Is HTML?

HTML stands for “hypertext markup language” and is a relatively simple language used to create web pages. Because it doesn’t allow variables or functions, it’s not considered a “programming language,” but rather a “markup language,” a language that uses tags to define elements within a document.

If you ask anyone in the web design world what HTML is, you’re likely to get a long-winded explanation that will leave your head spinning, especially if you’re like most of the world and don’t have the first idea about coding and creating a website from scratch .

Four things defining html

So what does “hypertext markup language” mean? Let’s break it down.

Hypertext is text placed in order that connects related items, usually via links (also called hyperlinks). Markup language describes the style and structure of a page to web browsers.

So, HTML is what makes sure text and images show up in the right place, and that users can navigate your website painlessly. Web browsers load this information from your web server to generate the websites you see every day.

If you were to look at HTML in its raw form, you would see a lot of symbols and brackets that seemingly make no sense. However, it all contributes toward the final customer-facing product.

The very structure of websites is created through HTML. This language works alongside CSS (Cascading Style Sheets) and JavaScript to create visually appealing and interactive websites for users to enjoy.

The bottom line here is that HTML is the foundation of a good web page. Without it, you wouldn’t be able to share text with website visitors, much less add your personal flair to the website of your dreams.

The History of HTML

Sir Tim Berners-Lee created HTML in late 1991, but the coding language was not released to the masses until 1993.

That was when HTML1 first came out. Right from the start, it was meant as a means of sharing data via web browsers.

The growth of HTML stalled shortly after it was released because not many developers were creating websites at the time.

HTML2 was released in 1995 with additional features, making it the markup language standard for web design through 1997.

That was when HTML3 was developed by Dave Raggett. It gave webmasters more powerful characteristics to use when designing pages. Unfortunately, it was ahead of its time. The features of HTML3 actually slowed browsers down, as they weren’t equipped to apply them yet.

HTML4.01 was developed in 1999, and it came with support for multimedia options. This upgrade also included style sheets, printing facilities, and additional scripting languages.

Difference between html4 and html5 structure

More recently, HTML5  was released in 2015. The rollout of HTML5 added more media storage support and specific content elements. Inline doctype, audio, and video embedding were also made much simpler.

The world is working with HTML5.2 in 2022, which improves the content security policy at a time when we need it most.

It also has a strong focus on ecommerce, adding a payment request API to the fold. This upgrade also added accessible-rich internet applications for disabled people.

What Is HTML Used For?

The simple answer to this question is that HTML is used to create websites for personal and business use all around the world.

The actual answer is a lot more detailed than that.

HTML has been the default language used for web-based documents and websites since the 1990s. It works with browsers to help them understand a website’s structure and the style associated with them.

Essentially HTML is a blueprint that tells the web browser how to put your website together for the visitor. When a user types in your URL, the browser assembles the page based on the building blocks established in the HTML code.

HTML5 chart

This, in turn, helps the page look as intended when viewed by a user when combined with a CSS stylesheet  that styles the elements laid out in your HTML document.

The current version of HTML also allows video, audio, spreadsheets, and other apps to run directly on websites. If you’ve ever marveled at these elements on a website before, you have HTML5 to thank.

This markup language also ensures smooth internal navigation of a website, thanks to hyperlinks.

Website designers can also use HTML to create lead generation  forms to collect emails and names (provided you power the action with a file coded in another language).

If you use external plugins, you can also use HTML to create reservation systems or search forms within a site, allowing for easier booking and navigation.

HTML is how you include non-dynamic content on a website — content that you want every visitor to see the same way. If you want dynamic content, you need to leverage JavaScript , PHP , or other programming languages as well.

How Does HTML Work?

As of May 2022, there are more than 3.56 billion  web pages on the internet. Many of those pages are simple HTML files. (Note, that’s not websites we’re talking about here. It’s web pages.)

Traditionally, if your site had 150 pages, you likely had 150 separate HTML files. But today, things have changed. If you use a Content Management System (CMS) , and most people do, this won’t be the case, as it typically dynamically generates pages based on data stored in a database.

Internet pages chart

These files are also called HTML documents, and they are the building blocks of your website. Each page has various on-page and off-page elements that all have a place in HTML documents. This includes back-end  elements like meta tags, title tags, and alt tags, but it also includes physical elements like videos, images, text blocks, and other user-facing features.

What Makes Up an HTML Document?

All HTML documents end with the extension .html or .htm. These documents contain all the text and tags that provide static information to a web browser.

The HTML document is the instruction manual used by the user’s web browser to construct the site. All of the files it refers to (CSS stylesheets, JavaScript files that power dynamic elements, etc.) are read by the browser, which then renders the page accordingly, allowing viewers to see it as intended. The render is the actual construction, and it takes place every time someone navigates to a specific page on your site.

If there are issues with your HTML document or any of the files it includes, the site won’t render correctly. It would be like trying to assemble an IKEA desk without a vital piece or tool.

Modern websites contain various HTML elements made of tags and attributes. These elements create the structure of a page. The tags associated with each element show where they begin and end. Without a tag that closes an element off, the browser will put all following content within that column or row, even if that’s not what you intended.

The attributes associated with each element on a page illustrate the various characteristics that make them up.

All HTML documents begin with a <!DOCTYPE> declaration. This document type definition, also known as DTD, determines the structure and elements of an XML  document.

While <div> used to be the primary choice for creating content blocks, in HTML5 , you also have specific blocks like <main> that indicate the kind of content that will be in a block to crawlers — in this case, the main blog/article content.

HTML Basics

If you want to become a web designer or at least have a hand in creating your company’s website, you have to learn HTML . Like just about everything there is to learn in this world, you have to start with the basics to have a strong understanding of more advanced elements to come.

You could, of course, use a free HTML editor  or Sublime Text , but having a strong understanding of how HTML works will help you with enhanced personalization of the websites you build.

We’re going to break down some HTML basics in the sections below to get you started down the road toward HTML fluency.

Elements of HTML

All HTML elements, regardless of what they’re creating, have the same three components. You have an opening tag, the content itself, and a closing tag.

HTML components

Your opening tags show the web browser where the elements of your page begin. For instance, it could show where a video player or text paragraph starts on the page. All opening tags use opening and closing angle brackets to mark themselves. For example, the opening tag <em> places emphasis on content, like italics. You would place this tag before the text that you want to emphasize.

The content itself is the actual information that the user sees. This can be written copy, like a blog post. It could also be an image or an embed code for a video. When placed after the opening tag, the content will begin where designated.

The closing tag is the same as the opening tag, but it adds a forward slash before the element’s name. To return to our emphasis tag example from before, you would place the tag </em> at the end of the text you’re trying to emphasize.

So, for example, if you want to italicize the word “exactly,” you’d code it like this:

<em>Exactly.</em>

On the actual user-facing page, it would look like this:

HTML elements also include attributes, which contain a name and attribute value. The attribute’s name shows what the user is adding, while the value provides additional information.

For image tags, you obviously need to specify which image you want to show, so that looks like this:

<img src=”img_girl.jpg”>

If you want to make a paragraph on your page red while using the Arial font, you could use the style attribute:

<p style=”color:red;font-family:arial”>

In this example, we’re using the opening tag <p> for a new paragraph. With these attributes attached, everything in that paragraph would be red in the Arial font, right up until the closing tag </p>.

But in modern web development, it’s standard practice to not use the HTML style attribute to adjust the design of individual elements, but rather to stylize the whole page with a separate CSS stylesheet.

HTML class and ID are two attributes of an HTML element that “names them” and help you target these elements with CSS or JavaScript later. This helps with development  and makes it more effective. By using an element’s ID or class, you can insert style information into elements like background color, borders, font color , and more.

For example, instead of styling the text to red inside the HTML document, you could do this:

Most Used HTML Tags and HTML Elements

There are 142 different HTML tags that let you create elements. These are composed of both block-level and inline elements.

Block-level elements span the whole width of a page, starting a new line within a document.

Here are a few common block-level tags that you might use on your website:

  • <head> This tag is for listing meta-information, like the page’s title.
  • <html> This is a root element. It appears at the beginning and defines the HTML document.
  • <body> The body tag identifies the content of a page.
  • <h1> to <h6> These six different tags identify the various headers you can use.
  • <p> This is the paragraph tag, dictating the start of a new paragraph in your content.
  • <ol> This tag creates an ordered list.
  • <ul> The ul tag created unordered lists.
  • <li> This is the list item tag. It is enclosed within ordered or unordered list tags for each item in the list.
  • <div> This is a block element tag that creates a “section” you can fill with content (and then stylize later with CSS. Most sites and templates rely heavily on these to structure their content.
  • <header> This is a block element tag specifically for header content.
  • <main> This is a block tag specifically for the main blog content.
  • <footer> This block tag is for your footer information, like copyright, links, etc.

Inline elements are what format the content within your block-level elements. This can include emphasized copy, like bold and italic fonts . Inline content can also be links, both to internal and external content.

Inline links format text without breaking any content flow.

There are some common inline tags that you might use on your website. Here are some of them, in no particular order:

  • <strong> This is what you’d use to create bold text.
  • <em> The em tag, which we used in an example earlier, shows italics.
  • <a> This is the hyperlink tag. It would also need an href attribute to show where the link is pointing (just like img tags need a src attribute).

HTML, CSS, and JavaScript

We briefly mentioned CSS and JavaScript earlier in this article. They tend to go hand in hand with HTML to create advanced modern websites with a personalized flair. But what are CSS and JavaScript? And how are they different from HTML?

html, css and javascript differences

As we know by this point, HTML is used to create structure and add elements to your pages. But, as you also know, that’s not everything that goes into a solid website design. This is where CSS and JavaScript come into play.

CSS stands for Cascading Style Sheets. It’s the language and files modern web developers use to design the backgrounds, colors, spacing, layouts, and animations viewed on a website. Essentially, CSS describes the presentation of an HTML document, giving the web designer more flexibility and control.

It can also help you apply the same formatting to multiple web pages through .css files. These stylesheets ensure that you won’t have to redo your formatting for every page. Additionally, the .css file can be cached, reducing load speeds between pages that share the same format.

Then there’s Javascript. Javascript creates dynamic functions, including photo galleries, pop-ups, and sliders. It’s a popular programming language used by 97%  of websites worldwide. Dedicated Javascript engines are included with all major web browsers, making the implementation of these functions easier and more effective.

Together, Javascript, CSS, and HTML work together to create what we see every day as a complete, well-designed, interactive web page on both desktop and mobile platforms .

How to Learn HTML

We’ve gone through what HTML is and some of the basics associated with it. Now, it’s time to talk about the process of actually learning to use HTML and how it can help your future and career aspirations.

HTML is more than just a popular programming language. It’s the language of the internet, and that’s not going to change anytime soon. It works hand in hand with popular services like WordPress , and you can use HTML to alter many WordPress templates to turn them into something uniquely yours.

So, let’s start with why someone would want to learn about WordPress  in the first place.

Why Learn HTML?

Learning HTML is important for anyone looking to have a career in web development . Talented web developers are always in demand, whether they work for agencies or independently, and learning HTML is the foundation of that skill set.

Not only is there a lot of demand for this position, but web developers can easily earn salaries into six figures. The average web developer salary  is $98,565 in 2022.

web developer salaries

A strong understanding of HTML is an essential skill recruiters look for when hiring web developers.

If you’re not a web developer but you’re looking to hire one, a rudimentary understanding of HTML, CSS, and JS and how they interact will help you when interviewing candidates. You’ll be able to know which questions to ask and easily weed out those who don’t know what they’re talking about.

Learning Resources

Several free learning resources are available for those looking to further their HTML education. We will walk you through a few of the best right now.

Codecademy  is a service that provides courses on an introductory level at no cost. It includes interactive tutorials and utilizes a split-screen that shows the results of your HTML coding as you go along.

You can access exclusive content through the program for $19.99 per month.

Coursera  includes several courses that go in-depth on HTML while providing examples from the real world. This service does come at the cost of $49 per month with a free week-long trial.

W3Schools  is another free service that teaches basic HTML. It uses examples, exercises, and various resources to achieve this.

HTML Language Example

You can also pay $95 for a self-paced official course that comes with a certificate at the end.

General Assembly Dash

General Assembly Dash  is an HTML educational resource that provides projects for beginners looking to wade into the waters of web design. This program works off a goal-based approach and helps you understand the real-world applications of what you learn. You get to build a website instead of just completing modules.

Once you’ve finished these projects, you can take an online mentorship course that grants you a certificate upon completion. Full tuition costs $3,950, but there are flexible financing options and installment plans.

HTML will continue to be the backbone of web design well into the foreseeable future. A strong understanding of these concepts can even help you create your own WordPress website from HTML .

When it’s time to embark on creating a new website, you’re going to need robust website hosting. If you’re thinking about starting a WordPress site, contact Kinsta today to schedule a demo  and find out why more than 24,000 businesses have entrusted their online presence to our premium managed hosting service.

Related Articles

what is html structure and presentation

The Best Way to Learn HTML for Free (and Why You Should)

what is html structure and presentation

HTML Best Practices to Build Maintainable and Scalable Websites

what is html structure and presentation

HTML vs HTML5: Learn the Crucial Differences Between Them

Structure vs. Presentation

  • 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 styles in order to fully convey its message.
  • Structure refers to the practice of using HTML on content to convey meaning  ( semantics ) and to describe how blocks of information are structured to one another. Examples: "this is a list" (ol, ul, li), "this is headings and subheadings" (<h1>, <h2>, ..., <h6>), "this section is related to" (<a>), etc..
  • Presentation (or Style ) refers to anything related to how the content and structure is presented. Examples: size, color, margins, borders, layout, location, etc.
  • Behavior (or Interactivity ) refers to the employment of client-side script (e.g., JavaScript) to create interactivity between the webpage and its users.

Often, a clear distinction between content and structure is difficult, because content could also be viewed as the information with its semantic coding as well as its structure. For example, the <img> tag, as a structural element, is used to create graphical content. In practice, the makeup of a webpage can simply be viewed as a combination of three elements: Structure , Presentation , and Behavior .   

The terms " separation of content and presentation ," " separation of meaning and presentation ,” and “ separation of structure and presentation ” are being used interchangeably. Nonetheless, all of these terms essentially refers to the " separation of the content made meaningful by structure and the presentation , ” or simply the " separation of the stucture (HTML) and presentation (CSS) ". 

The main goal of HTML 4.01 is the " separation of structure and presentation ".  As indicated in the section 2.4.1 of HTML 4.01: 

"HTML has its roots in SGML which has always been a language for the specification of structural markup. As HTML matures, more and more of its presentational elements and attributes are being replaced by other mechanisms, in particular style sheets. Experience has shown that separating the structure of a document from its presentational aspects reduces the cost of serving a wide range of platforms, media, etc., and facilitates document revisions."

The Practice

  • In another sense, separating distinct elements also means bringing them together.
  • Ideally, the separation of structure and presentation will produce an HTML document which contains the content and structure and a separate CSS file which contains everything that controls presentation.
  • The perfect website separation system will store content in a database for a complete isolation and management of content information. Structure, on the other hand, is dealt with through a collection of template package built by a server-side scripting language like PHP or ASP.net. 

Other Separations

  • Separation of behavior and structure : refers to the practice of maintaining clean semantic HTML markup that is free of any attributes or script that introduces custom behaviors. Any custom behaviors that are introduced into your HTML page should come from external files that unobtrusively attach/bind the behaviors to elements within your semantic markup. ( more... )
  • Separation of functionality and content :  When client-side script is added to the webpage, it directly affects specific HTML elements and would fuse functionality with content. By separating scripted functionality from content, the content remains pure and may be representative of some type of data or a user interface element without being statically bound to a particular action. When the functionality is abstracted from the content, the functionality may then be tasked to specific duties and intermix with actual content as needed.  ( more... )
  • Separation of layout style and presentational style : In the rush to separate style from content, we might end up mixing up the layout style and the presentational style all in one CSS file. Layout styles  dictate how the elements of the page are arranged for content, while presentational styles specify how the content appears. In terms of a typical website that uses CSS for both purposes (layout and presentation), both types of styles should have their own file. 

Tables for Layout

what is html structure and presentation

  • 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 1008

what is html structure and presentation

The Structure of an HTML Document

what is html structure and presentation

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.

  • 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
  • HTML Basics
  • HTML Introduction
  • HTML Full Form
  • HTML Editors
  • HTML Comments
  • HTML Layout
  • HTML Elements
  • HTML Headings
  • HTML Paragraphs
  • HTML Text Formatting
  • HTML Quotations
  • HTML Color Styles and HSL
  • HTML Links Hyperlinks
  • HTML Images
  • HTML Tables
  • HTML Block and Inline Elements
  • HTML Iframes
  • How to Add JavaScript in HTML Document?
  • HTML File Paths
  • HTML Viewport meta tag for Responsive Web Design
  • HTML Computer Code Elements
  • HTML Entities
  • HTML Charsets
  • HTML URL Encoding
  • HTML Deprecated Tags
  • HTML Doctypes
  • HTML <a> Tag
  • HTML <abbr> Tag
  • HTML acronym Tag
  • HTML <address> Tag
  • HTML applet Tag
  • HTML <area> Tag
  • HTML5 <article> Tag
  • HTML5 <aside> Tag
  • HTML5 <audio> Tag
  • HTML <b> Tag
  • HTML <base> Tag
  • HTML <basefont> Tag
  • HTML Tags - A to Z List
  • HTML <input> accept Attribute
  • HTML <form> accept-charset Attribute
  • HTML accesskey Attribute
  • HTML action Attribute
  • HTML align Attribute
  • HTML alt attribute
  • HTML | <script> async Attribute
  • HTML input autocomplete Attribute
  • HTML <form> autocomplete Attribute
  • HTML autofocus Attribute
  • HTML input autofocus Attribute
  • HTML <button> autofocus Attribute
  • HTML <textarea> autofocus Attribute
  • HTML Attributes Complete Reference

HTML Graphics

  • HTML SVG Basics
  • HTML Canvas Basics
  • HTML Geolocation
  • HTML Drag and Drop
  • HTML DOM (Document Object Model)
  • HTML DOM activeElement Property
  • HTML DOM anchors Collection
  • HTML DOM close() Method
  • HTML DOM baseURI Property
  • HTML DOM body Property
  • HTML DOM createAttribute() Method
  • HTML DOM doctype Property
  • HTML DOM writeln() Method
  • HTML DOM console error() Method
  • HTML DOM URL Property
  • HTML DOM embeds Collection
  • HTML DOM console warn() Method
  • HTML DOM console trace() Method
  • HTML DOM Complete Reference

HTML Audio/Video

  • HTML DOM Audio Object
  • HTML DOM Video Object
  • HTML DOM Video canPlayType( ) Method
  • HTML DOM Audio audioTracks Property
  • HTML DOM Audio autoplay Property
  • HTML DOM Audio buffered Property
  • HTML DOM Audio controls Property
  • HTML DOM Audio currentSrc Property
  • HTML DOM Audio currentTime Property
  • HTML DOM Audio defaultMuted Property
  • HTML DOM Audio defaultPlaybackRate Property
  • HTML DOM Audio duration Property
  • HTML DOM Audio ended Property
  • HTML DOM Audio loop Property
  • HTML DOM Audio/Video Complete Reference
  • HTML5 | Introduction
  • HTML Spell Check
  • HTML5 Complete Reference

HTML 5 MathML

  • HTML5 MathML Introduction
  • HTML5 MathML <maction> tag
  • HTML5 MathML <math> tag
  • HTML5 MathML <menclose> Tag
  • HTML5 MathML <merror> Tag
  • HTML5 MathML <mfenched> tag
  • HTML5 MathML <mfrac> tag
  • HTML5 MathML <mglyph> Tag
  • HTML5 MathML <mi> Tag
  • HTML5 MathML <mlabeledtr> tag
  • HTML5 MathML <mmultiscripts> Tag
  • HTML5 MathML <mn> Tag
  • HTML5 MathML <mo> Tag
  • HTML5 MathML <mover> Tag
  • HTML5 MathML <mpadded> Tag
  • HTML5 MathML Complete Reference

HTML Course

  • Introduction to HTML CSS | Learn to Design your First Website in Just 1 Week

HTML Course Structure of an HTML Document

  • HTML Course First Web Page Printing Hello World
  • HTML Course Basics of HTML
  • HTML Course : Starting the Project - Creating Directories
  • HTML Course Understanding and Building Project Structure
  • HTML Course | Practice Quiz 1
  • HTML Course : Creating Navigation Menu
  • HTML Course : Building Header of the Website
  • HTML Course : Building Main Content - Section 1
  • HTML Course : Building Main Content - Section 2
  • HTML course Building Main Content - Section 3
  • HTML Course Building Footer

HTML Questions

  • Create a Sticky Social Media Bar using HTML and CSS
  • Create a Search Bar using HTML and CSS
  • How to create Right Aligned Menu Links using HTML and CSS ?
  • How to Add a Login Form to an Image using HTML and CSS?
  • How to Create a Tab Image Gallery ?
  • How to create a Hero Image using HTML and CSS ?
  • How to design Meet the Team Page using HTML and CSS ?
  • How to Create an Image Overlay Icon using HTML and CSS ?
  • How to Create Browsers Window using HTML and CSS ?
  • How to Create Breadcrumbs using HTML and CSS ?
  • How to Create Section Counter using HTML and CSS ?
  • How to Create Toggle Switch by using HTML and CSS ?
  • How to Create a Cutout Text using HTML and CSS ?
  • How to make a Pagination using HTML and CSS ?

HTML(Hypertext Markup Language) , structures web pages. Unlike programming languages, it isn’t compiled or interpreted. Browsers render HTML directly, displaying content without typical errors. It’s a markup language, not a programming one, making execution smooth without encountering compilation or interpretation issues.

Table of Content

HTML Document Structure

Tags and attributes

Structure of an html document, understanding essential html tags.

Html-Document-(1)

HTML uses predefined tags and attributes to instruct the browser on how to display content, including formatting, style, font size, and images. HTML is a case-insensitive language, meaning there is no distinction between uppercase and lowercase letters.

There are generally two types of tags in HTML:  

  • Paired Tags : These tags come in pairs i.e. they have both opening(< >) and closing(</ >) tags.
  • Empty Tags : These tags are self-closing and do not require a closing tag.”

Below is an example of a <b> tag in HTML, which tells the browser to bold the text inside it. 

what is html structure and presentation

HTML tags are structural components enclosed in angle brackets. They are typically opened and closed with a forward slash (e.g., <h1></h1> ). Some tags are self-closing, while others support attributes like width, height, and controls for defining properties or storing metadata.

An HTML Document is mainly divided into two parts: 

  • HEAD : This contains the information about the HTML document including the Title of the page, version of HTML, Meta Data, etc.
  • BODY : This contains everything you want to display on the Web Page.

what is html structure and presentation

Example: To demonstrate basic HTML document structure.

  • DOCTYPE Declaration (`<!DOCTYPE HTML>`): It specifies the HTML version; typically indicates HTML5 .
  • <html>: The root element that encompasses the entire HTML document structure. It serves as the parent to both the <head> and <body> tags.
  • lang attribute: Specifies the language using the “lang” attribute (e.g., lang=”en” for English
  • <head>: Container for metadata, title, CSS , scripts, etc.
  • Content: While not directly displayed, it serves informational and structural purposes.
  • <body>: A body tag is used to enclose all the data which a web page has from texts to links. All the content that you see rendered in the browser is contained within this element. 

author

Please Login to comment...

Similar reads.

  • Web Technologies
  • HTML Course Basic
  • HTML-Basics

Improve your Coding Skills with Practice

 alt=

What kind of Experience do you want to share?

gallery w3resource

HTML BASICS Slides Presentation

Click to access all Slides..

This slide presentation shows basics of HTML.

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

Common Elements

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

Tags and Attributes

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

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

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

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

Nested tags

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

HTML VS XHTML

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

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

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

HTML Template

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

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

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

USEFUL OPEN SOURCE TOOLS

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

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

PAGE STRUCTURE ELEMENTS

The following elements are part of every web page.

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

KEY STRUCTURAL ELEMENTS

Most pages contain the following key structural elements:

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

LISTS AND DATA

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

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

Standard List Types

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

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

Lists can be nested inside each other

Definition lists

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

Use of tables

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

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

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

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

LINKS AND IMAGES

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

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

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

absolute and relative references

<link>

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

<img>

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

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

SPECIALTY MARKUP

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

<quote>

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

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

<pre>

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

<code>

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

<blockquote>

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

<span>

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

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

<strong>

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

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

Form Structure

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

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

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

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

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

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

This element allows a single line of text input:

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

Radio Button

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

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

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

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

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

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

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

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

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

Select / option

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

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

Multiple Selections

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

DEPRECATED FORMATTING TAGS

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

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

I (italics)

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

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

DEPRECATED TECHNIQUES

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

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

Table-based design

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

HTML ENTITIES

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

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

HTML 5 / CSS3 PREVIEW

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

Audio and video tags

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

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

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

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

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

Follow us on Facebook and Twitter for latest update.

  • Weekly Trends and Language Statistics

What is the Structure of HTML Document?

JavaScript Course With Certification: Unlocking the Power of JavaScript

HTML is a web language. It is used to design web pages or to arrange a website's page layouts. HTML stands for HYPERTEXT MARKUP LANGUAGE, and as the name implies, it is a markup language rather than a programming language. So, no such error can occur during the execution of HTML code. HTML code was rendered by the browser. It was not compiled or interpreted. 

HTML uses specified tags and attributes to instruct browsers on how to display text, which includes what format, style, font size, and pictures to display. HTML is a case-insensitive language. Case insensitive means that there is no distinction between upper and lower case (capital and small letters), which are both viewed as the same; for example, 'P' and 'p' are both the same here. In HTML, tags are classified into two types:

  • Paired tags: These tags come in pairs. They have both opening( < > ) and closing( </ > ) tags. For eg, <p> ...</p>
  • Empty tags: These tags do not come in pairs and contain no information. For eg, <img src="" alt="">

paired and empty tags

  • Head part - The title and metadata of a web document are contained in the head element.
  • Body part - The body element includes the information that you wish to display on a web page. To make your web pages HTML 4 compatible, include a document type declaration ( DTD ) before the HTML element. When you create a new web page, many web publishing software will automatically add DTD and basic tags. The first tag on a web page shows the markup language used for the document. The tag offers information about the web page. Finally, the content appears in the tag.

Basic Structure of HTML

An HTML document's basic structure consists of 5 elements:

<!DOCTYPE>

<html>, <head>, <title>, <body>.

The tag in HTML is used to inform the browser about the HTML version used in the web page. It is referred as the document type declaration (DTD) . It is not really a tag/element but rather an instruction to the browser regarding the document type. It is a null element that does not have a closing tag and must not contain any content.

Actually, there are various types of HTML e.g. HTML 4.01 Strict , HTML 4.01 Transitional , HTML 4.01 Frameset , XHTML 1.0 Strict , XHTML 1.0 Transitional , XHTML 1.0 Frameset , XHTML 1.1 , etc.

Since HTML 4.01 was based on SGML, the declaration relates to the Document Type Declaration (DTD) in HTML 4.01. However, HTML 5 is not based on SGML (Standard Generalized Markup Language).

Example: In the given example, we are going to use the <!DOCTYPE html> tag to declare the version of HTML the page is written in. It is an empty tag and does not contain any information.

DOCTYPE tag

The <html> tag in HTML is used to specify the root of HTML and XHTML pages. The <html> tag informs the browser that this is an HTML document. It is the second outer container for everything in an HTML document, followed by the tag. The <html> tag requires a beginning and ending tag.

Syntax of the <html> Tag

Example: In the given example, we are going to use the <html> tag to show how it contains the contents of an HTML document.

HTML tag

The <head> tag in HTML is used to contain metadata ( data about data ). It is used between the <html> and <body>  tags.

The head of an HTML document is a section of the document whose content is not displayed in the browser when the page loads. It only contains HTML document metadata, which specifies information about the HTML document.

Depending on our needs, an HTML head might contain a lot of metadata information or can have very little or no metadata information. However, the head section of an HTML document plays an essential role in the creation of a website.

The document title, character set, styles, links, scripts, and other meta information are defined by metadata.

The following is a list of metadata tags:

  • <style>
  • <meta>
  • <link>
  • <script>
  • <base>

Syntax of the <head> Tag

Example: In this example, we are going to use the <head> tag containing the <style> (to add CSS to our content) and <title> (to add title to our webpage) tag.

Head Tag

This <title> tag in HTML displays the title of a web page and can help in higher rankings in search results if appropriate keywords are included.

The most significant meta element to add to our webpage is the <title> element. It gives a relevant title to the full HTML content. It appears at the top of the browser window and gives the webpage a fitting name when saved as a favorite or bookmark. A solid web page title will guarantee a higher rank in search results. Thus, we must constantly utilize relevant keywords.

It can be found in all HTML/XHTML documents. The <title> element must be positioned between the <head> element, and there can only be one title element per document.

Syntax of the <title> Tag

Example: In this example, we are going to use the <title> tag to add a title to our webpage.

title tag output

The <body> tag in HTML specifies the main content of an HTML document that appears on the browser. It can contain headings, text, paragraphs, photos, tables, links, videos, etc.

The <body> tag must come after the <head> tag, or it must be inserted between the </head> and </html> tags. This tag is essential for all HTML documents and should only be used once throughout the document.

tag classification

Syntax of the <body> Tag

Example: In the given example, we are going to use the <body> tag to add a heading, paragraph, and image to our webpage.

Output of the above code:

body tag example

  • Head Tag in HTML
  • Introduction to HTML
  • Body Tag in HTML
  • Every HTML document must begin with a declaration. It is not an HTML element or HTML tag but serves as information to the browser about the type of document to expect.
  • The <html> tag is the root of an HTML document and contains all other HTML elements (excluding the !DOCTYPE> tag).
  • The <head> tag in HTML is a container for metadata (it is the data about the HTML document that is not displayed) and is inserted between the <html> and <body> tags.
  • The <title> tag in HTML is used to define the title of the webpage. The title must be text-only and appear in the browser's title bar or the page's tab.
  • The <body> tag in HTML holds all of the main content of a webpage, such as headings , texts ,  paragraphs , images , tables , etc.
  • Skip to main content
  • Skip to search
  • Skip to select language
  • Sign up for free
  • Português (do Brasil)

Introduction to HTML

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

Prerequisites

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

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

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

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

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

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

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

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

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

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

Assessments

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

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

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

Javatpoint Logo

HTML Tutorial

Html attributes, html tags list, html5 advance, html color names.

Interview Questions

JavaTpoint

HTML is an acronym which stands for which is used for creating web pages and web applications. Let's see what is meant by Hypertext Markup Language, and Web page.

HyperText simply means "Text within Text." A text has a link within it, is a hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext. HyperText is a way to link two or more web pages (HTML documents) with each other.

A markup language is a computer language that is used to apply layout and formatting conventions to a text document. Markup language makes text more interactive and dynamic. It can turn text into images, tables, links, etc.

A web page is a document which is commonly written in HTML and translated by a web browser. A web page can be identified by entering an URL. A Web page can be of the static or dynamic type. .

Hence, HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser. An HTML document is made of many HTML tags and each HTML tag contains different content.

It defines the document type or it instruct the browser about the version of HTML.

:This tag informs the browser that it is an HTML document. Text between html tag describes the web document. It is a container for all other elements of HTML except <!DOCTYPE>

It should be the first element inside the <html> element, which contains the metadata(information about the document). It must be closed before the body tag opens.

As its name suggested, it is used to add title of that HTML page which appears at the top of the browser window. It must be placed inside the head tag and should close immediately. (Optional)

: Text between body tag describes the body content of the page that is visible to the end user. This tag contains the main content of the HTML document.

: Text between <h1> tag describes the first level heading of the webpage.

: Text between <p> tag describes the paragraph of the webpage.

In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a system for CERN researchers. In 1989, he wrote a memo proposing an internet based hypertext system.

is known as the father of HTML. The first available description of HTML was a document called "HTML Tags" proposed by Tim in late 1991. The latest version of HTML is HTML5, which we will learn later in this tutorial.

Since the time HTML was invented there are lots of HTML versions in market, the brief introduction about the HTML version is given below:

The first version of HTML was 1.0, which was the barebones version of HTML language, and it was released in1991.

This was the next version which was released in 1995, and it was standard language version for website design. HTML 2.0 was able to support extra features such as form-based file upload, form elements such as text box, option button, etc.

HTML 3.2 version was published by W3C in early 1997. This version was capable of creating tables and providing support for extra options for form elements. It can also support a web page with complex mathematical equations. It became an official standard for any browser till January 1997. Today it is practically supported by most of the browsers.

HTML 4.01 version was released on December 1999, and it is a very stable version of HTML language. This version is the current official standard, and it provides added support for stylesheets (CSS) and scripting ability for various multimedia elements.

HTML5 is the newest version of HyperText Markup language. The first draft of this version was announced in January 2008. There are two major organizations one is W3C (World Wide Web Consortium), and another one is WHATWG( Web Hypertext Application Technology Working Group) which are involved in the development of HTML 5 version, and still, it is under development.

1) It is a very . It can be easily understood and modified.

2) It is very easy to make an with HTML because it has a lot of formatting tags.

3) It is a , so it provides a flexible way to design web pages along with the text.

4) It facilitates programmers to add a on the web pages (by html anchor tag), so it enhances the interest of browsing of the user.

5) It is because it can be displayed on any platform like Windows, Linux, and Macintosh, etc.

6) It facilitates the programmer to add to the web pages which makes it more attractive and interactive.

7) HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-case.





Youtube

  • Send your Feedback to [email protected]

Help Others, Please Share

facebook

Learn Latest Tutorials

Splunk tutorial

Transact-SQL

Tumblr tutorial

Reinforcement Learning

R Programming tutorial

R Programming

RxJS tutorial

React Native

Python Design Patterns

Python Design Patterns

Python Pillow tutorial

Python Pillow

Python Turtle tutorial

Python Turtle

Keras tutorial

Preparation

Aptitude

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

Artificial Intelligence

AWS Tutorial

Cloud Computing

Hadoop tutorial

Data Science

Angular 7 Tutorial

Machine Learning

DevOps Tutorial

B.Tech / MCA

DBMS tutorial

Data Structures

DAA tutorial

Operating System

Computer Network tutorial

Computer Network

Compiler Design tutorial

Compiler Design

Computer Organization and Architecture

Computer Organization

Discrete Mathematics Tutorial

Discrete Mathematics

Ethical Hacking

Ethical Hacking

Computer Graphics Tutorial

Computer Graphics

Software Engineering

Software Engineering

html tutorial

Web Technology

Cyber Security tutorial

Cyber Security

Automata Tutorial

C Programming

C++ tutorial

Control System

Data Mining Tutorial

Data Mining

Data Warehouse Tutorial

Data Warehouse

RSS Feed

Developing With Web Standards – Recommendations and best practices

Roger Johansson, 456 Berea Street

Warning! Old content ahead. The latest update was 2008-11-01.

  • Introduction
  • Web Standards
  • Structure and presentation
  • Accessibility

4. Structure and presentation

When discussing web standards, something that is mentioned a lot is the importance of separating structure from presentation. Understanding the difference between structure and presentation can be difficult at first, especially if you’re used to not thinking about the semantic structure of a document. However, it’s very important to understand this, since controlling the presentation of a document with CSS becomes much easier if structure and presentation are separated.

Structure consists of the mandatory parts of an HTML document plus the semantic and structured markup of its contents.

Presentation is the style you give the content. In most cases presentation is about the way a document looks, but it can also affect how a document sounds – not everybody uses a graphical web browser.

Separate structure from presentation as much as possible. Ideally you should end up with an HTML document which contains the structure and content, and a separate CSS file which contains everything that controls presentation.

Tables for layout

In order to separate structure from presentation you need to use CSS instead of tables to control the presentation of a document. When you’re used to using tables for layout, this can feel uncomfortable and strange, but it isn’t as difficult as it may seem at first. There’s plenty of help available on the Web, and the advantages are so many that it definitely is worth taking the time to learn the different way of thinking that is required.

Semantic HTML

Another important part of separating structure from presentation is using semantic markup to structure the document’s content. When an HTML element exists that has a structural meaning suitable for the part of the content that is being marked up, there is no reason to use anything else. In other words, do not use CSS to make an HTML element look like another HTML element, for instance by using a span element instead of an h1 element to mark up a heading.

By using semantic HTML, you will make the different parts of a document meaningful to any web browser, be it the very latest graphical web browsers on a modern PC, an old web browser that doesn’t handle CSS, a text-based browser in a Unix shell, or assistive technology used by people with disabilities.

To mark up headings, use h1 - h6 elements. h1 is the highest level and h6 the lowest.

Use the p element to mark up paragraphs. Do not use br elements to create space between paragraphs. Margins between paragraphs are better handled by CSS.

A list of things should be marked up as a list. There are three different kinds of lists in HTML: unordered lists, ordered lists, and definition lists.

Unordered lists, also known as bulleted lists, start with <ul> and end with </ul> . Each list item is contained in an li element.

Ordered lists start with <ol> and end with </ol> .

Definition lists are a little different. They are used to mark up a list of terms and descriptions. Definition lists start with <dl> and end with </dl> . The terms that are being described are contained in dt elements, and descriptions are contained in dd elements. Each group of terms and definitions can consist of one or more dt elements followed by one or more dd elements.

CSS makes it possible to use lists even when you don’t want their content to be presented as a traditional list. A navigation bar, which is a list of links, is a good example of this. The advantage of using a list for a menu is that the menu will make sense even in browsers that don’t support CSS.

The q element should be used for shorter, inline quotations. Web browsers are supposed to automatically render quotation marks before and after the content of the q element. Unfortunately, Internet Explorer doesn’t, and in some cases the q element can even cause accessibility problems. Because of this, some recommend that you avoid using q , and insert the quotation marks manually. Containing inline quotes in span -elements with a suitable class allows the use of CSS for styling quotes, but has no semantic value. Read Mark Pilgrim’s The Q tag for a detailed look at the problems with the q element.

For longer quotations that form one or more paragraphs, the blockquote element should be used. CSS can then be used to style the quotation. Note that text is not allowed directly inside a blockquote element – it must be contained in a block level element, usually a p element.

The cite attribute can be used with both q and blockquote elements to supply a URL for the source of the quotation. Note that if you use span elements instead of q elements for inline quotations, you cannot use the cite attribute.

The W3C says that The presentation of phrase elements depends on the user agent. .

The W3C says that “The presentation of phrase elements depends on the user agent.” .

The following sections discuss issues surrounding the structuring of text. Elements that present text (alignment elements, font elements, style sheets, etc.) are discussed elsewhere in the specification. For information about characters, please consult the section on the document character set.

The em element is used for emphasis and the strong element for strong emphasis. Most web browsers display emphasized text in italics, and strongly emphasized text in bold. However, this is not a requirement. Avoid using emphasis when all you really want is the visual effect of bold or italic text.

Emphasized text is normally displayed in italics, while strongly emphasized text is usually displayed in bold.

HTML tables should not be used for layout. For marking up tabular data, however, tables are what should be used. To make data tables as accessible as possible it is important to know about and use the various components that can make up a table. A few examples are table headings (the th element), summaries (the summary attribute), and captions (the caption element).

Annual population increase in Sweden, 1999–2003
  1999 2000 2001 2002 2003
Population 8 861 426 8 882 792 8 909 128 8 940 788 8 975 670
Increase 7 104 21 366 26 368 31 884 34 882

For a more detailed description of tables and their use, see Bring on the tables , Tables in HTML documents and HTML Techniques for Web Content Accessibility Guidelines 1.0 .

Further reading

The slides used at a presentation that was held at Seybold 2003.

An excellent resource for learning the reasoning used to figure out how to mark up something in a semantic way.

Print version (all chapters combined)

Comments, questions or suggestions? Please let me know .

© Copyright Roger Johansson

Learn Web Development Basics – HTML, CSS, and JavaScript Explained for Beginners

Kingsley Ubah

If you are learning web development, you will come across terms like HTML, CSS, and JavaScript. These are often called the building blocks of the Web.

These three tools dominate web development. Every library or tool seems to be centered around HTML, CSS, and JS. So if you want to become a web developer, you need to learn them well.

You'll also discover that websites are mostly built from these three languages.

But you're probably wondering what each one is and what it's really used for. What makes these languages so special and important? And what makes them so ubiquitous that you can’t help but see them in every tutorial and topic based on web development?

Well, now you need wonder no more.

In this article, I will explain the basics of what HTML, CSS, and JavaScript are, how they make the Web work, and what they do on their own.

What is the Internet?

The internet is simply a network of computers that communicate with each other to send and receive data (information).

Each of these computers on the internet can be distinguished and located by a unique number called an IP Address. An IP Address looks something like this: 168.212.226.204

What is the Web?

The Web is a subset of the internet.

Like every other computer network out there, the Web is made up of two main components: the web browser client and the web server.

The client requests the data and the server shares or serves its data. To achieve this, the two parties have to establish an agreement. That agreement is called the Application Programming Interface or in short, the API.

But this data has to be arranged and formatted into a form that's understandable by end-users who have a wide range of technical experiences and abilities.

This is where HTML, CSS, JavaScript and the whole concept of web development come into play.

What is HTML?

HTML stands for Hyper Text Markup Language.

Dictionary.com defines a Markup as:

a set of detailed instructions, usually written on a manuscript to be typeset, concerning style of type, makeup of pages, and the like.

So you can think of HTML as the language used for creating detailed instructions concerning style, type, format, structure and the makeup of a web page before it gets printed (shown to you).

But in the context of web development, we can replace the term ‘printed’ with ‘rendered’ as a more accurate term.

HTML helps you structure your page into elements such as paragraphs, sections, headings, navigation bars, and so on.  

To illustrate what a page looks like, let's create a basic HTML document:

This is how you can format and structure a document with just HTML. As you can see, this markup contains some web elements such as:

  • Level 1 heading h1
  • Level 2 heading h2
  • Level 3 heading h3
  • A paragraph   p
  • An unordered list with bullet points   ul li
  • A button input input
  • And the whole body of the page body

This is what that markup above renders on a web browser:

HTML

You can also add attributes to these elements which you can use to identify the elements and access them from other places in the site.

In our example, we set the id attributes to all of the three span elements. This will help us access them from our JavaScript as you will see later.

Think of this attribute the same way as your social media username. With this name, others can find you on social media. And someone can also refer to you or mention you with this name (you can get tagged in a post, and so on).

This page is very basic and unattractive, though. If you are building anything other than a demo, you will need to add some basic styling to make it more presentable. And we can do exactly that with CSS.

Want to learn more about HTML? You can start with freeCodeCamp's Responsive Web Design certification and this brand new full HTML course from Beau Carnes .

What is CSS?

While HTML is a markup language used to format/structure a web page, CSS is a design language that you use to make your web page look nice and presentable.

CSS stands for Cascading Style Sheets , and you use it to improve the appearance of a web page. By adding thoughtful CSS styles, you make your page more attractive and pleasant for the end user to view and use.

Imagine if human beings were just made to have skeletons and bare bones – how would that look? Not nice if you ask me. So CSS is like our skin, hair, and general physical appearance.

You can also use CSS to layout elements by positioning them in specified areas of your page.

To access these elements, you have to “select” them. You can select a single or multiple web elements and specify how you want them to look or be positioned.

The rules that govern this process are called CSS selectors .

With CSS you can set the colour and background of your elements, as well as the typeface, margins, spacing, padding and so much more.

If you remember our example HTML page, we had elements which were pretty self-explanatory. For example, I stated that I would change the color of the level one heading h1 to red.

To illustrate how CSS works, I will be sharing the code which sets the background-color of the three levels of headers to red, blue, and green respectively:

The above style, when applied, will change the appearance of our web page to this:

CSS

Cool, right?

We access each of the elements we want to work on by "selecting" them. The h1 selects all level 1 headings in the page, the h2 selects the level 2 elements, and so on. You can select any single HTML element you want and specify how you want it to look or be positioned.

Want to learn more about CSS? You can check out the second part of freeCodeCamp's Responsive Web Design certification to get started.

What is JavaScript?

Now, if HTML is the markup language and CSS is the design language , then JavaScript is the programming language.

If you don’t know what programming is, think of certain actions you take in your daily life:

When you sense danger, you run. When you are hungry, you eat. When you are tired, you sleep. When you are cold, you look for warmth. When crossing a busy road, you calculate the distance of vehicles away from you.

Your brain has been programmed to react in a certain way or do certain things whenever something happens. In this same way, you can program your web page or individual elements to react a certain way and to do something when something else (an event) happens.

You can program actions, conditions, calculations, network requests, concurrent tasks and many other kinds of instructions.

You can access any elements through the Document Object Model API (DOM) and make them change however you want them to.

The DOM is a tree-like representation of the web page that gets loaded into the browser.

DOM-

Thanks to the DOM, we can use methods like getElementById() to access elements from our web page.

JavaScript allows you to make your webpage “think and act” , which is what programming is all about.

If you remember from our example HTML page, I mentioned that I was going to sum up the two numbers displayed on the page and then display the result in the place of the placeholder text. The calculation runs once the button gets clicked.

CSS-1

This code illustrates how you can do calculations with JavaScript:

Remember what I told you about HTML attributes and their uses? This code displays just that.

The displaySum is a function which gets both items from the web page, converts them to numbers (with the Number method), sums them up, and passes them in as inner values to another element.

The reason we were able to access these elements in our JavaScript was because we had set unique attributes on them, to help us identify them.

So thanks to this:

We were able to do this:

Finally, upon clicking the button, you will see the sum of the two numbers on the newly updated page:

JAVASCRIPT

If you want to get started with JavaScript, you can check out freeCodeCamp's JavaScript Algorithms and Data Structures certification. And you can use this great Intro to JS course to supplement your learning.

How to Put HTML, CSS, and JavaScript Together

Together, we use these three languages to format, design, and program web pages.

And when you link together some web pages with hyperlinks, along with all their assets like images, videos, and so on that are on the server computer, it gets rendered into a website .

This rendering typically happens on the front end, where the users can see what's being displayed and interact with it.

On the other hand, data, especially sensitive information like passwords, are stored and supplied from the back end part of the website. This is the part of a website which exists only on the server computer, and isn't displayed on the front-end browser. There, the user cannot see or readily access that information.

Wrapping Up

As a web developer, the three main languages we use to build websites are HTML, CSS, and JavaScript.

JavaScript is the programming language, we use HTML to structure the site, and we use CSS to design and layout the web page.

These days, CSS has become more than just a design language, though. You can actually implement animations and smooth transitions with just CSS.

In fact, you can do some basic programming with CSS too. An example of this is when you use media queries, where you define different style rules for different kinds of screens (resolutions).

JavaScript has also grown beyond being used just in the browser as well. We now use it on the server thanks to Node.js .

But the basic fact remains: HTML, CSS, and JavaScript are the main languages of the Web.

So that's it. The languages of the Web explained in basic terms. I really hope you got something useful from this article.

To round off this article, I have something to share. I recently started a weekly coding challenge series aimed at teaching beginners how to program in JavaScript. Check it out on my blog .  

Thank you for reading and see you soon.

P/S : If you are learning JavaScript, I created an eBook which teaches 50 topics in JavaScript with hand-drawn digital notes. Check it out here .

Helping you learn how to code one tutorial at a time. Online creator and entrepreneur.

If you read this far, thank the author to show them you care. Say Thanks

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

Latest results

FY24 Results

May 14, 2024

Q1 FY25 Trading Update

July 25, 2024

  • Regulatory news

Vodafone and Microsoft Partnership

Jan 16, 2024

Share Price and Dividend Announcement

Share Price

Final Dividend FY24

4.50c to be paid Aug 02, 2024

  • Vodafone.com

Open and close mobile menu

  • {{ key }} ({{ value }})
  • Vodafone at a glance
  • Investment case
  • Our purpose
  • Our strategic priorities
  • Our transformation
  • Operational structure
  • Vodafone Business
  • Other Europe and Turkey
  • Consumer Africa

Financial results and presentations

  • Social Contract
  • Digital Services & Experiences
  • Vodafone Technology
  • Vantage Towers
  • Key performance indicators
  • Annual reporting
  • Share and dividend
  • Analyst coverage and consensus
  • Financial calendar
  • ESG strategy
  • ESG addendum
  • ESG methodology
  • Climate-related risk (TCFD disclosure)
  • Further sustainability reports
  • ESG ratings
  • Codes and compliance
  • Bonds outstanding (EU and US)
  • Sustainable Financing
  • Video library
  • Manage your holding
  • Vodafone share account
  • Shareholder forms
  • Shareholder security
  • Shareholder privacy statement

Financial results and presentations

  • Link to Home page from breadcrumb
  • Link to Performance & Reports page from breadcrumb

Latest Results | FY24

May 14 2024

View FY24 Annual Report

FY24 Management Interview

Beyond our progress on our strategic priorities, I am pleased with the financial results we have delivered, having slightly exceeded our guidance for the year.

- Margherita Della Valle

Group service revenue growth (%)

Image

Transformation gaining momentum

  • Delivering the simple and predictable experience our customers expect.
  • Getting the basics right and refocusing our resources towards improving customer experience.
  • Wide-reaching customer experience transformation underway, supported by additional investment of €140 million 1 in FY24, as well as new incentives and talent development plans.
  • Customers insights processed through real-time AI models, feeding into detailed action plans on a weekly basis in all markets.
  • Frontline tools and processes enhancements benefitting 70,000 team members.
  • Significant improvement in Germany fixed network reliability, recognised in four independent network quality tests.
  • Despite material price inflation, customer detractors have reduced across all segments, and we now have leading or co-leading net promotor scores in 5 out of 9 European markets 1
  • Become a simple and faster business.
  • Simplify our operations and executing on our cost programmes to improve profitability.
  • New organisational structure and executive management team in place.
  • Completed first phase of commercialising shared operations, enabling greater transparency, productivity and flexibility.
  • Actioned 5,0001 role reductions and announced a further 2,000 in first year of 3-year 11,000 1 plan and continued to deliver opex efficiencies.
  • Right-sizing the portfolio for growth
  • Vodafone Investments
  • Reshaped European footprint focused on growing telecommunications markets, with strong positions and good local scale.
  • Vodafone now growing in all segments and accelerating throughout the year.
  • Accelerated organic service revenue growth of Vodafone Business to 5.4% in Q4; B2B focus step-up with new organisation, sales transformation plan, investment in products and capabilities and strategic partnership with Microsoft.

Europe & Africa service revenue growth (%)

Feb 05 2024

View Q3 FY24

Q3 FY24 Presentation

I am pleased to report that we have sustained Group service revenue growth into Q3 with 14 out of 17 markets growing and we are reiterating our financial guidance for the year.

Our transformation plan in motion

  • NPS and detractor scores are improving across all markets.
  • Vodafone Business achieved a 5% growth rate in the quarter, driven by strong performance in digital services and the IoT sector.
  • In Africa, financial services in Egypt saw a significant customer increase of over 55% to 7.5 million, supported by Vodacom's capabilities.

We need to deliver to our customers the simple and predictable experience they expect such as seamless connections, upgrades, all service interactions. We’re making these basics our focus.

  • Over a third of the planned 11,000 role reductions have already been completed as part of efforts to simplify the business.
  • Continuing efforts to downsize the portfolio, with progress in approvals for the sale of operations in Spain and the merger in the UK.
  • Actively exploring options for Vodafone Italy, focusing on outcomes that maximize shareholder value.

We need to step up the speed and decisiveness of our execution. We will do so by freeing up time and resources to focus on our commercial competitiveness by reducing internal complexity.

  • Group service revenue growth sustained into Q3 with 14 out of 17 markets showing growth; financial guidance for the year reiterated.
  • In Germany, the largest market, service revenue met expectations.
  • Improved commercial momentum in both Fixed and Mobile services.

We need to change our organisation and focus our resources on a portfolio of segments, products and geographies that is right sized for growth and returns over time.

Nov 14 2023

View H1 FY24

H1 FY24 Management Interview

My priorities are to focus on our customers, become a simpler business and accelerate growth. To set us on this path we have taken significant actions over the last six months.

  • Improving overall customer experience
  • Group wide focus
  • Tariff simplification
  • Improving in home WiFi
  • Driving improving Consumer NPS
  • Improving network quality
  • Successfully executing price actions
  • Launching new propositions
  • Optimising sales channels
  • Managing transition impact
  • Enhancing TV proposition
  • €1bn efficiency programme
  • New simplification initiatives
  • New customer investment
  • Energy & extra inflation

Jul 24 2023

View Q1 FY24

Q1 FY24 Management Interview

I'm pleased to report that we have achieved a better service revenue performance across almost all of our markets in Q1, and we've also reiterated our EBITDAaL and cashflow guidance for the year.

  • Targeting 30% detractor reduction in all markets, with weekly CX boards in place
  • Advertising investment +23% (>50% focused on Brand differentiation)
  • German cable network quality recognised in multiple independent tests; broadband losses in-line with expectations
  • 1/3 of 11k role reductions in Group & markets currently being actioned
  • Shared Operations commercial model blueprint complete
  • Germany mobile tariff simplification starting
  • Sales channel restructuring plan executed in Spain
  • Pricing actions successfully implemented across almost all markets
  • Vodafone Business acceleration, supported by digital services +14.9%
  • Announced UK merger with Three UK

May 16 2023

View FY23 Annual Report

FY23 Management Presentation

The circumstances of our industry and the position of Vodafone within it, require us to change. And by change I mean a significant redesign of where we focus our efforts and how we organise ourselves.

Our transformation plan: early execution examples

  • €150m investment reallocated in FY24 towards customer experience
  • Brand spend increased €100m YoY
  • New SME customer journeys in Germany & UK
  • 11k Europe role reductions in ‘Group’ & markets embedded in 3-yr plan
  • First actions in Group, Germany & Italy
  • Targeted individual incentives for Business digital services
  • Capex reallocated from lower to higher ROCE markets
  • Vodafone Spain under strategic review
  • €6.5 billion proceeds from Vantage Towers, Hungary & Ghana
Date Title Report Presentation Video Q&A Spreadsheet Transcript
Jun 17 2024 Form 20-F
May 24 2024 ESG Addendum and methodology
May 24 2024 Form 20-F
May 24 2024 Annual report
May 24 2024 Simplified Vodafone holding structure
May 14 2024 Full Year
May 07 2024 Change in reporting
Mar 15 2024 Vodafone investor update
Feb 05 2024 Q3
Nov 14 2023 H1
Jul 24 2023 Q1
Jun 14 2023 Merger of Vodafone UK and Three UK
Date Title Report Presentation Video Q&A Spreadsheet Transcript
Jun 23 2023 Cyber Security Factsheet
Jun 22 2023 Form 20-F
May 26 2023 iXBRL Filing
May 26 2023 TCFD
May 26 2023 ESG Addendum
May 26 2023 2023 Summary
May 26 2023 Annual Report
May 26 2023 Accessible Annual Report
May 22 2023 Simplified Vodafone holding structure
May 16 2023 Full Year
Apr 18 2023 Social Contract
Feb 01 2023 Q3
Nov 15 2022 H1
Nov 09 2022 Vantage Towers Transaction
Jul 25 2022 Q1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
Jun 17 2022 Form 20-F
May 27 2022 iXBRL Filing
May 27 2022 2022 Summary
May 27 2022 Annual Report
May 27 2022 ESG Addendum
May 27 2022 TCFD
May 17 2022 Full Year
Mar 31 2022 Simplified Vodafone holding structure
Feb 02 2022 Q3
Nov 16 2021 H1
Sep 29 2021 Digital Services & Experiences
Jul 23 2021 Q1
Jul 22 2021 Change in segmental reporting
Jun 17 2021 Vodafone Technology
Date Title Report Presentation Video Q&A Spreadsheet Transcript
Jun 23 2021 Form 20-F
May 28 2021 2021 Summary
May 28 2021 Annual Report
May 28 2021 TCFD
May 28 2021 ESG Addendum
May 18 2021 Full Year
Mar 18 2021 Vodafone Business
Feb 03 2021 Q3
Nov 16 2020 H1
Jul 24 2020 Q1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 12 2020 Full Year
Mar 31 2020 Form 20-F
Mar 31 2020 Annual Report
Feb 05 2020 Q3
Nov 26 2019 ESG Day
Nov 12 2019 H1
Sep 10 2019 Digital First Vodafone
Jul 26 2019 Q1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 14 2019 Full Year
Mar 31 2019 Form 20-F
Mar 31 2019 Annual Report
Mar 14 2019 VodafoneZiggo Open Office
Jan 25 2019 Q3
Nov 13 2018 H1
Aug 30 2018 TPG & VHA Merger
Jul 25 2018 Q1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 15 2018 Full Year
May 09 2018 Liberty Germany & CEE acquisition
Mar 31 2018 Form 20-F
Mar 31 2018 Annual Report
Feb 01 2018 Q3
Nov 14 2017 H1
Sep 19 2017 Fixed & Convergence Site visit materials
Sep 19 2017 Fixed & Convergence Open Office
Sep 11 2017 German Gigabit Investment
Jul 21 2017 Q1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 16 2017 Full Year
Mar 31 2017 Form 20-F
Mar 31 2017 Annual Report
Mar 01 2017 Vodafone Idea Merger
Feb 02 2017 Q3
Nov 15 2016 H1
Sep 29 2016 Germany Open Office
Jul 22 2016 Q1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 17 2016 Full Year
Mar 31 2016 Form 20-F
Mar 31 2016 Annual Report
Feb 04 2016 Q3
Nov 10 2015 H1
Jul 24 2015 Q1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 19 2015 Full Year
Mar 31 2015 Form 20-F
Mar 31 2015 Annual Report
Feb 05 2015 Q3
Nov 11 2014 H1
Jul 25 2014 Q1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 20 2014 Full Year
Mar 31 2014 Annual Report
Mar 31 2014 Form 20-F
Mar 17 2014 Ono acquisition
Feb 06 2014 Q3
Nov 12 2013 H1
Sep 02 2013 VZW stake sale
Jul 30 2013 KDG public takeover offer
Jul 19 2013 Q1
Jun 24 2013 KDG acquisition
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 21 2013 Full Year
Mar 31 2013 Form 20-F
Mar 31 2013 Annual Report
Feb 07 2013 Q3
Nov 13 2012 H1
Jul 20 2012 Q1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 22 2012 Full Year
Mar 31 2012 Form 20-F
Mar 31 2012 Annual Report
Feb 09 2012 Q3
Nov 08 2011 H1
Jul 22 2011 Q1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 17 2011 Full Year
Mar 31 2011 Form 20-F
Mar 31 2011 Annual Report
Feb 03 2011 Q3
Nov 09 2010 H1
Jul 23 2010 Q1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 18 2010 Full Year
Mar 31 2010 Form 20-F
Mar 31 2010 Annual Report
Feb 04 2010 Q3
Nov 10 2009 H1
Jul 24 2009 Q1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 19 2009 Full Year
Mar 31 2009 Form 20-F
Mar 31 2009 Annual Report
Feb 03 2009 Q3
Nov 11 2008 H1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 27 2008 Full Year
Mar 31 2008 Form 20-F
Nov 13 2007 H1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 29 2007 Full Year
Nov 14 2006 H1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 30 2006 Full Year
Nov 15 2005 H1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 24 2005 Full Year
Nov 16 2004 H1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 25 2004 Full Year
Nov 18 2003 H1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 27 2003 Full Year
Nov 12 2002 H1
Date Title Report Presentation Video Q&A Spreadsheet Transcript
May 27 2002 Full Year
Date Title Report Presentation Video Q&A Spreadsheet Transcript
Mar 31 2001 Full Year

IMAGES

  1. Describe the Structure of Html

    what is html structure and presentation

  2. Structure of an HTML Page

    what is html structure and presentation

  3. What is HTML? How does it work? This guide will walk you right through

    what is html structure and presentation

  4. Basic Structure of a HTML Page

    what is html structure and presentation

  5. Basic html structure

    what is html structure and presentation

  6. Basic HTML Structure

    what is html structure and presentation

VIDEO

  1. Organizational Structure Presentation

  2. What is HTML

  3. 11: HTML Structure and Semantics Part 4 elements.html Content

  4. 10: HTML Structure and Semantics Part 3 Categories

  5. Text Structure Presentation

  6. Creating the Basic HTML Structure

COMMENTS

  1. 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. ...

  2. 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 ...

  3. 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 ...

  4. 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.

  5. 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.

  6. HTML Page Elements

    The main role of HTML is to define the structure and layout of a web page by using a set of tags or elements. These tags represent different types of content such as headings, paragraphs, images, links, forms, and tables. ... and presentation of elements on a webpage. It ensures that everything displays as intended and that there's appropriate ...

  7. 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 ...

  8. An Introduction to HTML for Beginners

    HTML, which stands for HyperText Markup Language, serves as the foundation of web development. It enables you to create interactive web pages, structure content, and effectively communicate your message. In this guide, we'll explore HTML comprehensively, addressing essential questions to provide a strong foundation for budding web developers.

  9. What is HTML

    HTML stands for H yper T ext M arkup L anguage. HTML is the standard markup language for Web pages. HTML elements are the building blocks of HTML pages. HTML elements are represented by <> tags.

  10. What is HTML

    HTML, or Hypertext Markup Language, is a markup language for the web that defines the structure of web pages. It is one of the most basic building blocks of every website, so it's crucial to learn if you want to have a career in web development. In this article, I will walk you through what HTML is about in detail, how it does things on web ...

  11. What Is HTML? A Beginner's Guide

    HTML stands for "hypertext markup language" and is a relatively simple language used to create web pages. Because it doesn't allow variables or functions, it's not considered a "programming language," but rather a "markup language," a language that uses tags to define elements within a document.

  12. Structure vs. Presentation

    The main goal of HTML 4.01 is the "separation of structure and presentation". As indicated in the section 2.4.1 of HTML 4.01: "HTML has its roots in SGML which has always been a language for the specification of structural markup. As HTML matures, more and more of its presentational elements and attributes are being replaced by other mechanisms ...

  13. HTML Introduction

    HTML, or HyperText Markup Language, is the standard markup language used to create web pages. It's a combination of Hypertext, which defines the link between web pages, and Markup language, which is used to define the text document within tags to structure web pages. This language is used to annotate text so that machines can understand and ...

  14. Structuring the web with HTML

    To build websites, you should know about HTML — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.

  15. 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. In this article, we looked at the basic structure of an HTML document, including the head and body sections ...

  16. 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 including 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. Example: To demonstrate basic HTML document structure.

  17. HTML BASICS Slides Presentation

    HTML is used as the graphical user interface in client-side programs written in JavaScript. Server-side languages like PHP and Java also receive data from web pages and use HTML as the output mechanism. The emerging Ajax technologies likewise use HTML and XHTML as their visual engine.

  18. What is HTML? What Does HTML Stand For? [Solved]

    HTML is a markup language that defines the structure of web pages. In this article, you will learn what HTML stands for, what it does, and why it is essential for web development. You will also find examples of HTML code and links to helpful resources.

  19. What is the Structure of HTML Document?

    An HTML document is divided into two parts: Head part - The title and metadata of a web document are contained in the head element. Body part - The body element includes the information that you wish to display on a web page. To make your web pages HTML 4 compatible, include a document type declaration ( DTD) before the HTML element.

  20. Introduction to HTML

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

  21. What is HTML? Definition of Hypertext Markup Language

    HTML is a markup language that defines the structure and content of web pages. It uses tags, attributes, and elements to create web documents. In this tutorial, you will learn the basics of HTML, such as how to create forms, input, text, images, headings, and more. You will also see some examples of HTML code and its output. Whether you are a beginner or an expert, this tutorial will help you ...

  22. Structure and presentation

    Structure consists of the mandatory parts of an HTML document plus the semantic and structured markup of its contents. Presentation is the style you give the content. In most cases presentation is about the way a document looks, but it can also affect how a document sounds - not everybody uses a graphical web browser.

  23. Learn Web Development Basics

    As a web developer, the three main languages we use to build websites are HTML, CSS, and JavaScript. JavaScript is the programming language, we use HTML to structure the site, and we use CSS to design and layout the web page. These days, CSS has become more than just a design language, though. You can actually implement animations and smooth ...

  24. Financial Results and Presentations

    New organisational structure and executive management team in place. Completed first phase of commercialising shared operations, enabling greater transparency, productivity and flexibility. Actioned 5,0001 role reductions and announced a further 2,000 in first year of 3-year 11,000 1 plan and continued to deliver opex efficiencies.