, , and
[go: up one dir, main page]
elements. It then describes various semantic sectioning, text formatting, multimedia, form, and table elements and their purposes.">, , and elements. It then describes various semantic sectioning, text formatting, multimedia, form, and table elements and their purposes.">
Scribd
Upload
67 views20 pages

Chapter 05 - Marking Up Text

This document provides an overview of common HTML elements used to structure and mark up documents on the web. It outlines the basic document structure using <html>, <head>, and <body> elements. It then describes various semantic sectioning, text formatting, multimedia, form, and table elements and their purposes.

Uploaded by

ryuu.ducat
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
67 views20 pages

Chapter 05 - Marking Up Text

This document provides an overview of common HTML elements used to structure and mark up documents on the web. It outlines the basic document structure using <html>, <head>, and <body> elements. It then describes various semantic sectioning, text formatting, multimedia, form, and table elements and their purposes.

Uploaded by

ryuu.ducat
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/ 20

Marking up text

Web development I: Front-end engineering


Document structure

<!doctype html>
<html>
<head>
<!-- metadata -->
</head>
<body>
<!-- content -->
</body>
</html>
Document metadata

<head> Metadata container


<title> Document title
<base> Base URL to resolve all relative URLs
<link> External resource
<style> Styling information
<script> Scripting
<meta> Other metadata: charset, name/content pairs, etc.
Content sectioning

<body> Document body container


<main> Dominant content
<article> Self-contained composition (e.g. blog post, card)
<section> Generic standalone section
<header> Introductory content
<footer> Colophon: copyright, further reading, etc.
<aside> Content indirectly related to the main content
Content sectioning

<nav> Navigation links


<h1>, …, <h6> Headings
<address> Contact information
Text blocks

<div> Generic block container


<p> Paragraph
<pre> Preformatted text
<figure> Self-contained content
<figcaption> Caption describing the <figure>
<blockquote> Long quotation
<hr> Horizontal rule (thematic break)
Lists

<ol> Ordered list


<ul> Unordered list
<li> List item
<dl> Description list
<dt> Term name
<dd> Term description
Inline text

<a> Hyperlink (was anchor)


<i> Idiomatic text (was italic)
<em> Idiomatic text (better semantics)
<b> Important text (was bold)
<strong> Important text (better semantics)
<u> Unarticulated text (was underline)
<mark> Highlighted text
Inline text

<s> Non-relevant or non-accurate text


<del> Deleted text
<ins> Inserted text
<ruby> Typography annotation
<rp> Fallback parenthesis
<rt> Pronunciation, transliteration, etc.
<bdo> Bidirectional text override
<bdi> Bidirectional text isolation
Inline text

<small> Small print


<sub> Subscript
<sup> Superscript
<wbr> Word break opportunity
<br> Line break
<span> Generic inline container
<code> Computer code
<data> Machine-readable text
Inline text

<cite> Citation or reference


<q> Short quotation
<samp> Sample output code
<time> Time or date
<abbr> Abbreviation
<var> Math variable
<dfn> Definition
<kbd> User input
Multimedia

<img> Image
<picture> Alt. image container
<audio> Sound content
<video> Video content
<source> Media source
<track> Timed text (e.g. subtitles)
<map> Image map
<area> Clickable map area
Embedded content

<embed> External resource (deprecated)


<object> External resource
<param> Object parameters
<iframe> External page
<portal> Page preview
<svg> Scalable Vector Graphics
<math> MathML expressions
Scripting

<script> Executable code or data


<noscript> Scripting fallback content
<canvas> Graphics and animations
Tables

<table> Tabular data


<thead> Table header
<th> Cell header
<tbody> Table body
<tr> Row of cells
<td> Cell data
<tfoot> Table footer
Tables

<caption> Table caption


<colgroup> Group of columns
<col> Column description
Forms

<form> Section with interactive controls


<fieldset> Controls group
<legend> Fieldset caption
<input> Several types of text input
<textarea> Multi-line text input
<label> Item caption
<select> Selectable menu
<optgroup> Group of menu options
<option> Menu option
Forms

<label> Caption for labelable elements


<button> Clickable button
<output> Results of a calculation
<datalist> List of suggestions
<progress> Progress indicator
<meter> Range indicator
<dialog> Modal pop-up
<details> Disclosure widget
<summary> Caption of a disclosure widget
Web components

<template> Custom HTML element

<slot> Template placeholder

See https://developer.mozilla.org/en-US/docs/Web/Web_Components

You might also like