how to make html class 8

HTML Tutorial
HTML Exercises
HTML Attributes
Global Attributes
Event Attributes
HTML Interview Questions
DOM Audio/Video
HTML Examples
Color Picker
A to Z Guide
HTML Formatter
HTML accept Attribute
HTML accept-charset Attribute
HTML accesskey Attribute
HTML action Attribute
HTML align Attribute
HTML alt attribute
HTML | async Attribute
HTML autocomplete Attribute
HTML autoplay Attribute
HTML autofocus Attribute
HTML bgcolor Attribute
HTML border attribute
HTML | charset Attribute
HTML checked Attribute
HTML | cite attribute

HTML Class Attribute

HTML cols Attribute
HTML colspan Attribute
HTML | content Attribute
HTML contenteditable Attribute
HTML | controls Attribute
HTML | coords Attribute
HTML | data Attribute
HTML datetime Attribute
HTML | default Attribute
HTML | defer Attribute
HTML dir Attribute
HTML | dirname Attribute
HTML | disabled Attribute
HTML | download Attribute
HTML draggable Attribute
HTML | dropzone Attribute
HTML enctype Attribute
HTML | for Attribute
HTML form Attribute
HTML formaction Attribute
HTML headers attribute
HTML height Attribute
HTML hidden Attribute
HTML | high Attribute
HTML href Attribute
HTML hreflang Attribute
HTML | http-equiv Attribute
HTML Id Attribute
HTML | ismap Attribute
HTML | kind Attribute
HTML label Attribute
HTML lang Attribute
HTML list Attribute
HTML | loop Attribute
HTML | low Attribute
HTML max attribute
HTML maxlength Attribute
HTML media attribute
HTML | method Attribute
HTML min Attribute
HTML | multiple Attribute
HTML | muted Attribute
HTML name Attribute
HTML | novalidate Attribute
HTML | onblur Attribute
HTML oncopy Attribute
HTML oncut Attribute
HTML | onkeypress Attribute
HTML | onmousedown Attribute
HTML onscroll Attribute
HTML Optimum Attribute
HTML | pattern Attribute
HTML placeholder Attribute
HTML readonly Attribute
HTML required Attribute
HTML reversed Attribute
HTML | rows Attribute
HTML rowspan Attribute
HTML selected Attribute
HTML size Attribute
HTML | srclang Attribute
HTML | start Attribute
HTML | step Attribute
HTML style attribute
HTML tabindex Attribute
HTML | target Attribute
HTML title Attribute
HTML5 translate Attribute
HTML | value Attribute
HTML | wrap Attribute

The HTML class attribute is used to assign one or more CSS classes to an HTML element. Classes define styling rules, allowing elements with the same class to share visual properties defined in CSS.

HTML class attribute Supported Tags : It supports all HTML elements.

Examples of HTML Class Attribute

Here is a basic example of an HTML Class Attribute

Using the same HTML class attribute in different tags

The HTML class attribute can be applied to various tags, allowing multiple elements to share a common classification. This enables consistent styling or functionality across different types of elements, enhancing design cohesion and simplifying maintenance.

Example : This example shows the use of the classes in HTML.

Explanation

In the above example each heading (<h2>) is assigned the class “country” using the class attribute.
The CSS selector .country targets multiple elements with the class “country” to apply styling.
Styling defined for the “country” class is applied uniformly to all headings tagged with it.
Using class attributes ensures consistent styling across headings, simplifying design management.

Using multiple HTML class attribute

The HTML class attribute in HTML allows multiple classes to be applied to an element, separated by spaces. This enables styling and behavior to be defined and shared across multiple elements.

Example: In this example, we will use more than one class.

HTML class attribute multiple classes

Explanation:

In the above example <h2> elements are assigned the “country” class for shared styling attributes.
Additional classes like “china”, “india”, and “usa” provide unique background colors.
Classes set background colors to black, blue, and red, with white text and padding for visual contrast.
The <center> tag ensures horizontal alignment of content, improving the presentation and readability of the page.

HTML Class Attribute Use Cases

1. what is use of class attribute in html.

The class attribute in HTML assigns elements to groups, enabling targeted styling or functionality application via CSS or JavaScript.

2. When to use the class attribute and the id attribute ?

Use class for multiple elements with shared characteristics; use id for unique identification or targeting specific elements individually.

Supported Browser: The browser supported by Class attribute are listed below :

Chrome 15 above
Edge 12 and above
Firefox 1 and above
Opera 14 and above
Safari 6 and above

Please Login to comment...

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

To log in and use all the features of Khan Academy, please enable JavaScript in your browser.

Unit 2: Intro to HTML/CSS: Making webpages

About this unit.

Learn how to use HTML and CSS to make webpages. HTML is the markup language that you surround content with, to tell browsers about headings, lists, tables, and more. CSS is the stylesheet language that you style the page with, to tell browsers to change the color, font, layout, and more.

Intro to HTML

Welcome to the web! (Opens a modal)
HTML basics (Opens a modal)
Quick tip: HTML tags (Opens a modal)
Challenge: Write a Poem (Opens a modal)
HTML: Text emphasis (Opens a modal)
Challenge: You can learn text tags (Opens a modal)
HTML: Lists (Opens a modal)
Challenge: Wishlist (Opens a modal)
HTML: Images (Opens a modal)
Challenge: A picture-perfect trip (Opens a modal)

Intro to CSS

CSS Basics (Opens a modal)
Quick tip: Selecting by tag name (Opens a modal)
Challenge: Colorful creature (Opens a modal)
CSS: Selecting by id (Opens a modal)
Challenge: Seasonal ids (Opens a modal)
CSS: Selecting by class (Opens a modal)
Challenge: Apples and bananas classes (Opens a modal)
Project: Travel webpage (Opens a modal)
Using simple CSS selectors 4 questions Practice

CSS text properties

CSS Zen Garden (Opens a modal)
CSS font-family property (Opens a modal)
Challenge: Fancy font families (Opens a modal)
CSS font-size property (Opens a modal)
Challenge: Great big font sizes (Opens a modal)
CSS font styles and shorthand (Opens a modal)
Challenge: Famous font formats (Opens a modal)
More CSS text properties (Opens a modal)
CSS inheritance (Opens a modal)
Project: Blog (Opens a modal)
Using CSS text properties 4 questions Practice

Web development tools

Using the browser developer tools (Opens a modal)
Developing webpages outside of Khan Academy (Opens a modal)
Hosting your website on a server (Opens a modal)
Hosting your website on Github (Opens a modal)
CSS grouping elements (Opens a modal)
Challenge: Group the groupers (Opens a modal)
CSS width, height, and overflow (Opens a modal)
Challenge: The overflowing ocean (Opens a modal)
CSS box model (Opens a modal)
Challenge: The boxer model (Opens a modal)
CSS position (Opens a modal)
Challenge: Position planet (Opens a modal)
CSS in the wild: Google Maps (Opens a modal)
CSS floating elements (Opens a modal)
Challenge: Floating clouds (Opens a modal)
Planning your webpage (Opens a modal)
Project: Event invite (Opens a modal)
Using CSS layout properties 5 questions Practice

More CSS selectors

Using multiple CSS classes (Opens a modal)
Challenge: A classy gallery (Opens a modal)
Combining CSS class and element selectors (Opens a modal)
Challenge: Classes of elements (Opens a modal)
CSS descendant selectors (Opens a modal)
Challenge: Descendants of Khan (Opens a modal)
Grouping CSS selectors (Opens a modal)
CSS dynamic pseudo-classes (Opens a modal)
Challenge: Grouped animals (Opens a modal)
CSS specificity (Opens a modal)
CSS specificity rules 4 questions Practice

Other ways to embed CSS

Using inline CSS styles (Opens a modal)
Using external stylesheets (Opens a modal)

Further learning

Webpage design (Opens a modal)
HTML validation (Opens a modal)
What to learn next (Opens a modal)
Validating HTML 4 questions Practice

Class 8 Computer Science Chapter 6 HTML

NCERT Solutions for Class 8 Computer Science Chapter 6 Hyper Text Markup Language (HTML) updated for CBSE and State board session 2024-25. Get here Grade 8 Computer book chapter 6, which help us to make web pages and its designing in attractive ways.

Class 8 Computer Science Chapter 6 Hyper Text Markup Language

Class 8 Computer Science Chapter 6 Study Material
Class 8 Computer Science all Chapters Notes
Class 8 all Subjects NCERT Solutions

Internet is the network of computer networks in which millions of computers are connected around the globe. Using Internet, we can share data and information across the globe instantly. When we open Internet, we observe millions of websites and web pages. But have we ever thought what lies behind a web page? Which technology is used to write and design the web pages? For this a language is needed to create websites. HTML is the most widely used Language to design web pages for the Internet. Let us learn some terms related to Internet.

Server: The individual computers are connected to some powerful computers called servers. These servers are used to access stored files and information. These files and information are stored in the form of websites. Website: Websites contain different pages called web pages. Web Pages: Web Pages are text document having HTML commands with an extension .htm or .html. WWW: The collection of all websites, on the Internet is called the world wide web or www.

Hyper Text Markup Language or HTML is used to design web pages and websites. An HTML file can be viewed on any graphical web browser like Internet Explorer or Netscape Navigator. It is highly portable and is easy to learn. Markup language is a technique to write documents, describing the general structure of the content inside the documents, and not its actual appearance on the page or on the screen. The extension of an HTML document is .html or .htm. When you want to write an HTML code, you are advised to use text editor and save the file as All Files (* . *) mode with html extension. HTML is a non-case sensitive language and mainly composed of tags, where the tags are enclosed in angle brackets (). Tags occur in pairs, begin tag and end tag. Some of the tags have certain attributes for specific purposes.

Characteristics of HTML

HTML is called scripting or markup language which is completely different from other programming languages.
It is text-oriented language.
You can write it in any word document.
There is a specific syntax for defining format of text in HTML.
Using any web browser, HTML can be viewed on any computer system i.e. DOS, UNIX and Windows.
To view the web page, a web browser is required.

TOOLS REQUIRED You will require three tools to create and view an HTML document. These are: 1. Text editor: Text editors are programs that are used to create or compose HTML documents. You type the tag and text in that editor and save it as an HTML file with the file extension as .htm or . html. This file will be saved as a web page. Example : Notepad, WordPad, MS Word, MS FrontPage, etc. 2. A web browser: Web browsers are used to display and view the HTML documents. Example: Internet Explorer, Mozilla Firefox, Opera, Safari etc. 3. A web Server (optional): These are required when you want to store the HTML document.

HTML tag determines the way, the browser would display the text. The tags are always enclosed within a pair of Angle brackets, i.e., the text is written often in the tags. HTML tags are of two types: Container tags or Non-empty tags and Empty Tags.

CONTAINER TAGS OR NON-EMPTY TAGS Container tags define a section of text. It allows the formatting for the text between the begin tag and the end tag. This pair of the tags define container. For Example: Write HTML begin tag text end tag EMPTY TAG Since the matter enclosed between the tags simply follows the characteristics of the tags that contain it, an empty tag function is standalone element within an HTML document and thus it does not contain any bracket, slash or anything else.

HEAD ELEMENT The container tag contains the page title and some properties that are applicable on the whole HTML code, like author name or style definitions etc. The main element in the Head section is the tag. This title appears in the title bar of the browser window. BODY TAG The body tag comes after HEAD structure. The Body tag contains all the text of an HTML document. It starts with tag and ends with tag. It also contains all the visible text and the images of your web pages. BLOCK-LEVEL ELEMENT Block-level elements are used to format whole block of text within an HTML document.

This element lets you change the colour, size and face of the font. It starts with container tag and ends with tag. Text coming in between these tags follows the font definition defined in tag. After the tag text appears as described in the tag.

BR AND HR (BREAK LINE AND HORIZONTAL RULE) BR (Line Break) starts a new line. You can see in the previous example, all the text are coming in a single line. It is because of absence of tag. The line break tag does not have a closing tag. It simply has an opening tag of Similarly < HR > draws a Horizontal Ruler or Line. These are special types of elements, known as empty tag, because they don’t have any end tag with them.

NCERT Solutions for Class 8 Computer Science Chapter 6

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

HTML basics

Overview: Getting started with the web

HTML ( H yper T ext M arkup L anguage) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.

So what is HTML?

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. For example, take the following line of content:

If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:

Anatomy of an HTML element

Let's explore this paragraph element a bit further.

paragraph element including opening tag, content reading 'my cat is very grumpy', and a closing tag

The main parts of our element are as follows:

The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets . This states where the element begins or starts to take effect — in this case where the paragraph begins.
The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
The content: This is the content of the element, which in this case, is just text.
The element: The opening tag, the closing tag, and the content together comprise the element.

Elements can also have attributes that look like the following:

Paragraph opening tag with a class attribute highlighted: class=editor-note

Attributes contain extra information about the element that you don't want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value . The class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things. Some attributes have no value, such as required .

Attributes that set a value always have:

A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
The attribute name followed by an equal sign.
The attribute value wrapped by opening and closing quotation marks.

Note: Simple attribute values that don't contain ASCII whitespace (or any of the characters " ' ` = < > ) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable.

Nesting elements

You can put elements inside other elements too — this is called nesting . If we wanted to state that our cat is very grumpy, we could wrap the word "very" in a <strong> element, which means that the word is to be strongly emphasized:

You do however need to make sure that your elements are properly nested. In the example above, we opened the <p> element first, then the <strong> element; therefore, we have to close the <strong> element first, then the <p> element. The following is incorrect:

The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results. So don't do it!

Void elements

Some elements have no content and are called void elements . Take the <img> element that we already have in our HTML page:

This contains two attributes, but there is no closing </img> tag and no inner content. This is because an image element doesn't wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.

Anatomy of an HTML document

That wraps up the basics of individual HTML elements, but they aren't handy on their own. Now we'll look at how individual elements are combined to form an entire HTML page. Let's revisit the code we put into our index.html example (which we first met in the Dealing with files article):

Here, we have the following:

<!DOCTYPE html> — doctype . It is a required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days, they don't do much and are basically just needed to make sure your document behaves correctly. That's all you need to know for now.
<html></html> — the <html> element. This element wraps all the content on the entire page and is sometimes known as the root element. It also includes the lang attribute, setting the primary language of the document.
<head></head> — the <head> element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
<meta charset="utf-8"> — This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.
<meta name="viewport" content="width=device-width"> — This viewport element ensures the page renders at the width of viewport, preventing mobile browsers from rendering pages wider than the viewport and then shrinking them down.
<title></title> — the <title> element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it.
<body></body> — the <body> element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

Let's turn our attention to the <img> element again:

As we said before, it embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.

We have also included an alt (alternative) attribute. In the alt attribute , you specify descriptive text for users who cannot see the image, possibly because of the following reasons:

They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.
Something has gone wrong causing the image not to display. For example, try deliberately changing the path inside your src attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:

The keywords for alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth."

Try coming up with some better alt text for your image now.

Note: Find out more about accessibility in our accessibility learning module .

Marking up text

This section will cover some essential HTML elements you'll use for marking up the text.

Heading elements allow you to specify that certain parts of your content are headings — or subheadings. In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels, <h1> - <h6> , although you'll commonly only use 3 to 4 at most:

Note: Anything in HTML between  is an HTML comment . The browser ignores comments as it renders the code. In other words, they are not visible on the page - just in the code. HTML comments are a way for you to write helpful notes about your code or logic.

Now try adding a suitable title to your HTML page just above your <img> element.

Note: You'll see that your heading level 1 has an implicit style. Don't use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO . Try to create a meaningful sequence of headings on your pages, without skipping levels.

As explained above, <p> elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content:

Add your sample text (you should have it from What will your website look like? ) into one or a few paragraphs, placed directly below your <img> element.

A lot of the web's content is lists and HTML has special elements for these. Marking up lists always consists of at least 2 elements. The most common list types are ordered and unordered lists:

Unordered lists are for lists where the order of the items doesn't matter, such as a shopping list. These are wrapped in a <ul> element.
Ordered lists are for lists where the order of the items does matter, such as a recipe. These are wrapped in an <ol> element.

Each item inside the lists is put inside an <li> (list item) element.

For example, if we wanted to turn the part of the following paragraph fragment into a list

We could modify the markup to this

Try adding an ordered or unordered list to your example page.

Links are very important — they are what makes the web a web! To add a link, we need to use a simple element — <a> — "a" being the short form for "anchor". To make text within your paragraph into a link, follow these steps:

Choose some text. We chose the text "Mozilla Manifesto".
Wrap the text in an <a> element, as shown below: html < a > Mozilla Manifesto </ a >
Give the <a> element an href attribute, as shown below: html < a href = " " > Mozilla Manifesto </ a >
Fill in the value of this attribute with the web address that you want the link to point to: html < a href = " https://www.mozilla.org/en-US/about/manifesto/ " > Mozilla Manifesto </ a >

You might get unexpected results if you omit the https:// or http:// part, called the protocol , at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.

Note: href might appear like a rather obscure choice for an attribute name at first. If you are having trouble remembering it, remember that it stands for h ypertext ref erence .

Add a link to your page now, if you haven't already done so.

If you have followed all the instructions in this article, you should end up with a page that looks like the one below (you can also view it here ):

If you get stuck, you can always compare your work with our finished example code on GitHub.

Here, we have only really scratched the surface of HTML. To find out more, go to our Learning HTML topic.

HTML Basics

HTML Web Design Basics
HTML Paragraphs
HTML Headings
HTML Comments
HTML Unordered List
HTML Ordered List
HTML Description List
HTML Line Break
HTML Pre Tag
HTML Horizontal Line

HTML Inline

HTML Block and Inline
HTML Images
HTML Italic
HTML Superscript and Subscript
HTML Formatting
HTML Meta Elements
HTML Favicon
HTML Form Elements
HTML Form Action

Semantic HTML

HTML Semantic HTML
HTML div Tag
HTML aside Tag
HTML section Tag
HTML footer Tag
HTML main Tag
HTML figure and figcaption
HTML Accessibility

HTML, CSS & JavaScript

HTML Layout
HTML Responsive Web Design
HTML and JavaScript

Graphics & Media

HTML Canvas

HTML Miscellaneous

HTML Iframes
HTML Entities
HTML Quotations
HTML File Paths
HTML Emojis
HTML Symbols

Web Tutorials

HTML <main> Tag

Web Design Basics: How HTML, CSS and JavaScript Work?

HTML (HyperText Markup Language) is a markup language used to structure and organize the content on a web page. It uses various tags to define the different elements on a page, such as headings, paragraphs, and links.

HTML Hierarchy

HTML elements are hierarchical, which means that they can be nested inside each other to create a tree-like structure of the content on the web page.

This hierarchical structure is called the DOM (Document Object Model), and it is used by the web browser to render the web page. For example,

Browser Output

A simple HTML example to demonstrate hierarchy

In this example, the html element is the root element of the hierarchy and contains two child elements: head and body . The head element, in turn, contains a child element called the title , and the body element contains child elements: h1 and p .

Let's see the meaning of the various elements used in the above example.

<html> : the root element of the DOM, and it contains all of the other elements in the code
<head> : contains metadata about the web page, such as the title and any linked CSS or JavaScript files
<title> : contains the title of the web page, which will be displayed in the web browser's title bar or tab
<body> : contains the main content of the web page, which will be displayed in the web browser's window
<p> : contains the paragraphs of text on the web page
<strong> , <em> : child elements of the <p> elements, they are used to mark text as important and emphasized respectively

Note : Only the elements inside the <body> tag renders in the web browser.

What are HTML elements?

HTML elements consist of several parts, including the opening and closing tags, the content, and the attributes. Here is an explanation of each of these parts:

The opening tag : This consists of the element name, wrapped in angle brackets. It indicates the start of the element and the point at which the element's effects begin.
The closing tag : This is the same as the opening tag, but with a forward slash before the element name. It indicates the end of the element and the point at which the element's effects stop.
The content : This is the content of the element, which can be text, other elements, or a combination of both.
The element: The opening tag, the closing tag, and the content together make up the element.
What are HTML Attributes?

HTML elements can have attributes, which provide additional information about the element. They are specified in the opening tag of the element and take the form of name-value pairs. Let's see an example:

The href is an attribute. It provides the link information about the <a> tag. In the above example,

href - the name of attribute
https://www.programiz.com - the value of attribute

Note : HTML attributes are mostly optional.

HTML Syntax

We need to follow a strict syntax guidelines to write valid HTML code. This includes the use of tags, elements, and attributes, as well as the correct use of indentation and white space. Here are some key points about HTML syntax:

1. HTML tags consist of the element name, wrapped in angle brackets. For example, <h1> , <p> , <img> are some HTML tags.

2. HTML elements are created by enclosing the content of the element inside the opening and closing tags of the element. For example,

is an HTML element.

3. HTML attributes are used to provide additional information about HTML elements and are specified in the opening tag of the element. For example,

Here, target is an attribute.

4. HTML code should be well-formed and properly indented, with each element on its own line and each level of hierarchy indented by one level. This makes the code easier to read and understand, and can help to avoid errors. For example,

How to Create a Simple Web Page with HTML

Last Updated: February 2, 2024 Fact Checked

This article was co-authored by wikiHow staff writer, Nicole Levine, MFA . Nicole Levine is a Technology Writer and Editor for wikiHow. She has more than 20 years of experience creating technical documentation and leading support teams at major web hosting and software companies. Nicole also holds an MFA in Creative Writing from Portland State University and teaches composition, fiction-writing, and zine-making at various institutions. There are 15 references cited in this article, which can be found at the bottom of the page. This article has been fact-checked, ensuring the accuracy of any cited facts and confirming the authority of its sources. This article has been viewed 4,676,551 times. Learn more...

This wikiHow teaches you how to write a simple web page with HTML (hypertext markup language). HTML is one of the core components of the World Wide Web, making up the structure of web pages. Once you've created your web page, you can save it as an HTML document and view it in your web browser. Creating an HTML page is possible using basic text editors found on both Windows and Mac computers.

Adding a Head to Your HTML

ChromeOS - Open launcher, then click Text. (The icon says Code Pad).

Step 2 Type in <!DOCTYPE html> and press ↵ Enter.

Adding a Body and Text to Your HTML

The headings shows the priority or importance of the text. But its not necessary to use a higher heading if you want to use any lower heading. One can directly use H3, even if there is no H1 in your post.

You can add multiple paragraph lines in a row in order to create a series of paragraphs under one heading.
You can change the color of any text by framing the text with the <font color="color"> and </font> tags. Make sure to type your preferred color into the "color" section (you'll keep the quotes). You can turn any text (e.g., headers) into a different color with this set of tags . For example, to turn a paragraph's text blue, you would write the following code: <p><font color="blue">Whales are majestic creatures.</font></p>
You can add bolds, italics and other text formats using HTML. The following are examples of how you can format text using HTML tags: [7] X Research source < b > Bold text </ b > < i > Italic text </ i > < u > Underlined text </ u > < sub > Subscript text </ sub > < sup > Superscript text </ sup >
If you use bold and italic text for emphasis, not just for styling, use the <strong> and <em> elements instead of <b> and <i> . This makes your web page easier to understand when using technologies like a screen reader [8] X Research source or the reader mode provided in some browsers [9] X Research source .

Adding Additional Elements to Your HTML

Type <img src= to open your image tag.
Copy and paste the image URL after the "=" sign in quotation marks.
Type > after the image url to close your image tag. For example, if the image's URL is "http://www.mypicture.com/lake", you would write the following: < img src = "http://www.mypicture.com/lake.jpg" >

Type <a href= to open your link tag.
Copy and paste URL after the "=" sign in quotation marks.
Type > after the URL to close the link portion of the HTML.
Type a name for the link after the closing bracket.
Type </a> after the link name to close the HTML link. [12] X Research source The following is an example of a link to Facebook. < a href = "https://www.facebook.com" > Facebook </ a > .

Customizing Colors

Step 1 Check out the list of official HTML color names and codes.

<body style="background-color:lavender;">

<p style="color:midnightblue;">
The color change will only affect the text within that <p> tag. If you start another <p> tag later that should also be midnightblue , you'll need to set the style attribute there as well.

Step 4 Set the background color for a header or paragraph.

<p style="background-color:lightgrey;">
<h1 style="background-color:lightskyblue;">

Closing Your HTML Document

Saving and Opening Your Web Page

Step 1 Convert your document to plain text (Mac users only).

This step is neither necessary nor possible on Windows.

Alternatively, you can press Ctrl + S (Windows) or ⌘ Command + S (Mac) to do so.

Step 4 Enter a name for your HTML document.

Windows - Click the "Save as type" drop-down box, click All Files , and then type .html at the end of the file's name.
MacOS - Replace the .txt at the end of the file's name with .html instead.
ChromeOS - Click the "Save as" button. Name the file with .html at the end. The beginning is up to you.

HTML files typically open with your default web browser.

Windows - Right-click the document, select Open with , and click your preferred browser.
Mac - Click the document once, click File , select Open With , and click your preferred browser.

Step 9 Edit the HTML document if needed.

On Windows, you can right-click the document and click Edit in the resulting drop-down menu (if you have Notepad++ installed, this will say Edit with Notepad++ instead). [17] X Research source
On Mac, you'll want to click the document to select it, click File , select Open With , and click TextEdit . You can also drag the document into TextEdit. [18] X Research source
On Chromebook, close the Text app, open Files, find your file, and then click on it.

Sample HTML

Community Q&A

Many people use Notepad++ to write and compile their code. [19] X Research source Thanks Helpful 0 Not Helpful 1
Tags should always be closed in a mirror image of their open counterparts. For example, <tag1><tag2> should be closed as </tag2></tag1> . Thanks Helpful 1 Not Helpful 0
You can add side-scrolling text to your website using the <marquee></marquee> tag, but keep in mind that this tag might not be recognized by some browsers. Thanks Helpful 1 Not Helpful 0

It's best to host your own images on Imgur or similar if you plan on uploading images to your web page. Posting other people's pictures may result in copyright infringement. Thanks Helpful 5 Not Helpful 3

↑ https://www.w3schools.com/howto/howto_website.asp
↑ https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
↑ https://www.freecodecamp.org/news/html-background-image-how-to-add-wallpaper-images-to-your-website/
↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
↑ https://www.w3schools.com/html/html_formatting.asp
↑ https://alistapart.com/article/conversational-semantics/
↑ https://alistapart.com/article/accessibility-for-vestibular/#section6
↑ https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML
↑ https://www.w3.org/TR/html401/struct/links.html
↑ https://www.w3schools.com/html/html_links.asp
↑ https://www.freecodecamp.org/news/html-new-line-how-to-add-a-line-break-with-the-br-tag/
↑ https://www.freecodecamp.org/news/how-to-change-text-color-in-html/
↑ https://support.apple.com/guide/textedit/work-with-html-documents-txted0b6cd61/mac
↑ https://condor.depaul.edu/sjost/hci201/documents/notepad.htm
↑ https://notepad-plus-plus.org/

About This Article

1. Open a text editor. 2. Type ″<!DOCTYPE html>″ on the first line. 3. Type ″<html>″ on the next line. 4. Type ″<head>″ on the next line. 5. Type your page’s title between ″<title>″ and ″</title>″ tags. 6. Type ″</head>″ on the next line. 7. Type ″<body>″ on the next line. 8. Enter the content of your page. 9. End the page with ″</body></html>″ Did this summary help you? Yes No

Send fan mail to authors

Reader Success Stories

May 1, 2023

Is this article up to date?

Indulekha P.

Dec 18, 2016

Sipho Jaclly

May 26, 2017

Tanuja Jalal

Mar 26, 2017

Savita Singh

Nov 26, 2016

Featured Articles

Watch Articles

Terms of Use
Privacy Policy
Do Not Sell or Share My Info
Not Selling Info

wikiHow Tech Help Pro:

Level up your tech skills and stay ahead of the curve

HTML Get Started

An HTML file is simply a text file saved with an .html or .htm extension.

Getting Started

In this tutorial you will learn how easy it is to create an HTML document or a web page. To begin coding HTML you need only two things: a simple-text editor and a web browser.

Well, let's get started with creating your first HTML page.

Creating Your First HTML Document

Let's walk through the following steps. At the end of this tutorial, you will have made an HTML file that displays "Hello world" message in your web browser.

Step 1: Creating the HTML file

Open up your computer's plain text editor and create a new file.

Tip: We suggest you to use Notepad (on Windows), TextEdit (on Mac) or some other simple text editor to do this; don't use Word or WordPad! Once you understand the basic principles, you may switch to more advanced tools such as Adobe Dreamweaver.

Step 2: Type some HTML code

Start with an empty window and type the following code:

Step 3: Saving the file

Now save the file on your desktop as "myfirstpage.html ".

Note: It is important that the extension .html is specified — some text editors, such as Notepad, will automatically save it as .txt otherwise.

To open the file in a browser. Navigate to your file then double click on it. It will open in your default Web browser. If it does not, open your browser and drag the file to it.

Explanation of code

You might wonder what that code was all about. Well, let's find out.

The first line <!DOCTYPE html> is the document type declaration . It instructs the web browser that this document is an HTML5 document. It is case-insensitive.
The <head> element is a container for the tags that provides information about the document, for example, <title> tag defines the title of the document.
The <body> element contains the document's actual content (paragraphs, links, images, tables, and so on) that is rendered in the web browser and displayed to the user.

You will learn about the different HTML elements in detail in the upcoming chapters. For now, just focus on the basic structure of the HTML document.

Note: A DOCTYPE declaration appears at the top of a web page before all other elements; however the doctype declaration itself is not an HTML tag. Every HTML document requires a document type declaration to insure that your pages are displayed correctly.

Tip: The <html> , <head> , and <body> tags make up the basic skeleton of every web page. Content inside the <head> and </head> are invisible to users with one exception: the text between <title> and </title> tags which appears as the title on a browser tab.

HTML Tags and Elements

HTML is written in the form of HTML elements consisting of markup tags. These markup tags are the fundamental characteristic of HTML. Every markup tag is composed of a keyword, surrounded by angle brackets, such as <html> , <head> , <body> , <title> , <p> , and so on.

HTML tags normally come in pairs like <html> and </html> . The first tag in a pair is often called the opening tag (or start tag), and the second tag is called the closing tag (or end tag).

An opening tag and a closing tag are identical, except for a slash ( / ) after the opening angle bracket of the closing tag, to tell the browser that the command has been completed.

In between the start and end tags you can place appropriate contents. For example, a paragraph, which is represented by the p element, would be written as:

You will learn about the various HTML elements in upcoming chapter.

Is this website helpful to you? Please give us a like , or share your feedback to help us improve . Connect with us on Facebook and Twitter for the latest updates.

Interactive Tools

Register here

In case you want to be notified about school in your locality then please register here.

Are you a Parent or Student?
Are you a Teacher?
Are you a School Supplier?

Our other Domains Olympiad Preparation Math Square Science Square English Square Cyber Square School Square Scholar Square Global Olympiads NCERT Solutions CBSE Sample Papers
Join WhatsApp Channel
Apply for CREST Olympiads

Hyper Text Mark-up Language is abbreviated as HTML, which is to design web pages.
HTML tells the browser how to display the contents of a hypertext document i.e., a document including text, images and other support media.
Hypertext pages are interconnected by hyperlinks, when clicked on these links it takes you to a new webpage.
Markup languages are tag based language; for example: gml, sgml, html, xml etc.

Basic HTML with respect to class 8

Writing Html Documents –

HTML codes are a combination of Tag and Attribute.
HTML is not case sensitive language so you can write Html tags in lowercase or uppercase letters.
With respect to class 8 HTML, tag is a HTML command that indicates how part of web page should be displayed.
These tags are enclosed with angle brackets (< >)
With respect to class 8 HTML, an attribute is the keyword that specifies additional information to tag.
Examples - color, alignment, etc.

With respect to class 8 HTML, where to Write Html Code

Open Text Editor or notepad from your computer.
Type the HTML code in it.
Save the file with extension .html/.htm
To view the created HTML file in a browser, double click on the file.

Structure of HTML Document

Html Elements with respect to class 8 computer lessons

HTML container elements require a starting as well as an ending tag. Some

Examples of container elements are:

…………………..

Attributes of HTML

Background attribute

With respect to class 8 computer lessons, this attribute allows you to make the background more presentable by adding a background image.
To add an image to the background

Background color, Text Color, Link Color

By default, browsers display text in black.

With respect to class 8 computer lessons, if you want to change the color or text (by TEXT attribute), color of links (by LINK attribute), color of active links (by ALINK attribute) and background color (by BGCOLOR attribute ).

Consider the following:

- The background color is teal. (bgcolor = “teal”)

- Text color is magenta.

- Links that have not been visited recently are made yellow (link = “yellow”)

- Links that are currently being clicked on (alink = “lime”)

 With respect to class 8 computer lessons, it lets you change the size, style and color of the text – It is generally used for changing the appearance of a short segment of text.

Attributes of tag

(i) size: used to specify the size of the text.

(ii) color: used to change the color of text.

(iii) face: used to change the way of displaying text.

Problem: With respect to class 8 HTML, to display a paragraph on red color in size 4 but its first letter should be of size 7 and of blue color.

sing the largest font

- With respect to class 8 HTML, this tag lets you define the basic size for the font, the browser will use to render normal document text.

Attribute of tag

 size – its value determines the document’s base font size. It has value between 1 and 7

Problem: To display text by changing base font sizes.

This text is being displayed in default font size as no base font size has been set as yet.

This text has base font size =5.

Headings : These are defined with the

tags, where

Defines the largest heading while, defines the smallest..

Paragraphs –

With respect to class 8 computer lessons, to load the webpage with information we can create paragraphs.

This is a paragraph aligned to the left side

This is another paragraph with center alignment

Note: Each paragraph has to be enclosed within angle bracket, failing to do will become one large paragraph. HTML automatically adds an extra blank line before and after a paragraph.

- To end one line, and to jump to the next tag is used.

Writing a line. I want to write in next line.

I am in a new line.

- To centralize a segment of text, just type the text between

For example, the code

Will make text – This is centralized – appear centralized on browser window.

Horizontal Rules -

tag produces a horizontal line spread across the width of the browser window.

Attributes of

 This attribute allows you to set the size of the horizontal rule.

 This attribute allows you to set the size of the horizontal rule. Width Attribute of

 The length of horizontal rules can be controlled with width attribute.

Problem: With respect to class 8 computer lessons, to display horizontal rules of different widths:

Width of Horizontal Rule

The following two rules have widths of 100 and 200 pixels respectively

Comments <!.... and …..>

- Comment are one type of textual content which appear in your HTML

code, but are not rendered by user’s browser.

- Comments are given between special characters.

- Browsers ignore the text between comment characters.

Line Breaks –

With respect to class 8 computer lessons, to make the webpage more presentable we need line breaks.
The tag is used when you want to start a new line.

This is a para graph with line breaks

The below-given lines show the output of the above syntax:

graph with line breaks

The tag has no closing tag.

Backgrounds –

With respect to class 8 computer lessons, to make the web page more attractive we can set the background color or an image.

Bgcolor –

The bgcolor attribute specifies a color to the background.
It can be a hexadecimal number, an RGB value, or a color name.

The lines that are given above – To set background-color black.

HTML Colors –

Usually, the HTML color values are a combination of red, green, and blue color defined by a hexadecimal notation.
This table shown below is the result of combining RGB:

HTML Lists –

With respect to class 8 computer lessons, HTML provides a simple and elegant way to sort the important information on a webpage.

Unordered Lists –

With respect to class 8 computer lessons, an unordered list is a list of items marked with bullets.
An unordered list starts with the
Each list item starts with the

This Code Would Display

Ordered Lists –

With respect to class 8 computer lessons, an ordered list is also a list of items marked with numbers.
An ordered list starts with the

HTML Links – HTML uses the anchor tag to create a link to another document or web page.

Email Links – To create an email link, you will use mailto: plus your email address.

Email Help Desk

To add a subject for the email message, you would add ?subject= after the email address.

For example:

HTML Images –

With respect to class 8 computer lessons, to display an image on a page, you need to use the src attribute.
Src stands for "source".
The value of the src attribute is the URL of the image you want to display on your page.

The syntax of defining an image:

Output display:

Recap with respect to class 8 HTML

Hyper Text Markup Language is abbreviated as HTML, to design web pages.

HTML tags are used to mark-up HTML elements.

HTML elements

The HTML element begins with a start tag:
To set headings for the content on the webpage.
To load the webpage with information we can create paragraphs.

Line Breaks

To make the webpage more presentable we need line breaks.

Backgrounds

To make the web page more attractive we can set background color or an image.

HTML Colors

A combination of red, green, and blue color defined by a hexadecimal notation.
To sort the important information on a webpage.

Unordered Lists

List of items marked with bullets.

Ordered Lists

List of items marked with numbers.
Anchor tag to create a link to another document or web page.

Email Links

To create an email link

HTML Images

To add an image to the webpage.
To draw a table in webpage.

Cell Padding

Pixel space between the cell contents and the cell border.

Cell Spacing

The space between the cells.

Quiz for HTML

Your Score: 0 /10

Other Chapters of Class 8

Cyber Hacks

Amazing Things To Do With Your Pen Drive image

Quick Links

Olympiad Topics
Cyber Shortcuts

SchoolPlus Program

Yearlong program for Olympiads preparation & to build necessary skills for future.

Olympiad Exam Dates

Time to mark your calendar with the upcoming Olympiads exam schedule.

LIVE Classes for Olympiads

Take your Olympiad preparation to next-level by taking LIVE Classes.

Olympiad Test Series

Assess your performance by taking topic-wise and full length mock tests.

India’s First Summer Olympiads

Know your true potential by participating in Unicus Olympiads for classes 1-11.

Asia’s Biggest Winter Olympiads

Give wings to your innovation by appearing in CREST Olympiads for Prep/KG to classes 1-10.

Purdue Online Writing Lab Purdue OWL® College of Liberal Arts

Welcome to the Purdue Online Writing Lab

Welcome to the Purdue OWL

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

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

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

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

A Message From the Assistant Director of Content Development

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

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

All the best,

Social Media

Facebook twitter.

New Orleans valedictorian lived in a homeless shelter as he rose to the top of his class

Elijah Hogan came through a senior year of high school in a homeless shelter to make it to the top of his class

NEW ORLEANS — From a New Orleans homeless shelter to the top of his high school class, Elijah Hogan has already conquered much in life.

Hogan recently graduated as one of two valedictorians at Walter L. Cohen charter high school, despite living in a homeless shelter for youth for more than a year.

“It’s been tough and rough” but he’s alright, Hogan told “Good Morning America.”

Hogan, 19, was just 8 when his mother died. He had been living with his grandmother but he ended up in the Covenant House shelter before his senior year of high school.

Despite the housing insecurity, Hogan pushed through to finish with a 3.93 GPA. In a speech at the school’s graduation ceremony, Hogan applauded his classmates for pushing themselves “to reach the pinnacle of success.” The group started high school amid the pandemic.

“Above all the trials, tests and hardships, what led us here is that we all set a goal to reach,” Hogan said. “Take pride in how far you have come. Have faith in how far you can go. But don’t forget to enjoy your journey.”

He also called the speech a “thank-you note” to the community who helped him.

Hogan’s character helped him succeed, Jerel Bryant, CEO of Collegiate Academies, which runs the high school, told The Associated Press.

Jarkayla Cobb, Hogan’s case worker at Covenant House, noted how shy Hogan was when he first arrived at the shelter.

“Being in a homeless shelter is traumatic. Whatever you went through to get you here is traumatic,” Cobb said.

Hogan now plans to attend Xavier University of Louisiana in New Orleans, where he said he will be receiving some tuition assistance while pursuing a degree in graphic design.

He encouraged any students who are struggling through hardship to remain focused on their education.

“Because without your education, you will not be able to get through the hardships and meet the people that helped you along the way,” Hogan said.

Class 2A girls state soccer quarterfinals round-up: Dallas Center-Grimes advances

The opening day of action at the Iowa girls state soccer tournament in Des Moines brought with it sunny skies and a whole lot of action in Class 2A.

There were four high-quality matches on display with eight teams battling for a spot in Thursday's semifinals. While three of the quarterfinal games went down to the wire, Dallas Center-Grimes dispatched Cedar Rapids Xavier with ease, posting four first-half goals.

Here is a recap of all the action in Class 2A on Tuesday afternoon:

More: Attending the Iowa high school soccer state tournament in Des Moines? Here's what to know

No. 3 Dallas Center-Grimes 4, No. 6 Cedar Rapids Xavier 1

If you were at the Cownie Soccer Park, it would have been hard not to hear a pre-game speech that could seemingly move mountains.

DCG junior Neela Williamson's dad had a passionate message for the team before the first whistle.

"Make your mark!"

Senior midfielder Kalyn Mills wasted little time doing that, receiving a pass up the left side of the pitch and racing into the box. She flicked the ball over the head of the Xavier goalkeeper for the early 1-0 lead. After the Saints tied it at one, the Mustangs scored three unanswered to close the half up 4-1. Sophomore Kenna Knief scored two of those, her fourth and fifth goals of the season.

Eight different Comets have more goals than Knief, including her sister, senior Kylie Knief, who is the team's leading goal scorer with 19. Yet on this day, it was Kenna Knief who led the charge after she said that the pre-game speech ignited a spark in the team

"He's very, very inspirational," Kenna Knief said. "He always hypes us up."

The Mustangs return to the state tournament as back-to-back state champions. Knief said after the match that the phrase "three-peat" has been thrown around plenty over the last year, but the team's goal is to take it one round at a time.

DCG will take the field again Thursday against No. 7 North Scott with a spot in the state title game on the line.

More: Iowa high school girls state soccer tournament 2024: Predicting champions in all 3 classes

No. 1 North Polk 3, No. 8 Lewis Central 2

Lewis Central came out swinging from the first whistle, burying a pair of goals in the opening 20 minutes. First, junior Reagan Lea found the ball at her feet in the box and sent it home for the 1-0 advantage. Then, it was the captain Haylee Erickson who had space from well outside the box and buried it in the top left corner to take a dominant 2-0 lead over the Comets.

North Polk entered the tournament as the No. 1 seed. Comets coach Francis Lee said the group had done too much to go out with a whimper. Behind the scenes, Lee shed tears as she passionately motivated her squad.

It was evident how much that meant to the squad, as they rallied to take a 3-2 lead and victory to advance. The Comets scored the tying goal within the first five minutes of the second half before scoring a third shortly after.

"That shows you we're North Polk. We're ready to go. We're No. 1 and we're coming for you," Lee said.

The Comets will take on Pella in the state semifinals on Thursday.

No. 4 Pella 4, No. 5 Iowa City Liberty 2

On the field adjacent to a wild comeback from North Polk, Pella made one of its own.

Down 2-1 after the first half, the Dutch scored three unanswered goals, including junior Briana Shannon's goal with under 30 seconds to go to seal the victory.

This is Pella's second consecutive year making the state semifinals.

More: Iowa girls soccer state tournament Class 1A roundup: Nevada moves on, Denver dominates

No. 7 North Scott 2, No. 2 Waverly Shell-Rock 1

This was the day of the comeback.

After the Go-Hawks scored a go-ahead goal in the final seconds of the first half, North Scott quickly knotted things up in the opening minutes of the second half.

With under 14 minutes to go, North Scott defended a dangerous situation in the box and bombed the ball downfield. Sophomore Mckenzie Moeller broke out and was one-on-one with the goalkeeper, sending it past her outstretched arms to take a 2-1 lead.

The Lancers would eventually hold on to secure the lone upset of the afternoon.

Eli McKown covers high school sports and wrestling for the Des Moines Register. Contact him at [email protected] . Follow him on Twitter at @EMcKown23

How TO - Make a Website

Learn how to create a responsive website that will work on all devices, PC, laptop, tablet, and phone.

Create a Website from Scratch

A "layout draft".

It can be wise to draw a layout draft of the page design before creating a website:

Navigation bar

Side content.

Some text some text..

Main Content

First step - basic html page.

HTML is the standard markup language for creating websites and CSS is the language that describes the style of an HTML document. We will combine HTML and CSS to create a basic web page.

Note: If you don't know HTML and CSS, we suggest that you start by reading our HTML Tutorial .

Example Explained

The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <meta> element should define the character set to be UTF-8
The <meta> element with name="viewport" makes the website look good on all devices and screen resolutions
The <style> element contains the styles for the website (layout/design)
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph

Creating Page Content

Inside the <body> element of our website, we will use our "Layout Draft" and create:

A navigation bar
Main content
Side content

Semantic Elements

HTML5 introduced several new semantic elements. Semantic elements are important to use because they define the structure of web pages and helps screen readers and search engines to read the page correctly.

These are some of the most common semantic HTML elements:

In this tutorial we will use semantic elements.

However, it is up to you if you want to use <div> elements instead.

A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name:

Then we use CSS to style the header:

Try it Yourself »

Navigation Bar

A navigation bar contains a list of links to help visitors navigating through your website:

Use CSS to style the navigation bar:

Create a 2-column layout, divided into a "side content" and a "main content".

We use CSS Flexbox to handle the layout:

Then add media queries to make the layout responsive. This will make sure that your website looks good on all devices (desktops, laptops, tablets and phones). Resize the browser window to see the result.

Tip: To create a different kind of layout, just change the flex width (but make sure that it adds up to 100%).

Tip: Do you wonder how the @media rule works? Read more about it in our CSS Media Queries chapter .

Tip: To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter .

What is box-sizing?

You can easily create three floating boxes side by side. However, when you add something that enlarges the width of each box (e.g. padding or borders), the box will break. The box-sizing property allows us to include the padding and border in the box's total width (and height), making sure that the padding stays inside of the box and that it does not break.

You can read more about the box-sizing property in our CSS Box Sizing Tutorial .

At last, we will add a footer.

And style it:

Congratulations! You have built a responsive website from scratch.

W3Schools Spaces

If you want to create your own website and host your .html files, try our website builder , called W3schools Spaces :

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]