Scribd
Upload
7 views

Computer 10 - HTML Basic Structure

Uploaded by

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

Computer 10 - HTML Basic Structure

Uploaded by

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

Introduction to HTML5: Basic Structure and Elements

What is HTML?

● HTML stands for HyperText Markup


Language
● It's the standard language for creating
web pages
● HTML is not case-sensitive
● HTML5 is the latest version
● What do you think HTML is used for in
everyday life?
Basic Structure of an
HTML Document
● DOCTYPE declaration
● HTML tags
● Head section
● Body section
● Can you identify these parts in a simple
webpage?
HTML Tags
● Tags are enclosed in angle brackets < >
● Most tags have an opening and closing tag
● Closing tags have a forward slash /
● Examples: <p>, <h1>, <body>
● What's the difference between opening and closing tags?
HTML Elements

● An element includes the opening tag,


content, and closing tag
● Example: <p>This is a paragraph.</p>
● Elements can be nested inside each other
● How might you create a heading inside a
paragraph?
HTML Attributes
● Attributes provide additional information about elements
● They are added to the opening tag
● Format: attribute="value"
● Example: <p id="intro">This is an introduction.</p>
● Can you think of other attributes you might use?
The <!DOCTYPE>
Declaration
● Tells the browser this is an HTML5
document
● Must be the first line of code
● <!DOCTYPE html>
● Why do you think it's important to declare
the document type?
The <html> Element
● Root element of an HTML page
● Contains all other elements
● <html lang="en"> specifies the language
● Why might specifying the language be important?
The <head> Element

● Contains meta information about the


document
● Not visible on the webpage itself
● Includes <title>, <meta>, <link>, etc.
● What kind of information might go in the
head?
The <title> Element
● Specifies a title for the HTML page
● Shown in browser's title bar or page's tab
● Important for search engine optimization (SEO)
● How might a good title help users find your webpage?
The <body> Element
● Contains the visible content of the webpage
● Text, images, links, tables, etc.
● Everything you see on a webpage is in the <body>
● What elements do you commonly see on webpages?
The <p> Element
● Defines a paragraph
● Browsers automatically add space before and after
● <p>This is a paragraph.</p>
● How might you use paragraphs to organize content?
Heading Elements

● Six levels of headings: <h1> to <h6>


● <h1> is the most important, <h6> the least
● Used to structure content hierarchically
● Why is it important to use headings
correctly?
The <meta> Element
● Provides metadata about the HTML document
● Always goes inside the <head> element
● Often used to specify character set, page description, keywords,
etc.
● <meta charset="UTF-8">
● How might metadata help search engines understand your
webpage?
Comments in HTML

● Not displayed in the browser


● Used to explain code or leave notes
● <!-- This is a comment -->
● Why might developers use comments in
their code?
Creating Your First HTML Page
● Open a text editor (like Notepad++ or Visual Studio Code)
● Write your HTML code
● Save the file with a .html extension
● Open it in a web browser to see the result
● What simple webpage would you like to create?

You might also like