ISTA 230

ISTA 230 - Introduction to Web Design

HTML

A Look Under the Hood

HTML

Hypertext Markup Language

Plain Text

Where the Sidewalk Ends Shel Silverstein There is a place where the sidewalk ends And before the street begins, And there the grass grows soft and white, And there the sun burns crimson bright, And there the moon-bird rests from his flight To cool in the peppermint wind.

Without any formating or structure, the above paragraph is just that, a paragraph. While a discerning user may recognize the paragraph as a poem by Shel Silverstein, it would be difficult for a computer to do the same.

HTML

Hypertext Markup Language

Plain Text - Formatted

Where the Sidewalk Ends
Shel Silverstein
There is a place where the sidewalk ends
And before the street begins,
And there the grass grows soft and white,
And there the sun burns crimson bright,
And there the moon-bird rests from his flight
To cool in the peppermint wind.

Were we to break the poem into lines, it becomes somewhat easier to tell that the text is a poem. We could even teach a computer that the first line is the title and the second line is the author. However, this isn't a scalable model as some poems may have titles that span two lines, multiple authors, etc.

HTML

Hypertext Markup Language

Markup

<poem>
      <title>Where the Sidewalk Ends</title>
      <author>Shel Silverstein</author>
      <stanza>
            There is a place where the sidewalk ends
            And before the street begins,
            And there the grass grows soft and white,
            And there the sun burns crimson bright,
            And there the moon-bird rests from his flight
            To cool in the peppermint wind.
      </stanza>
</poem>

Markup allows one to provide additional information about a given set of content. In the above example, the markup allows us to clearly indicate what the text is (i.e., a poem), what the title of the poem is, who the author of the poem is, and what lines are related (i.e., part of the same stanza).

Note: The above is not HTML. This is just an example of markup as a concept.

HTML

Hypertext Markup Language

Markup Languages

HTML

Hypertext Markup Language

Markup Languages

HTML

Hypertext Markup Language

Hypertext Markup Language (HTML)

HTML

Hypertext Markup Language

HTML Specifications

The Internet Engineering Task Force (IETF) is an open community of IT professionals and enthusiasts concerned with the operation and evolution of the Internet. While Tim Berner's Lee first proposed HTML in 1991, it wasn't formally defined and recognized by the IETF until 1993. That said, browser developers were implementing HTML support before it was officially recognized.

HTML

Hypertext Markup Language

Browser Influence

In an effort to advance the evolution of HTML, browser makers would sometimes implement their own tags as a solution to a given problem. For example, Marc Andreessen, the co-author of Mosaic, pushed for the <img> tag for inline images. While others objected to this tag on the grounds that it wasn't general enough, Mosaic was already using it and it has become firmly ingrained in HTML specifications since.

While some would argue that this push for new tags was necessary for the development of HTML, the fear was that without some sort of oversight and canonical specication, web page designers would become overwhelmed by a barage of HTML tags that only worked on some browsers.

HTML

Hypertext Markup Language

HTML Specifications

Dan Connolly, the author of HTML 2.0 attempted to organize the chaos by pulling together a list of all of the non-standard elements that browser makers had implemented and adding them to the new version of the specification.

HTML

Hypertext Markup Language

W3C

To help address the issue of loose HTML specifications, Tim Berners-Lee founded the World Wide Web Consortium (W3C).

While this group was (and still is) successful at defining web protocols and specifications, browser makers weren't necessarily interested in using those standards.

HTML

Hypertext Markup Language

Browser Wars

These two browsers would become the most popular and viewed each other as direct competition. In order to compete, they would continually try to outdo the other by introducing new non-standard HTML elements.

HTML

Hypertext Markup Language

Bad tags

In an attempt to one-up the competition, Microsoft and Netscape introduced many non-standard HTML tags, including the two listed above. While viewed as silly by most serious web developers, these tags were abused by novices and people just learning HTML. Additionally, the <blink> tag caused issues for people with epilepsy.

HTML

Hypertext Markup Language

HTML Specifications

HTML 3.2 was a combined effort of W3C and browser makers. There was much back and forth, with one browser agreeing to get rid of a non-standard element if another vendor would get rid of one of their non-standard elements.

HTML

Hypertext Markup Language

Good intentions...

The Homer

HTML

Hypertext Markup Language

HTML 3.2

HTML

Hypertext Markup Language

HTML Specifications

HTML 4.0 came out with three versions: one for transitional pages (in the process of moving from HTML 3.2 to HTML 4.0) which allowed for deprecated elements, one for strict pages (pure HTML 4.0), and one for framesets, a concept implemented by Netscape and later adopted by other browsers.

HTML

Hypertext Markup Language

Playing nice with others...

This website is best viewed in

Internet Explorer
Netscape Navigator

At the height of the browser wars, the tendency of browser makers to implement their own tags and to interpret the use of some standard HTML 4.0 tags had reached the point that web pages would often look completely different depending on the browser the user was viewing the page on.

This led to some developers 'branding' their website with an image that said "Best viewed in ____________", specifying what browser they had used to create the site. Others would try to reach a larger audience by developing multiple versions of the same web site, one for each browser they wanted to target.

All in all, the progress of HTML and the Web was quickly turning into a mess!

HTML

Hypertext Markup Language

Tired of having to worry about how things looked in one browser versus another, a small group of dedicated web developers took up the tasks of convincing browser makers to adhere to standards and educating other developers on standards-compliant web development.

Web Standards Project (WaSP)

Web Standards Project (WaSP)

While the task seems daunting at best, the group was very successful in their efforts and are responsible for much of the ongoing evolution and progress of web development as a field.

HTML

Hypertext Markup Language

HTML Specifications

XHTML 1.0 Strict is what we will be using in this course. It is worth noting that XHTML, in addition to being valid HTML, is also valid XML.

The latest HTML specification, HTML 5, builds off of XHTML 1.0 and will be discussed later in the semester.

HTML

Hypertext Markup Language

Doctype

Every webpage you create in this course should begin with the following doctype declaration.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">










      

HTML

Hypertext Markup Language

HTML Elements

Example of a standard HTML element
<tagname> Some content here </tagname>

Example of a self-closing HTML element
<tagname />

HTML

Hypertext Markup Language

HTML Document - HTML Element

After entering the "doctype" for your file, you'll need to insert a start and end "html" tag. Because we're using XHTML 1.0, we'll need to include some attributes in our html start tag. Your document should now look like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>









</html>

In a perfect world, this would be enough. Unfortunately, you have to add more info to the HTML tag for it to be valid XHTML 1.0 Strict.

HTML

Hypertext Markup Language

HTML Document - HTML Element

Because we're using XHTML 1.0, you'll need to include a xmlns attribute in our html start tag. We'll also want to specify what language our page is written in.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">










</html>

HTML

Hypertext Markup Language

HTML Document - Head Element

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>


   </head>






</html>

HTML

Hypertext Markup Language

HTML Document - Title Element

The head section of your web page contains information about the page but does not contain any content that is displayed on the screen. The title element shown below is used to specify the name of the page. This name is displayed at the top of the browser window but does not display on the webpage itself.

We also include a <meta> element to indicate what character set is being used by the page. Character sets are a much broader topic that aren't covered in depth during this course. Suffice it to say that this is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
      <title>My Page</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>






</html>

HTML

Hypertext Markup Language

HTML Document - Body Element

The body element of the page contains everything that will be displayed as part of the web page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
      <title>My Page</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>




   </body>
</html>

HTML

Hypertext Markup Language

HTML Document - Paragraph Element

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
      <title>My Page</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
      <p>
         This is my content.

      </p>
   </body>
</html>

HTML

Hypertext Markup Language

HTML Document - Line Break Element

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
      <title>My Page</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
      <p>
         This is my content.<br />
         This is the second line.
      </p>
   </body>
</html>

HTML

Hypertext Markup Language

HTML Document - White Space

It is important to note that any 'white space' - that is, characters such as a space, a tab, or a line break, are treated as a single character when more than one of them occurs in a row. In other words, you can't use multiple spaces between words or elements in the HTML source code to create visual space in the browser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
      <title>My Page</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
      <p>
         This is my content.<br />
         This is the second line.
      </p>
   </body>
</html>
This is my content.
This is the second line.

HTML

Hypertext Markup Language

HTML Entities

HTML entities allow you to include special characters.

HTML

Hypertext Markup Language

HTML Entities

   &lt;
   &gt;
   &nbsp;
   &copy;
      
   <
>
" "
©

See http://www.w3schools.com/tags/ref_entities.asp for a full list.

HTML

Hypertext Markup Language

HTML Document - HTML Entities

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
      <title>My Page</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
      <p>
         This is my content.<br />
         This is the second line.<br />
         &copy; 2017
      </p>
   </body>
</html>
This is my content.
This is the second line.
© 2017

HTML

Hypertext Markup Language

HTML Document - Links

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
      <title>My Page</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
      <p>
         <a> This is a link </a>
      </p>
   </body>
</html>
This is a link

Only one problem... Where does it link to?

HTML

Hypertext Markup Language

HTML Attributes

HTML

Hypertext Markup Language

HTML Attributes

<a href="someURL"> My link text </a>

All <a> elements require an 'href' attribute, which is used to specify where the link should go.

HTML

Hypertext Markup Language

HTML Attributes

<a href="http://www.google.com"> Visit Google </a>

This link would take the user to http://www.google.com.

HTML

Hypertext Markup Language

Absolute vs. Relative URLs

HTML

Hypertext Markup Language

Absolute vs. Relative URLs

Absolute URLs should only be used for linking to other websites. If you're linking to a page on the same website, you should use relative URLs!

HTML

Hypertext Markup Language

HTML Document - Links

<a href="http://www.google.com"> Visit Google </a>

The link above would direct the user to Google, a different website than we're already on, using an absolue URL.

<a href="/"> Visit our homepage </a>

Because the URL in the 'href' attibute for link above doesn't start with a protocol, we know that the URL is relative. The link above would direct the user to the root of our website. Since no file name was specified, the user would be taken to the file named index.html.

<a href="/resources/index.html"> View our resources </a>

The link above would direct the user to the resources folder on our website and then display the file index.html.

<a href="../files/report.pdf"> View our annual report </a>

The link above would direct the user up one folder, and then down into the 'files' folder where it would display the content of the file 'report.pdf'.

HTML

Hypertext Markup Language

Absolute vs. Relative URLs - Quiz

Current URL: http://www.ista230.com/resources/somepage.html

<a href="/files/syllabus.html"> Visit my syllabus </a>

Target URL: http://www.ista230.com/files/syllabus.html

HTML

Hypertext Markup Language

Absolute vs. Relative URLs - Quiz

Current URL: http://www.ista230.com/resources/somepage.html

<a href="files/syllabus.html"> Visit my syllabus </a>

Target URL: http://www.ista230.com/resources/files/syllabus.html

HTML

Hypertext Markup Language

Absolute vs. Relative URLs - Quiz

Current URL: http://www.arizona.edu/search/

<a href="http://www.google.com"> Go Google it!</a>

Target URL: http://www.google.com/

HTML

Hypertext Markup Language

Absolute vs. Relative URLs - Quiz

Current URL: http://www.google.com/about/us/info.html

<a href="../jobs/moreInfo.html"> View hiring info </a>

Target URL: http://www.google.com/about/jobs/moreInfo.html

HTML

Hypertext Markup Language

HTML Document - Email Links

<a href="mailto:jmspargu@email.arizona.edu"> Email me! </a>

Links can be directed to email addresses by including the text 'mailto:' at the beginning of the 'href' attribute, followed by an email address. On most computers, this will result in an email client (such as Microsoft Outlook or Mozilla Thunderbird) opening, ready to compose a message.

HTML

Hypertext Markup Language

HTML Document - Fragment Identifiers in Links

<a href="somepage.html#middle"> Jump to the middle of some page! </a>

So what exactly do fragment identifiers link to?

HTML

HTML

ID attribute

HTML

HTML

ID attribute

It is important to note that an 'id' can only be used once per page but can be used on different pages without any problem. For example, one could have multiple HTML files, each with an <h1> element with an 'id' attribute of 'logo'. However, one could NOT have multiple <h1> elements in a single HTML file with the same 'id' attribute of 'logo'.

HTML

HTML

ID attribute

<p id="user">John</p>
<p id="user">Sue</p>
<p id="user">Bill</p>

HTML

HTML

ID attribute

<p id="user1">John</p>
<p id="user2">Sue</p>
<p id="user3">Bill</p>

HTML

Hypertext Markup Language

HTML Links - Fragment Identifiers

<body>

   <p>A little content here...</p>

   ...

   <p id="specialAnnouncement">A special announcment here!</p>

</body>

Allows us to create URLs that link directly to specific parts of a page:
http://www.example.com/filename.html#specialAnnouncement

Using 'id' attributes, you can specify the identifier for a specific element. You can then use this identifier in URLs to tell the browser that it should display that specific element at the top of the page when the user visits that URL.

HTML

Hypertext Markup Language

HTML Links - Anchors and Fragment Identifiers

We can also use fragment identifiers to move around the same web page:

<body id="top">

   <p>A little content here...</p>

   <p>And a little more content here...</p>

   ...

   <a href="#top">Jump to the top of the page</a>
</body>

In the example above, clicking on the link that says "Jump to the top of the page" would tell the browser that it should scroll up the page until the HTML element with an 'id' attribute whose value matches 'top' is displayed.

HTML

Hypertext Markup Language

HTML - Headings

Newspaper

HTML

Hypertext Markup Language

HTML - Headings

HTML

Hypertext Markup Language

HTML - Headings

Heading tags can be used to create hierarchy. This information can be semantically helpful in determining how your web page is structured and what the relationship is between certain elements.

HTML

Hypertext Markup Language

HTML - Headings

<body>
   <h1>Newspaper Name</h1>

      <h2>Section Name</h2>
      <p> Welcome to the Business section!</p>

         <h3>Article Name</h3>
         <p>
            This is the content of my article...
         </p>
</body>

In the above example, the <h1> element designates the name of the newspaper, the <h2> element is the section of the newspaper, and the <h3> is the title of the article. Using the appropriate heading levels, one can easily determine the hierarchy of the various elements.

HTML

Hypertext Markup Language

HTML - Comments

<!-- This is an HTML comment. "I don't show up!" -->
<!--
   This is another HTML comment.
   "I can span multiple lines."
-->

HTML comments are useful for documenting how your website is structured. They are not displayed to users but are useful for other web designers as well as for yourself when you return to editing a page.

HTML

Hypertext Markup Language

HTML - Comments

<body>
   <!-- Start newspaper content. -->
   <h1>Newspaper Name</h1>

      <h2>Section Name</h2>
      <p> Welcome to the Business section!</p>

         <h3>Article Name</h3>
         <p>
            This is the content of my article...
         </p>

   <!-- End newspaper content. -->
</body>

HTML comments can be used to specify where sections of your website start and stop. They can also be used to explain any HTML that might be confusing otherwise.

HTML

Hypertext Markup Language

HTML - Comments (a word of caution)

<body>
   <!-- Start newspaper content. --  >
   <h1>Newspaper Name</h1>

      <h2>Section Name</h2>
      <p> Welcome to the Business section!</p>

         <h3>Article Name</h3>
         <p>
            This is the content of my article...
         </p>

   <!-- End newspaper content. -->
</body>

Make sure you close your comments correctly!

If you don't, you may make your entire website into one large comment (as is the case in the example above).

HTML

Hypertext Markup Language

HTML Formatting

To provide structure, organization, and meaning!

HTML

Hypertext Markup Language

HTML Formatting

The old (wrong) way...

<i> This is some italicized text!</i>

HTML

Hypertext Markup Language

HTML Formatting

The old (wrong) way...

<i> This is some italicized text!</i>

In previous versions of HTML, one could use the <i> element to italicize text. While this was functional, it clearly was an HTML element that was used for display purposes, not to provide structure, organization, or meaning.

The new (right) way...

<em> This is some emphasized text!</em>
         This is some italicized text!
This is some emphasized text!

While both examples above have the same effect on most browsers, the second is the proper way of using HTML, specifying that the text should be emphasized, not italicized.

HTML

Hypertext Markup Language

HTML Formatting

The old (wrong) way...

<b> This is some bold text!</b>

HTML

Hypertext Markup Language

HTML Formatting

The old (wrong) way...

<b> This is some bold text!</b>

The new (right) way...

<strong> This is some strongly emphasized text!</strong>
         This is some bold text!
This is some strongly emphasized text!

Similarly, both the <b> and <strong> elements are displayed the same on most modern browsers, the second example is the proper way of using HTML, specifying that the text should be strongly emphasized, not bolded.

HTML

Hypertext Markup Language

HTML Formatting

Why is this important?

Not all users are viewing your page.
Some may be listening.

<em> may be interpreted as "make italicized" or as "read louder".

<strong> may be interpreted as "make bolded" or as "read even louder".

On the other hand, a screen reader (used by someone with vision impairment) may not know how to interpret 'italized' text.

HTML

Hypertext Markup Language

Tags

<html>

<head>

<title>

<meta>

<body>

<p>

<br> <a>

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

<em>

<strong>

<!-- comments -->

HTML

Hypertext Markup Language

Images


<img src="myImage.jpg" alt="About my image" />

The 'src' attribute should be used simliarly to the 'href' attribute for links. Specifically, you should use the same rules regarding images from external websites vs. images from your website. While there are rare cases that merit using an image from another website, you'll want to use relative images most of the time.

HTML

Hypertext Markup Language

Supported Image Types

While there may be other image formats available, they are not necessarily supported by modern browsers and should not be used when one of the three formats above is available instead.

HTML

Hypertext Markup Language

JPEG - Joint Photographic Experts Group

JPG image
JPG image

HTML

Hypertext Markup Language

GIF - Graphics Interchange Format

JPG image
GIF image

HTML

Hypertext Markup Language

GIF - Graphics Interchange Format

HTML

Hypertext Markup Language

GIF - Graphics Interchange Format

JPG image, non-transparent
Transparent GIF image

In the GIF image of the strawberry, we can specify that the white area around the strawberry is transparent, allowing the background color of anything underneath it to show through (see next slide).

HTML

Hypertext Markup Language

GIF - Graphics Interchange Format

GIF Transparency Limitations

HTML

Hypertext Markup Language

GIF - Graphics Interchange Format

GIF Transparency Limitations

HTML

Hypertext Markup Language

GIF - Graphics Interchange Format

GIF Transparency Limitations

While the transparency will work in some instances, there may be slight pixelation around the edges of the image. For this reason, GIF is often not the preferred format for transparent images.

HTML

Hypertext Markup Language

PNG - Portable Network Graphic

HTML

Hypertext Markup Language

PNG - Portable Network Graphic

GIF Transparency Limitations

PNG images don't usually suffer from the same sort of pixilation related to transparency and GIF images.

HTML

Hypertext Markup Language

PNG - Portable Network Graphic

PNG image PNG image PNG image

HTML

Hypertext Markup Language

GIF v. PNG



Animation

Animaged GIF image

GIF images support animation. While the use of GIF animations often can lead to an unprofessional feel, there are instances where they come in handy. For example, many of the 'loading' images used on websites are animated GIF images.

HTML

Hypertext Markup Language

Where to get images

HTML

Hypertext Markup Language

Where to get images

HTML

Hypertext Markup Language

Where to get images

HTML

Hypertext Markup Language

Where to get images

HTML

Hypertext Markup Language

Images


<img src="myImage.jpg" alt="About my image" />

HTML

Hypertext Markup Language

Images


<img src="myImage.jpg" alt="About my image" title="About my image" />

About my image

The 'title' attribute can also be used to provide a 'mouse-over' effect. When the user moves their mouse over the image, the value of the 'title' attribute will be displayed next to their cursor.

HTML

HTML

Horizontal Rules


<hr />

Horizontal rules can be used to provide an indication of a break in the content. By default, this displays as a horizontal line across the page.

HTML

HTML

Preformatted Text


<pre> Some content   goes       here....</pre>

HTML

HTML

Preformatted Text

<p>
   This    is    some    text.
      This is some indented text.
   This    is    some    other    text.
</p>
This    is    some    text.
   This is some indented text.
This    is    some    other    text.

As previously mentioned, multiple spaces, tabs, and line breaks in the HTML source code are treated as a single space when displayed to the user. In the example above, the white space in the <p>, including the line breaks, would not be displayed to the user.

HTML

HTML

Preformatted Text

<pre>
   This    is    some    text.
      This is some indented text.
   This    is    some    other    text.
</pre>
   This    is    some    text.
      This is some indented text.
   This    is    some    other    text.

When using the <pre> tag, all of the spaces, tabs, and line breaks in the element are displayed to the user. Additionally, the font used is a monospaced font, ensuring that all characters take up exactly the same width.

The <pre> element is one that can easily be abused. It should only be used for elements where it is important for the text to appear exactly as typed. For example, indentation and line breaks are important elements some programming languages. When trying to show a sample of these programming languages, one could use a <pre> element to ensure that the white space is displayed.

The <pre> tag would NOT be the optimal choice for displaying content that has lots of line breaks. While the element would allow you to skip the step of entering multiple <br> elements, it would also maintain multiple spaces and tabs, which is not typically needed.

HTML

HTML

Element types

All HTML elements fall into one of these two categories. Elements cannot be both inline and block. They are either one or the other.

HTML

HTML

Block elements

* Unless otherwise stated, you can assume that any block elements that we discuss cannot contain other block elements.

HTML

HTML

Block elements - Some examples

All of the elements listed above are block elements and cannot contain other block elements.

HTML

HTML

Inline elements

HTML

HTML

Inline elements - Some examples

HTML

HTML

Block elements

   <p>
      This is <em>an example of some emphasized text</em>.
   </p>
         
         This is an example of some emphasized text.
         
      

HTML

HTML

Inline elements

   <p>
      This is <em>an example of some emphasized text</em>.
   </p>
         
         This is an example of some emphasized text.
         
      

HTML

HTML

Inline elements

   <p>
      This is <em>an example of some emphasized text</em>.
   </p>
         
            This is an example of
some italic text
.

HTML

HTML

Semantically-neutral HTML elements

The purpose of HTML is to provide:

Of the elements that we've discussed this far, the one block element that would be used for most content would be a <p> element. That said, not everything is a paragraph. We need something more generic...

HTML

HTML

Semantically-neutral HTML elements

<p> is not enough...

HTML

HTML

Semantically-neutral HTML elements

These two elements provide us with elements that can be used when there isn't an HTML element that matches our need.

HTML

HTML

<div>

HTML

HTML

<div>

<!-- Paragraph for holding an image (not really a paragraph). -->
<p>
   <img src="/images/slides/html/logo.png" alt="Company logo" />
</p>
<!-- div - a better containing block -->
<div>
   <img src="/images/slides/html/logo.png" alt="Company logo" />
</div>

The <div> element provides us with a block element that can be used to contain content that doesn't semantically fit inside of another HTML element.

HTML

HTML

<div>

<h1>Article Title</h1>
<h2>Author</h2>
<p>
   This is the content of my article.
</p>
<!-- All article-related elements are grouped together -->
<div>
   <h1>Article Title</h1>
   <h2>Author</h2>
   <p>
      This is the content of my article.
   </p>
</div>

The <div> element can also be used to group related elements in a single container.

HTML

HTML

<span>

HTML

HTML

<span>

<p>
   My favorite book is
   Lord of the Flies.
</p>

In the above example, we want to find a way to distinguish the book title from the rest of the text. Unfortunately, there is not a <book> element that we can use...

<p>
   My favorite book is
   <span id="title">Lord of the Flies</span>.
</p>

We can use the generic <span> element to encapsulate the book title. Using the 'id' attribute, we can provide some additional semantic information about the element as well.

HTML

HTML

Guidelines for div/span

<!-- There's no need to do this... -->
<div>
   This is a paragraph in my article.
</div>
<!-- ... when this will suffice. -->
<p>
   This is a paragraph in my article.
</p>

HTML

HTML

Invalid HTML Markup - Incorrect

<body>

   <a href="myLink.html"> Click here to see another page!</a>


</body>

The above example is invalid because the <a> element (an inline element) is not contained by a block element.

HTML

HTML

Valid HTML Markup - Correct

<body>
   <p>
      <a href="myLink.html"> Click here to see another page!</a>
   </p>

</body>

HTML

HTML

Invalid HTML Markup - Incorrect

<body>
   <p>
      <h1>Heading</h1>
      This is my content
   </p>
</body>

The above example is invalid because the <h1> element (a block element) is contained by a <p> element. <p> elements are a block element which cannot contain other block elements.

HTML

HTML

Valid HTML Markup - Correct

<body>
   <h1>Heading</h1>
   <p>
      This is my content
   </p>
</body>

HTML

HTML

Invalid HTML Markup - Incorrect

<body>
   <p>
      <img src="myimage.jpg" />
   </p>

</body>

The above example is invalid because the <img> element has two required attributes: a 'src' attribute and an 'alt' attribute. The 'alt' attribute is missing!

HTML

HTML

Valid HTML Markup - Correct

<body>
   <p>
      <img src="myimage.jpg" alt="Brief description of my image" />
   </p>

</body>

HTML

HTML

Invalid HTML Markup - Incorrect

<body>

   <h1>Fun & Games</h1>


</body>

The above example is invalid because the & used in the heading isn't specified as an HTML entity. Because & is a special character, it needs to be specified as '&amp;'.

HTML

HTML

Valid HTML Markup - Correct

<body>

   <h1>Fun &amp; Games</h1>


</body>

HTML

HTML

Invalid HTML Markup - Incorrect

<body>
   <p>
      <img src="myimage.jpg" alt="Brief description of my image">
   </p>

</body>

The above example is invalid because the <img> element is a self-closing element. In the case above, the element is not properly closed.

HTML

HTML

Valid HTML Markup - Correct

<body>
   <p>
      <img src="myimage.jpg" alt="Brief description of my image" />
   </p>

</body>

HTML

HTML

Checking Your Markup

HTML

HTML

Checking Your Markup