1 of 14

HTML Tags and Structure

Joslenne Peña

Photo Credit: https://cdn-images-1.medium.com/max/600/1*pixFq7k28LKsABpDNRCjJw.png

2 of 14

Tags or Elements

3 of 14

Attributes

  • Attributes provide additional information about an element
  • Always specified in the start tag
  • Attributes come in name/value pairs

CSS styles for attributes – ( we go over this next week)

  • class – applies special properties to groups of elements
  • id – specifies a unique id to one element on the page

​

​

4 of 14

Anchor link

  • You can use text or images as links to click to another area
  • You can link to local files or web pages online
  • You can use the # sign in case you have no link yet

​

5 of 14

<header>

  • A group of introductory or navigational aids: title, navigation links, etc.

​

​

​

​

  • Not to be confused with <head> or the different headings.

​

6 of 14

<nav>

  • A section of the page that links to other pages or to parts within the page.

​

​

​

​

​

  • Often found in the <header> tag

​

7 of 14

<footer>

  • A section that contains info such as copyright data, related documents, and links to social media

​

​

​

  • Typically at the bottom of the page, but not required.

​

8 of 14

<figure>

  • More semantics than <img>. Can include:

​

9 of 14

<ul> – an unordered list. By default, an unordered list element will contain a bulleted list of elements.

​

<li> – a list item. Inside of <ul> and <ol> (ordered lists) elements, each item you want to include should be contained inside its own <li> element.

9

lists

10 of 14

HTML elements that are inside of other HTML elements are called child elements. The outer element is the parent element. <li> elements are children of <ul> elements and <ol> elements.

​

<ul> <li>Item Number One</li> </ul>

Begin Parent Element Child Element End Parent Element

10

10

We can nest!

11 of 14

Audio / Video

  • These elements are new – intended to make things more interactive

12 of 14

Special Characters

  • Yes – they exist in case you actually want to display brackets or anything else and not tags < > ….
  • <!-- -- >
    • comments

13 of 14

Remember…

14 of 14

Acknowledgements/Contributions

  • These slides are Copyright 2015- Colleen van Lent as part of http://www.intro-webdesign.com/ and made available under a Creative Commons Attribution-NonCommercial 4.0 License. Please maintain this last slide in all copies of the document to comply with the attribution requirements of the license. If you make a change, feel free to add your name and organization to the list of contributors on this page as you republish the materials.

​

  • Initial Development: Colleen van Lent , University of Michigan School of Information

​

​

​

​