Skip to content

Syntax and structure file added #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 13, 2024
Merged

Syntax and structure file added #79

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e9bcd5e
Syntax and structure file added
SkandSingh May 12, 2024
73fe5b6
Updated syntax-structure-html.md
SkandSingh May 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 95 additions & 0 deletions docs/html/syntax-structure-html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
---
id: structure-and-syntax-html
title: Introduction of structure and syntax
sidebar_label: HTML structure and Syntax
tags: [html, structure, syntax, web-development, front-end-development, web-design]
description: In this tutorial, you will learn about HTML Structure and HTML Syntax
---
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page and consists of a series of elements. HTML elements tell the browser how to display the content.

## HTML Syntax

HTML syntax consists of a set of elements, tags, attributes, and their combinations. Here's a breakdown:

1. **Elements** : HTML documents are built using elements, which are structured by HTML tags. Elements typically consist of an opening tag, content, and a closing tag.
```html
<tagname>Content goes here</tagname>
```
2. **Tags**: Tags are keywords enclosed in angle brackets `<>` that define the structure and content of HTML elements. They can be categorized into two types:

+ **Opening Tags** : They denote the beginning of an element and have the tag name wrapped in angle brackets.
```html
<tagname>
```
+ **Closing Tags** : They denote the end of an element and have the tag name wrapped in angle brackets, preceded by a forward slash `/`.

```html
</tagname>
```
Some tags, like `<img>`, `<input>`, and `<br>`, are self-closing and do not require a separate closing tag.

3. **Attributes** : HTML elements can have attributes that provide additional information about them. Attributes are added to the opening tag and are written as name-value pairs.
```html
<tagname attribute="value">
```
For example:
```html
<img src="image.jpg" alt="Description">
```

## HTML Structure

HTML documents have a hierarchical structure consisting of various elements. Here's a breakdown of the structure:


Here's a basic HTML structure:

1. `<!DOCTYPE html>` : Declares the document type and version of HTML.
2. `<html>` : The root element of the HTML document.
3. `<head>` : Contains meta-information about the document, such as character encoding, viewport settings, and title.
4. `<meta charset="UTF-8">` : Specifies the character encoding of the document.
5. `<meta name="viewport" content="width=device-width, initial-scale=1.0">` : Sets the viewport properties for responsive design.
6. `<title>` : Defines the title of the document.
7. `<body>` : Contains the visible content of the HTML document.
8. `<header>`, `<main>`, `<footer>` : Semantic HTML5 elements for structuring the header, main content, and footer sections of the page.
9. `<section>, <article>, <aside>`: Additional semantic HTML5 elements for organizing content within the main section of the page.


``` html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
<!-- Additional meta tags, stylesheets, and scripts can be included here -->
</head>
<body>
<!-- Your content goes here -->
<header>
<!-- Header content such as navigation menus, logos, etc. -->
</header>

<main>
<!-- Main content of the page -->
<section>
<!-- Sections of content within the main area -->
</section>
<article>
<!-- Articles or blog posts -->
</article>
<aside>
<!-- Sidebars, supplementary content, or related information -->
</aside>
</main>

<footer>
<!-- Footer content such as copyright information, contact details, etc. -->
</footer>
</body>
</html>
```

### conclusion

Together, HTML syntax and structure enable developers to craft web pages that are both functional and user-friendly, facilitating seamless navigation and interaction for visitors. Understanding and adhering to these principles is essential for creating well-structured, semantically meaningful, and standards-compliant web content.