Please enable JavaScript.

Coggle requires JavaScript to display documents.

1.1: HTML: Next Steps & Semantics - Coggle Diagram

- - - - &
    - - ;
  - - - that would normally be invalid
  - - - <
    - - the opening bracket for an element
      - if used directly in a html document
- - - - download
      - install
      - upgrade to
  - - - the language itself
        
        new version
        
        with new
        
        eleements
        
        attributes
        
        behaviours
      - set of technologies
        
        allows you to build more diverse and powerful websites and apps
        
        eg
        
        3D graphics
        
        storing things in the browser
    - - HTML5 and friends
  - - - provides it
      - by implementing the HTML5 standard
  - - - that the document uses HTML5
    - - and could be left off
      - but it's usually specified
    - - for some reason
      - you can specify an older version
      - but the browser will ignore it anyway
        
        if you use elements from HTML5
- - - - <h1>
      - <p>
    - - the content division element
      - a container
        
        used to group elements together
        
        which can then all be styled consistently
        
        using css
  - - - <a>
    - - the content span element
      - a container
        
        used to group elements together
        
        which can then all be styled consistently
        
        using css
- - - - main
      - nav
      - section
      - header
      - footer
      - article
      - aside
      - time
      - figure
    - - just named differently
      - to help differentiate content
  - - - accessibility
    - - search engine optmisation
        
        eg. ggogle
      - needs to find and follow links
      - semantic markup helps to identify those links
    - - more readable code

Create your own diagrams like this for free with Coggle

made for free at coggle.it

1.1: HTML: Next Steps & Semantics

1.1: HTML: Next Steps & Semantics

Entities

format

start with

&

end with

;

used

for reserved characters

that would normally be invalid

difficult to type characters

interpreted by browser

and rendered correctly

example

less than

<

<

would be interpreted as

the opening bracket for an element

if used directly in a html document

HTML5

is not

a version

or something you

download

install

upgrade to

it's the standard that defines HTML

represents two different concepts

the language itself

new version

with new

eleements

attributes

set of technologies

behaviours

allows you to build more diverse and powerful websites and apps

eg

3D graphics

storing things in the browser

sometimes called

HTML5 and friends

you would never install HTML

your browser

provides it

by implementing the HTML5 standard

<!DOCTYPE html>

at top of HTML file

indicates to browsers

that the document uses HTML5

it's the default

and could be left off

if you want to use an older version of HTML

for some reason

you can specify an older version

but the browser will ignore it anyway

if you use elements from HTML5

but it's usually specified

block vs inline elements

how a given element fits alongside other elements

block elements

take up an entire line

eg

<h1>

inline elements

fit in the current line

eg

<a>

<p>

<div>

the content division element

a container

used to group elements together

which can then all be styled consistently

using css

<span>

the content span element

a container

used to group elements together

which can then all be styled consistently

using css

semantic markup

semantic

meaning of word

relating to meaning

markup names that relate

to their purpose or role

examples

div equvalents

main

nav

section

header

footer

useful for

screen readers

web crawlers

article

aside

time

figure

search engine optmisation

perform exactly like a div

just named differently

to help differentiate content

to add meaning to your markup

eg. ggogle

needs to find and follow links

other apps

semantic markup helps to identify those links

accessibility

developers!

more readable code

aka entity codes

is a recent development or trend

in the world of html