Scribd
Upload
67 views

HTML Terms 1

The document provides an overview of basic HTML tags and their meanings, including common tags like <p>, <header>, <h1-h6> for headings, <ul> and <li> for unordered lists, <ol> and <li> for ordered lists, and <a> for links. It also discusses nesting tags within each other and formatting HTML for readability. Key HTML tags and their uses are defined to help someone new to HTML understand basic page structure and formatting.

Uploaded by

kpduffy
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
67 views

HTML Terms 1

The document provides an overview of basic HTML tags and their meanings, including common tags like <p>, <header>, <h1-h6> for headings, <ul> and <li> for unordered lists, <ol> and <li> for ordered lists, and <a> for links. It also discusses nesting tags within each other and formatting HTML for readability. Key HTML tags and their uses are defined to help someone new to HTML understand basic page structure and formatting.

Uploaded by

kpduffy
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Web & Motion

design studio

Kevin Duffy [email protected]

html basics & terms


HTML Has 3 Main Parts This what plain text looks like. We will always write code in a text editor like TextWrangler or Deamweaver using plain text. 1. An opening tag with an abbreviation inside it 2. The content that the abbreviation describes 3. A closing tag, with the same abbreviation inside <p>words</p> Tags - Identifies the type of contents. They are abbreviated versions of something that resembles english. It must open and close. A closing tag looks exactly like an opening tag except it has a back slash (/) before the tag abbreviation. <p> - opening tag </p> - closing tag 13 MUST KNOW TAGS AND THEIR MEANINGS When writing code, always make sure to use double tick marks rather than quotetation marks . <p> - Paragraph <header> - This tag surrounds the header for a section or an entire page. Most designers use this to surround their logo and primary navigation, but it can also surround the header of a small section of a page. <footer> - This tag surrounds the footer of a section or an entire page <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - headings or headlines, short chunks of text that summarize what follows them. <h1> is most important, <h6> is least. Ideally each page will have at least 1 <h1> . <ul> & <li> - These always come as a pair. <ul> is unordered list and <li> is a list item>. This can be referred to as a bulleted list, though bullet points are not necessary. <ol> & <li> - These always come as a pair also. <ol> is ordered list and <li> is a list item>. This is referred to as a numbered list. <div> - Short for division, it doesnt imply any grammatical context like paragraph or headline, its just a way to group large chunks of related things. Its usually used in fact to group paragraphs and headlines. <a> - Stands for anchor. An anchor in HTML is a link, so an <a> tag is just a link. <strong> - Use this to surround small bits of text that you think need more attention. Often this is how youd go about making something bold. <em> - Used to surround short bits of text you think deserve more emphasis. Often this is how youd go about making something italic. <span> - Like its big brother the <div> tag, the span tag is for grouping things. Its used to separate smaller groups, mostly just little bits of text. <img> - Short for image, this is how you bring an image in with HTML. List Tags <ul> & <li> & <ol> & <li> - some tags like lists require that you use a couple of tags in combination for them to work. This means that you have to write some HTML that says Im about to write a list (<ol> or <ul>). Then you have to write some more HTML in side of that first tag that says this is an individual list item (<li>). Each list item tag must close before opening a new one. this is how they appear: <ul> <li></li> <li></li> </ul>

Web & Motion

design studio

Kevin Duffy [email protected]

Definition Lists The last kind of list, definition lists are less common but useful. Most often they are used for a glossary, or frequently asked questions sections. A definition list is made up of three tags. <dl> - Defines that youre about to write a definition list. <dt> - Defines the content that it surrounds as a definition title. <dd> - Defines the content it surrounds as a definition description. This tag follows the <dt> tag but there can be more than one. Think of it as similar to paragraph. Formatting your HTML Be Consistent! Formatting your by indenting nested items is optional but makes it easier to read. Being able to match opening and closing tags by consistent formatting will be very helpful as your HTML gets more complicated. Nesting Tags Some tags are for defining each individual piece of content, like list items, and some HTML is there for defining much larger sections of content. To make it all work, you have to nest your HTML. HTML tags nest inside of each other like list tags. <div> <h1> <p> <p> <a> </h1> </p> <div> <h1>Your Headline</h1> <p> a paragraph following it.</p> <p> </p> </a> </p> <div> Diagraming these structures on paper can be really helpful, especially as your HTML gets more complicated. </div> <a href= http://mysite.com>Learn more </a>

You might also like