Html Syntax | Beginner | Html Css Tutorial

Understanding HTML syntax and structure

HTML (HyperText Markup Language) syntax defines the rules and structure for creating web pages. It consists of a series of elements that define different parts of the content, such as headings, paragraphs, links, images, and more. This tutorial provides an understanding of HTML syntax and structure.

Key Points:

HTML syntax defines the rules for creating web pages.
HTML elements are the building blocks of web pages.
Proper syntax and structure are essential for creating well-formed HTML documents.

Basic HTML Structure

An HTML document has a well-defined structure that consists of the following parts:

<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: The root element that contains all other elements.
<head>: Contains meta-information about the document, such as the title, character set, and links to stylesheets.
<body>: Contains the content of the document, such as text, images, links, and other elements.

Here is an example of a complete HTML document:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on my first HTML page.</p>
    <a href="https://example.com">Visit my website</a>
    <img src="profile.jpg" alt="Profile Picture">
</body>
</html>

HTML Elements

HTML elements are the building blocks of web pages. Each element consists of a start tag, content, and an end tag. Here are some common HTML elements:

<h1>...</h1>: Heading element for the main heading.
<p>...</p>: Paragraph element for text.
<a>...</a>: Anchor element for creating hyperlinks.
<img>: Image element for embedding images (self-closing).
<ul>...</ul>: Unordered list element for creating bulleted lists.
<li>...</li>: List item element for list entries.
<div>...</div>: Division element for grouping content.
<span>...</span>: Span element for inline grouping of text.

Here is an example of using some of these elements:


<h1>About Me</h1>
<p>Hello! My name is John Doe, and I am a web developer.</p>
<a href="https://example.com">Visit my website</a>
<img src="profile.jpg" alt="Profile Picture">
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

HTML Attributes

HTML elements can have attributes that provide additional information about the element. Attributes are placed inside the start tag and consist of a name and a value. Here are some common attributes:

href: Specifies the URL of the link (used with <a>).
src: Specifies the path to the image (used with <img>).
alt: Provides alternative text for the image (used with <img>).
id: Specifies a unique identifier for the element.
class: Specifies one or more class names for the element.
style: Specifies inline CSS styles for the element.

Here is an example of using attributes:


<a href="https://example.com" target="_blank">Visit Example.com</a>
<img src="logo.png" alt="Website Logo" width="200">
<p id="intro" class="swf-lsn-text-large" style="color: blue;">Welcome to my website!</p>

HTML Nesting

HTML elements can be nested inside other elements to create complex structures. Proper nesting ensures that the HTML document is well-formed. Here is an example of nesting elements:


<div class="swf-lsn-container">
    <h1>My Blog</h1>
    <p>Welcome to my blog. Here are my latest posts:</p>
    <ul>
        <li><a href="post1.html">Post 1</a></li>
        <li><a href="post2.html">Post 2</a></li>
        <li><a href="post3.html">Post 3</a></li>
    </ul>
</div>

In this example, a <div> element contains a heading, a paragraph, and a nested unordered list with links.

HTML Comments

HTML comments are used to add notes or explanations within the code. Comments are ignored by the browser and do not affect the rendered output. Comments are enclosed within  tags. Here is an example:


<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments can be used to explain the code -->

Summary

In this tutorial, you learned about the syntax and structure of HTML. You explored the basic structure of an HTML document, common HTML elements, attributes, nesting, and comments. Understanding HTML syntax is essential for creating well-formed and structured web pages. This knowledge forms the foundation for learning more advanced HTML, CSS, and JavaScript concepts.

HTML CSS - HTML Syntax