Scribd
Upload
33 views

Introduction To HTML Tags & The Basic Webpage Structure

HTML tags are used to structure and markup web pages. Key tags include <head> for metadata, <title> for the page title, <body> for visible content, and <p> for paragraphs. Other common tags are <h1>-<h6> for headings, <a> for links, <img> for images, <ul> and <ol> for lists, and <table> for tables. Comments can be added with <!-- --> and metadata with <meta>. The basic page structure includes <!DOCTYPE>, <html>, <head> and <body>.

Uploaded by

miketsang2257
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views

Introduction To HTML Tags & The Basic Webpage Structure

HTML tags are used to structure and markup web pages. Key tags include <head> for metadata, <title> for the page title, <body> for visible content, and <p> for paragraphs. Other common tags are <h1>-<h6> for headings, <a> for links, <img> for images, <ul> and <ol> for lists, and <table> for tables. Comments can be added with <!-- --> and metadata with <meta>. The basic page structure includes <!DOCTYPE>, <html>, <head> and <body>.

Uploaded by

miketsang2257
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

INTRODUCTION TO

HTML TAGS &


THE BASIC WEBPAGE STRUCTURE
TAGS
- Use “<“ and “>” to write tags
- Opening and closing tags usually come in pairs
- We use a backslash to close a tag
- <p> content goes here </p>
- All content inside the pair of tags gets “marked up”
KEY ELEMENTS
- HTML: Tells the browser that you’re using hypertext markup language, look for tags!
- HEAD: section for the information THAT WILL NOT BE DISPLAYED ON THE PAGE, but
indicates to the browser HOW to display the page
- This includes: links to stylesheets, any scripts, meta tags, etc.
- TITLE: appears in top of browser bar and tabs and it a primary way of searching engines
finding your site
- BODY: section of the document that will be visible inside the browser window
DOCTYPE
- Doctype: tells which version of HTML you’re writing
- Very important to include this for browsers
- Much easier to write in HTML5
- No closing tab, and it is included at the very top of your .html file before the <html> tag
- <!DOCTYPE>
BASIC WEBPAGE STRUCTURE
<!DOCTYPE>
<html>
<head>
<title>
</title>
</head>

<body>

</body>
</html>
MORE ELEMENTS
- p: sets off paragraphs
- h1, h2, h3, ... h6: heading sizes for paragraphs or section headings
- a: anchor for a link to another page
- img: pulls an image into your document from a file or outside source
- hr: creates a horizontal line across the width of your page
STARTING WITH CONTENT
NESTING
- Tags can be nested
- Note that some tags may NOT have closing tags (hr, img, br)

<body>
<h1> This is the title to my page!</h1>
<p> Welcome to my website where you will have access to an amazing amount of
interesting information. Read my latest article of puppies here</p>
<hr />
<p>© Adam Scher</p>
</body>
STRONG & EMPHASIS
<strong> </strong>
strong will bold text to mark as important

<em> </em>
em adds emphasis to text, linguistic stress on the content tagged

Both are considered separate from the “presentation”


ORDERD & UNORDERED LISTS
- <ul> or <ol>: unordered and ordered lists (a single tag is used for an entire list). Lists can
be “nested” by added <ul> or <ol> tags within an existing list.
- <li>: is a list item. Each item within a list gets its own tag.
- start=”n” - sets the start value for an ordered list
- value=”n” - sets a specific numeric value for an item in an ordered list
TABLES
- <table>: tag that surrounds all the table content
- <tr>: indicates a row within a table
- <th>: a table header that is nested inside a <tr>
- <td>: a table cell or division that is nested inside a <tr>
- <caption>: caption for table that is normally found at the beginning
- <thead> <tbody> <tfoot>: additional tags to organize table content
TABLES - CONTINUED
- colspan=”n” - extends <td> the specified number of columns
- rowspan=”n” - extends <td> the specified number of rows
MORE ABOUT TAGS
- Some elements contain extra information
- These are attributes and are written after the element name in the
OPENING tag
- The attribute name is followed by an “=” and then the value for that attribute
IMAGES
The attribute is src
which stands for source

<img src=“filename.jpg” />

Starts with the img Tells the browser the path


tag element of the file on your server*

*File names are case sensitive


IMAGES alt defines text that will appear
if the image is not found
or if the text on the site
or being read.
alt tags are required
for ADA compliance.

<img src=“filename.jpg” alt=“description of


image” title=“title of the image />

title defines text that will


appear on rollover of an image
LINKS
Starts with the a
Destination URL
tag element

<a href=“http://www.google.com"
target=“_blank”>Click Here</a>

Opens link in Something to click on


new tab nested between a tags
HOW TO LEAVE COMMENTS IN YOUR HTML CODE
- Commenting code allows the developer to add comments, instructions, notes, etc to
their HTML pages, without that text being rendered
- <!-- Comments go here -->
- Note: While comments do not appear in the HTML page, they can still be viewed when
looking at the page’s source
META TAGS
- Metadata is data (information) about your HTML page
- <meta> tag provides metadata about the html document
- Metadata will not be displayed on the page, but will be used by browsers, search
engines and other web services
- Meta elements are used to specify page description, character sets, keywords, author
of the document, when it was last modified, etc
- Names of meta tags: keywords, description, author

<meta name=”author” content=”Adam Scher” />


ADDITIONAL TAG
- <time>: time based content
- <cite>: content that is cited or quoted
- <blockquote>: pull quote
- <sup>: superscript
- <sub>: subscript
- <br>: line breaks
STRUCTURAL TAG
- <header>: introductory content for document or section of a document
- <nav>: contains navigation
- <section>: defines a section(s) of content within a document
- <article>: independent, self-contained content
- <aside>: content that is separate from the nearby content
- <footer>: content that ends your document

You might also like