HTML (HyperText Markup Language) is the standard markup language when creating web pages. It provides the structure and content of the webpage. Almost like the walls on a house, without the walls [B]your roof[/B] (The Webpage) would not stand.

[B][SIZE=6]Key Concepts[/SIZE]

Elements:[/B] The building blocks of HTML, They tell the browser how to display what's on your webpage. Elements can also be defined as tags.
[B]Tags: [/B]Keywords enclosed in angle brackets ( [B]`[/B]<[B]` [/B]or [B]`[/B]>[B]` [/B]) that mark the start and end of an element. Most elements have an opening tag ( [B]`[/B]<tag_name>[B]`[/B]) and a closing tag ([B]`[/B]</tag_name[B]`[/B]). The content goes between the tags. These will be defined as your screws that help keep your roof together.
[CODE=html]
<p>
Hello! This is your example
</p>
[/CODE]
[B]Example Explanation:
<p>[/B] is the opening tag. You know this because there isn't a [B]'/'[/B] at the beginning of the tag name. The [B]/ [/B]tells the browser that the opening tag is closed.
THE TEXT BETWEEN THE TAGS IS THE ELEMENTS CONTENT!!
[B]</p> [/B]is the closing tag because you can see that it has a [B]'/'[/B] at the start of it. Without a opening tag, your closing tag is pointless and can be considered a dead end.
[B]Attributes:[/B] Provide additional information about the element. They are placed inside the opening tag. They come in name-value pairs (e.g., `attribute_name="attribute_value"`).
[B]Structure: [/B]HTML Documents follow a hierarchical structure. Elements are nested within each other to create the layout of the page.
[B]Document Type Declaration (`<!DOCTYPE html>`): [/B]Placed at the beginning of an HTML Document, it declares that the code inside the document uses HTML.
[B]CSS Stylesheets Breakdown: [/B]To control the appearance of your website and make it stylish. This includes things like colors, fonts, spacing, layout, and how elements are arranged.
[B]> [/B]Separation of concerns: Stylesheets allow you to separate the structure (HTML) from presentation (CSS). This is a crucial principal for good web design, making websites easier to maintain, update, and adapt for different devices.
[B]> [/B]CSS (Cascading Style Sheets): the most common type of stylesheet is written using css. Css rules are applied to HTML elements to determine their appearance.
[B]> [/B]How it works: CSS rules are applied to HTML elements through:
Linking: Linking an external css file to your HTML doc (the recommended approach)
Embedding: Including CSS rules within the [B]<style> [/B]tag and the [B]<head> [/B]section of your HTML
Inline Styles: Applying CSS rules directly to a html element using the `style` attribute (generally discouraged by many devs I know for maintainability).

[B][SIZE=6]Basic HTML Structure[/SIZE][/B]

Every document has a basic structure:
[CODE=html]
```html
<!DOCTYPE html>
<head>
  <title>Your Page Title</title>
  <!-- Metadata, links to stylesheets, etc -->
</head>
<body>
  <!-- Content of the webpage goes here -->
</body>
</html>
```
[/CODE]

[B]Example Explanation:[/B]
<!DOCTYPE html>: Declares the document type (HTML 5)
<html>: The root element of the page. It encompasses the entire doc
<head>: Contains [B]meta-information [/B]about the document, such as the title, character set, links to external stylesheets (YOUR CSS), and other data not directly displayed on the page
<title>: Specifies a title for th HTML page (Which is shown on the browsers title bar or tab)
<body>: Contains visible page content (text, images, links, etc..)

[SIZE=6]Essential HTML Elements (Some Examples)[/SIZE]

1. Headings: Used to structure content with different levels of importance. You can adjust the heading size with the number beside the [B]`h`[/B]. I am pretty sure there is 6 heading styles.

[CODE=html]
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is the heading</h4>
<h5>Heading here</h5>
<h6>Heading here!</h6>
[/CODE]

2. Paragraphs: A block of text

[CODE=html]
<p>This is a paragraph</p>
<p>This is another paragraph</p>
[/CODE]

3. Links (Anchors): Used to create hyperlinks to other pages or sections within the same page
[B]Don't let the example confuse you! [/B]All you are seeing is the element content between the opening and closing tag.
[CODE=html]
<a href="https://swcthefinalchapter.com">Click me</a>
<a href="section2">Jump to Section 2</a>
[/CODE]

[B]`href`[/B] attribute specifies the destination URL or the ID of an element within the same page.

4. Images: Used to embed images onto your webpage
[CODE=html]
<img src="image.jpg" alt="Desc of the image">
[/CODE]

[B]`src` [/B]attribute specifies the url of the image
[B]`alt` [/B]provides alternative text for the image (for accessibility and if the image fails to load).

5. Divisions (<div>): Used to group and structure content. It's a block-level element.
[CODE=html]
<div>
  <h2>Section Title</h2>
  <p>Some Text.</p>
</div>
[/CODE]

6. Comments: Used to add comments to your file. These are not displayed on the browser and will only be shown where your code is, I like to use these when working on team projects or stuff that involves multiple people having access to the raw code.
[CODE=html]
<!-- Hello! I am Arkham -->
<p>Text here</p>
[/CODE]

7. Attributes provide additional information about html elements

[B]`id`: [/B]A unique identifier for an element. Used for styling (with CSS) and scripting (with JavaScript) and for internal links. Must be unique within a page.
[CODE=html]
<p id="introduction">Intro here</p>
<a href="introduction">Go to introduction</a>
[/CODE]

[B]`class` [/B]Used to group elements together for styling a scripting. An element can have multiple classes.

[CODE=html]
<p class="highlighted">This is important</p>
<p class="highlighted warning">This is another highlighted warning class</p>
[/CODE]

[B]`style`[/B]: Used to apply inline styles to an element. Generally, using css in a separate stylesheet is preferred.

[CODE=html]
<p style="color: red; font-size: 16px;">Here!</p>
[/CODE]

If you have anymore questions about HTML or anything mentioned in the post, please reach out to me. I will soon add more guides on CSS and Javascript
[IMG alt="batman arkham knight GIF"]https://media0.giphy.com/media/30ceKMOzwcDaU/200.gif[/IMG]