Scribd
Upload
7 views

Computer 10 - HTML Basic Structure

Uploaded by

Geffrey Arcega
Copyright
© © All Rights Reserved
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
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