August 30, 2022
The header tags provide our pages with headings. The default styling is to show the headings after different sizes. <h*> tags are block level elements.
<h1>This is the main heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>The <p> tag is used to denote paragraphs in our documents. <p> tags are block level. Notice that subsequent paragraphs have slight spacing inbetween them.
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>This is the first paragraph.
This is the second paragraph.
The <br /> tag inserts a line break in our documents. Note that there is only a single tag when using <br /> (no beginning/closing tag combo). The <br /> notation is a hint to this.
<p>This paragraph <br />has a line break in the middle of it.</p>
This paragraph
has a line break in the middle of
it.
The <hr /> tag is another empty tag like <br /> that has no content or closing tag. It inserts a horizontal rule in our documents to create visible section breaks.
<p>This paragraph <hr />has a horizontal line in the middle of it.</p>This paragraph
The <strong> tag is used to give its content a strong emphasis. The defauly styling is to bold its content.
<p>This paragraph has some <strong> bold content</strong>.</p>This paragraph has some bold content.
The <em> tag is used to give its content a lesser emphasis than the <strong> tag. The default styling is to italicize its content.
<p>This paragraph has some <em>emphasized content</em>.</p>This paragraph has some emphasized content.
HTML provides us with the ability to create two types of lists: ordered lists and unordered lists. Each item in the list is contained within an <li> element.
An ordered list defaults its styling to numbered lists.
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>An unordered list defaults its styling to bullet points.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>You can also nest lists within each other for further indenting of the items.
<ul>
<li>Unordered item 1
<ol>
<li>Ordered item 1</li>
<li>Ordered item 2</li>
</ol>
</li>
<li>Unordered item 2</li>
</ul>The link tag is what puts the “HT” in “HTML”, allowing us to hyperlink to other content. Links are created using the <a> tag. The text that you click should be something descriptive of the destination, not just a “click here”.
<a href="http://miamioh.edu">Miami University</a>
Miami University
Here you can see that the “Miami University” is the
text that is shown, but when you click on the text you
will go to http://miamioh.edu
Absolute URL vs Relative URL HTML Tags
When you are linking to another website, you should use an absolute URL, which is in form of
href=“http://www.thesiteyouraregoingto.com”When you are linking to other pages within the same site, you should use a relative URL, which is specified relative to the current directory you are in.
This is in the form of
href=“pageinthesamesite.html”If referencing a file in a child directory you could do something like this:
href=“semesterproject/index.html”Or if you wanted to reference a file in the parent directory
href=“../index.html”We can use the <img> tag to insert images into our pages. Here are some important <img> attributes:
<img src="stormageddon.jpg" alt="Stormy"
title="Stormageddon, Dark Lord of All">We’ll talk about image positioning in when we get to CSS.
We use table tags when want to display data in a grid/spreadsheet style format. We use multiple tags to define the table rows and individual table cells. We’ll cover styling tables when we get to CSS.
<table>
<tr>
<td>row1 col1</td>
<td>row1 col2</td>
</tr>
<tr>
<td>row2 col1</td>
<td>row2 col2</td>
</tr>
</table>| row1 col1 | row1 col2 |
| row2 col1 | row2 col2 |
Forms are used to accept user input from a web page and pass it to the server for processing.
We’ll cover this processing when we get to JavaScript.
Multiple tags are used to create the various elements of the form.
The <form> tag starts a form. It typically has two attributes:
<form action="submit.php" method="get">We’ll get to what these mean when we get to the networking stuff, but for now:
With in the <form> tag, we’ll have many different types of input controls that we can use.
A lot of these are accessed through the <input> tag. Each <input> tag has a “name” attribute which gets submitted to the server as part of the name=value pair.
The type of input is specified by the “type” attribute.
Example input types:
<form action="submit.php" method="get">
<label>First Name: <input type="text"
name="fname" /></label><br />
<label>Last Name: <input type="text"
name="lname" /></label><br/>
<label>Female<input value="f" type="radio"
name="sex" /></label>
<label>Male<input value="m" type="radio"
name="sex" /></label></br>
<input type="submit">
</form>You can specify a text area with the <textarea> tag. You can specify default value by putting in between the opening and closing tags. You can specify the default number of rows and columns to display with the “rows” and “cols” attributes.
<textarea name="comments" cols="20"
rows="4">Please add your comments here
</textarea>You can create a dropdown or multi-select box with the <select> and <option> tags.
The <select> defines the input and each option is defined by an <option> tag. Add the attribute multiple to allow multiple items to be selected.
<select name="prereq">
<option value="153">CSE 153</option>
<option value="163">CSE 163</option>
<option value="174">CSE 174</option>
</select><select multiple name="prereq">
<option value="153">CSE 153</option>
<option value="163">CSE 163</option>
<option value="174">CSE 174</option>
</select>The id attribute can be added to any HTML element.
This attribute is meant to give a unique identifier to an element. This allows us to use the id to specifically identify a single element in our page. There is not a lot of use for it in basic HTML, but we’ll use it often with CSS and JavaScript.
<p id="paragraphOne">This paragraph can be
uniquely identified by the "paragraphOne" id
</p>This paragraph can be uniquely identified by the “paragraphOne” id
Another attribute that can be added to any HTML element is the class attribute. This is a way to identify several elements as being different from other elements on the page and so the same class name can be used on multiple elements. Again, usefulness will become apparent in CSS and JavaScript.
<li class="important">Important Item</li>
<li>Guess this is not important</li>
<li class="important">Another Important Item</li>We’ve mentioned before that certain elements are considered to be “block level” elements. When these elements are used, the default behavior is to start them on a new line in the browser. Examples of block level elements are <h1>, <p>, <ul>, and <li>
On the other hand, inline elements appear on the same line as their sibling elements. Examples of inline elements are <a>, <strong>, <em>, and <img>
The <div> element is an element whose purpose is to group all of its children elements into a block-level group. The <div> element itself is a block-level element. Aside from starting on a new line, there is no other built-in behavior with <div>. <div> becomes useful when we provide it an id/class and modify its styling with CSS.
<div id="header">
<h1>This is in the header div</h1>
</div>
<div id="nav">
This is<br>
the<br>
nav div<br>
</div>
<div id="section">
<p>This is the main section of the page.</p>
</div>
<div id="footer">
<p>Footer info goes in this div</p>
</div>The <span> element is the inline equivalent to <div>. It doesn’t do anything by itself, but it is suitable for differentiating its content from the surrounding elements. It’ll often be given a id/class so that it can styled by CSS or manipulated with JavaScript.
<p>Inside this paragraph, there is <span
class="specialText">some special text.</
span></p>Inside this paragraph, there is some special text.
The <iframe> element is used to embed an inline frame in your web page that is actually the content of another page.
A common example of this is to place a Google Map on a page.
Attributes
Certain characters are reserved by HTML and cannot be used as part of content. To have these characters actually display on the page, we have to use “escape codes”. Some examples:
< <
> >
& &
“ "You may have noticed that you cannot string several spaces/ tabs together in your HTML and have them display on your page. This is because the browser collapses multiple sources of spacing down to a single space.
You can force the browser to render additional spaces
using the nonbreaking space escape code:
Note that we don’t want to get in the habit of using
for spacing out our content (CSS
should be used).
HTML5 implemented the audio element. Different browsers expect different audio file formats, so we need to specify multiple sources.
MP3 - Safari, Chrome, Internet Explorer
Ogg Vorbis: Firefox, Opera
Attributes:
The <source> tag allows us to specify multiple sources for the file. It uses the src attribute to specify file location.
<audio autoplay controls loop>
<source src="horse.mp3" type="audio/mp3">
<source src="horse.ogg" type="audio/ogg">
</audio>HTML5 also implemented a video element that works similarly to the audio element. Again, different browsers expect different video file formats, so we need to specify multiple sources.
MP4 - Internet Explorer, Chrome, Firefox, Safari, Opera
WebM - Chrome, Firefox, Opera
Ogg - Chrome, Firefox, Opera
Attributes:
The <source> tag allows us to specify multiple sources for the file. It uses the src attribute to specify file location and the type attribute to specify the file type.
<video autoplay loop>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
</video>HTML5 introduced several new layout elements. The traditional way of denoting sections of a page were to use classed <div> element like you saw previously in the presentation. HTML5’s layout elements provide extra semantic context to your content, similar to <strong> vs <b>. Screen readers can choose to skip straight to content and search engines can choose to index content over headers/footers.
Header sections often contain more than just a <h1> tag. The <header> tag allows us group the entire header together. Same goes for the <footer> tag. <header> can also be used to note the header of a specific section, not just the header of the page.
<header>
<h1>This is the header</h1>
<p>But this is also in the header</p>
</header>
<footer>
<p>This is the footer of the page.</p>
</footer>The <nav> element is used to denote the section of the page that is used for navigation. This would enclose the typical horizontal or vertical navigation menu we see on pages.
<nav>
<ul>
<li><a href="">Page 1</a></li>
<li><a href="">Page 2</a></li>
<li><a href="">Page 3</a></li>
</ul>
</nav>The <article> element is used to contain a main section of a page that could potentially stand alone, like a blog post, news article, or a comment.
<article>
<header>
<h1>Article Title</h1>
<h6>byline</h6>
</header>
<p>Actual content of the article...</p>
</article>It is really easy to make a mistake when writing HTML. We could forget to close a tag or use elements in places they are not supposed to go. Many editors do not have built-in validators.
You can run your code through a validator to help find problems. A successful validation does not mean that the code is correct, just that it is syntactically correct.
Errors should be corrected; warnings should be understood.