html structure vs presentation

Teach Computer Science

HTML Structure and Presentation

Ks3 computer science.

11-14 Years Old

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

GCSE Computer Science

14-16 Years Old

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

A-Level Computer Science

16-18 Years Old

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

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

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

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

Html structure.

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

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

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

HTML tags are not case sensitive.

HTML Attributes

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

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

Ways to add CSS to HTML Elements

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

HTML Structure vs. HTML Presentation

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

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

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

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

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

HTML Structure and Presentation

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

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

Hypertext Markup Language (HTML)

HTML is markup language used to create web pages.

HTML pages are interpreted by a web browser .

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

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

Images, tables and hyperlinks are also included using HTML.

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

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

Example of HTML

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

Cascading Style Sheets (CSS)

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

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

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

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

Example of CSS

p { color: blue }

Related Theory

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

Related Quizzes

The Internet

Sign up for Guru News

Popular downloads.

Storage Devices 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

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

Document structure

HTML documents include a document type declaration and the <html> root element. Nested in the <html> element are the document head and document body. While the head of the document isn't visible to the sighted visitor, it is vital to make your site function. It contains all the meta information, including information for search engines and social media results, icons for the browser tab and mobile home screen shortcut, and the behavior and presentation of your content. In this section, you'll discover the components that, while not visible, are present on almost every web page.

To create the MachineLearningWorkshop.com (MLW) site, start by including the components that should be considered essential for every web page: the type of document, the content's human language, the character set, and, of course, the title or name of the site or application.

Add to every HTML document

There are several features that should be considered essential for any and every web page. Browsers will still render content if these elements are missing, but include them. Always.

<!DOCTYPE html>

The first thing in any HTML document is the preamble. For HTML, all you need is <!DOCTYPE html> . This may look like an HTML element, but it isn't. It's a special kind of node called "doctype". The doctype tells the browser to use standards mode. If omitted, browsers will use a different rendering mode known as quirks mode . Including the doctype helps prevent quirks mode.

<html>

The <html> element is the root element for an HTML document. It is the parent of the <head> and <body> , containing everything in the HTML document other than the doctype. If omitted it will be implied, but it is important to include it, as this is the element on which the language of the content of the document is declared.

Content language

The lang language attribute added to the <html> tag defines the main language of the document. The value of the lang attribute is a two- or three-letter ISO language code followed by the region. The region is optional, but recommended, as a language can vary greatly between regions. For example, French is very different in Canada ( fr-CA ) versus Burkina Faso ( fr-BF ). This language declaration enables screen readers, search engines, and translation services to know the document language.

The lang attribute is not limited to the <html> tag. If there is text within the page that is in a language different from the main document language, the lang attribute should be used to identify exceptions to the main language within the document. Just like when it is included in the head, the lang attribute in the body has no visual effect. It only adds semantics, enabling assistive technologies and automated services to know the language of the impacted content.

In addition to setting the language for the document and exceptions to that base language, the attribute can be used in CSS selectors. <span lang="fr-fr">Ceci n'est pas une pipe.</span> can be targeted with the attribute and language selectors [lang|="fr"] and :lang(fr) .

<head>

Nested between the opening and closing <html> tags, we find the two children: <head> and <body> :

The <head> , or document metadata header, contains all the metadata for a site or application. The body contains the visible content. The rest of this section focuses on the components found nested inside the opening and closing <head></head>

Required components inside the <head>

The document metadata, including the document title, character set, viewport settings, description, base URL, stylesheet links, and icons, are found in the <head> element. While you may not need all these features, always include character set, title, and viewport settings.

Character encoding

The very first element in the <head> should be the charset character encoding declaration. It comes before the title to ensure the browser can render the characters in that title and all the characters in the rest of the document.

The default encoding in most browsers is windows-1252 , depending on the locale. However, you should use UTF-8 , as it enables the one- to four-byte encoding of all characters, even ones you didn't even know existed. Also, it's the encoding type required by HTML5.

To set the character encoding to UTF-8, include:

By declaring UTF-8 (case-insensitive), you can even include emojis in your title (but please don't).

The character encoding is inherited into everything in the document, even <style> and <script> . This little declaration means you can include emojis in class names and the selectorAPI (again, please don't). If you do use emojis , make sure to use them in a way that enhances usability without harming accessibility.

Document title

Your home page and all additional pages should each have a unique title. The contents for the document title, the text between the opening and closing <title> tags, are displayed in the browser tab, the list of open windows, the history, search results, and, unless redefined with <meta> tags , in social media cards.

Viewport metadata

The other meta tag that should be considered essential is the viewport meta tag, which helps site responsiveness, enabling content to render well by default, no matter the viewport width. While the viewport meta tag has been around since June 2007, when the first iPhone came out, it's only recently been documented in a specification . As it enables controlling a viewport's size and scale, and prevents the site's content from being sized down to fit a 960px site onto a 320px screen, it is definitely recommended.

The preceding code means "make the site responsive, starting by making the width of the content the width of the screen". In addition to width , you can set zoom and scalability, but they both default to accessible values. If you want to be explicit, include:

Viewport is part of the Lighthouse accessibility audit ; your site will pass if it is scalable and has no maximum size set.

So far, the outline for our HTML file is:

Other <head> content

There's a lot more that goes into the <head> . All the metadata, in fact. Most of the elements you'll find in the <head> are covered here, while saving a plethora of the <meta> options for the next chapter.

You've seen the meta character set and the document title, but there is a lot more metadata outside of <meta> tags that should be included.

The <head> is where you include styles for your HTML. There is a learning path dedicated to CSS if you want to learn about styles, but you do need to know how to include them in your HTML documents.

There are three ways to include CSS: <link> , <style> , and the style attribute.

The main two ways to include styles in your HTML file are by including an external resource using a <link> element with the rel attribute set to stylesheet , or including CSS directly in the head of your document within opening and closing <style> tags.

The <link> tag is the preferred method of including stylesheets. Linking a single or a few external style sheets is good for both developer experience and site performance: you get to maintain CSS in one spot instead of it being sprinkled everywhere, and browsers can cache the external file, meaning it doesn't have to be downloaded again with every page navigation.

The syntax is <link rel="stylesheet" href="styles.css"> , where styles.css is the URL of your stylesheet. You'll often see type="text/css" . Not necessary! If you are including styles written in something other than CSS, the type is needed, but since there isn't any other type, this attribute isn't needed. The rel attribute defines the relationship: in this case stylesheet . If you omit this, your CSS will not be linked.

You'll discover a few other rel values shortly, but let's first discuss other ways of including CSS.

If you want your external style sheet styles to be within a cascade layer but you don't have access to edit the CSS file to put the layer information in it, you'll want to include the CSS with @import inside a <style> :

When using @import to import style sheets into your document, optionally into cascade layers, the @import statements must be the first statements in your <style> or linked stylesheet, outside of the character set declaration.

While cascade layers are still fairly new and you might not spot the @import in a head <style> , you will often see custom properties declared in a head style block:

Styles, either via <link> or <style> , or both, should go in the head. They will work if included in the document's body, but you want your styles in the head for performance reasons. That may seem counterintuitive, as you may think you want your content to load first, but you actually want the browser to know how to render the content when it is loaded. Adding styles first prevents the unnecessary repainting that occurs if an element is styled after it is first rendered.

Then there's the one way of including styles you'll never use in the <head> of your document: inline styles. You'll probably never use inline styles in the head because the user agents' style sheets hide the head by default. But if you want to make a CSS editor without JavaScript, for example, so you can test your page's custom elements, you can make the head visible with display: block , and then hide everything in the head, and then with an inline style attribute, make a content-editable style block visible.

While you can add inline styles on the <style> , it's way more fun to style your <style> in your style . I digress.

Other uses of the <link> element

The link element is used to create relationships between the HTML document and external resources. Some of these resources may be downloaded, others are informational. The type of relationship is defined by the value of the rel attribute. There are currently 25 available values for the rel attribute that can be used with <link> , <a> and <area> , or <form> , with a few that can be used with all. It's preferable to include those related to meta information in the head and those related to performance in the <body> .

You'll include three other types in your header now: icon , alternate , and canonical . (You'll include a fourth type, rel="manifest" , in the next module ).

Use the <link> tag, with the rel="icon" attribute/value pair to identify the favicon to be used for your document. A favicon is a very small icon that appears on the browser tab, generally to the left of the document title. When you have an unwieldy number of tabs open, the tabs will shrink and the title may disappear altogether, but the icon always remains visible. Most favicons are company or application logos.

If you don't declare a favicon, the browser will look for a file named favicon.ico in the top-level directory (the website's root folder). With <link> , you can use a different file name and location:

The preceding code says "use the mlwicon.png as the icon for scenarios where a 16px, 32px, or 48px makes sense." The sizes attribute accepts the value of any for scalable icons or a space-separated list of square widthXheight values; where the width and height values are 16, 32, 48, or greater in that geometric sequence, the pixel unit is omitted, and the X is case-insensitive.

There are two special non-standard kind of icons for Safari browser: apple-touch-icon for iOS devices and mask-icon for pinned tabs on macOS. apple-touch-icon is applied only when the user adds a site to home screen: you can specify multiple icons with different sizes for different devices. mask-icon will only be used if the user pins the tab in desktop Safari: the icon itself should be a monochrome SVG, and the color attribute fills the icon with needed color.

While you can use <link> to define a completely different image on each page or even each page load, don't. For consistency and a good user experience, use a single image! Twitter uses the blue bird: when you see the blue bird in your browser tab, you know that tab is open to a Twitter page without clicking on the tab. Google uses different favicons for each of its different applications: there's a mail icon, a calendar icon, for example. But all the Google icons use the same color scheme. Again, you know exactly what the content of an open tab is simply from the icon.

Alternate versions of the site

We use the alternate value of the rel attribute to identify translations, or alternate representations, of the site.

Let's pretend we have versions of the site translated into French and Brazilian Portuguese:

When using alternate for a translation, the hreflang attribute must be set.

The alternate value is for more than just translations. For example, the type attribute can define the alternate URI for an RSS feed when the type attribute is set to application/rss+xml or application/atom+xml . Let's link to a pretend PDF version of the site.

If the rel value is alternate stylesheet , it defines an alternate stylesheet and the title attribute must be set giving that alternate style a name.

If you create several translations or versions of Machine Learning Workshop, search engines may get confused as to which version is the authoritative source. For this, use rel="canonical" to identify the preferred URL for the site or application.

Include the canonical URL on all of your translated pages, and on the home page, indicating our preferred URL:

The rel="canonical" canonical link is most often used for cross-posting with publications and blogging platforms to credit the original source; when a site syndicates content, it should include the canonical link to the original source.

The <script> tag is used to include, well, scripts. The default type is JavaScript. If you include any other scripting language, include the type attribute with the mime type, or type="module" if it's a JavaScript module . Only JavaScript and JavaScript modules get parsed and executed.

The <script> tags can be used to encapsulate your code or to download an external file. In MLW, there is no external script file because contrary to popular belief, you don't need JavaScript for a functional website, and, well, this is an HTML learning path, not a JavaScript one.

You will be including a tiny bit of JavaScript to create an Easter egg later on:

This snippet creates an event handler for an element with the id of switch . With JavaScript, you don't want to reference an element before it exists. It doesn't exist yet, so we won't include it yet. When we do add the light switch element, we'll add the <script> at the bottom of the <body> rather than in the <head> . Why? Two reasons. We want to ensure elements exist before the script referencing them is encountered as we're not basing this script on a DOMContentLoaded event . And, mainly, JavaScript is not only render-blocking , but the browser stops downloading all assets when scripts are downloaded and doesn't resume downloading other assets until the JavaScript has finished execution. For this reason, you will often find JavaScript requests at the end of the document rather than in the head.

There are two attributes that can reduce the blocking nature of JavaScript download and execution: defer and async . With defer , HTML rendering is not blocked during the download, and the JavaScript only executes after the document has otherwise finished rendering. With async , rendering isn't blocked during the download either, but once the script has finished downloading, the rendering is paused while the JavaScript is executed.

To include MLW's JavaScript in an external file, you could write:

Adding the defer attribute defers the execution of the script until after everything is rendered, preventing the script from harming performance. The async and defer attributes are only valid on external scripts.

There is another element that is only found in the <head>. Not used very often, the <base> element allows setting a default link URL and target. The href attribute defines the base URL for all relative links.

The target attribute, valid on <base> as well as on links and forms, sets where those links should open. The default of _self opens linked files in the same context as the current document. Other options include _blank , which opens every link in a new window, the _parent of the current content, which may be the same as self if the opener is not an iframe, or _top , which is in the same browser tab, but popped out of any context to take up the entire tab.

Most developers add the target attribute to the few, if any, links they want to open in a new window on the links or form themselves, rather than using <base> .

If our website found itself nested within an iframe on a site like Yummly, including the <base> element would mean when a user clicks on any links within our document, the link will load popped out of the iframe, taking up the whole browser window.

One of the drawbacks of this element is that anchor links are resolved with <base> . The <base> effectively converts the link <a href="#ref"> to <a target="_top" href="https://machinelearningworkshop.com#ref"> , triggering an HTTP request to the base URL with the fragment attached.

A few other things to note about <base> : there can be only one <base> element in a document, and it should come before any relative URLs are used, including possible script or stylesheet references.

The code now looks like this:

HTML comments

Note that the script is wrapped between some angle brackets, dashes, and a bang. This is how you comment out HTML. We'll leave the script commented out until we have the actual content on the page. Anything between  will not be visible or parsed. HTML comments can be put anywhere on the page, including the head or body, with the exception of scripts or style blocks, where you should use JavaScript and CSS comments, respectively.

You have covered the basics of what goes in the <head> , but you want to learn more than the basics. In the next sections, we will learn about meta tags, and how to control what gets displayed when your website is linked to on social media.

Check your understanding

Test your knowledge of document-structure.

How do you identify the language of the document?

Select elements that can be included in the <head> .

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

Last updated 2022-09-27 UTC.

Our website is undergoing major changes. You may experience unexpected issues while navigating. I appreciate your patience.🙏

< BACK TO BLOG

Learn HTML Basics: Introduction to HTML Structure & Elements

By Faraz - June 07, 2023

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

learn html basics introduction to html structure and elements.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Using Headings

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

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

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

Choosing the Right Heading Level

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

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

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

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

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

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

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

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

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

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

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

Creating a Basic Link

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

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

Linking to Email Addresses

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

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

Linking to Anchors

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

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

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

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

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

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

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

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

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

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

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

Unordered Lists

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

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

Here's an example of an unordered list:

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

Ordered Lists

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

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

Here's an example of an ordered list:

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

Nested Lists

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

Here's an example of a nested list:

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

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

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

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

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

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

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

Italic Text

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

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

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

Underlined Text

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

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

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

Strikethrough Text

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

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

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

Superscript and Subscript Text

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

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

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

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

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

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

Creating a Basic Table

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

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

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

Table Caption and Header Groups

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

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

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

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

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

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

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

Embedding Images

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

Here's an example:

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

Embedding Videos

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

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

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

Embedding Audio

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

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

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

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

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

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

Form Structure

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

Here's an example of a basic form:

Input Fields

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

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

Here's an example of a text input field:

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

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

Checkboxes and Radio Buttons

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

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

Here's an example of a checkbox:

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

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

Here's an example of a radio button group:

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

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

Here's an example of a submit button:

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

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

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

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

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

Semantic Elements

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

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

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

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

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

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

Semantic Headings

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

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

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

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

Semantic Links

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Q2: Can I create a website using only HTML?

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

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

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

Q4: Can I learn HTML on my own?

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

Q5: Is HTML a programming language?

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

Q6: How long does it take to learn HTML?

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

How to Create a Parallax Website with HTML and CSS.jpg

That’s a wrap!

I hope you enjoyed this article

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

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

Thanks! Faraz 😊

Subscribe to my Newsletter

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

Build Your Own Nixie Tube Clock using HTML, CSS, and JavaScript (Source Code)

Learn how to create a stunning Nixie Tube Clock using HTML, CSS, and JavaScript. Get the source code and step-by-step instructions today!

Create a Responsive Popup Contact Form: HTML, CSS, JavaScript Tutorial

April 17, 2024

Create a Responsive Customer Review Using HTML and CSS

April 14, 2024

Create a URL Shortening Landing Page using HTML, CSS, and JavaScript

April 08, 2024

Develop Responsive Admin Dashboard with HTML, Materialize CSS, and JavaScript

April 05, 2024

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

Learn to add a sleek scroll down button to your website using HTML, CSS, and JavaScript. Step-by-step guide with code examples.

How to Create a Trending Animated Button Using HTML and CSS

March 15, 2024

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

March 10, 2024

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

March 07, 2024

How to Create a Liquid Button with HTML, CSS, and JavaScript (Source Code)

March 01, 2024

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

Learn how to create an interactive Number Guessing Game from scratch using HTML, CSS, and JavaScript with this beginner-friendly tutorial.

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

December 25, 2023

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

December 07, 2023

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

November 17, 2023

Sudoku Solver with HTML, CSS, and JavaScript

October 16, 2023

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

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

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

January 04, 2024

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

November 30, 2023

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

October 30, 2023

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

October 26, 2023

Creating a Responsive Footer with Tailwind CSS (Source Code)

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

Crafting a Responsive HTML and CSS Footer (Source Code)

November 11, 2023

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

October 17, 2023

Bootstrap Footer Template for Every Website Style

March 08, 2023

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

August 19, 2022

Learn HTML Basics for Beginners in Just 15 Minutes

If you want to build a website, the first language that you need to learn is HTML.

In this article, we are going to go through the basics of HTML. At the end, we are going to build a basic website using only HTML.

Here's a video you can watch if you want to supplement this article:

What Is HTML?

HTML, which stands for Hypertext Markup Language, is a pretty simple language. It consists of different elements which we use to structure a web page.

What Are HTML Elements?

The element usually starts with an opening tag, which consists of the name of the element. It's wrapped in opening and closing angle brackets. The opening tag indicates where the element begins.

Similar to the opening tag, the closing tag is also wrapped in opening and closing angle brackets. But it also includes a forward slash before the element's name.

Everything inside the opening and closing tags is the content.

But not all elements follow this pattern. We call those that don't empty elements. They only consist of a single tag or an opening tag that cannot have any content. These elements are typically used to insert or embed something in the document.

For example, the <img> element is used to embed an image file, or the <input> element is used to insert an input onto the page.

In the example above, the <img> element only consists of one tag that does not have any content. This element is used to insert an image file from Unsplash in the document.

How to Nest HTML Elements

Elements can be placed inside other elements. This is called Nesting. In the example above, inside the <div> element we have an <h4> element and an <ul> or unordered list element. And Similarly inside the <ul> element, there are 3 <li> or list item elements.

Basic nesting is quite straight-forward to understand. But when the page gets larger, nesting can become complicated.

Therefore, before working with HTML, think about the layout structure you would like to have. You can draw it out on a piece of paper or in your mind. It will help a lot.

What are HTML Attributes?

Elements also have attributes, which contain extra information about the element that will not appear in the content.

In the example above, the <img> element has 2 attributes: src or source to specify the path of the image, and width to specify the width of the image in pixels.

With this example, you can see the following characteristics of attributes:

There is a space between attributes and the element name
Attributes are added in the opening tag
Elements can have many attributes
Attributes usually have a name and a value: name=“value”

But not every attribute has the same pattern. Some can exist without values, and we call them Boolean Attributes.

In this example, if we want to disable the button, all we have to do is pass a disabled attribute without any values. This means that the presence of the attribute represents the true value, otherwise, the absence represents the false value.

Common HTML elements

There are in total more than 100 elements. But 90% of the time you will only use around 20 of the most common. I have put them into 5 groups:

Section elements

These elements are used to organize the content into different sections. They are usually self-explanatory, for example, <header> usually represents a group of the introduction and navigation section, <nav> represents the section that contains navigation links, and so on.

Text content

These elements are used to organize content or text blocks. They are important to accessibility and SEO. They tell the browser the purpose or structure of the content.

These elements can be used together to create forms that users can fill out and submit. Forms might be the trickiest part of HTML.

Images and Links

These elements are used to insert an image or create a hyperlink.

These elements are used to add a break to the webpage.

You can find all the elements on developer.mozilla.org . But for beginners, you just need to know the most common ones.

Block-level vs inline HTML elements

By default, an element can be either block-level or an inline element.

Block-level elements are the elements that always start on a new line and take up the full width available.

Inline elements are the elements that do not start on a new line and it only take up as much width as necessary.

Two elements that represent block-level and inline elements, respectively, are <div> and <span> . In this example, you can see that the <div> elements takes 3 lines, whereas the <span> element only takes up 1 line.

But the question is: how do we know which ones are block-level elements and which ones are inline elements? Well, unfortunately you need to remember them. The easiest way is to remember which are inline elements – and the rest are block elements.

If we look back at the most common HTML elements, inline elements include: <span>, <input>, <button>, <label>, <textarea>, <img>, <a>, <br> .

How to comment in HTML

The purpose of comments is to include notes in the code to explain your logic or simply to organize your code.

HTML comments are wrapped in the special markers:  and they are ignored in the browser.

How to use HTML entities

What if you want to show the text: the <p> tag defines a paragraph. , but the browser interprets <p> as an opening tag for a new element? In this case, we can use HTML entities like in the following example:

How to use emoji in HTML

In the modern web, we can display emoji in HTML pretty easily, like this: 👻

Common beginner mistakes in HTML

1. tags/element names.

Tags/Element names are cAse-inSensitive. This means that they can be written in lowercase or uppercase, but it is recommended that you write everything in lowercase: <button> not <ButTon> .

2. Closing tag

Failing to include a closing tag is a common beginner error. Therefore, whenever you create an opening tag, immediately put in a closing tag.

This is wrong:

The tags have to open and close in a way that they are inside or outside one another.

4. Single quotes and Double quotes

You cannot mix single quotes and double-quotes. You should always use double quotes and use HTML entities if needed.

How to build a simple website with HTML

Individual HTML elements are not enough to create a website. So let's see what more we need to build a simple website from scratch.

How to create an HTML document

First, let's open Visual Studio Code (or your favorite code editor). In the folder of your choice, create a new file and name it index.html.

In the index.html file, type ! (exclamation mark) and press enter. You will see something like this:

This is the minimal code that an HTML document should have to make up a website. And here we have:

<!DOCTYPE html> : First we have Doctype. For some weird historical reason in HTML we have to include the doctype for everything to work correctly.
<html lang="en"></html> : The <html> element wraps all the content on the page, also known as the root element. And we should always include the lang attribute to declare the language of the page.
<head></head> : The <head> element is a container for everything you want to include, but not content that you show to your users.
<meta charset="UTF-8" /> : The first meta element is used to set the character set to be UTF-8, which includes most characters from written languages.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> : The second meta element specifies the browser viewport. This setting is for a mobile-optimized site.
<title>Document</title> : This is the <title> element. It sets the title of the page.
<body></body> : The <body> element contains all the content on the page.

How to build a pancake recipe page

Alright, now that we have the starter code, let's build a pancake recipe page. We are going to use the content from this AllRecipes Page .

First, let's give the <title> element content of the pancakes recipe. You will see the text on the web page tab change. In the <body> element, let's create 3 elements: <header> , <main> and <footer> representing 3 sections.

1. Build the header section

In the header, we want to have the logo and the navigation. Therefore, let's create a div with the content ALL RECIPE for the logo.

For the navigation, let's use the <nav> element. Within the <nav> element, we can use <ul> to create an unordered list. We want to have 3 <li> elements for 3 links: Ingredients, Steps, and Subscribe. The header code looks like this:

2. Build the Main Section

In the main section, first, we want to have a title and an image. We can use h1 for the title and <img> for the image (we can use an image from Unsplash for free):

Next, we want to list all the ingredients. We can use <ol> to create an ordered list and <input type="checkbox" /> to create a checkbox.

But before that, we can use <h2> to start a new content block. We also want to add the id attribute for <h2> so that the link in the navigation knows where to go:

After the ingredients, we want to list all the steps. We can use <h4> for the step heading and <p> for the step content:

Alright, now that we are done with the main section, let's move on to the footer section.

3. Build the Footer Section

In the footer, we want to have a subscribe form and copyright text.

For the subscribe form, we can use the <form> element. Inside it, we can have an <input type="text"> for text input and a <button> for the submit button.

For the copyright text, we can simply use a <div> . Notice here, we can use the HTML entity $copy; for the copyright symbol.

We can add <br> to add some space between the subscribe form and the copyright text:

Alright now we are done! Here is the full code for reference:

You can build a simple website with just HTML. But to be able to build beautiful and functional websites, you need to study CSS and JavaScript.

You can follow me on social media or Youtube for future updates on these topics. But meanwhile, you can check out the freeCodeCamp Curriculum to practice HTML by solving small tasks.

Otherwise, stay happy coding and see you in future posts 👋. __________ 🐣 About me __________

I am the founder of DevChallenges
Subscribe to my Channel
Follow my Twitter
Join Discord

Creator of devchallenges.io

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

Session 03 - HTML Forms & Tables, Introduction to CSS

Harvard Extension School Fall 2021

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

Markup Recap

Accessibility, forms - basic, accessibility: label element, html5 forms, accessibilty of tables, presentation - cascading style sheets (css), css mechanics - rules and selectors, basic selectors - elements, class, id, css properties and values, box model or block model, display property, tools: your browser.

Session 03 - HTML Forms & Tables, Introduction to CSS, slide1 Markup Recap, slide2 Components of HTML Elements, slide3 Essential HTML5 Document Structure, slide4 Accessibility, slide5 Forms - Basic, slide6 Forms, slide7 Forms, slide8 form, slide9 HTTP Method: Get vs. Post, slide10 Text Field, slide11 Radio Buttons, slide12 Checkbox, slide13 Textarea, slide14 Select and Option, slide15 Accessibility: Label Element, slide16 Accessibility: Label Element, slide17 Label Element - using id, label, for, slide18 Labels, slide19 fieldset and legend, slide20 optgroup, slide21 HTML5 forms, slide22 HTML5: Placeholder, slide23 HTML5: Autofocus, slide24 HTML5: email and url, slide25 HTML5: number and range, slide26 HTML5: date and time, slide27 submit.php -- it can do more!, slide28 Tables, slide29 A Simple Table, slide30 Adding thead, tfoot, tbody, caption, and summary, slide31 Benefits of Semantics, slide32 Using "col" and "colgroup", slide33 Accessibilty of Tables, slide34 Accessibility using "headers", slide35 What can we do now that relationship is clear?, slide36 Presentation - Cascading Style Sheets (CSS), slide37 Markup, Presentation, Function, slide38 Styles, slide39 Different Styles for The United States Constitution, slide40 Harvard Summer School, slide41 Responsive Web Design, slide42 CSS Recommendations from the W3C, slide43 CSS Mechanics - rules and selectors, slide44 Anatomy of a CSS Rule, slide45 Simple CSS Example, slide46 CSS Mechanics - Binding Styles to Markup, slide47 style attribute, slide48 style element, slide49 link element, slide50 Combining Rules, slide51 Combining Selectors, slide52 Basic Selectors - elements, class, id, slide53 class selectors, slide54 id selectors, slide55 Contextual Selectors, slide56 CSS Properties and Values, slide57 Inheritance, slide58 Sample "UA" default stylesheets for HTML 2.0 and HTML 4.0, slide59 font properties, slide60 font-family, slide61 font-style, slide62 font-variant and font-weight, slide63 font-size, slide64 Font Sizes: Relative vs. Absolute, slide65 font, slide66 text properties, slide67 CSS Values and Units, slide68 Color Units, slide69 Colorpicker, slide70 Box Model or Block Model, slide71 margin, padding, border, slide72 border-style, slide73 TRBL for padding and margin shorthand, slide74 Margin, Padding, Border Example, slide75 display property, slide76 Tools: Your Browser, slide77 Web Browsers and Layout Engines, slide78 Testdrive Your Browser, slide79

Presentation contains 79 slides

Presentation
Manipulations

Components of HTML Elements

Markup for a Hypertext link:

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

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

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

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

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

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

Essential HTML5 Document Structure

W3C: Web Accessibility Initiative

Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.

W3C Web Accessibility Initiative
Resources for Developers
WCAG 2.1 Level AA Quick Reference
WAVE Web Accessibility Evaluation Tool

Two elements for forms are in our list of most commonly seen elements:

Forms are the "front-end" for the HTTP Client to send information back to the HTTP Server. The submitted information is passed from the HTTP Server to a server-side program that processes the information and produces a response for the browser.

Single line (text input)
Text area (textarea)
radio group
option list (menu)
checkbox group
File Upload
Text area (textarea)
radio group Yes No Maybe
option list (menu) Coffee Tea Water
checkbox group Baseball Basketball Cricket Football (Soccer)
Submit Submit Information
method ("get" or "post")
action (URL of server-side program to process submitted data/information)

While exploring forms, it is useful to use a simple server-side script that simply echo back the name/value information your form submitted ( https://cs12.net/form/submit.php ).

HTTP Method: Get vs. Post

Use POST when form action should not be repeated; or when the action "changes the state"
Use GET when form action is safely repeatable; when the action does not change the state. The technical term for this is " idempotent ".
Query String
https://host/path ?param1=value1&param2=value2&param3=value3
Question mark
Ampersand separated parameter/value pairs
parameter=value

Radio Buttons

Select and option, pull-down menu, scrollable list ← don't do this.

Note: because scrollable lists are difficult for users, they are not typically used.

A scrollable list ( size attribute) that can have multiple selections ( multiple attribute):

Label elements are critical for form accessibility.

label element lets us use markup to associate text with an input element.

Using label you can make the association between the text label and the form input explicit, and not just rely on the visual proximity.

Labels - Why?

Makes text labels associated wtih input elements explicit
Helps with screen readers!
Helps with "clicks" and touch screens!

Do you like to watch NCAA basketball?

Label Element - using id, label, for

id attribute for form input
label element for input label
for attribute in label to link label element with input via the value of id

fieldset and legend

Used to group related choices and even sets.

fieldset and legend elements can further help group related input fields.

The optgroup element allows you to group a long select list.

Select a school:

HTML5 - Forms (HTML Living Standard)
MDN: The form <input> element

HTML5 forms - placeholder, autofocus, and specific input types

HTML5 Form Example
placeholder text
date and time

HTML5: Placeholder

Placeholder text can:

Provide instructions
Show format

Placeholder Text

Used to give instructions:

Used to show format:

Expiration: Submit

In style element ( <style> ) within head element:

HTML5: Autofocus

Autofocus will bring the "focus" of the cursor to that field when the page loads. Typically, you would bring focus to the first input field of the form.

HTML5: email and url

On handheld devices, screen keyboard is optimized for input.

type="email"

HTML5: number and range

Range from 1 to 10, increments of 1:

HTML5: date and time

Datetime-local

15 minute steps:

1 minute steps:

1 second steps:

submit.php -- it can do more!

Form Submit Script

See: Tabular Data from HTML5 Specification

Uses of Tables

Table elements.

table , caption , colgroup , col , tbody , thead , tfoot , tr , td , th

A Simple Table

United States Urban and Rural Populations

Data from United States Census Bureau

Adding thead, tfoot, tbody, caption, and summary

Benefits of semantics.

Semantics lets us selectively manipulate parts of the table -- whether for style or function .

Using "col" and "colgroup"

col and colgroup elements can be used to as a way to apply styles (style or class attribute) to columns.

Using "scope"

The "scope" attribute can be used to associate header information with columns and rows (and also column groups and row groups).

Accessibility using "headers"

The "headers" attribute can also be used to associate header information with columns and rows. This is typically used in more complicated tables.

id attribute. Note the use of the "id" attribute. This is an attribute that can be applied to most any HTML element. Values for "id" must be unique throughout the document.

The value of "headers" is a space-separated list of IDREFS (references to "id" names in the document).

What can we do now that relationship is clear?

Once semantic markup is in place, adding function with JavaScript becomes much easier. For example, we can write some JavaScript to highlight the column/row headings based on the presence of scope or headers attributes.

table with headers and js highlighting functionality

Live Example of Table Highlighting

Markup, Presentation, Function

solarsystem.css
jquery-1.4.2.min.js
jquery.mousewheel-3.0.2.pack.js
jquery.fancybox-1.3.1.js
jquery.fancybox-1.3.1.css
fancybox.png
fancybox-x.png
fancybox-y.png

The markup page references an external stylesheet document.

The CSS file contains style rules for the document ( solarsystem.css )

Different Styles for The United States Constitution

Chocolate Stylesheet
Midnight Stylesheet
Modernist Stylesheet
Oldstyle Stylesheet
Steely Stylesheet
Swiss Stylesheet
Traditional Stylesheet
Ultramarine Stylesheet

Harvard Summer School

Responsive web design.

Responsive Web Design by Ethan Marcotte on A List Apart
Live Example or Responsive Design

CSS Recommendations from the W3C

Current css.

CSS Current Work (CSS level 3)

CSS Validator

CSS 1 , December 1996; Revised January 1999)
CSS 2 , May 1998
CSS 2.1 , June 2011
CSS 2.2 , September 2015

Anatomy of a CSS Rule

Selector and Declarations

Properties and Values

Simple CSS Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.

CSS Mechanics - Binding Styles to Markup

Three ways to bind CSS rules to HTML markup:

style attribute in element
<style> element in HTML head
External CSS document, through the <link> element in HTML head

style attribute

style element

So the full page looks like:

link element

In head element:

In example30.css

The full source:

Combining Rules

Rules can be combined. The following two sets of style rules would produce identical results. Rules can be listed separately:

Or, rules can be grouped. Property:Value pairs need to be separated by a semicolon.

Combining Selectors

Element selectors.

CSS element selector example

class selectors

The class and id attributes of HTML elements can be used in conjunction with styles.

Class names are referenced in CSS as .classname , and may or may not have an element name preceding the period ( .classname or element.classname .

Likewise, id names are referenced in CSS as #idref , and may or may not have an element name preceding the period ( #idref or element#idref .

id selectors

id names are referenced in CSS as #idref , and may or may not have an element name preceding the period ( #idref or element#idref .

Lorem Ipsum

Contextual selectors.

selector1 selector2 { ...rules... }

Emphasized text within li have a different style.

CSS Level 1 lists 53 properties that let you style properties of:

boxes (border, padding, margins)
classification (inline, block, list)

CSS Level 2.1 lists 115 properties .

CSS Properties

Inheritance.

Sample "UA" default stylesheets for HTML 2.0 and HTML 4.0

UA = User-Agent = HTTP Client = Web Browser

Sample style sheet for HTML 2.0 [ Local copy ]
Default style sheet for HTML 4.0 [ Local copy ]

HTML 4 Sample default CSS

Html 2 sample default css, font properties, font-family, font-variant, font-weight.

font-variant and font-weight

Font Sizes: Relative vs. Absolute

As a general guideline with CSS, relative measurements are better than absolute measurements.

Relative to UA settings: xx-small | x-small | small | medium | large | x-large | xx-large
rem - relative to the html em (root em)
Relative to context: larger | smaller
Percentage (%)
"rem" units
"pt" sizes (8pt, 10pt, 12pt)

The font shorthand property allows you to set: [font-style | font-variant | font-weight ]? font-size[/line-height]? font-family

text properties

word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
text-indent
line-height

Align blocks of text left, right, center, and justified.

CSS Values and Units

Length em, pt, ex, mm, cm, in, px e.g. 1.0em
Percentage e.g. 10%
URL url( url goes here ) e.g. url('../images/banner.png')
rgb(24,50,255)
rgb(5%,20%,75%)

Color Units

$prism light refraction$

Wikipedia Web Colors

RGB Color Space

decimal numbers (0 to 255)
hexadecimal numbers (00 to ff)
percentages (0 to 100%)

The following are all equivalent ways of defining a shade of orange:

Colorpicker

HTML Color Picker from W3Schools
DIY - <input type="color" />

Box Model Illustration from CSS: The Definitive Guide by Eric Meyer

A more detailed look:

Image from Cascading Style Sheets: The Definitive Guide, 3rd ed by Eric Meyer, published by O'Reilly

In your browser

margin, padding, border

margin-right
margin-bottom
margin-left
margin (shorthand)
padding-top
padding-right
padding-bottom
padding-left
padding (shorthand)
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border-color

border-style

border-right
border-bottom
border-left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras feugiat mauris facilisis libero. Etiam nisl. Cras est dolor, viverra ac, ultrices volutpat, vestibulum et, odio. Nulla eget libero. Praesent eget tellus vel nibh nonummy egestas.

Etiam eu arcu quis lectus semper sodales. Donec vitae risus. Integer sollicitudin imperdiet dolor. Donec vehicula. Aliquam ut sapien sed eros imperdiet pharetra. Donec accumsan scelerisque leo. Sed eros nunc, pellentesque et, mollis non, faucibus venenatis, tortor.

Pellentesque a velit. Sed pharetra vestibulum mauris. Ut vel arcu. Cras dolor ligula, eleifend et, ultrices nec, viverra in, ipsum. In convallis pharetra lacus. Etiam tellus. Aliquam quam. Vivamus mattis purus nec quam. Suspendisse hendrerit dui ac massa.

Etiam rhoncus. Praesent id neque et odio dictum varius. Integer imperdiet blandit orci. Donec nec nunc posuere augue egestas accumsan. Nunc nonummy metus ut nunc. In id turpis vitae nisl eleifend bibendum. Curabitur cursus aliquam dolor.

Duis id erat a tortor laoreet aliquet. Quisque consectetuer lobortis mauris. Donec pede. Cras non turpis vel tortor iaculis nonummy. Ut facilisis viverra sem. Morbi pretium iaculis ligula. Praesent lectus. Aenean vel ante. Nunc interdum semper nisl. Pellentesque tincidunt.

Aliquam leo nunc, congue a, imperdiet eget, aliquet ac, tortor. Sed ac est. Vivamus nisi. Mauris in nisl. Sed ultricies nunc vel nunc. In dignissim consequat arcu. Sed in risus. Nulla facilisi. Integer purus urna, laoreet vitae, congue a, posuere ut, ipsum. Nunc ac lacus sit amet nisi porttitor aliquam.

Vivamus dictum, sem in vulputate vestibulum, est tellus tempus dolor, ut laoreet arcu metus eu orci. Sed enim augue, dignissim sed, porta sed, dapibus ac, nibh. Nunc mattis ipsum eu lectus. Nam pharetra mattis massa.

Maecenas consectetuer, lectus ac tempus iaculis, leo ipsum tincidunt erat, et aliquam libero nulla ac ipsum. Nam turpis leo, feugiat vel, nonummy id, ornare a, arcu. Vestibulum porta, justo et ornare porta, neque eros vestibulum libero, semper iaculis augue turpis eu neque.

TRBL for padding and margin shorthand

Stay out of "TRBL" (top right bottom left) for padding and margin shorthand.

Values that are present are used to fill in for values that are not:

Margin, Padding, Border Example

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.

You can make "inline" elements into "block" by setting the display property!

And a few that aren't listed at BrowseHappy.com :

Firefox Quantum (Developer Edition)

Web Browsers and Layout Engines

Testdrive your browser, lorem ipsum dolor.

Software Engineering
Data Science
Data Analytics
UX / UI Design
Digital Marketing
Technical Project Management
How we work
Los Angeles
San Francisco
Philadelphia
Washington DC
Salt Lake City
Minneapolis
Thinkful News
Student Stories
How We Work
Communities

Learning the Basics of HTML and HTML5

By thinkful.

The process of building, creating, and maintaining webpages and websites comes under the purview of both front-end and back-end web development . While websites are applications that work on the internet, the structure of a web page is defined by HTML and HTML5.

What is HTML?

The term HTML is also known as Hypertext Markup Language. Using attributes, tags, and elements, HTML defines the document's skeleton or structure. The structural elements are provided in headings, lists, and paragraphs.

Features of HTML

HTML has many features. Let us take a look at some popular features that help developers.

• HTML is simple user friendly, and platform-independent. Hypertext markup language has more than 100 built-in tags, and the developers need to learn only a handful for daily use. • The investment in HTML scripting language is low, and the return is high in terms of features. The developers can add audio, images, and videos to the web page using HTML.

Structure of HTML

The HTML contains two parts the head and the body. The root tag of the HTML document is <HTML>.

• The head part includes the title of the web pages. If the styles and presentation are specified in a separate CSS file, developers need to have the external link in the head section. • The body section includes all tag elements used to display the webpage's content — for example, the tag to add text, links, images, etc.

In the above code, the body part contains the heading tag and a link specified using the anchor tag.

What is HTML5?

HTML5 is nothing but the latest version of HTML. It includes all tags and features of HTML with new tags like <canvas>, <video>, and <audio>. and . It also has tags for semantics named <footer>, <header>, and <article>.

Structure of HTML5

Let us take a look at the structure of HTML5. The HTML contains two parts the head and the body. The root tag of the HTML document is <HTML>.

• The head part includes the title, encoding style, and metadata of the web pages. If the styles and presentation are specified in a separate CSS file, a developer needs to include the external link in the head section. • The body section includes all tag elements used to display the webpage's content. In HTML5, you can add the tags like header, footer, video, etc.

HTML vs. HTML5

There are eight key factors to examine the differences between HTML and HTML5.

• Browser compatibility:

HTML runs smoothly on all earlier versions of Mozilla Firefox, Google Chrome, and so on. HTML5 runs smoothly on Google Chrome 61 and the upcoming Mozilla Firefox version 4.

• Multimedia Support:

HTML requires extra support from Adobe Flash Reader to play video or audio files on webpages. HTML5 also supports video and audio files without additional support. It has built-in tags named <audio> and <video> .

• JavaScript Support:

HTML does not support javascript files to run directly on the browser. HTML5 uses the JP web worker API to run the javascript files directly on the browser.

• Location Access:

Using HTML, the browser cannot get the user's absolute location. In HTML5, the user's location is obtained using the JS GeoLocation API application.

To declare the doc type, the syntax in HTML is complicated and lengthy. To set the character encoding, you need to elaborate on specifics. In HTML5, the syntax is simple, and developers can specify the character encoding easily. Attributes charset, ping, and async are part of HTML5.

HTML does not contain specific tags to define semantics to divide the document into many subparts. In HTML5, the tag <section>, <nav>, <footer> is used to define the semantics. Instead of <div> tag, the documents are separated into subparts using the <header>, <nav>, <main>, <article>, <section>, <aside> and <footer>.

• Mobile Friendly:

Compared to HTML, HTML5 is mobile-friendly. The applications created using HTML5 are compatible with desktop, notebook, and mobile devices.

HTML uses the concept of cookies to store temporary data. In HTML5, the webpages are connected to the database, which stores temporary data.

Though HTML is the foundation for webpages, HTML5 is the advanced version with many benefits for developers. Using it allows you to develop attractive web pages with a wide range of colors, fonts, and shades. It provides support for client-side databases while improving browser performance and security.

Want to learn HTML5? Contact us to learn more about coding bootcamps.

Share this article

Recommended, find more like this story.

HTML Tutorial

Html graphics, html examples, html references.

HTML is the standard markup language for Web pages.

With HTML you can create your own Website.

HTML is easy to learn - You will enjoy it!

Easy Learning with HTML "Try it Yourself"

With our "Try it Yourself" editor, you can edit the HTML code and view the result:

Click on the "Try it Yourself" button to see how it works.

In this HTML tutorial, you will find more than 200 examples. With our online "Try it Yourself" editor, you can edit and test each example yourself!

Go to HTML Examples!

HTML Exercises

This HTML tutorial also contains nearly 100 HTML exercises.

Test Yourself With Exercises

Add a "tooltip" to the paragraph below with the text "About W3Schools".

Start the Exercise

HTML Quiz Test

Test your HTML skills with our HTML Quiz!

Start HTML Quiz!

My Learning

Track your progress with the free "My Learning" program here at W3Schools.

This is an optional feature. You can study at W3Schools without using My Learning.

At W3Schools you will find complete references about HTML elements, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, browser support, and more:

Kickstart your career

Get certified by completing the course

COLOR PICKER

Contact Sales

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

Report Error

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

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.

Prerequisites

Before starting this topic, you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it, consuming the 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.

It is recommended that you work through Getting started with the web before attempting this topic. However, this isn't absolutely necessary; much of what is covered in the HTML basics article is also covered in our Introduction to HTML module, albeit in a lot more detail.

After learning HTML, you can then move on to learning about more advanced topics such as:

CSS , and how to use it to style HTML (for example, alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects).
JavaScript , and how to use it to add dynamic functionality to web pages (for example, find your location and plot it on a map, make UI elements appear/disappear when you toggle a button, save users' data locally on their computers, and much more).

This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.

This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.

This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.

Representing tabular data on a webpage in an understandable, accessible way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.

Solving common HTML problems

Use HTML to solve common problems provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.

This module provides a series of articles that will help you master the essentials of web forms. Web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface. However, for historical and technical reasons it's not always obvious how to use them to their full potential. We'll cover all the essential aspects of Web forms including marking up their HTML structure, styling form controls, validating form data, and submitting data to the server.

The main entry point for HTML reference documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.

SUGGESTED TOPICS
The Magazine
Newsletters
Managing Yourself
Managing Teams
Work-life Balance
The Big Idea
Data & Visuals
Reading Lists
Case Selections
HBR Learning
Topic Feeds
Account Settings
Email Preferences

How to Make a “Good” Presentation “Great”

Guy Kawasaki

Remember: Less is more.

A strong presentation is so much more than information pasted onto a series of slides with fancy backgrounds. Whether you’re pitching an idea, reporting market research, or sharing something else, a great presentation can give you a competitive advantage, and be a powerful tool when aiming to persuade, educate, or inspire others. Here are some unique elements that make a presentation stand out.

Fonts: Sans Serif fonts such as Helvetica or Arial are preferred for their clean lines, which make them easy to digest at various sizes and distances. Limit the number of font styles to two: one for headings and another for body text, to avoid visual confusion or distractions.
Colors: Colors can evoke emotions and highlight critical points, but their overuse can lead to a cluttered and confusing presentation. A limited palette of two to three main colors, complemented by a simple background, can help you draw attention to key elements without overwhelming the audience.
Pictures: Pictures can communicate complex ideas quickly and memorably but choosing the right images is key. Images or pictures should be big (perhaps 20-25% of the page), bold, and have a clear purpose that complements the slide’s text.
Layout: Don’t overcrowd your slides with too much information. When in doubt, adhere to the principle of simplicity, and aim for a clean and uncluttered layout with plenty of white space around text and images. Think phrases and bullets, not sentences.

As an intern or early career professional, chances are that you’ll be tasked with making or giving a presentation in the near future. Whether you’re pitching an idea, reporting market research, or sharing something else, a great presentation can give you a competitive advantage, and be a powerful tool when aiming to persuade, educate, or inspire others.

Guy Kawasaki is the chief evangelist at Canva and was the former chief evangelist at Apple. Guy is the author of 16 books including Think Remarkable : 9 Paths to Transform Your Life and Make a Difference.

Partner Center

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

Notifications

The official Meta Llama 3 GitHub site

meta-llama/llama3

Folders and files, repository files navigation.

🤗 Models on Hugging Face | Blog | Website | Get Started

Meta Llama 3

We are unlocking the power of large language models. Our latest version of Llama is now accessible to individuals, creators, researchers, and businesses of all sizes so that they can experiment, innovate, and scale their ideas responsibly.

This release includes model weights and starting code for pre-trained and instruction tuned Llama 3 language models — including sizes of 8B to 70B parameters.

This repository is intended as a minimal example to load Llama 3 models and run inference. For more detailed examples, see llama-recipes .

In order to download the model weights and tokenizer, please visit the Meta Llama website and accept our License.

Once your request is approved, you will receive a signed URL over email. Then run the download.sh script, passing the URL provided when prompted to start the download.

Pre-requisites: Make sure you have wget and md5sum installed. Then run the script: ./download.sh .

Keep in mind that the links expire after 24 hours and a certain amount of downloads. If you start seeing errors such as 403: Forbidden , you can always re-request a link.

Access to Hugging Face

We are also providing downloads on Hugging Face , in both transformers and native llama3 formats. To download the weights from Hugging Face, please follow these steps:

Visit one of the repos, for example meta-llama/Meta-Llama-3-8B-Instruct .
Read and accept the license. Once your request is approved, you'll be granted access to all the Llama 3 models. Note that requests used to take up to one hour to get processed.
To download the original native weights to use with this repo, click on the "Files and versions" tab and download the contents of the original folder. You can also download them from the command line if you pip install huggingface-hub :

To use with transformers, the following pipeline snippet will download and cache the weights:

Quick Start

You can follow the steps below to quickly get up and running with Llama 3 models. These steps will let you run quick inference locally. For more examples, see the Llama recipes repository .

In a conda env with PyTorch / CUDA available clone and download this repository.

In the top-level directory run:

Visit the Meta Llama website and register to download the model/s.

Once registered, you will get an email with a URL to download the models. You will need this URL when you run the download.sh script.

Once you get the email, navigate to your downloaded llama repository and run the download.sh script.

Make sure to grant execution permissions to the download.sh script
During this process, you will be prompted to enter the URL from the email.
Do not use the “Copy Link” option but rather make sure to manually copy the link from the email.

Once the model/s you want have been downloaded, you can run the model locally using the command below:

Replace Meta-Llama-3-8B-Instruct/ with the path to your checkpoint directory and Meta-Llama-3-8B-Instruct/tokenizer.model with the path to your tokenizer model.
The –nproc_per_node should be set to the MP value for the model you are using.
Adjust the max_seq_len and max_batch_size parameters as needed.
This example runs the example_chat_completion.py found in this repository but you can change that to a different .py file.

Different models require different model-parallel (MP) values:

All models support sequence length up to 8192 tokens, but we pre-allocate the cache according to max_seq_len and max_batch_size values. So set those according to your hardware.

Pretrained Models

These models are not finetuned for chat or Q&A. They should be prompted so that the expected answer is the natural continuation of the prompt.

See example_text_completion.py for some examples. To illustrate, see the command below to run it with the llama-3-8b model ( nproc_per_node needs to be set to the MP value):

Instruction-tuned Models

The fine-tuned models were trained for dialogue applications. To get the expected features and performance for them, a specific formatting defined in ChatFormat needs to be followed: The prompt begins with a <|begin_of_text|> special token, after which one or more messages follow. Each message starts with the <|start_header_id|> tag, the role system , user or assistant , and the <|end_header_id|> tag. After a double newline \n\n the contents of the message follow. The end of each message is marked by the <|eot_id|> token.

You can also deploy additional classifiers for filtering out inputs and outputs that are deemed unsafe. See the llama-recipes repo for an example of how to add a safety checker to the inputs and outputs of your inference code.

Examples using llama-3-8b-chat:

Llama 3 is a new technology that carries potential risks with use. Testing conducted to date has not — and could not — cover all scenarios. In order to help developers address these risks, we have created the Responsible Use Guide .

Please report any software “bug”, or other problems with the models through one of the following means:

Reporting issues with the model: https://github.com/meta-llama/llama3/issues
Reporting risky content generated by the model: developers.facebook.com/llama_output_feedback
Reporting bugs and security concerns: facebook.com/whitehat/info

See MODEL_CARD.md .

Our model and weights are licensed for both researchers and commercial entities, upholding the principles of openness. Our mission is to empower individuals, and industry through this opportunity, while fostering an environment of discovery and ethical AI advancements.

See the LICENSE file, as well as our accompanying Acceptable Use Policy

For common questions, the FAQ can be found here which will be kept up to date over time as new questions arise.

Code of conduct

Contributors 21.

Python 94.3%

Share full article

Supported by

Cries of Sexism Greet a Nike Olympic Reveal

The sporting giant offered a sneak peek at its track and field outfits for Team U.S.A., and an unexpected backlash ensued.

People wearing athletic clothing stand in a line on a stage.

By Vanessa Friedman

Ever since the Norwegian women’s beach handball team turned the fact that they were required to wear teeny-tiny bikini bottoms for competition into a cause célèbre, a quiet revolution has been brewing throughout women’s sports. It’s one that questions received conventions about what female athletes do — or don’t — have to wear to perform at their very best.

It has touched women’s soccer (why white shorts?), gymnastics (why not a unitard rather than a leotard?), field hockey (why a low-cut tank top?) and many more, including running.

So it probably should not have come as a shock to Nike that when it offered a sneak peek of the Team U.S.A. track and field unies during a Nike Air event in Paris celebrating its Air technology on Thursday (which also included looks for other Olympic athletes, like Kenya’s track and field team, France’s basketball team and Korea’s break dancing delegation), they were met with some less-than-enthusiastic reactions.

See, the two uniforms Nike chose to single out on the mannequins included a men’s compression tank top and mid-thigh-length compression shorts and a woman’s bodysuit, cut notably high on the hip. It looked sort of like a sporty version of a 1980s workout leotard. As it was displayed, the bodysuit seemed as if it would demand some complicated intimate grooming.

Citius Mag , which focuses on running news, posted a photo of the uniforms on Instagram, and many of its followers were not amused.

“What man designed the woman’s cut?” wrote one.

“I hope U.S.A.T.F. is paying for the bikini waxes,” wrote another. So went most of the more than 1,900 comments.

The running comedian Laura Green posted an Instagram reel in which she pretended to be trying on the look (“We’re feeling pretty, um, breezy,” she said) and checking out the rest of the athlete’s kit bag, which turned out to include hair spray, lip gloss and a “hysterectomy kit,” so the women would not have to worry about periods.

When asked, Nike did not address the brouhaha directly, but according to John Hoke, the chief innovation officer, the woman’s bodysuit and the man’s shorts and top are only two of the options Nike will have for its Olympic runners. There are “nearly 50 unique pieces across men’s and women’s and a dozen competition styles fine-tuned for specific events,” Mr. Hoke said.

Women will be able to opt for compression shorts, a crop top or tank and a bodysuit with shorts rather than bikini bottoms. The full slate of looks was not on hand in Paris but more will be revealed next week at the U.S. Olympic Committee media summit in New York. The Paris reveal was meant to be a teaser.

Mr. Hoke also pointed out that Nike consults with a large number of athletes at every stage of the uniform design. Its track and field roster includes Sha’Carri Richardson, who happened to be wearing the compression shorts during the Paris presentation, and Athing Mu. And there are certainly runners who like the high-cut brief. (The British Olympic sprinter Dina Asher-Smith , another Nike athlete, told The New York Times last summer that while she opts to run in briefs, she also leans toward a leotard style, rather than a two-piece.)

What Nike missed, however, was that in choosing those two looks as the primary preview for Team U.S.A., rather than, say, the matching shorts and tanks that will be also available, it shored up a longstanding inequity in sports — one that puts the body of a female athlete on display in a way it does not for the male athlete.

“Why are we presenting this sexualized outfit as the standard of excellence?” said Lauren Fleshman, a U.S. national champion distance runner and the author of “Good for a Girl.” “In part because we think that’s what nets us the most financial gain from sponsors or NIL opportunities, most of which are handed out by powerful men or people looking at it through a male gaze. But women are breaking records with ratings in sports where you don’t have to wear essentially a bathing suit to perform.”

The problem such imagery creates is twofold. When Nike chose to reveal the high-cut bodysuit as the first Olympics outfit, purposefully or not, the implication for anyone watching is that “this is what excellence looks like,” Ms. Fleshman said.

That perception filters down to young athletes and becomes the model girls think they have to adopt, often at a developmental stage when their relationships with their bodies are particularly fraught.

And more broadly, given the current political debate around adjudicating women’s bodies, it reinforces the idea that they are public property.

Still, Ms. Fleshman said, “I’m glad Nike put this image out as the crown jewel of Olympic Team design,” because it may act as the catalyst for another conversation that has been long overdue.

“If you showed this outfit to someone from the W.N.B.A. or women’s soccer, they would laugh in your face,” she said. “We shouldn’t have to normalize it for track and field anymore. Time’s up on that.”

Vanessa Friedman has been the fashion director and chief fashion critic for The Times since 2014. More about Vanessa Friedman

IMAGES

Basic Web Pages Tutorial
HTML/CSS
Structure of an HTML Page
html structure ppt
HTML Vs CSS PowerPoint Presentation Slides
What is HTML? How does it work? This guide will walk you right through

VIDEO

lesson-1| HTML structure| HTML basics (IN HINDI)
Basic Structure of HTML
Data Structure vs Representation in SEO
Html structure explain #liveserver #programming #coding #server #trending #html #webserver #viral
Mastering HTML: A Beginner's Guide to HTML Structure
Basic Structure of an HTML Website

COMMENTS

HTML Structure and Presentation
HTML Structure vs. HTML Presentation. The composition of a webpage could be regarded as a mixture of the following four elements: Content is the general term used for all the browser-displayed information elements—such as text, audio, still images, animation, video, multimedia, and files belonging to web pages. ...
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 ...
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.
Getting started with HTML
HTML (HyperText Markup Language) is a markup language that tells web browsers how to structure the web pages you visit. It can be as complicated or as simple as the web developer wants it to be. HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way. The enclosing tags can make content into a ...
HTML: HyperText Markup Language
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation ( CSS) or functionality/behavior ( JavaScript ). "Hypertext" refers to links that connect web pages to one another ...
Overview of HTML
HTML is the foundation of every web page. In this course, you will learn the basics of HTML syntax, structure, and semantics. You will also discover how to use HTML to create responsive and accessible web pages that adapt to different devices and preferences. Whether you are a beginner or a seasoned web developer, this course will help you master the power and beauty of HTML.
Document structure
For HTML, all you need is <!DOCTYPE html>. This may look like an HTML element, but it isn't. It's a special kind of node called "doctype". The doctype tells the browser to use standards mode. If omitted, browsers will use a different rendering mode known as quirks mode. Including the doctype helps prevent quirks mode.
Structure vs. Presentation
Structure vs. Presentation The makeup of a webpage could be viewed as a combination of the following four elements: Content is the collective term for all the browser-displayable information elements such as text, audio, still images, animation, video, multimedia, and files (e.g., Word, PowerPoint, PDF, etc.) of web pages. Content does not require any additional presentational markups or ...
Introduction to HTML
HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content. HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is ...
css
The whole distinction between "presentation" elements versus "structure" element is, in my opinion, a matter of common sense, not something defined by W3C or anyone else. :-P. An element that describes what its content is (as opposed to how it should look) is a structure element. Everything else is, by definition, not structural, and therefore ...
Learn HTML Basics: Introduction to HTML Structure & Elements
Dive into HTML basics with an introduction to its structure and essential elements. Learn how to create headings, paragraphs, links, and images in HTML. HTML (Hypertext Markup Language) is the foundation of every web page you see on the internet. It provides structure and meaning to the content displayed in web browsers.
Learn HTML Basics for Beginners in Just 15 Minutes
How to create an HTML document. First, let's open Visual Studio Code (or your favorite code editor). In the folder of your choice, create a new file and name it index.html. In the index.html file, type ! (exclamation mark) and press enter.
html
The separation of content and presentation takes its roots from more general philosophy, the separation of concerns. Everybody benefit from the separation: the content supplier does not have to be a good designer and vice versa. answered Feb 14, 2010 at 7:42. BorisOkunskiy. 1,830 1 19 24.
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.
Session 03
Font Sizes: Relative vs. Absolute. As a general guideline with CSS, relative measurements are better than absolute measurements. Relative Relative to UA settings: xx-small | x-small | small | medium | large | x-large | xx-large; rem - relative to the html em (root em) Relative to context: larger | smaller; Percentage (%) "em" units "rem" units
HTML Best Practices
1. Always Declare a Doctype. The doctype declaration should be the first thing in your HTML documents. The doctype declaration tells the browser about the XHTML standards you will be using and helps it read and render your markup correctly. I would recommend using the XHTML 1.0 strict doctype.
Learning the Basics of HTML and HTML5
In HTML5, you can add the tags like header, footer, video, etc. HTML vs. HTML5. There are eight key factors to examine the differences between HTML and HTML5. • Browser compatibility: HTML runs smoothly on all earlier versions of Mozilla Firefox, Google Chrome, and so on.
Why I do my presentation slides in HTML, and so should you
Doing a presentation in HTML doesn't necessarily mean going into a text editor and writing markup and CSS and JavaScript from scratch. The simplest on-ramp to HTML slides is designing them ...
HTML Tutorial
Learn how to create and style web pages with HTML, the standard markup language for the web. W3Schools HTML Tutorial offers easy and interactive examples, exercises, quizzes, and references to help you master HTML. Whether you are a beginner or a professional, you will find something useful in this tutorial.
HTML BASICS Slides Presentation
Transcript. 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.
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.
When is it best to use HTML presentation tags or CSS to style elements?
1. If your goal is to underline a text, you can use both ways. The HTML tag was deprecated, but returned in HTML5, so you may find some incompatibility with it. The usage of style attribute overrides any style set globally. It will override any style set in the HTML tag or external style sheet. As you can see in the first phrase in the snippet.
HTML vs HTML5: Core Differences
Simple, accessible, and famous: the HyperText Markup Language - mostly known as HTML - has been a crucial tool in Web Programming over the past decades. However, it has not always been as it is today. Since HTML's release in the late 80s, many aspects of this language have been changed, evolved, or discarded to generate its most modern version: HTML5.
How to Make a "Good" Presentation "Great"
Here are some unique elements that make a presentation stand out. Fonts: Sans Serif fonts such as Helvetica or Arial are preferred for their clean lines, which make them easy to digest at various ...
GitHub
We are also providing downloads on Hugging Face, in both transformers and native llama3 formats. To download the weights from Hugging Face, please follow these steps: Visit one of the repos, for example meta-llama/Meta-Llama-3-8B-Instruct.; Read and accept the license.
Cries of Sexism Greet a Nike Olympic Reveal
The sporting giant offered a sneak peek at its track and field outfits for Team U.S.A., and an unexpected backlash ensued. By Vanessa Friedman Ever since the Norwegian women's beach handball ...

HTML Structure and Presentation

GCSE Computer Science

A-Level Computer Science

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

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

HTML Attributes

HTML Structure vs. HTML Presentation

Further Readings:

HTML Structure and Presentation

Hypertext Markup Language (HTML)

Cascading Style Sheets (CSS)

Related Theory

Related Quizzes

Sign up for Guru News

Storage Devices Cheat Sheet

Small Print

Downloads Shop

Document structure

Add to every HTML document

<!DOCTYPE html>

<html>

Content language

<head>

Required components inside the <head>

Character encoding

Document title

Viewport metadata

Other <head> content

Other uses of the <link> element

Alternate versions of the site

HTML comments

Check your understanding

Learn HTML Basics: Introduction to HTML Structure & Elements

Table of Contents

Using Headings

Choosing the Right Heading Level

Creating a Basic Link

Linking to Email Addresses

Linking to Anchors

Unordered Lists

Ordered Lists

Nested Lists

Italic Text

Underlined Text

Strikethrough Text

Superscript and Subscript Text

Creating a Basic Table

Table Caption and Header Groups

Embedding Images

Embedding Videos

Embedding Audio

Form Structure

Input Fields

Checkboxes and Radio Buttons

Semantic Elements

Semantic Headings

Semantic Links

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

Q2: Can I create a website using only HTML?

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

Q4: Can I learn HTML on my own?

Q5: Is HTML a programming language?

Q6: How long does it take to learn HTML?

Subscribe to my Newsletter

Build Your Own Nixie Tube Clock using HTML, CSS, and JavaScript (Source Code)

Create a Responsive Popup Contact Form: HTML, CSS, JavaScript Tutorial

Create a Responsive Customer Review Using HTML and CSS

Create a URL Shortening Landing Page using HTML, CSS, and JavaScript

Develop Responsive Admin Dashboard with HTML, Materialize CSS, and JavaScript

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

How to Create a Trending Animated Button Using HTML and CSS

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

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

How to Create a Liquid Button with HTML, CSS, and JavaScript (Source Code)

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

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

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

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

Sudoku Solver with HTML, CSS, and JavaScript

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