HTML Basics

PHOTO EMBED

Thu Jun 13 2024 11:11:30 GMT+0000 (Coordinated Universal Time)

Saved by @NoFox420 #html 

HTML Elements

<h1> //opening tag
</h1> // closing tag

Heading Element
<h1> to <h6>
not good practice to have more than one h1 or skip levels.

  
Paragraph
<p></p>
adds a linebreak
  

Horizontal Rule Element (self closing)
<hr />
doesn't take content
adds a horizontal line
  
Break Element (self closing)
<br />
doesn't take content
adds a break at the end
don't use break elements to break up paragraphs
  
List Element

Unordered
<ul>		//unordered
  <li></li> // list item
</ul>
will create bullet points. order of items don't matter
  
Ordered
<ol>
  <li></li>
</ol>
adds numbers to every item

Anchor Element
<a href="LINK"></a>
adds a target to some content
  
Image Element
<img src="URL" alt="ALTERNATIVE TEXT DESCRIPTION" />

HTML Boilerplate
<!DOCTYPE html> //tells browser code is written in html
  <html lang="en"> //language of text content, used for screen readers
    <head> //important information that does not get displayed
    <meta charset="UTF-8"> //character encoding
      <title>TITLE</title> //gets displayed in tab bar
      </head>
      
      <body> //content of website goes here
        
      </body>
  </html>

Main Element
The main element is used to represent the main content of the body of an HTML document.
<main>
  <h1>Most important content of the document</h1>
  <p>Some more important content...</p>
</main>

Section Element
The section element is used to define sections in a document, such as chapters, headers, footers, or any other sections of the document. It is a semantic element that helps with SEO and accessibility.
<section>
  <h2>Section Title</h2>
  <p>Section content...</p>
</section>

Figure Element
The figure element represents self-contained content and will allow you to associate an image with a caption.
A figure caption (figcaption) element is used to add a caption to describe the image contained within the figure element.
<figure>
  <img src="image.jpg" alt="A description of the image">
  <figcaption>A cute cat</figcaption>
</figure>

Form Element
The form element is used to get information from a user like their name, email, and other details.
The action attribute indicates where form data should be sent.
<form action="/submit-url"></form>

Input element
The input element allows you several ways to collect data from a web form.
There are many kinds of inputs you can create using the type attribute. You can easily create a password field, reset button, or a control to let users select a file from their computer.
In order for a form's data to be accessed by the location specified in the action attribute, you must give the text field a name attribute and assign it a value to represent the data being submitted.
To prevent a user from submitting your form when required information is missing, you need to add the required attribute to an input element.

Fieldset Element
The fieldset element is used to group related inputs and labels together in a web form.

Legend Element
The legend element acts as a caption for the content in the fieldset element. It gives users context about what they should enter into that part of the form.

Footer Element
The footer element is used to define a footer for a document or section. A footer typically contains information about the author of the document, copyright data, links to terms of use, contact information, and more.

Select Element
Adding a dropdown to the form is easy with the select element. The select element is a container for a group of option elements, and the option element acts as a label for each dropdown option. Both elements require closing tags.
content_copyCOPY