| HTML | HTML: The Essentials

HTML: The Essentials

          -Introduction to HTML

          -Paragraph Elements

          -Heading Elements 

          -Introduction to the Chrome Inspector 

          -HTML Boilerplate

          -List Elements 

          -Anchor Tags

          -Images

          -Comments

Introduction to HTML

HTML also known as Hypertext Markup Language, is the structure of the content on a webpage. HTML is not the style or the behavior of a web page. HTML is not a programming language because there is no complex logic, only marking up the layout of a given document. HTML was created to help describe the structure of academic research papers.

HTML has special elements to help with marking up web documents.

Common Elements include:
html
p - represents a paragraph
h1 - represents a level 1 heading
img - represents an image
form- represents a form

Paragraph Elements

A paragraph can contain any sort of related content that you want to group together

Heading Elements

There are six heading elements with h1 being the biggest heading and h6 being the smallest

There should always be only one h1 on a page and it should always be the top level main heading.
There are headings with subheadings for each main heading.

The basic idea is to have at most on a page only an h2 if you already have an h1 as well as only have an h4 if you already have an h3

Introduction to the Chrome Inspector

To access the chrome inspector, simply right click on any web page and select inspect. In the chrome inspector, it is possible to view all the underlying HTML on that specific web page.

The inspector is useful for finding errors in web pages for HTML/CSS/JavaScript code. Also helpful when it comes to testing how a page may look or function.

While in the inspector, it is possible to change things on the web page in real time as it dynamically updates.

HTML Boilerplate

Every single web page is standardized because it is made from the same exact HTML template.

DOCTYPE html
html
head
title My First Page title
head
body
Content Goes Here
body
html

List Elements

List Elements are useful for either bulleted or numbered list. List can be ordered or unordered.

Unordered List

html

ul
li Thing 1 li
li Thing 2 li
li Thing 3 li
ul

Ordered List

html
ol
li Thing 1 li
li Thing 2 li
li Thing 3 li
ol

Anchor Tags

The anchor element provides the ability to link to other pages or other areas of a web page.

Images

The img element provides the ability to link to pictures on a web page.

Comments

HTML comments are for documenting code to keep track of what each piece of code does.