ck
ReviewsPricingJobsBlogRegister
Master AI & Build your First Coding Portfolio with SkillReactor | Sign Up Now

Learn HTML

Lesson 1 - Overview Of The Web And HTML

1.1 What Is HTML

1.2 Basic Structure Of An HTML Document

2.1 Headings

2.2 Paragraphs

2.3 Input Fields

2.4 Buttons

2.5 Links

2.6 Lists

3.1 Adding Images

3.2 Adding Video And Audio

4.1 Writing Your First HTML Page

5.1 What Is CSS

5.2 How CSS Works With HTML

5.3 CSS Syntax

6.1 Types Of CSS Selectors

6.2 Common CSS Properties

Lesson 7.1 - Applying CSS To HTML

8.1 Understanding The Box Model

8.2 CSS Box Model Properties

9.1 CSS Positioning

9.2 Float And Clear Properties

10.1 Introduction To Flexbox

10.2 Advance Flexbox Styles

Lesson 1 - Overview Of The Web And HTML

1.2 Basic Structure Of An HTML Document

HTML Tags and Attributes

The fundamental components of HTML are Tags and Attributes which are used to structure and define content on web pages.

Tags

HTML tags are enclosed in angle brackets (< >) and define the structure of the content. They come in pairs: an opening tag (<tag>) and a closing tag (</tag>). Tags can be nested to create hierarchical structures, and they determine how content is displayed or interpreted by browsers. Examples include <h1> for headings, <p> for paragraphs, <a> for links, etc.

Let's have a look at an example of paragraph:

<p>Hi There!</p>

Now let's try creating paragraph in editor below. The content should say Hello World!:

regex:/Hello World!/g
<!-- Write Code Here --->

Attributes

HTML attributes provide additional information about HTML elements. They are always included in the opening tag and are written as name-value pairs, separated by equals signs (=) and enclosed in double quotes ("). Attributes can modify the behaviour or appearance of elements, such as setting links (href attribute in <a> tag) or specifying image sources (src attribute in <img> tag).

Example:

<a href="https://example.com">Click here</a>
<img src="image.jpg" alt="Description of image">

In the example above, href and src are attributes that provide essential details about the link and image elements, respectively.

Basic Structure of an HTML Document

An HTML document follows a specific structure that ensures proper rendering and functionality in web browsers. Let's break it down:

  1. <!DOCTYPE html>

    • This declaration specifies the document type and version of HTML (HTML5 in this case), ensuring compatibility and correct rendering by browsers.

  2. <html>

    • The <html> tag is the root element of every HTML page. It encapsulates all other elements and defines the document as an HTML document.

  3. <head>

    • Within the <html> tag, the <head> section contains meta-information about the document, such as its title, character encoding, and references to external resources like stylesheets or scripts.

  4. <title>

    • The <title> tag, nested within <head>, sets the title of the webpage. This title appears in the browser's title bar or tab, helping users identify the page.

  5. <body>

    • The <body> tag encloses the content of the webpage that users see and interact with. This includes text, images, links, forms, and other elements that make up the visible part of the webpage.

Example HTML Structure:

<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>My First Website</h1>
    <p>This is my first paragraph. I'm learning HTML!</p>
</body>
</html>

In this example:

  • The <title> element defines the title displayed in the browser.
  • The <h1> and <p> elements represent heading and paragraph content within the <body>.

Understanding this structure is essential for creating well-formed HTML documents that display correctly across different browsers and devices.

PreviousNext