Skip to content

Commit e9bcd5e

Browse files
SkandSinghSkandSingh
authored
Syntax and structure file added
1 parent 4bff1ca commit e9bcd5e

File tree

1 file changed

+95
-0
lines changed

1 file changed

+95
-0
lines changed

‎docs/html/syntax-structure-html.md

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
---
2+
id: structure-and-syntax-html
3+
title: Introduction of structure and syntax
4+
sidebar_label: HTML structure and Syntax
5+
tags: [html, structure, syntax, web-development, front-end-development, web-design]
6+
description: In this tutorial, you will learn about HTML Structure and HTML Syntax
7+
---
8+
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.
9+
10+
## HTML Syntax
11+
12+
HTML syntax consists of a set of elements, tags, attributes, and their combinations. Here's a breakdown:
13+
14+
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.
15+
```html
16+
<tagname>Content goes here</tagname>
17+
```
18+
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:
19+
20+
+ **Opening Tags** : They denote the beginning of an element and have the tag name wrapped in angle brackets.
21+
```html
22+
<tagname>
23+
```
24+
+ **Closing Tags** : They denote the end of an element and have the tag name wrapped in angle brackets, preceded by a forward slash (/).
25+
26+
```html
27+
</tagname>
28+
```
29+
Some tags, like `<img>`, `<input>`, and `<br>`, are self-closing and do not require a separate closing tag.
30+
31+
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.
32+
```html
33+
<tagname attribute="value">
34+
```
35+
For example:
36+
```html
37+
<img src="image.jpg" alt="Description">
38+
```
39+
40+
## HTML Structure
41+
42+
HTML documents have a hierarchical structure consisting of various elements. Here's a breakdown of the structure:
43+
44+
45+
Here's a basic HTML structure:
46+
47+
1. `<!DOCTYPE html>` : Declares the document type and version of HTML.
48+
2. `<html>` : The root element of the HTML document.
49+
3. `<head>` : Contains meta-information about the document, such as character encoding, viewport settings, and title.
50+
4. `<meta charset="UTF-8">` : Specifies the character encoding of the document.
51+
5. `<meta name="viewport" content="width=device-width, initial-scale=1.0">` : Sets the viewport properties for responsive design.
52+
6. `<title>` : Defines the title of the document.
53+
7. `<body>` : Contains the visible content of the HTML document.
54+
8. `<header>`, `<main>`, `<footer>` : Semantic HTML5 elements for structuring the header, main content, and footer sections of the page.
55+
9. `<section>, <article>, <aside>`: Additional semantic HTML5 elements for organizing content within the main section of the page.
56+
57+
58+
``` html
59+
<!DOCTYPE html>
60+
<html lang="en">
61+
<head>
62+
<meta charset="UTF-8">
63+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
64+
<title>Your Page Title</title>
65+
<!-- Additional meta tags, stylesheets, and scripts can be included here -->
66+
</head>
67+
<body>
68+
<!-- Your content goes here -->
69+
<header>
70+
<!-- Header content such as navigation menus, logos, etc. -->
71+
</header>
72+
73+
<main>
74+
<!-- Main content of the page -->
75+
<section>
76+
<!-- Sections of content within the main area -->
77+
</section>
78+
<article>
79+
<!-- Articles or blog posts -->
80+
</article>
81+
<aside>
82+
<!-- Sidebars, supplementary content, or related information -->
83+
</aside>
84+
</main>
85+
86+
<footer>
87+
<!-- Footer content such as copyright information, contact details, etc. -->
88+
</footer>
89+
</body>
90+
</html>
91+
```
92+
93+
### conclusion
94+
95+
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.

0 commit comments

Comments
 (0)