Lecture 2
HTML 5
tecnsoltrainings.com
HTML Syntax
<!DOCTYPE html>
<html>
Syntax refers to the rules that define the
<head>
structure of a language. Syntax in computer
<title>Page Title</title>
programming means the rules that control
</head>
the structure of the symbols, punctuation,
<body>
and words of a programming language.
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
tecnsoltrainings.com
HTML Block and Inline Elements
Every HTML element has a default display value, depending on what type of
element it is. There are two display values: block and inline.
Block Level Elements
A block-level element always starts on a new line, and the browsers automatically
add some space (a margin) before and after the element. A block-level element
always takes up the full width available (stretches out to the left and right as far as it
can).In block level elements, the top and bottom margins, width and height are
respected. Two commonly used block elements are:
<p> and <div>.
The <p> element defines a paragraph in an HTML document.
The <div> element defines a division or a section in an HTML document.
tecnsoltrainings.com
HTML Block and Inline Elements
Inline Elements
An inline element does not start on a new line. An inline element only takes
up as much width as necessary. In inline elements, the top and bottom margins,
width and height are not respected.
An inline element cannot contain a block-level element! while a block-level
element can contain one or more inline elements.
Here are the block-level elements in HTML:
<p>, <div>, <video>, <aside>, <article>, <hr>,<ul>, <li>, <main>, <nav>,
<footer>, <section>, <pre>, <ol> and much more.
Here are the inline elements in HTML:
<a>, <span>, <button>, <b>, <em>, <br>,<img>, <sub>, <sup>, <small>,
<select>, <label>, <input>, <strong> and much more.
tecnsoltrainings.com
The <div> Element
The <div> element is often used as a container for other HTML elements. The
<div> element has no required attributes, but style, class and id are common.
When used together with CSS, the <div> element can be used to style blocks of
content:
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. </p>
</div>
tecnsoltrainings.com
The <span> Element
The <span> element is an inline container used to mark up a part of a text, or a
part of a document. The <span> element has no required attributes, but style,
class and id are common. When used together with CSS, the <span> element can
be used to style parts of the text:
<p>My mother has <span style="color:blue;font-
weight:bold">blue</span> eyes and my father has <span
style="color:darkolivegreen;font-weight:bold">dark green</span>
eyes.</p>
tecnsoltrainings.com
HTML Semantic Elements
Semantic elements = elements with a meaning.
A semantic element clearly describes its meaning to both the browser and the
developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its
content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines
its content.
In HTML there are some semantic elements that can be used to define different
parts of a web page: <article> , <aside> , <header> , <nav> , <main> ,<section> ,
<footer> e.t.c
tecnsoltrainings.com
HTML Layout Elements
HTML has several semantic elements that define the different parts of
a web page:
<header> - Defines a header for a document
or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-
contained content
<aside> - Defines content aside from the
content (like a sidebar)
<footer> - Defines a footer for a document or
a section
tecnsoltrainings.com
HTML Comments
Comments are not displayed by the browser, but they can help document your
HTML source code. You can add comments to your HTML source by using the
following syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the start tag, but not in the end tag.
Comments can be used to hide content temporarily.
<!-- This is a comment -->
<p>This is a paragraph.</p>
tecnsoltrainings.com
