HTML5: Heading and sectioning elements, paragraphs, headers, footers, id, class and title, Part 1

Size: px

Start display at page:

Download "HTML5: Heading and sectioning elements, paragraphs, headers, footers, id, class and title, Part 1"

Tiffany Clark
6 years ago
Views:

1 HTML5: Heading and sectioning elements, paragraphs, headers, footers, id, class and title, Part 1 Robert A. Fulkerson College of Information Science and Technology University of Nebraska at Omaha Where do we go from here? From this point on, we ll assume complete HTML5 documents even if we don t have a complete HTML5 document structure (DOCTYPE, <html>, <head>, etc). Limitations on font size limit what can be shown per slide. You'll always see the relevant code and, if unclear, comments will indicate where you would find such code (inside the <head>, <body>, etc. elements). Slide #2 Headers <h1></h1> and <h2></h2> and <h3></h3> and <h4></h4> and <h5></h5> and <h6></h6> The six heading tags <h1> through <h6> specify diminishing sizes of "headings" that can appear in an HTML5 document. Originally, HTML was used primarily for sharing research results with people, so think of these header tags as different headings you would have in a formal, written paper. Convention dictates that smaller headings should only be used if their larger cousins have been already used. Slide #3 1

2 Headers example 1. <h1>college of Information Science and Technology</h1> 2. <h2>departments</h2> 3. <h3>computer Science</h3> 4. <h3>management Information Systems</h3> 5. <h3>information Assurance</h3> 6. <h2>faculty</h2> Here we have some separate sections outlined by their headings. Slide #4 Paragraphs <p> </p> Using the <p></p> tag is your way to make a paragraph in HTML5. Returns and newlines that you put in your HTML page itself are ignored by your browser. In fact, browsers ignore returns and condense repetitive whitespace (i.e. multiple spaces) down to just one space. Slide #5 <p></p> example 1. <h1>college of Information Science and Technology</h1> 2. <p>the College of Information Science and Technology is 3. part of the University of Nebraska at Omaha.</p> 4. <p>it is has five undergraduate programs: Bioinformatics, 5. Computer Science, Information Assurance, IT Innovation 6. and Management Information Systems.</p> 7. <h2>departments</h2> 8. <p>the departments of Computer Science and Management 9. Information Systems have both been accredited by ABET, 10. the Recognized accreditor of programs in applied science, 11. Computing, engineering, and technology.</p> Some paragraphs, using the <p></p> open-close tag notation. Slide #6 2

3 Sections <section></section> <article></article> <aside></aside> <nav></nav> Using headings is an acceptable way to give structure to your content, but sometimes it might make more sense to divide your page into logical or semantic sections. To do this, we can use one of the sectioning content elements. Each sectioning element can have its own h1-h6 tags. Slide #7 <section> The <section> </section> element is used when you have content that you could store as a record in a database. Examples could be: Addresses for magazine subscribers Departments in a college Products you could search on a company website The <section> </section> element shouldn't be used just to have a container of text to style; those should be put into a <div> </div> element, discussed later. If you use a <section> </section> element, a good rule of thumb is that you should be able to have at least an <h1></h1> header inside it to describe the content, such as the name of a product. Slide #8 Using <section></section> 1. <h1>college of Information Science and Technology</h1> 2. <section> 3. <h1>departments</h1> 4. <section> 5. <h1>computer Science</h1> 6. </section> 7. <section> 8. <h1>management Information Systems</h1> 9. </section> 10. <section><h1>information Assurance</h1></section> 11. </section> 12. <section><h1>faculty</h1></section> Now we're using the <section></section> sectioning element to logically order our material (notice how some sections are nested within others). The display is, by default, the same as it was before, but it only uses h1 headers. Each section here starts with its own h1-h6 hierarchy. Slide #9 3

4 <article> An <article> </article> element should be used when you have content that could be independently redistributable from your own website to other websites, such as in syndication. "Could be" doesn't mean that the content will be redistributable, just that it makes sense that it could be. This would include blog posts on a web site, magazine or newspaper articles, forum posts, comments on blog or forum posts, etc. If <article> </article> elements are nested, the nested elements should relate to the parent element, such as comments on a blog entry. Slide #10 Using <article></article> 1. <article> 2. <p>this is a blog post about interesting material, and 3. lots of content would be placed in here.</p> 4. <p>posted on January 1st, 2020 by Jane Doe.</p> 5. <article> 6. <p>comment from Anonymous on January 2nd, 2020:</p> 7. <p>i really like your insight into the topic!</p> 8. </article> 9. <article> 10. <p>comment from Contrary Person on January 11. 3rd, 2020:</p><p>Everything you wrote conflicts 12. with my world view, so it must be wrong!</p> 13. </article> 14. </article> Slide #11 <article></article> and <section></section> 1. <article> 2. <h1>i love dinosaurs!</h1> 3. <p>dinosaurs lived a long time ago. These are my 4. favorites!</p> 5. <section> 6. <h1>spinosaurus</h1> 7. <p>the world's largest carnivorous dinosaur!</p> 8. </section> 9. <section> 10. <h1>apatosaurus</h1> 11. <p>this is the dinosaur that we all love and know 12. as the brontosaurus!</p> 13. </section> 14. </article> Slide #12 4

5 <aside> The <aside> </aside> element is used to section off tangentially-related material to the rest of the material in that section. These types of items usually appear as sidebars in printed materials, including pull-quotes that are set aside from the main text. Since they are sectioning container elements, you have the ability to use CSS to style them just like a sidebar or a pull-quote. Slide #13 Using <aside></aside> 1. <article> 2. <h1>this is my first blog post!</h1> 3. <p>hello, this is my first blog post. Isn't it 4. exciting? I certainly think so!</p> 5. <aside> 6. <h1>history of blogging</h1> 7. <p>the term "weblog" was coined by Jorn Barger 8. on December 17th, The term "blog" was 9. coined by Peter Merholz in April or May of </p> 11. <aside> 12. </article> Slide #14 <nav> The <nav> </nav> element is used to wrap common navigational elements on a page for a web site. A page may have links to other sites throughout the text of the page, but this element is intended for large, common navigation blocks found on a page. These blocks are usually found toward the top or bottom of the page and might contain links to the home page, an about page, the terms of service for the site, etc. Screen readers in particular can omit this information in the initial rendering of the site and offer these navigational items separately to the user when necessary. Slide #15 5

6 Using <nav></nav> 1. <nav> 2. <h1>site Navigation</h1> 3. <ul> 4. <li><a href="index.html">home Page</a></li> 5. <li><a href="about.html">about Us</a></li> 6. <li><a href="contact.html"> Us</a></li> 7. </ul> 8. </nav> 9. <article> 10. <h1>my First Blog Post!</h1> 11. <p>hi!</p> 12. </article> Don't worry about the <ul></ul> and <a></a> tags right now. Here, we're just identifying the navigation section of our page. Slide #16  for comments  Comments in HTML5 documents start with the sequence . Anything between these two sequences is essentially ignored by the browser and will not be rendered at all. Visit a major website such as or and bring up the source to see how you can use comments to break up logical sections of HTML5 documents. You can also use comments in this class to put your Honor Pledge on your HTML5 documents. Slide #17 comments 1.  4. <p> 5. Here's some text, isn't it great? 6. </p> 7.  8. <p> 9. Yup, here's some other stuff. 10. </p> Using comments to document the HTML5 code. Slide #18 6

Review of HTML. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar

Review of HTML. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar Review of HTML Chapter 3 Fundamentals of Web Development 2017 Pearson Fundamentals of Web Development http://www.funwebdev.com - 2 nd Ed. What Is HTML and Where Did It Come from? HTML HTML is defined as