2.1: HTML Text, Tags, and Attributes
- Page ID
- 27531
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)HTML was derived from Standard Generalized Markup Language (SGML). SGML was designed as a markup language, to allow a writer to markup (or annotate) a document. Markup languages have been around since at least the 1970’s, when the author used one on a DECSYSTEM-10 to format school papers. Perhaps the most popular pure markup language still in use is LaTeX, which is used for mathematical, scientific, and engineering documents.
The idea behind a markup language is that a document could be marked-up with tags to tell a program processing the input how to render the text. For example, the following HTML code:
</center>The <i>quick</i>
brown fox jumped over the <strong>lazy</strong> dog</center>
would be rendered as:
The quick brown fox jumped over the lazy dog
Markup languages were the precursors of word processing programs that became popular in the 1980’s with the PC revolution. The word processing programs, as they used a What-You-See-Is- What-You-Get (WYSIWYG) interface, which is much easier for a novice computer user to interface with than a markup language. WYSIWYG editors eventually and took over the market for word processing, with a few exceptions such as LaTeX, as mentioned earlier.
SGML was originally a traditional markup language, and hyperlinks between documents were added to create HTML. In the beginning the purpose was to link physics papers together in a web of documents. HTML started with with a browser introduced at CERN in 1990, HTML has expanded far beyond the wildest vision of its creators, but still maintains its markup character.
HTML still consists of text and tags. Over time, HTML has evolved from its roots, and is no longer seen simply as a way to format a document. The HTML language is now used to define the content (or contextual meaning) of items on a web page, and the tags have evolved to represent this new role. Most of the original tags specifying how to format text, such as bolding (<b>
), centering (<center>
) or italicizing (<i>
), are now considered obsolete and their use is discouraged. Bolding is now done by the content tag strong <strong>
, and italicizing is done by the content tag emphasis <em>
. Formatting is done based on the content tags using CSS, and interactivity is defined using embedded JavaScript programming using the <script>
tag. HTML has become much more than a simple markup language, but to understand HTML it is important to understand its roots as a markup language.
The tags in HTML are key words defined between a less than sign (<) and a greater than sign (>), though when using HTML, it is more common to call them angle brackets. Between the angle brackets are HTML tags and attributes. For example, the HTML tag to bold text is the word strong, so to bold text the <strong>
tag would be used. The tag represents actions to be taken by the program that processes the marked-up text.
HTML tags are not case sensitive, so the tags <i>
and <I>
are equivalent.
Most tags are applied to a block of text, and apply to the block of the text they enclose. All tags are closed using a slash (/tag), as in the example above where <strong>lazy</strong> caused the word lazy to be bolded.
The tags shown above are called block4 tags in that the first tag (e.g. <i>
) specifies where to begin italicizing the text, and the closing tag (e.g. </i>
) specifies where to stop indenting the text. The text or other information between the two tags is called a block.
Sometimes a tag, such as a break tag (<br>
) or image tag (<image>
) are empty, in the sense that they simply run a command, and do not apply an attribute to the text. In the case of the <br>
tag, the meaning is to simply skip a line, so it does not affect any text or any other element. It could be written as <br></br>
. However, HTML provides a short cut for this type of tag. The tag can be closed between the angle brackets that opened it. The <br>
tag can be written as <br/>
.
As the br tag shows, tags can be used to do many things in HTML other than just markup text. For example, tags can be used to tell the HTML processor to include a picture. If a picture exists in the same directory as the web page, the image can be included on the page by adding the following tag into the HTML for the page:
Program 1 = Image Tag <image src=”dog.jpg” />
This line of code includes the picture from the file dog.jpg in the web page. The tag is the image tag, but the image needs an attribute to indicate where to find the picture. For the image tag the attributed used to find the picture is the src tag.
Attributes are data that fill in details needed to implement the desired behavior for the tag. All tags can have some attributes, and these will be looked at in more detail later.
4 The terms block and container tags are often used interchangeably in HTML. This text will make a distinction between a block and container tag. Semantically it is easier to refer to a block tag as referring to an attribute to apply to all the elements in the block, such as italicizing or bolding the text in the above example. Other tags, such as the div or table tag contain other HTML elements and will be called container tags.