HTML, Hyper Text Markup Language, is the language we use to put content, such as text and pictures, into our webpages.
<h1>Devmountain</h1>
<p>Let's learn HTML!</p>
Devmountain
Let's learn HTML!
CSS, or Cascading Style Sheets, is the language we use to style our content. CSS is linked to HTML and can do anything from changing a font color to animations.
<h1>Devmountain</h1>
<p>Let's learn HTML!</p>
Devmountain
Let's learn HTML!
HTML
h1 {
color: red;
}
CSS
Tags are what we use to define HTML, they are contained in < > angle brackets. An opening and closing tag together define an element. Some tags are self-closing, so they define an element all by themselves.
Opening Tags
Closing Tags
Self-closing Tags
Elements
<h1>
<div>
<p>
<header>
<section>
</h1>
</div>
</p>
</header>
</section>
<img/>
<input/>
<br/>
<hr/>
<link/>
<h1></h1>
<div></div>
<p></p>
<header></header>
<section></section>
Attributes are a way that we can define additional information about an element. Two that we'll be using today are src and width. We'll be using them on img tags, but you can use attributes on any tag.
<img src="pic.jpeg" width="200"/>
Nesting is when we put one, or more, HTML tag(s) inside another. We use this process to organize our document. The outer element is then known as a container or parent element.
<section>
<h1>Title</h1>
<img src="pic.jpeg"/>
<p>Content content content
content content. Content
content content content
content.
</p>
</section>
All HTML files must start with a special tag: <!DOCTYPE html> to tell the browser what kind of text document it is.
The HTML content starts with <html> and ends with </html>
Inside of the <html> element, you'll need two main elements: the <head> and <body>
<!DOCTYPE html>
<html>
<head>
Head content goes here.
</head>
<body>
Body content goes here.
</body>
</html>
<h1>Welcome to Devmountain!</h1>
<h2>HTML Basics</h2>
<article>HTML stands for Hyper Text Markup Language.</article>
<h1>Devmountain</h1>
<p>Let's learn HTML!</p>
Devmountain
Let's learn HTML!
<h1>Devmountain</h1><p>Let's learn HTML!</p>
<h1> This will be the biggest </h1>
<h2> Then this </h2>
<h3> A little smaller </h3>
<h4> Even smaller </h4>
<h5> Really small </h5>
<h6> Miniature </h6>
<p>
This is some content that will
go on our page. We can write
whatever we want in here.
</p>
<div>
<h2>Coding Meetup</h2>
<p>Saturday, May 12th</p>
<p>6:00 P.M.</p>
</div>
<button>Submit</button>
<img src="https://pictures.com/cat"/>
<ul>
<li>buy groceries</li>
<li>do laundry</li>
<li>walk dog</li>
</ul>
<ol>
<li>Pour milk into cup</li>
<li>Add chocolate syrup</li>
<li>Mix and enjoy</li>
</ol>
<table>
<tr>
<th>Name</th>
<th>Species</th>
<th>Age</th>
</tr>
<tr>
<td>Luna</td>
<td>Dog</td>
<td>2 years</td>
</tr>
<tr>
<td>Frankie</td>
<td>Cat</td>
<td>12 weeks</td>
</tr>
</table>
Semantic HTML refers to elements whose names tell you what their content is. Anything could be inside of a div tag. But with semantics, we could use a header tag to make a header instead of a div. This makes code more readable for developers, search engines, and screen readers.
The semantic tags we'll use most often in this course are: