HTML

Welcome to HTML!

HTML is markup language, used for describing web documents. HTML documents are described by tags with the structure:

<tag>content</tag>

Tags are not case sensitive, however it is recommended that they are lower case. the combination of a tag and its content is referred to as an HTML element. Tags usually, but not always require a closing tag:

</tag>

HTML Attributes

Attributes provide additional information about HTML elements and are specified in the opening tag as name/value pairs i.e name = "some value", remember to always include quotes around your attribute values. E.x.

<tag name = "value">content</tag>

To create your own HTML document, first open TextEdit on Mac or Notepad on Windows, you will use these plain text editors to write the code for the website. Make sure to choose Format > Make Plain Text and turn off smart quotes with Edit > Substitutions > Smart Quotes before you get started.

This is how you create a heading:

<h1> My First Heading </h1>

Headings go from h 1 to 6. <h1> is the most important heading you want to denote in your webpage, while <h6> is the least important title. However the heading should not be used to make the text larger or bold, as CSS is used for that.

Tags describe what king of content, ex, title, paragraph etc, is between them, not necessarily the style of that content.

The <p> element describes a paragraph. By default, any amount of whitespace/spaces between words in a paragraph translates to one space. Likewise, line breaks (pressing enter) translate into one space.

<p>My first paragraph.</p>

Line Breaks:

To insert a line break, we can use the <br> tag. e.x

<p>My first<br>paragraph.</p>

Note: <br> tags don’t need a closing tag, because it wouldn’t make sense to have content between them. <br> tags can be placed outside paragraphs as well.

Adding Links:

To have a link appear in your webpage, you use the <a> tag, and specify the link’s address in the href attribute. e.x:

<a href="url">My First Link</a>

Bookmarks:

Bookmarks allow readers to jump to specific parts of the webpage. First you need to add the id attribute to the location you want to be able to jump to. id attributes are unique, no two elements on the webpage should share the same id. Next, we add a link anywhere on the webpage and link to our element (the heading) by specifying #the_id_we_want to go to as the url in the href attribute of the link. e.x:

<a href="#there">Go to My Heading</a>
<h1 id=“there”>My Heading</h1>

Images:

Images are described by the <img> tag, and the source file of the image is specified in the src attribute. <img>tags also don’t need a closing tag because it would’t make sense to have content between them. The tag is enough to describe the image. e.x:

<img src="url">

Creating Lists:

The <ul> element describes an unordered list, where each item has a bullet point next to it by default. The <ol> element describes an ordered list, where items are numbered by default. The <li> element describes a list item, and is the same for unordered and ordered lists. e.x:

Unordered List

<ul>													
	<li>Item 1</li>							
	<li>Item 2</li>							
	<li>Item 3</li>							
</ul>												

Ordered List

<ol>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ol>

More on ordered lists:

The type of "numbering" can be specified by the type attribute type="A" and type="a" mean capital and lowercase letters. type="I" and type="i" mean capital and lowercase roman numerals.

Containers:

We need containers in HTML otherwise content could only flow from top to bottom.

The <div> tag describes a basic kind of container.

The other containers do the same thing as the

tag but mean something different. So, it is good practice to use them whenever applicable.

The <article> tag specifies independent, self-contained content.

The <aside> tag specifies content related to surrounding content, like a sidebar.

The <header> tag should contain navigation links or heading elements for a webpage, or a section or article.

The <main> tag specifies the main content of a webpage, and should only exist once in an HTML document.

The <section> tag specifies a section of a webpage that contains content with a similar theme. e.x:

<div>HTML elements.</div>

Other containers:

<article>

<aside>

<header>

<main>

<section>

Initial HTMl Setup:

<! DOCTYPE html> This file header that tells the browser this is and HTML 5 document and needs be at start.

<html></html>

It's a great idea to close your tags as soon as you type them! The entire webpage is described between these. add the attribute lang = "en-US"

//Information about the document goes in here ex. <title></title> this tag specifies the webpage's title and is required (our first example of a nested element, title is the child of head, every child element has only one parent element, but a parent element can have multiple child elements) the visible content will go here

Now we have a basic ability to describe content in an HTML document, but we how do we make it look pretty?

This is were CSS comes in.