HTML class Attribute

The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class.

The class Attribute

The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

In the following example we have three <div> elements with a class attribute with the value of “city”. All of the three <div> elements will be styled equally according to the .city style definition in the head section: Continue reading HTML class Attribute

HTML Div Element

The <div> element is used as a container for other HTML elements.

The <div> Element

The <div> element is by default a block element, meaning that it takes all available width, and comes with line breaks before and after.

A <div> element takes up all available width:

Lorem Ipsum <div>I am a div</div> dolor sit amet.

Continue reading HTML Div Element

HTML Block and Inline Elements

Every HTML element has a default display value, depending on what type of element it is.

The two most common display values are block and inline.

Block-level Elements

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

Continue reading HTML Block and Inline Elements

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

 

See the Pen
HTML Lists
by Iampsp.com (@iampsp)
on CodePen.


Continue reading HTML Lists

HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

 

See the Pen
HTML Tables
by Iampsp.com (@iampsp)
on CodePen.


Continue reading HTML Tables

HTML Page Title

Every web page should have a page title to describe the meaning of the page.

The Title Element

The <title> element adds a title to your page:

 <!DOCTYPE html>
<html>
<head>
  <title>HTML Tutorial</title>
</head>
<body>

The content of the document......

</body>
</html>

Continue reading HTML Page Title

HTML Favicon

A favicon is a small image displayed next to the page title in the browser tab.

How To Add a Favicon in HTML

You can use any image you like as your favicon. You can also create your own favicon on sites like https://www.favicon.cc.

Tip: A favicon is a small image, so it should be a simple image with high contrast.

To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is “favicon.ico”. Continue reading HTML Favicon

HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML Links – Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Continue reading HTML Links

CSS In HTML

CSS stands for Cascading Style Sheets.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

What is CSS?

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

Continue reading CSS In HTML